/*
 * Footer — ported from the standalone mockup (home-mockup.BACKUP-liked-version.html).
 * Deliberately neutral near-black/near-white (not the site's green-tinted --ground/
 * --ink-muted) — matches monopo.london/solidbold.at references the design was aligned to.
 * Since 2026-08-24 follows the site-wide Light/Dark switcher (see the "Light/Dark-
 * Konvention" comment in nav.css) instead of being permanently dark — light is the
 * unconditional default, dark the guarded/explicit variant, same as every other pattern.
 *
 * The third footer column is a plain hardcoded Leistungen list (not the header's ref-21
 * navigation entity) — deliberately swapped 2026-08-19 so the footer sitemap surfaces the
 * six service pages instead of the top-level Home/Leistungen/Über uns/Kontakt links.
 * The bottom legal row (Impressum/Datenschutz/…) still reuses the real navigation entity
 * (ref 22) — one editable source of truth in the Site Editor. "overlayMenu":"never" keeps
 * the DOM simple (no responsive-container/hamburger wrapper — a footer sitemap doesn't
 * need a mobile toggle).
 *
 * NOTE: ref 22 ("Footer-Navigation") currently includes AGB and TOM, but CLAUDE.md
 * Abschnitt 1 documents those as deliberately NOT linked from any navigation (direct-URL
 * only). That's a content mismatch in the Navigation entity itself, not something this CSS
 * works around — flagged for the team to fix in the Site Editor, environment by environment
 * (DB content isn't synced by git, see CLAUDE.md Abschnitt 6).
 */
.nn-footer,
.nn-footer *,
.nn-footer *::before,
.nn-footer *::after {
	box-sizing: border-box;
}

/* WP inserts the theme's root block-gap (2rem, theme.json) between every top-level
   section/template-part on the page. Between the CTA-Band and the Footer — both near-black
   — that shows up as an unwanted pale stripe, so it's removed only for this one seam. Other
   section-to-section gaps on the page are untouched on purpose. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

.nn-footer {
	--bg: #ffffff;
	/* Leichte Farbhinterlegung, dieselben Werte wie --paper auf den Leistungsseiten
	   (z. B. cro.css) — dort schon als "off-white/off-black"-Ton gegenüber dem reinen
	   Seiten-Weiß/Schwarz etabliert. Hebt den Footer sichtbar vom CTA-Band/Body darüber ab,
	   ohne einen expliziten Rahmen zu brauchen. */
	--paper: #f7f9f7;
	--ink: #12211a;
	--ink-muted: #5c6d64;
	--line: #dfe8e2;
	--jade-accent: #288760;

	background: var(--paper);
	color: var(--ink-muted);
	margin: 0;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-footer {
		--bg: #0b0c0c;
		--paper: #0f1512;
		--ink: #e7e9ec;
		--ink-muted: #b0b5bf;
		--line: #22362c;
		--jade-accent: #288760;
	}
}
html[data-theme="dark"] .nn-footer {
	--bg: #0b0c0c;
	--paper: #0f1512;
	--ink: #e7e9ec;
	--ink-muted: #b0b5bf;
	--line: #22362c;
	--jade-accent: #288760;
}

/* Kontakt-Seite (2026-08-27): der statische Hintergrund-Glow aus kontakt-formular.css
   (.nn-kf-glow) läuft optisch bis in den Footer weiter. Der Footer ist ein globaler
   Template Part — dieser Block ist deshalb per Body-Klasse auf die Kontakt-Seite
   beschränkt (nonoise_body_class() in functions.php, slug-basiert statt DB-ID-basiert) und
   bleibt auf jeder anderen Seite ein No-op. .nn-kf-glow selbst kann NICHT einfach nach unten
   überstehen (siehe Kommentar dort) — der Footer kommt im DOM danach und würde jeden
   Überstand mit seinem eigenen Hintergrund zudecken, daher hier ein eigenes, an derselben
   Stelle/Farbe andockendes Pendant statt eines echten Bleeds.

   Sichtbare Nahtlinie, Runde 2 (2026-08-27): siehe ausführlicher Kommentar bei
   .nn-kf-glow in kontakt-formular.css — ein fixer `blur(70px)` "verdünnt" sich auf sehr
   breiten Screens relativ zur (dann viel breiteren) Section, ein steiler/kleiner Verlauf
   reagiert außerdem empfindlich auf jede kleine Abweichung. Beide Seiten jetzt mit
   großzügigerem, sanft auslaufendem Verlauf und viewport-skaliertem Blur, damit eine
   verbleibende Ungenauigkeit nicht mehr als Linie durchscheint. Position bleibt exakt an
   der echten Kante (`top:0`, Zentrum `at 30% 0%`) — spiegelt .nn-kf-glow's unteren Blob,
   der jetzt ebenfalls ohne Umrechnung exakt an seiner eigenen Kante sitzt (`bottom:0`,
   Zentrum `at 30% 100%`). */
