/*!
Theme Name: NMCGN HALA Child Theme
Theme URI: https://www.newshore.de
Template: kadence
Author: newshore Media
Author URI: https://www.newshore.de/
Description: A NMCGN child theme for 247halama.de
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: nmcgn-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* ==============================================================
   Farben und Kontrast
   ==============================================================
   Die Palette der Bestandsaufnahme unterschreitet die Kontrast-
   anforderungen: #00a6b5 auf Weiss erreicht 2,95:1, noetig sind 4,5:1
   fuer Fliesstext. Ein WAVE-Lauf meldete deshalb 62 Fehler -- nicht
   62 Fehlerquellen, sondern fuenf Farbpaare, die sich ueber die Seite
   wiederholen.

   Vereinbarung vom 07.09.2026 war: Hausfarbe nur als Flaeche, ueberall
   sonst eine abgedunkelte Fassung (#00838f, #13838d, #737373).

   **Am 16.09.2026 zurueckgenommen.** Die Kundschaft hat im Termin
   Variante b) gewaehlt -- "CI-Farbe ueberall, AA faellt". Es gilt jetzt
   durchgehend:

     Tuerkis   #00A5B4     Verweise und Schaltflaechen 2,98:1
     Grau      #4A4A4A     Fliesstext                  8,86:1

   Beim Tuerkis ist das eine bewusste Unterschreitung von WCAG 2.1 AA
   (gefordert 4,5:1). Beim Grau das Gegenteil: #4A4A4A ist deutlich
   besser als das bisherige #737373 -- die Hausfarbe der Kundschaft ist
   hier die barrierefreiere.

   Die Werte stehen NICHT nur hier. Palette, Theme-Einstellungen und
   Seiteninhalt fuehren sie ebenfalls; umgestellt wird alles zusammen mit
   tools/migrate-ci-farben.php. Welche Paarungen die Anforderung
   unterschreiten, fuehrt tools/test-kontrast.sh namentlich.
   -------------------------------------------------------------- */

/* ==============================================================
   Bühne (Startbereich)
   ==============================================================
   Alles hier ist auf .nm-hero begrenzt -- die Klasse sitzt auf der
   Zeile, die das Hintergrundvideo trägt. Keine Regel darf einen
   anderen Abschnitt erreichen.

   Inhaltliches steht nicht hier, sondern als Block-Attribut in
   tools/setup-hero.php: Texte, Bilder, Sprungmarken und der
   Innenabstand des Panels. Im Stylesheet liegt nur, was rein
   optisch ist und in der Blockbearbeitung ohnehin nicht
   einstellbar wäre.
   -------------------------------------------------------------- */

/* Das Textpanel der Bühne.
   Die Toenung liegt als eigener Hintergrund AUF DEM PANEL, nicht mehr auf
   einer ::before-Ebene. Das ist kein Schoenheitsgriff: haengt die Lesbarkeit
   an einer Pseudo-Ebene, steht der weisse Text auf durchsichtigem Grund,
   sobald die Ebene nicht malt -- auf einem hellen Foto ist er dann fort.
   Pruefwerkzeuge wie WAVE sehen Pseudo-Ebenen ebenfalls nicht und melden
   genau das zu Recht als Kontrastfehler.

   rgba(27,27,27,0.7) ergibt ueber hellem Grund die Mischfarbe #5b5b5b und
   damit 6,79:1 fuer weisse Schrift -- mit Reserve ueber den geforderten
   4,5:1, und das Foto bleibt zu 30 % sichtbar. */
