/* ============================================================================
   hh-footer.css — Fussleiste, netzwerkweit
   Erzeugt 2026-09-22 aus dem Entwurf Menuenavigation.dc.html (Option 2b mit
   optionaler Zone 0 aus 2a).

   Ersetzt die vier parallelen Footer-CSS-Bloecke, die
   _WEBSTRATEGIE/02_grundlagen/FOOTER-SPEZIFIKATION.md Abschnitt 1 auflistet.
   Farben, Kontraste und Umschaltpunkte stammen aus dieser Spezifikation;
   abweichend ist der Fokusring (siehe unten) und der weggefallene Trenner.

   KONTRASTE auf #1e256b: #fff 13,71:1 / rgba(255,255,255,.70) 7,47:1 /
   rgba(255,255,255,.60) 5,87:1 / Ring rgba(255,255,255,.45) 3,94:1.
   ========================================================================== */

.hh-footer {
	--fuss-grund:   var(--wp--preset--color--ci-blau-dunkel, #1e256b);
	--fuss-text:    #ffffff;
	--fuss-link:    rgba(255, 255, 255, .70);
	--fuss-leise:   rgba(255, 255, 255, .60);
	--fuss-ring:    rgba(255, 255, 255, .45);
	--fuss-linie:   rgba(255, 255, 255, .12);
	--fuss-fokus:   #ffffff;            /* Dachmarke */
	--fuss-akzent:  #ffffff;            /* Dachmarke: weisser Knopf */
	--fuss-akzent-text: var(--wp--preset--color--ci-blau, #2a3287);
	--fuss-max:     var(--wp--style--global--wide-size, 1280px);
	--fuss-pad-x:   clamp(1rem, 3vw, 2rem);
	--fuss-text-gr: clamp(.75rem, .7rem + .25vw, .8125rem);
	--fuss-lockup:  35px;
	--fuss-kanal:   36px;

	background: var(--fuss-grund);
	color: var(--fuss-text);
	overflow-x: clip;
}
.hh-footer *, .hh-footer *::before, .hh-footer *::after { box-sizing: border-box; }

/* Gelb ist der Rettungsgasse vorbehalten. Kampagnen setzen die zwei Variablen,
   die Dachmarke nie. */
.hh-footer--kampagne {
	--fuss-fokus:  var(--wp--preset--color--akzent-gelb, #ffec12);
	--fuss-akzent: var(--wp--preset--color--akzent-gelb, #ffec12);
}

/* EIN BEREICH, KEINE ZWEI. Zone 0 und die Pflichtzeile liegen im selben
   Container mit einem Polsterrhythmus; die Trennlinie dazwischen ist am
   2026-09-22 entfallen. */
.hh-footer__container {
	max-width: var(--fuss-max);
	margin-inline: auto;
	padding: 3.5rem var(--fuss-pad-x) 2.75rem;
	padding-bottom: max(2.75rem, env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* ---------------------------------------------------------------------------
   ZONE 0 — optional
--------------------------------------------------------------------------- */
.hh-footer__zone0 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
.hh-footer__spalte { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.hh-footer__titel {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fuss-leise);
}
.hh-footer__satz { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--fuss-text); text-wrap: pretty; }
.hh-footer__liste { display: flex; flex-direction: column; gap: 2px; }
.hh-footer__liste a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 34px;
	font-size: 15px;
	color: var(--fuss-link);
	text-decoration: none;
}
.hh-footer__liste a:hover { color: var(--fuss-text); }

/* SCHRIFTBILD EINER MARKE. #ALWAYSTHERE steht fett, das Wort ALWAYS
   unterstrichen (festgelegt 2026-09-22). Die Auszeichnung ist typografisch,
   nicht semantisch: Es ist ein Name, keine Betonung. Deshalb spans statt
   <strong> und <u>, und deshalb liest ein Screenreader ihn unveraendert.
   Das Markup liefert der Schriftbild-Helfer in inc/navigation.php. */
.hh-footer__marke { font-weight: 700; }
.hh-footer__marke-unter {
	text-decoration: underline;
	text-underline-offset: .14em;
	text-decoration-thickness: .08em;
}

/* Zone 0 mit nur zwei Spalten (Kampagnen: Absendersatz links, Wege rechts).
   Bis Stufe C gestapelt und zentriert — deshalb steht das NICHT inline im
   PHP: ein Inline-Stil schlaegt jede Media- und Container-Query und liesse
   den Fuss auch bei 390px zweispaltig stehen. */
.hh-footer__zone0--zwei .hh-footer__spalte { align-items: center; text-align: center; }
.hh-footer__zone0--zwei .hh-footer__liste { align-items: center; }
.hh-footer__zone0--zwei .hh-footer__satz { max-width: 30ch; }
/* Der Nebenweg traegt align-self: flex-start, und das schlaegt das
   align-items: center der Spalte. Gemessen bei 800px: Satz und Markenliste
   standen mittig, der Link daneben links. In der gestapelten Stufe zieht er
   mit; ab Stufe C holt ihn die Regel weiter unten wieder nach links. */
.hh-footer__zone0--zwei .hh-footer__nebenweg { align-self: center; }

.hh-footer__newsletter { display: flex; gap: .5rem; }
.hh-footer__newsletter input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--fuss-ring);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: rgba(255, 255, 255, .08);
	color: var(--fuss-text);
	font-family: inherit;
	font-size: 15px;
}
.hh-footer__newsletter input::placeholder { color: var(--fuss-link); }
.hh-footer__newsletter button {
	flex: 0 0 auto;
	height: 44px;
	padding-inline: 20px;
	border: 1px solid var(--fuss-ring);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: transparent;
	color: var(--fuss-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.hh-footer__newsletter button:hover { background: #fff; color: var(--fuss-akzent-text); }

.hh-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .875rem 2rem;
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--fuss-akzent);
	color: var(--fuss-akzent-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.hh-footer__cta:hover { filter: brightness(1.06); color: var(--fuss-akzent-text); }
.hh-footer__nebenweg {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fuss-link);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.hh-footer__nebenweg:hover { color: var(--fuss-text); }

/* ── SCHON ANGEMELDET ──────────────────────────────────────────────────────
   Wer das Formular abgeschickt hat, sieht beim naechsten Besuch statt aller
   Felder einen kurzen Hinweis. Die Klasse setzt hh-footer.js; ohne
   JavaScript bleibt das Formular stehen, was die richtige Rueckfallebene
   ist — lieber zweimal anmelden koennen als gar nicht.

   Die Ueberschrift faellt mit, wie im Bestaetigungszustand: Sie kuendigt
   sonst etwas an, das schon passiert ist. */
.hh-footer__spalte.ist-angemeldet .hh-footer__titel,
.hh-footer__spalte.ist-angemeldet .hh-footer__gf { display: none; }

.hh-footer__angemeldet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	padding: .75rem 1rem;
	border-radius: var(--wp--custom--radius--md, 8px);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	color: var(--fuss-text);
	font-size: 15px;
	line-height: 1.45;
}
.hh-footer__angemeldet p { margin: 0; }

/* Ein Knopf, der wie ein Link aussieht: Er fuehrt zurueck ins Formular und
   soll den Hinweis nicht ueberstrahlen. Trefferflaeche trotzdem 44px. */
.hh-footer__nochmal {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--fuss-link);
	font: inherit;
	font-size: var(--fuss-text-gr);
	text-decoration: underline;
	text-underline-offset: .14em;
	cursor: pointer;
}
.hh-footer__nochmal:hover { color: var(--fuss-text); }

/* ---------------------------------------------------------------------------
   ZONE 1 bis 3 — Pflicht
--------------------------------------------------------------------------- */
.hh-footer__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.hh-footer__brand { display: inline-flex; align-items: center; text-decoration: none; }

/* ZWEI MASSE, BEIDE VERBINDLICH — Begruendungen aus dem abgeloesten Block in
   der Rettungsgasse (assets/css/custom.css, entfallen am 2026-09-22):

   --fuss-lockup = 35px Canvas-Hoehe ergibt 28px Wortmarke, die netzwerkweite
   Norm. Das funktioniert nur, weil die Lockup-Datei den vorgeschriebenen
   Randanteil von 1.25 x Wortmarkenhoehe hat. Frueher standen hier 48px, was
   mit der damaligen Datei (Wortmarke = 47% der Bildhoehe) nur 22.6px ergab.

   max-width: none hebt das globale img { max-width: 100% } auf, das fast jedes
   Theme setzt. Das Lockup sitzt in einer 1fr-Spalte, also minmax(auto, 1fr);
   das auto-Minimum wuerde die Eigenbreite des Bildes schuetzen — max-width:
   100% hebt genau diesen Schutz auf. Die Spalte darf dann beliebig eng werden,
   die Hoehe bleibt bei 35px stehen und die Breite gibt nach. Gemessen am
   2026-09-05: zwischen 768px und 861px Viewport war das Lockup auf 74.5px
   statt 137px gequetscht, das Seitenverhaeltnis um Faktor 1.84 verzerrt.
   Ausgerechnet die Marke mit verbindlicher Massnorm.
   Verbindlich: _WEBSTRATEGIE/02_grundlagen/ABSENDER-LOCKUP-SPEZIFIKATION.md */
.hh-footer__brand img,
.hh-footer__brand svg { height: var(--fuss-lockup); width: auto; max-width: none; display: block; }
.hh-footer__brand:hover { opacity: .85; }

/* RECHTSLINKS UND COPYRIGHT LIEGEN IN EINEM WRAPPER (.hh-footer__recht).
   Grund: 'grid-template-areas: "brand legal social"' kennt keine vierte
   Area. Zwei Kinder auf derselben Area zu legen, stapelt sie uebereinander —
   das Copyright lag dann ab 1024px auf den Rechtslinks. Der Wrapper belegt
   die Area, innen ordnet Flex. In Stufe A und B traegt er zwei Zeilen, in
   Stufe C laeuft das Copyright in der Rechtszeile mit, wie im Entwurf. */
.hh-footer__recht {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 2rem;
}

/* Die Mittelpunkte zwischen den Rechtslinks sind am 2026-09-22 entfallen.
   Getrennt wird ueber Abstand: ein dekoratives Zeichen, das allein am
   Zeilenende haengen kann, braucht eine Sonderregel, ein Abstand nicht. */
.hh-footer__legal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 2rem;
	font-size: var(--fuss-text-gr);
	line-height: 1.4;
}
.hh-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fuss-link);
	text-decoration: none;
}
.hh-footer__legal a:hover,
.hh-footer__legal a[aria-current="page"] { color: var(--fuss-text); }
.hh-footer__copyright { font-size: var(--fuss-text-gr); color: var(--fuss-leise); }
.hh-footer__copyright a { color: inherit; text-decoration: none; }
.hh-footer__copyright a:hover { color: var(--fuss-text); }