.page-kontakt .nn-footer {
	position: relative;
	isolation: isolate;
}
.page-kontakt .nn-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 55%;
	z-index: 0;
	pointer-events: none;
	filter: blur(clamp(60px, 6vw, 130px));
	/* selbe Farbe wie der untere Blob in .nn-kf-glow (glow-3) — eigene, hart codierte Werte
	   statt einer geteilten CSS-Variable, da .nn-footer und .nn-kf getrennte Scopes sind
	   (Custom Properties vererben sich nicht zwischen Geschwister-Sections) */
	background: radial-gradient(65% 100% at 30% 0%, #5ca87c, transparent 88%);
	opacity: 0.55;
	/* selber Grund wie bei .nn-kf-glow (kontakt-formular.css): ein grosser blur() ohne
	   eigene Compositing-Ebene kann beim Scrollen sichtbar nachruckeln statt fluessig
	   mitzulaufen. */
	will-change: transform;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .page-kontakt .nn-footer::before {
		background: radial-gradient(65% 100% at 30% 0%, #b7e5ba, transparent 88%);
	}
}
html[data-theme="dark"] .page-kontakt .nn-footer::before {
	background: radial-gradient(65% 100% at 30% 0%, #b7e5ba, transparent 88%);
}
/* Footer-Inhalt muss über dem Glow bleiben — .nn-footer hat genau zwei direkte Kinder
   (.nn-footer-top, .nn-footer-bottom), beide normale Flow-Elemente ohne eigenes z-index.
   Der Glow liegt zwar geometrisch nur im oberen Bereich, aber beide bekommen hier
   sicherheitshalber ein eigenes Stacking, damit die Reihenfolge gegenüber dem
   positionierten ::before (z-index:0) nicht vom Zufall der CSS-Stacking-Regeln abhängt. */
.page-kontakt .nn-footer-top,
.page-kontakt .nn-footer-bottom {
	position: relative;
	z-index: 1;
}

.nn-footer-top {
	/* war 1400px — die übrigen Sections laufen seit der Große-Screen-Skalierungsrunde
	   (2026-08-28, siehe CLAUDE.md) auf 2200px, der Footer wurde dabei versehentlich
	   übersehen und wirkte auf breiten Screens dadurch wie eine schmale Box in leerer
	   Fläche statt über die volle Breite zu laufen. */
	max-width: 2200px;
	margin: 0 auto;
	/* more top padding than bottom on purpose — "Wir freuen uns..." should sit with some
	   breathing room below the CTA-Band seam above it, not flush against the top edge, even
	   though the footer's total height is smaller than before */
	padding: clamp(3.5rem, 8vh, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vh, 2.5rem);
}
/* Feedback nach der 2200px-Verbreiterung von .nn-footer-top (siehe Kommentar dort): die
   untere Zeile (Impressum/Datenschutz, .nn-footer-bottom) wirkt auf voller Breite in
   Ordnung, die obere Zeile (Headline + Kontakt/Leistungen/Follow-Us) dagegen "auseinander-
   gerissen" — Marke links, Linkspalten rechts, dazwischen zu viel toter Raum auf breiten
   Screens. Eigener, engerer Innenabstand nur für diesen oberen Block: die Section selbst
   bleibt bei 2200px (Konsistenz mit dem Rest der Seite), der eigentliche Inhalt läuft
   darin aber zentriert in einer schmaleren Spalte statt bis an die vollen Ränder. */
.nn-footer-head,
.nn-footer-row2 {
	max-width: 1700px;
	margin-left: auto;
	margin-right: auto;
}
.nn-footer-head {
	margin-bottom: clamp(1.5rem, 4vh, 2.25rem);
}
.nn-footer-row2 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(2.5rem, 5vw, 4rem);
	flex-wrap: wrap;
}
.nn-footer-brand {
	max-width: 440px;
}
.nn-footer-contact-h2 {
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 0.98;
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
}
.nn-footer-contact-sub {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ink-muted);
	max-width: 38ch;
	margin: 0 0 1.5rem;
}
.nn-footer-email {
	margin: 0 0 0.5rem;
}
.nn-footer-phone {
	margin: 0;
}
/* email + phone read as one matching pair — same size/weight/colour, only the content
   differs — per feedback that the phone number looked visually inconsistent next to the
   (much larger) email before. Sized up again since (clearly bigger than the rest of the
   footer's small print, but still well short of the original oversized version) per
   follow-up feedback that the shrunk size read as too quiet. */