.nm-hero .nm-hero-panel > .kt-inside-inner-col {
	/* B1 vom 16.09.2026: "Kasten weg, Text direkt auf dem Foto mit
	   weichem Verlauf darunter, zusaetzlich schmaler, helleres Grau."

	   Das ist ein Verlauf, kein Kasten -- und damit ein background-image.
	   Das hat eine Folge, die benannt gehoert: Kontrastwerkzeuge rechnen
	   background-image NICHT mit. tools/kontrast.sh sieht hier also keine
	   Flaeche und meldet die Schrift gegen das, was darunter liegt.

	   Zwei Anlaeufe davor sind gescheitert, beide dokumentiert, damit sie
	   niemand wiederholt:

	     1  Eine background-color waere messbar -- aber eine Farbflaeche
	        hat Kanten, und Kanten sind ein Kasten. Genau der sollte weg.
	     2  Dieselbe Farbflaeche mit mask-image weichgezeichnet: die Maske
	        trifft auch den INHALT. Text und Schaltflaeche wurden
	        halbdurchsichtig mit ausgeblendet.

	   Der Kontrast wird deshalb dort geprueft, wo er entsteht -- an den
	   gerenderten Pixeln (tools/textkontrast.sh), nicht an der
	   CSS-Kaskade. Fuer Schrift auf Fotos ist das ohnehin das richtige
	   Werkzeug; dafuer wurde audit-textkontrast.py gebaut. */
	/* Radial, nicht senkrecht: ein Verlauf, der nur nach oben auslaeuft,
	   bleibt seitlich ein Rechteck -- die beiden senkrechten Kanten waren
	   deutlich zu sehen. Die Ellipse sitzt unten mittig unter dem Text und
	   ist am Ende ihrer Ausdehnung ganz verschwunden.

	   Die waagerechte Ausdehnung ist 50 % -- und das ist kein
	   Naeherungswert, sondern der einzige, der geht. Bei einem
	   radial-gradient sind die Radien Prozent der Kastenbreite, gemessen
	   von der Mitte. Alles ueber 50 % bedeutet, dass der Verlauf am
	   Kastenrand noch nicht bei Null ist -- dort schneidet ihn die Spalte
	   ab, und genau diese Schnittkante sah man als senkrechten Strich.
	   Mit 135 % und mit 88 % war sie da, mit 50 % ist sie fort.

	   Die Stufen dazwischen sind gemessen, nicht geschaetzt. Ein gleich-
	   maessiger Verlauf war an den Raendern schon fast durchsichtig --
	   dort steht aber noch Text, und der kam gegen das weisse Hemd im
	   Foto auf 1,67:1. Der Kern traegt jetzt bis 76 % der Ausdehnung und
	   faellt erst danach ab. Nachgemessen mit
	   `bash tools/textkontrast.sh <url> ".nm-hero-panel p" "" ffffff`. */
	background-image: radial-gradient(
		50% 82% at 50% 80%,
		rgba(74, 74, 74, 0.88) 0%,
		rgba(74, 74, 74, 0.86) 52%,
		rgba(74, 74, 74, 0.74) 76%,
		rgba(74, 74, 74, 0.38) 90%,
		rgba(74, 74, 74, 0) 100%
	);
	padding-top: 5.5rem;
}

/* Akzentstrich über der Headline. Als ::before am h2 statt als
   eigener Block -- ein Trennstrich ist Gestaltung und hat in der
   Inhaltsstruktur nichts zu suchen. */
.nm-hero .nm-hero-panel h2::before {
	background: #00A5B4;
	content: "";
	display: block;
	height: 3px;
	margin-bottom: 1.5rem;
	width: 64px;
}

.nm-hero .nm-hero-panel h2 {
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	letter-spacing: 0.03em;
	line-height: 1.08;
	margin: 0 0 1.1rem;
	text-transform: uppercase;
}