/* Der Sprachwechsler erscheint hier nur unter 960px — auf dem Desktop steht er
   im Kopf. Die Grenze ist dieselbe wie dort, damit er nie zweimal und nie
   nirgends steht. */
.hh-footer__sprachen { display: flex; justify-content: center; }
@media (min-width: 60rem) {
	.hh-footer__sprachen { display: none; }
}
.hh-footer__sprachen .lang-switch { color: var(--fuss-link); }
.hh-footer__sprachen .lang-switch a { color: var(--fuss-link); }
.hh-footer__sprachen .lang-switch a:hover,
.hh-footer__sprachen .lang-switch a.active,
.hh-footer__sprachen .lang-switch a[aria-current] { color: var(--fuss-text); }

.hh-footer__social { display: flex; align-items: center; gap: .5rem; }
.hh-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fuss-kanal);
	height: var(--fuss-kanal);
	border: 1px solid var(--fuss-ring);
	border-radius: 50%;
	color: var(--fuss-text);
}
.hh-footer__social a:hover { background: #fff; color: var(--fuss-akzent-text); }
.hh-footer__social svg { width: 16px; height: 16px; fill: currentColor; }

/* Fokusring: CI-Blau auf ci-blau-dunkel ergibt 1,24:1 und ist faktisch
   unsichtbar (FOOTER-SPEZIFIKATION Abschnitt 6, WCAG 2.4.11). */
.hh-footer a:focus-visible,
.hh-footer button:focus-visible,
.hh-footer input:focus-visible {
	outline: 2px solid var(--fuss-fokus);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm, 4px);
}