.nn-footer-email a,
.nn-footer-phone a {
	display: inline-block;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: clamp(1.4rem, 2.3vw, 1.7rem);
	color: var(--jade-accent);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.nn-footer-email a:hover,
.nn-footer-email a:focus-visible,
.nn-footer-phone a:hover,
.nn-footer-phone a:focus-visible {
	border-color: var(--jade-accent);
	color: var(--ink);
}

.nn-footer-links {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	flex: 0 0 auto;
}
.nn-footer-links > * {
	flex: 0 0 clamp(7rem, 10vw, 10rem);
	min-width: 0;
}
/* wider than the other two columns — "AI/Automatisierungen (n8n)" needs the room */
.nn-footer-links > .nn-footer-services {
	flex-basis: clamp(11rem, 14vw, 14rem);
}
.nn-footer-address {
	font-size: 0.875rem;
	line-height: 1.85;
	color: var(--ink-muted);
	margin: 0;
}
/* keeps "Henndorf am Wallersee" from wrapping onto two lines inside the address column,
   which is narrow (flex-basis clamp(7rem, 10vw, 10rem)) enough that it otherwise breaks
   the town name mid-phrase */
.nn-nowrap {
	white-space: nowrap;
}
/* .nn-footer-h4 statt h4-Tag-Selektor: Adresse/Follow Us/Leistungen sind jetzt <p>-Elemente
   (kein h-Tag, siehe parts/footer.html) — nur optisch weiterhin wie Überschriften. */
.nn-footer .nn-footer-h4 {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 1.1rem;
}
/* the plain Follow-Us list only — the two navigation blocks below have their own rules,
   this must NOT catch their <ul>s too */
.nn-footer-links > div ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* matches .nn-footer-address's visual line spacing (0.875rem font, 1.85 line-height) */
	gap: 0.55rem;
}
.nn-footer-links > div a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ink-muted);
	text-decoration: none;
	font-size: 0.82rem;
}
/* Transition nur auf der Hover-Regel, nicht auf der Basis — siehe Konventions-Kommentar in
   assets/css/leistungen.css bei .nn-service-num (sonst bleibt die Farbe beim Umschalten
   von Light/Dark auf dem alten Wert hängen). */
.nn-footer-links > div a:hover,
.nn-footer-links > div a:focus-visible {
	color: var(--ink);
	transition: color 0.2s ease;
}
.nn-footer-linkedin-icon {
	width: 0.85rem;
	height: 0.85rem;
	display: block;
	flex: none;
}

.nn-footer-bottom {
	border-top: 1px solid var(--line);
	/* war 1400px — die übrigen Sections laufen seit der Große-Screen-Skalierungsrunde
	   (2026-08-28, siehe CLAUDE.md) auf 2200px, der Footer wurde dabei versehentlich
	   übersehen und wirkte auf breiten Screens dadurch wie eine schmale Box in leerer
	   Fläche statt über die volle Breite zu laufen. */
	max-width: 2200px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 5vw, 4rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--ink-muted);
}
.nn-footer-bottom p {
	margin: 0;
}
/* groups the theme toggle + legal nav so .nn-footer-bottom's own space-between only ever
   splits two things (copyright text left, this cluster right) — the toggle then sits
   immediately left of Impressum/Datenschutz via this group's own gap, same pattern as
   .nn-nav-right in nav.css. */
.nn-footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
/* theme toggle now lives in the footer, not the nav — theme-switcher.css's base rule reads
   var(--hero-ink)/var(--hero-accent), tokens only defined inside .nn-nav's scope, so it
   needs its own footer-scoped colours here (this selector's higher specificity wins
   regardless of stylesheet enqueue order). */
.nn-footer .nn-theme-toggle {
	color: var(--ink-muted);
}
.nn-footer .nn-theme-toggle:hover,
.nn-footer .nn-theme-toggle:focus-visible {
	background: color-mix(in srgb, var(--ink) 12%, transparent);
	color: var(--ink);
}
.nn-footer .nn-theme-toggle:focus-visible {
	outline: 2px solid var(--jade-accent);
	outline-offset: 2px;
}
.nn-footer-legal.wp-block-navigation {
	font-size: 0.82rem !important;
}
.nn-footer-legal .wp-block-navigation__container {
	display: flex !important;
	flex-direction: row !important;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nn-footer-legal .wp-block-navigation-item__content {
	color: var(--ink-muted) !important;
	text-decoration: none;
	padding: 0 !important;
}
.nn-footer-legal .wp-block-navigation-item__content:hover,
.nn-footer-legal .wp-block-navigation-item__content:focus-visible {
	color: var(--ink) !important;
}

/* below this the columns get too narrow to hold "Tracking/Analytics" /
   "AI/Automatisierungen (n8n)" without wrapping badly — stack instead */
@media (max-width: 700px) {
	.nn-footer-links {
		flex-direction: column;
		gap: 2.5rem;
	}
	.nn-footer-links > * {
		flex-basis: auto;
	}
}
@media (max-width: 560px) {
	.nn-footer-links {
		gap: 2rem;
	}
}

/* Untere Zeile auf Mobile: Copyright-Text und die Zeile mit Theme-Switcher/Rechtstexten
   nebeneinander (space-between) wirken auf schmalen Screens zerrissen und laufen teils
   aneinander vorbei. Gestapelt und zentriert statt nebeneinander, dazu der Ortszusatz
   hinter dem Copyright-Zeichen ausgeblendet — reine Redundanz zur Adress-Spalte weiter
   oben im selben Footer, auf Mobile aber der Teil, der am ehesten umbricht/drückt. */
@media (max-width: 700px) {
	.nn-footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.nn-footer-bottom-right {
		justify-content: center;
	}
	.nn-footer-copy-location {
		display: none;
	}
}