/* Rueckmeldung 14.09.2026, Punkt 7: "bei EXPERIENCE und CONNECTION bitte
   auf die Handy Ansicht achten [...] letzter Buchstabe steht alleine".

   Gemessen: das Panel ist am Telefon 198 px breit, die Leitworte standen
   in 30,4 px. "EXPERIENCE" braucht so rund 210 px und brach in
   EXPERIENC / E.

   Gegenmittel ist die Schriftgroesse, nicht die Panelbreite: wie breit
   der Kasten am Telefon sein soll, ist Gegenstand von Punkt 6 und dort
   noch nicht entschieden. Eine Aenderung hier wuerde dieser Entscheidung
   vorgreifen.

   `keep-all` und `overflow-wrap: normal` verbieten zusaetzlich den
   Bruch INNERHALB des Worts. Ohne sie haette schon ein etwas laengeres
   Leitwort denselben Fehler wieder ausgeloest -- die Schriftgroesse
   allein ist eine Zahl, die passt, keine Regel, die haelt. */
@media (max-width: 600px) {
	.nm-hero .nm-hero-panel h2 {
		font-size: clamp(1.25rem, 6.2vw, 1.9rem);
		hyphens: none;
		overflow-wrap: normal;
		word-break: keep-all;
	}
}

/* 58 Zeichen je Zeile: darüber wird der Sprung zur nächsten Zeile
   für das Auge mühsam, und das Panel ist 800 px breit. */
.nm-hero .nm-hero-panel p {
	font-size: clamp(1rem, 1.1vw, 1.125rem);
	line-height: 1.65;
	margin: 0 0 1.9rem;
	max-width: 58ch;
	opacity: 0.88;
}

.nm-hero .kb-button {
	border-radius: 3px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 1rem 2.1rem;
	text-transform: uppercase;
	transition: background-color 0.25s ease, transform 0.25s ease,
		box-shadow 0.25s ease;
}