/* ---------------------------------------------------------------------------
   STUFEN, uebernommen aus der Spezifikation Abschnitt 4
     A  unter 600px    eine Spalte, zentriert
     B  600-1023px     Lockup links, Kanaele rechts, Recht darunter
     C  ab 1024px      1fr auto 1fr
--------------------------------------------------------------------------- */
@media (min-width: 37.5rem) {
	.hh-footer__zone0 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
	.hh-footer__row {
		grid-template-columns: auto auto;
		grid-template-areas: "brand social" "recht recht";
		justify-items: start;
		text-align: left;
		justify-content: space-between;
	}
	.hh-footer__brand  { grid-area: brand; }
	.hh-footer__social { grid-area: social; justify-self: end; }
	.hh-footer__recht  { grid-area: recht; justify-content: flex-start; }
	/* In Stufe B braucht das Copyright eine eigene Zeile: die Rechtszeile ist
	   in FR 588px breit und laesst daneben keinen Platz. */
	.hh-footer__copyright { flex-basis: 100%; }
}
@media (min-width: 64rem) {
	.hh-footer__zone0 { grid-template-columns: 1.1fr 1.2fr 1fr; gap: 3rem; }
	.hh-footer__zone0--zwei { grid-template-columns: 1.1fr 1fr; align-items: start; }
	.hh-footer__zone0--zwei .hh-footer__spalte { align-items: flex-start; text-align: left; }
	.hh-footer__zone0--zwei .hh-footer__liste { align-items: flex-start; }
	.hh-footer__zone0--zwei .hh-footer__nebenweg { align-self: flex-start; }
	.hh-footer__row {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "brand recht social";
		justify-content: normal;
		gap: 1.5rem;
	}
	.hh-footer__recht { justify-self: center; justify-content: center; }
	/* Ab Stufe C laeuft das Copyright in der Rechtszeile mit. */
	.hh-footer__copyright { flex-basis: auto; }
}

/* Container-Queries als Aufwertung: die Fussleiste richtet sich nach ihrem
   eigenen Platz, wichtig in Wartungsseiten, Editor-Vorschau und iframes. */
@supports (container-type: inline-size) {
	.hh-footer__container { container: hh-footer / inline-size; }
	@container hh-footer (max-width: 34.9999rem) {
		.hh-footer__zone0 { grid-template-columns: minmax(0, 1fr); }
		.hh-footer__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "recht" "social"; justify-items: center; text-align: center; }
		.hh-footer__recht { grid-area: recht; flex-direction: column; gap: 0; }
	}
}