/* --------------------------------------------------------------------------
   Sektion 8: Footer
   STATISCH. Kontakt, Downloads, Rechtliches, Standort.
   Mapping: footer.php, Menues als WP-Menue-Positionen registrieren.
   HINWEIS: Das Projektwissen nennt "Standort Lohne" - laut Website und
   Handelsregister ist der Sitz Ibbenbueren, Gutenbergstrasse 16a.
   Lohne ist dort offenbar ein Fehler.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--toem-blau);
  color: var(--on-blau-2);
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)) var(--sp-6);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr));
  gap: clamp(var(--sp-6), 4vw, var(--sp-7));
  padding-bottom: clamp(var(--sp-6), 4vw, var(--sp-7));
}
@media (max-width: 68rem) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 38rem) {
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* --- Markenspalte ----------------------------------------------------- */
.footer__logo { display: inline-block; margin-bottom: var(--sp-5); }
.footer__logo .logo {
  width: clamp(11rem, 16vw, 13.5rem);
  height: auto;
  fill: var(--toem-gold);
}
.footer__addr {
  font-style: normal;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-4);
}
.footer__contact { display: grid; gap: var(--sp-1); }
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  font-size: var(--fs-300);
  color: var(--text-on-dark);
  transition: color var(--dur) var(--ease);
}
.footer__contact a:hover,
.footer__contact a:focus-visible { color: var(--toem-gold); }
.footer__contact svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  flex: 0 0 auto;
  color: var(--toem-gold);
}

/* --- Linkspalten ------------------------------------------------------ */
.footer__col h3 {
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin: 0 0 var(--sp-4);
}
.footer__col ul { display: grid; gap: 0; }
.footer__col a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-300);
  color: var(--on-blau-2);
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover,
.footer__col a:focus-visible { color: var(--text-on-dark); }

/* --- Fusszeile -------------------------------------------------------- */
/* Soziale Netze als eigene Zeile ueber dem Trennstrich. Rechtsbuendig,
   damit sie mit den Rechtstexten darunter fluchten. */
.footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.footer__social__link {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  /* Wie im Kopf: weiss, Hover in Gold. */
  color: var(--on-blau-1);
  transition: color var(--dur) var(--ease);
}
.footer__social__link svg { width: var(--zeichen-marke); height: var(--zeichen-marke); }
.footer__social__link:hover,
.footer__social__link:focus-visible { color: var(--toem-gold); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__copy {
  font-size: var(--fs-200);
  color: var(--on-blau-3);
  margin: 0;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: var(--fs-200);
  color: var(--on-blau-3);
  transition: color var(--dur) var(--ease);
}
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--text-on-dark); }

/* Cookie-Einstellungen ist ein button, kein Link - es oeffnet ein
   Overlay statt zu navigieren. Optisch wie die Rechtslinks. */
.footer__cookie {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-200);
  color: var(--on-blau-3);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.footer__cookie:hover,
.footer__cookie:focus-visible { color: var(--text-on-dark); }

/* Fokusring auf dunklem Grund */
.footer :focus-visible { outline-color: var(--toem-gold); }

/* --------------------------------------------------------------------------
   Sektion 9: Kontakt  -  NICHT MEHR AUF DER STARTSEITE
   Das Markup ist weiter unten im Dokument auskommentiert aufgehoben. Diese
   Regeln bleiben stehen, weil der Bereich eine eigene Unterseite unter
   /kontakt/ bekommt und dort darauf aufsetzt - erweitert um Tabs mit
   Kontaktformular. Auf der Startseite greifen sie derzeit ins Leere.
   Sektion 9: Kontakt
   STATISCH. Bewusst OHNE Formular:
   - drei Zielgruppen mit sehr verschiedenen Anliegen, ein Sammelformular
     bedient alle schlecht
   - die B2B-Sektion verspricht ausdruecklich "ohne Umweg ueber ein Formular"
   - jedes Formular braucht Einwilligung, Rechtstext und speichert Daten
   Ein Formular gehoert auf /kontakt/, nicht auf die Startseite.
   Mapping: template-parts/kontakt.php, Inhalte in ACF-Options.
   -------------------------------------------------------------------------- */

/* --- Trefferflaechen der Fusszeile auf Touchgeraeten -------------------
   Gefunden beim responsiven Durchgang am 10.09.2026. Gemessen auf ALLEN 59
   Seiten: die Links der Fusszeile sind 36 px hoch (min-height: 2.25rem), die
   Projektregel verlangt 44. Es ist der groesste einzelne Posten des Audits -
   nicht weil er schwer waere, sondern weil er ueberall gleich auftritt.

   NUR AUF TOUCHBREITEN. Mit der Maus sind 36 px unproblematisch, und die
   abgenommene Desktopgestaltung bleibt damit unangetastet. Auf dem Telefon
   liegt die Fusszeile dagegen genau dort, wo der Daumen ohnehin ist, und die
   Links stehen untereinander - 8 px mehr je Zeile kosten bei fuenf Links
   40 px Hoehe in einer Spalte, die ohnehin gescrollt wird.
   Dieselbe Grenze wie bei den Eingabefeldern (64rem), damit es eine
   Touch-Grenze im Projekt gibt und nicht zwei.

   MIN-HEIGHT UND NICHT PADDING: die Links sind Flexboxen mit
   align-items: center, die Hoehe traegt also die Mitte von selbst. Padding
   waere doppelt gerechnet. */
@media (max-width: 64rem) {
  .footer__col a,
  .footer__legal a,
  .footer__cookie { min-height: 2.75rem; }
}

/* Telefon und E-Mail im Fusszeilenkopf - dieselben 44 px, gleiche Begruendung
   wie oben. Gemessen waren sie 36 px hoch, und es sind die beiden wichtigsten
   Ziele der ganzen Fusszeile: wer auf dem Telefon anrufen oder schreiben
   will, tippt hier. Sie tragen keine eigene Klasse, deshalb ueber den
   Elternblock adressiert. */
@media (max-width: 64rem) {
  .footer__contact a { min-height: 2.75rem; }
}