.nm-hero .kb-button:hover,
.nm-hero .kb-button:focus-visible {
	background-color: #00A5B4;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

/* Die drei Leitworte auf dem ersten Slide tragen kein Panel und
   stehen frei auf dem Foto -- ohne Schatten verlieren sie sich in
   den hellen Bildpartien. */
.nm-hero .kb-slide-nm-lead h2,
.nm-hero .splide__slide:first-child h2 {
	letter-spacing: 0.06em;
	line-height: 1.12;
	text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}

/* Einblendung beim Slidewechsel, gestaffelt. Nur wenn die
   Besucher:in keine Bewegungsreduktion eingestellt hat -- eine
   selbstlaufende Bühne ist sonst zweimal unruhig. */
@media (prefers-reduced-motion: no-preference) {
	.nm-hero .splide__slide.is-active .nm-hero-panel > .kt-inside-inner-col > * {
		animation: nm-hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.nm-hero .splide__slide.is-active .nm-hero-panel > .kt-inside-inner-col > *:nth-child(2) {
		animation-delay: 0.09s;
	}

	.nm-hero .splide__slide.is-active .nm-hero-panel > .kt-inside-inner-col > *:nth-child(3) {
		animation-delay: 0.18s;
	}
}

@keyframes nm-hero-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==============================================================
   Abschnitte 3.2 bis 3.14
   ==============================================================
   Jede Regel ist auf die Klasse ihres Abschnitts begrenzt. Was sich
   als Block-Attribut ausdruecken laesst -- Farben, Abstaende, Texte --
   steht in tools/setup-sections.php und nicht hier. Im Stylesheet
   liegt nur, wofuer es kein Attribut gibt: Raster, Mauerwerk,
   Schwebe-Effekte.
   -------------------------------------------------------------- */

/* --- Claim (3.2) --- */
.nm-claim-title {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	letter-spacing: 0.02em;
	line-height: 1.12;
	margin: 0 0 1.4rem;
	text-transform: uppercase;
}

/* Rueckmeldung 14.09.2026, Punkt 8: "das '24/7' nicht alleine stehen
   lassen". Der erste Satz brauchte zwei Zeilen, und auf der zweiten stand
   nur noch "24/7." -- gemessen 43 px neben 623 px.

   `balance` verteilt die Woerter gleichmaessig auf die Zeilen, statt die
   erste bis zum Rand zu fuellen und den Rest fallen zu lassen. Das ist
   die Antwort auf "Schriftbild anpassen" -- und die bessere als der von
   der Kundschaft erwogene Blocksatz: deutsche Woerter sind lang, die
   Silbentrennung ist aus, Blocksatz risse dann Luecken in die Zeilen.

   Das geschuetzte Leerzeichen vor "24/7" steht im Inhalt, nicht hier
   (tools/migrate-umbrueche.php) -- es gehoert zum Text, nicht zur Form.

   Browser ohne `text-wrap` ignorieren die Zeile; dort bleibt es beim
   bisherigen Umbruch, der lesbar war, nur unschoen. */
.nm-claim-sub {
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.75;
	margin: 0 auto;
	max-width: 62ch;
	text-wrap: balance;
}

/* --- Icon-Boxen (3.3) --- */
.nm-icons .kt-inside-inner-col {
	height: 100%;
}

.nm-icon-box .kt-inside-inner-col {
	border-radius: 4px;
	padding: 2.4rem 1.6rem;
	text-align: center;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nm-icon-box:hover .kt-inside-inner-col {
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.nm-icon-img img {
	height: auto;
	max-width: 92px;
}

.nm-icon-title {
	color: #00A5B4;
	font-size: 1.35rem;
	letter-spacing: 0.06em;
	margin: 1.1rem 0 0.6rem;
	text-transform: uppercase;
}

.nm-icon-text {
	color: #4A4A4A;
	line-height: 1.7;
	margin: 0;
}

/* --- Sektionsbalken (3.4, 3.6, 3.8, 3.10, 3.12) --- */
/* Zentrierte Zeile, flankiert von zwei feinen tuerkisen Linien. Die Linien
   entstehen ueber ::before und ::after am h2 -- als Flex-Kinder teilen sie
   sich den verbleibenden Platz und passen sich damit jeder Zeilenlaenge und
   jeder Bildschirmbreite an, ohne feste Masse. */
.nm-bar h2 {
	align-items: center;
	display: flex;
	font-size: clamp(1.05rem, 1.9vw, 1.55rem);
	font-weight: 400;
	gap: clamp(0.9rem, 2.5vw, 2.2rem);
	justify-content: center;
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin: 0;
}

.nm-bar h2::before,
.nm-bar h2::after {
	background: #00A5B4;
	content: "";
	flex: 1 1 auto;
	height: 1px;
	/* Die Linien duerfen die Zeile nicht dominieren: auf schmalen Geraeten
	   bleibt sonst kaum Platz fuer den Text selbst. */
	max-width: clamp(1.5rem, 12vw, 9rem);
	opacity: 0.55;
}

/* Das hervorgehobene Wort traegt die Hausfarbe -- es ist die Marke des
   Abschnitts und zugleich das Ziel der Sprungmarke. */
.nm-bar h2 strong {
	color: #00A5B4;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Auf schmalen Geraeten bricht die Zeile; die Linien wuerden dann neben
   einem mehrzeiligen Block stehen und schief wirken. */
@media (max-width: 600px) {
	.nm-bar h2 {
		display: block;
	}

	.nm-bar h2::before,
	.nm-bar h2::after {
		display: block;
		margin: 0.9rem auto;
		max-width: 3.5rem;
	}
}

/* --- Services (3.7) --- */
.nm-service-col .kt-inside-inner-col {
	padding: 0 1.4rem;
}

.nm-service-title {
	color: #00A5B4;
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.nm-service-sub {
	font-size: 1rem;
	letter-spacing: 0.06em;
	margin: 1.4rem 0 0.5rem;
	text-transform: uppercase;
}

.nm-service-col ul {
	line-height: 1.65;
	padding-left: 1.1rem;
}

.nm-service-col li {
	margin-bottom: 0.45rem;
}

.nm-service-media img {
	border-radius: 4px;
	display: block;
	width: 100%;
}

/* --- Galerie (3.11) --- */
/* Mauerwerk ueber CSS-Spalten. Ein Gitter mit fester Zeilenhoehe muesste
   die 19 gemischten Formate beschneiden; so behaelt jedes Bild sein
   eigenes Seitenverhaeltnis. */
.nm-gallery-grid {
	column-count: 4;
	column-gap: 12px;
}

.nm-gallery-item {
	break-inside: avoid;
	margin: 0 0 12px;
}

.nm-gallery-item img {
	display: block;
	height: auto;
	width: 100%;
}

.nm-gallery-item figcaption {
	color: #ffffff;
	font-size: 0.78rem;
	opacity: 0.85;
	padding: 0.4rem 0.1rem 0;
}

@media (max-width: 1100px) {
	.nm-gallery-grid {
		column-count: 3;
	}
}

@media (max-width: 780px) {
	.nm-gallery-grid {
		column-count: 2;
	}
}

@media (max-width: 480px) {
	.nm-gallery-grid {
		column-count: 1;
	}
}

/* --- Rechtliches (3.13) und Copyright (3.14) --- */
.nm-legal .kt-inside-inner-col {
	padding: clamp(1.4rem, 2.4vw, 2.4rem);
}

.nm-legal-title {
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	margin: 0 0 0.9rem;
	text-transform: uppercase;
}

.nm-legal p {
	line-height: 1.7;
	margin: 0 0 0.9rem;
}

.nm-legal .wp-block-button__link {
	background-color: #00A5B4;
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	padding: 0.8rem 1.6rem;
	text-transform: uppercase;
	transition: background-color 0.25s ease;
}

.nm-legal .wp-block-button__link:hover,
.nm-legal .wp-block-button__link:focus-visible {
	background-color: #00A5B4;
}

.nm-legal-linkedin .wp-block-button__link {
	background-color: #1b1b1b;
}

/* --- Nachtrag nach dem Kontrast-Audit im Browser --- */
/* Vier Ursachen, die aus dem Quelltext allein nicht sichtbar waren und
   erst der Audit gegen die berechneten Farben zutage gefoerdert hat.
   Werkzeug: tools/kontrast.sh */

/* Schaltflaechen stehen NICHT hier, sondern in der Theme-Einstellung
   "buttons_background" (#00838f / #168293). Kadence schreibt daraus
   --global-palette-btn-bg in ein Inline-Stylesheet, das nach diesem hier
   geladen wird -- eine Regel an dieser Stelle verliert die Reihenfolge und
   liesse sich nur mit !important durchsetzen. Die Einstellung ist der
   richtige Ort: sie gilt fuer Theme- und Block-Schaltflaechen zugleich.
   Vorher erbten sie palette1, weisse Schrift darauf sind 2,95:1. */

/* Bildnachweise.
   Weisse Schrift direkt auf der tuerkisen Flaeche ergibt 4,52:1 -- zwei
   Hundertstel ueber der Anforderung. Ein Grenzwert, der je nach Rundung des
   pruefenden Werkzeugs kippt, ist kein tragfaehiges Ergebnis. Die Flaeche
   deshalb weiter abzudunkeln haette den ganzen Abschnitt von der Hausfarbe
   entfernt; stattdessen bekommt der Nachweis einen eigenen dunklen Grund.
   Das ist fuer eine Rechteangabe ohnehin die passendere Form -- sie ist
   Beiwerk zum Bild, nicht Teil der Flaeche.

   Weiss auf rgba(17,17,17,0.72) ueber #00838f ergibt rund 13:1. */
.nm-gallery .wp-element-caption {
	background: rgba(17, 17, 17, 0.72);
	border-radius: 2px;
	color: #ffffff;
	display: inline-block;
	font-size: 0.78rem;
	line-height: 1.4;
	margin-top: 0.4rem;
	padding: 0.25rem 0.55rem;
}

/* Der Sprunglink des Themes ist nur bei Tastaturbedienung sichtbar --
   also genau dann, wenn Lesbarkeit am meisten zaehlt. */
.skip-link,
.skip-link:focus,
.skip-link:active {
	color: #00A5B4;
}

/* --- Durchsichtiger Kopfbereich: Grund für die helle Schrift --- */
/* Rueckmeldung 14.09.2026, Punkt 3. Die Kundschaft wollte den Balken
   zurueck, wie er frueher war, und nennt selbst die Bedingung: "Text dann
   in GRAU oder WEISS -- abhaengig von Bild dahinter".

   Genau da liegt das Problem. Hinter dem Balken laeuft ein Film, kein
   Standbild -- die Helligkeit wechselt im Sekundentakt. Gemessen ueber
   alle 59 Sekunden (tools/test-kopfgrund.sh) erreicht das hellste Zehntel
   des Navigationsbereichs eine Leuchtdichte von 0,99: nahezu Weiss.
   Weisse Schrift kaeme dort auf 1,01:1 und waere schlicht fort. Auf den
   dunklen Sekunden derselben Schrift sind es 18:1. Eine Schriftfarbe kann
   nicht fuer beides richtig sein.

   Statt die Schrift umzufaerben bekommt sie einen eigenen Grund: ein
   dunkler Verlauf, der oben traegt und nach unten ausläuft. Der Balken
   bleibt durchsichtig -- das Bild scheint hindurch, nur eben gedaempft.
   Das ist dieselbe Ueberlegung wie bei den Bildnachweisen der Galerie:
   ein Grund fuer die Schrift, nicht eine Flaeche ueber dem Bild.

   Zur Staerke. Gegen die hellste Sekunde des Films gerechnet ergibt ein
   schwarzer Schleier von

     0,40   2,8:1     0,50   4,0:1     0,55   4,8:1     0,60   5,8:1

   Gefordert sind 4,5:1 -- die Navigation ist 14 px gross und zaehlt nicht
   als grosse Schrift. Der Verlauf haelt deshalb 0,58 ueber die gesamte
   Hoehe des Balkens und laeuft erst darunter aus. Das ist mehr Toenung
   als eine reine Andeutung, aber die einzige Fassung, die auf JEDER
   Sekunde des Films traegt. Der Film bleibt dabei zu gut 40 % sichtbar --
   der Unterschied zum bisherigen weissen Block ist der eigentliche Punkt
   der Rueckmeldung.

   Die Toenung selbst steht NICHT hier, sondern in der Theme-Einstellung
   `transparent_header_background` (tools/migrate-kopf-durchsichtig.php).
   Zwei Anlaeufe an dieser Stelle sind gescheitert:

   Erst als Verlauf auf einer ::before-Ebene -- tools/kontrast.sh meldete
   sechs Fehler, weil Pruefwerkzeuge Pseudo-Ebenen nur unter engen
   Bedingungen sehen und sonst bis zum weissen Seitengrund durchlaufen.
   Weiss auf Weiss, 1:1. Zu Recht: was ein Pruefwerkzeug nicht findet,
   findet auch kein Hilfsmittel.

   Dann als background-color auf #masthead -- ohne jede Wirkung, weil
   Kadence sein Inline-Stylesheet spaeter einhaengt. Dieselbe Lehre wie
   bei den Schaltflaechen.

   Textschatten und drop-shadow kommen dazu, nicht statt dessen: sie
   zaehlen bei der Kontrastpruefung nicht mit, helfen dem Auge aber an
   den Kanten. Das Logo ist ein Bild und kann keinen Textschatten
   tragen; fuer es uebernimmt drop-shadow dieselbe Aufgabe. */
/* Beide Schatten gelten NUR, solange der Balken oben steht. Sobald er
   klebt, liegt er auf deckendem Weiss -- dort ist ein dunkler Schatten
   um Schrift und Logo nur Schmutz. Kadence haengt an den geklebten
   Zustand `.item-is-fixed:not(.item-at-start)`; die Ausnahme hier greift
   genau daran. */
.transparent-header #primary-menu > li > a {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.transparent-header .site-header-item img {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.transparent-header .item-is-fixed:not(.item-at-start) #primary-menu > li > a {
	text-shadow: none;
}

.transparent-header .item-is-fixed:not(.item-at-start) .site-header-item img {
	filter: none;
}

/* --- Bühne: die Leitworte stehen weiss --- */
/* Die H1 der ersten Buehne holt ihre Farbe aus der Palette (palette1),
   nicht aus einem Wert im Block -- die Migration, die im Inhalt
   #00A5B4 durch Weiss ersetzt hat, kam an sie deshalb nicht heran.
   Aufgefallen ist es erst im Audit: 2,66:1, Hausfarbe auf hellem Grund. */
.nm-hero h1 {
	color: #ffffff;
}

/* Bis zum 16.09.2026 standen sie in der Hausfarbe und trugen eine helle
   Aura aus zehn gestapelten Schattenebenen -- gemessen 3,63:1 gegen das
   Foto, ohne sie waren es 2,02:1.

   Die Kundschaft hat im Termin entschieden: "Schrift in weiss, kein
   farblicher Rand." Das loest beides auf einmal. Weisse Schrift braucht
   keine Aura, sie braucht einen Grund -- und den traegt die Flaeche des
   Panels.

   Die Aura steht deshalb nicht mehr hier. Sie kommentarlos zu loeschen
   waere falsch gewesen: wer spaeter die Leitworte wieder einfaerbt,
   muss wissen, dass sie dann ohne Weiteres unter die Anforderung
   fallen. */

/* --- Kontaktzeile der Porträts (D2 zu Punkt 9, 16.09.2026) --- */
/* Die Kundschaft: "Geht das 'schöner', näher dran an unserer CI mit
   Symbolen und ohne Unterstrich?" Festgelegt wurde: Mobilnummern raus
   (steht in tools/migrate-kontaktzeile.php), Symbole davor, und das
   LinkedIn-Zeichen "bleibt blau" (C3).

   Warum die Symbole hier stehen und nicht im Inhalt: ein eingebettetes
   SVG in einem Absatz überlebt das nächste Speichern im Block-Editor
   nicht -- Gutenberg räumt Markup weg, das es nicht kennt. Als
   Hintergrundbild eines ::before ist es unberührbar.

   Warum Data-URI und nicht zwei kleine Dateien: jede Datei wäre eine
   zusätzliche Anfrage. Sie ginge zwar an die eigene Domain und bräche
   die Bannerfreiheit nicht, aber zwei Symbole sind es nicht wert.

   Das LinkedIn-Zeichen bleibt im Originalblau #0A66C2. Das ist keine
   Nachlässigkeit gegenüber der Hausfarbe, sondern Vorgabe: die
   Markenrichtlinie von LinkedIn lässt Einfärben nicht zu. Die Kundschaft
   hat das im Termin bestätigt.

   Die Symbole sind Beiwerk -- sie stehen neben einer sichtbaren
   Beschriftung ("LinkedIn", die Adresse) und gehören deshalb nicht in
   den Zugänglichkeitsbaum. Ein ::before leistet genau das. */
.nm-kontakt a {
	align-items: center;
	display: inline-flex;
	gap: 0.55rem;
	text-decoration: none;
}

.nm-kontakt a:hover,
.nm-kontakt a:focus-visible {
	text-decoration: underline;
}

.nm-kontakt a::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	flex: 0 0 auto;
	height: 1.15em;
	width: 1.15em;
}

.nm-kontakt a[href*="linkedin.com"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A66C2'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
}

.nm-kontakt a[href^="mailto:"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A5B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

/* Telefonhörer für tel:-Verweise, gleiche Strichstärke und Farbe wie
   das Briefsymbol. */
.nm-kontakt a[href^="tel:"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A5B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}