/*
Theme Name:   DACH Medienanstalt Child
Theme URI:    https://dach-medienanstalt.de
Description:  Child-Theme für die Website der DACH Medienanstalt. Enthält das Design-System, self-hosted Schriften und die Kundencenter-Logik. Entwickelt von STRYKE Marketing.
Author:       STRYKE Marketing
Author URI:   https://www.strykemarketing.de
Template:     hello-elementor
Version:      1.0.0
Text Domain:  dachmedienanstalt-child
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   Design-Tokens
   Die verbindliche Quelle sind die Elementor Global Colors und Global Fonts.
   Diese Variablen spiegeln sie für eigene Bausteine (Kundencenter, Footer,
   Formulare) und dürfen nicht abweichen.
   ========================================================================== */

:root {
	--dm-primary: #1d4ed8;
	--dm-primary-hover: #1638a8;
	--dm-secondary: #0b1b4d;
	--dm-text: #23272b;
	--dm-text-muted: #5b6470;
	--dm-bg: #f8f9fb;
	--dm-surface: #ffffff;
	--dm-accent-light: #dbe4ff;
	--dm-border: #e3e7ef;

	--dm-radius: 6px;
	--dm-radius-lg: 12px;
	--dm-shadow: 0 2px 8px rgba(11, 27, 77, 0.06);
	--dm-shadow-lg: 0 12px 32px rgba(11, 27, 77, 0.12);

	--dm-font-head: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--dm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--dm-space-section: clamp(3.5rem, 7vw, 7rem);
	--dm-maxwidth: 1200px;
}

/* ==========================================================================
   Basis
   ========================================================================== */

body {
	font-family: var(--dm-font-body);
	color: var(--dm-text);
	background-color: var(--dm-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dm-font-head);
	color: var(--dm-secondary);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--dm-primary);
}

a:hover,
a:focus {
	color: var(--dm-primary-hover);
}

/* Sichtbarer Fokus für Tastaturbedienung, wird von Hello Elementor nicht gesetzt. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--dm-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Sektions-Rhythmus
   Helle und dunkle Sektionen wechseln sich ab. Die Klassen werden in
   Elementor im Feld "CSS-Klassen" der jeweiligen Sektion gesetzt.
   ========================================================================== */

.dm-section--dark {
	background-color: var(--dm-secondary);
	color: var(--dm-surface);
}

.dm-section--dark h1,
.dm-section--dark h2,
.dm-section--dark h3,
.dm-section--dark h4,
.dm-section--dark h5,
.dm-section--dark h6 {
	color: var(--dm-surface);
}

.dm-section--dark p,
.dm-section--dark li {
	color: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   Hero (Startseite)
   Vollflaechiges CLP-Foto mit Navy-Verlauf. Der Verlauf selbst steckt in den
   Elementor-Overlay-Einstellungen (links dunkel -> rechts hell). Hier nur das
   Emblem oben rechts und die Mobile-Absicherung der Lesbarkeit.
   ========================================================================== */

/* Emblem soll sich am vollflaechigen Hero ausrichten, nicht an der Boxbreite. */
.dm-hero > .e-con-inner {
	position: static;
}

.dm-hero__badge {
	position: absolute;
	top: 38%;
	/* Bis etwa 1920px sitzt das Emblem wie gehabt 7% vom rechten Hero-Rand.
	   Wird der Viewport breiter, waechst der rechte Rand schneller als 7%,
	   und das Siegel wuerde in den leeren rechten Bereich abdriften. Ab dann
	   greift der zur Bildmitte verankerte Wert (50% minus fester Abstand),
	   der den Abstand zur Mitte konstant haelt. So bleibt das Emblem an der
	   Inhaltsspalte kleben, statt auf breiten Monitoren nach rechts wegzulaufen. */
	right: max(7%, calc(50% - 825px));
	transform: translateY(-50%); /* vertikal zentriert im rechten Bildbereich */
	width: clamp(300px, 30vw, 480px);
	margin: 0;
	z-index: 3;
	pointer-events: none; /* rein dekoratives Siegel, faengt keine Klicks ab */
	filter: drop-shadow(0 12px 30px rgba(11, 27, 77, 0.5));
}

.dm-hero__badge img {
	display: block;
	width: 100%;
	height: auto;
}

/* Der Umbruch in der Eyebrow ("Aussenwerbung in" / "Deutschland, ...") ist nur
   mobil gewuenscht. Das <br> steckt im Heading-Text, wird hier am Desktop
   unterdrueckt und in der Mobile-Query wieder aktiviert. */
.dm-eyebrow br {
	display: none;
}

@media (max-width: 1024px) {
	/* Auf Tablets ist die Inhaltsspalte voll breit, rechts bleibt kein freier
	   Streifen mehr fuer das Emblem. Statt ueber dem Fliesstext zu schweben,
	   wandert es wie mobil in die obere rechte Ecke, klar ueber der Eyebrow. */
	.dm-hero__badge {
		width: clamp(76px, 10vw, 104px);
		top: 20px;
		right: 20px;
		transform: none;
	}
}

@media (max-width: 767px) {
	/* Der horizontale Verlauf laesst die rechten Zeilenenden mobil zu hell
	   werden. Deshalb mobil ein flaechiges Navy-Overlay statt des Verlaufs.
	   Etwas dichter als am Desktop, damit der Fliesstext auch ueber der
	   hellsten Stelle des CLP-Motivs (das DMA-Signet im Foto) sicher liegt. */
	.dm-hero::before {
		background-image: none !important;
		background-color: rgba(11, 27, 77, 0.88) !important;
	}

	/* Emblem mobil gross und praesent oben rechts. Die Breite haengt an der
	   Viewport-Breite, damit es auf jedem Handy gleich gross wirkt. Der eine
	   Stellhebel fuer die Groesse ist --dm-badge-w; der Textabstand darunter
	   rechnet sich daraus automatisch, deshalb muss man nur diesen Wert drehen. */
	.dm-hero {
		--dm-badge-w: min(260px, 62vw);
	}

	/* Es ist absolut an .dm-hero verankert und liegt ausserhalb des Textflusses. */
	.dm-hero__badge {
		width: var(--dm-badge-w);
		top: 12px;
		right: 12px;
		transform: none;
		filter: drop-shadow(0 3px 10px rgba(11, 27, 77, 0.4));
	}

	/* Hero-Text unter das Emblem schieben, damit nichts verdeckt wird. Der Wert
	   ersetzt (nicht addiert) das Default-Padding des inneren Containers und
	   deckt daher den ganzen Abstand ab: Badge-Hoehe (Breite * 438/480) plus
	   Top-Abstand und etwas Luft. Skaliert automatisch mit --dm-badge-w. */
	.dm-hero > .e-con-inner {
		padding-top: calc(var(--dm-badge-w) * 0.9125 + 28px);
	}

	/* Eyebrow-Umbruch nur mobil aktiv (Desktop-Regel oben blendet das <br> aus). */
	.dm-eyebrow br {
		display: inline;
	}
}

/* ==========================================================================
   CTA-Reihen (Hero und Kontakt)
   Nebeneinanderstehende Buttons einer Handlungsaufforderung. Am Desktop stehen
   sie in einer Reihe mit eigener Inhaltsbreite. Mobil sind zwei unterschiedlich
   breite Buttons unruhig, deshalb dort gestapelt, volle Breite, gleiche Hoehe.
   Klasse dm-cta-row sitzt am Flex-Container (content_width: full, also .e-con).
   flex-direction wird per !important gesetzt, weil Elementor die Richtung ueber
   eine hoeher gewichtete elementspezifische Regel ausgibt.
   ========================================================================== */
@media (max-width: 767px) {
	.dm-cta-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.dm-cta-row > .elementor-widget-button {
		width: 100%;
	}

	/* Der Button selbst fuellt die Spalte und zentriert seinen Text, damit alle
	   CTAs exakt gleich breit und gleich hoch sind. */
	.dm-cta-row .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Ansprechpartner-Portrait am Uebergang Hero -> Leistungen.
   Grosse Figur rechts: der Kopf ragt oben leicht ueber die Kante ins dunkle
   Hero-Band, der Koerper laeuft nach unten HINTER die Leistungs-Karten.
   z-index: -1 setzt ihn hinter die (relativ positionierten) Karten; damit er
   trotzdem ueber dem Sektions-Hintergrund liegt, macht isolation die Sektion
   zu einem eigenen Stacking-Context (sonst verschwaende er hinter der Flaeche).
   overflow: visible laesst den Kopf oben ueberstehen.
   ========================================================================== */
.dm-hero-person {
	position: absolute;
	/* Fest zur Seitenmitte verankert (left: 50%), NICHT zum Viewport-Rand.
	   Der Inhalt ist mittig-boxed, also bleibt das Portrait so bei jeder
	   Bildschirmbreite an derselben Stelle relativ zu Text und Karten und
	   springt nicht mehr. Alle Werte in px: auch die Groesse aendert sich
	   dadurch nicht mit der Aufloesung.
	   Feinjustierung nur ueber margin-left: negativer = weiter links. */
	left: 50%;
	margin-left: 220px;
	top: -40px;
	width: 380px;
	z-index: -1;
	pointer-events: none;
	filter: drop-shadow(0 10px 26px rgba(11, 27, 77, 0.20));
}

.dm-hero-person img {
	display: block;
	width: 100%;
	height: auto;
	/* Weicher Auslauf nach unten, damit keine harte Bildkante auf der hellen
	   Flaeche steht. Kopf und Oberkoerper (obere Haelfte) bleiben voll deckend. */
	-webkit-mask-image: linear-gradient(to bottom, #000 46%, rgba(0, 0, 0, 0) 84%);
	        mask-image: linear-gradient(to bottom, #000 46%, rgba(0, 0, 0, 0) 84%);
}

/* Nur auf breiten Viewports einblenden. Darunter laeuft der Leistungs-Text
   ueber die volle Breite, das Portrait wuerde ihn ueberlagern und unleserlich
   machen. Deshalb unter 1200px ausblenden. */
@media (max-width: 1200px) {
	.dm-hero-person {
		display: none;
	}
}

.dm-section--light {
	background-color: var(--dm-bg);
	overflow: visible;
	isolation: isolate; /* eigener Stacking-Context fuer das Portrait dahinter */
}

.dm-section--surface {
	background-color: var(--dm-surface);
}

/* Duotone-Overlay für Platzhalterbilder, bis Kundenmaterial vorliegt. */
.dm-duotone img {
	filter: grayscale(100%) contrast(1.05);
	mix-blend-mode: luminosity;
}

.dm-duotone {
	background-color: var(--dm-primary);
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
}

/* ==========================================================================
   Bildsektion
   Komponierte Media-Text-Sektion: ein Motiv links, kurzer Text rechts. Ein
   Content-Bild wird so in den Inhalt eingearbeitet und steht nie als lose
   Vollbreiten-Kachel. Das Layout liegt bewusst hier an einer Stelle, damit
   alle Seiten identisch aussehen und ein Feinschliff zentral passiert.

   Aufbau je Sektion (Elementor):
     .dm-bildsektion (Container, flex row)
       > .elementor-widget-image        das Motiv
       > .dm-bildsektion__body          Eyebrow, Überschrift, Bildunterschrift
   ========================================================================== */

/* Die Media-Text-Sektion sitzt auf einer ruhigen, hellblauen Fläche mit runden
   Ecken (Token dmalight). So ist das Motiv sichtbar in den Inhalt eingebettet
   statt auf blankem Weiß zu stehen. */
.dm-bildsektion > .e-con-inner {
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	background: var(--dm-accent-light);
	border-radius: 20px;
	padding: clamp(1.5rem, 3.5vw, 3rem);
}

/* Zwei Spalten. Das Motiv bekommt den größeren Teil der Fläche. */
.dm-bildsektion > .e-con-inner > .elementor-widget-image {
	flex: 1 1 58%;
	min-width: 0;
	margin: 0;
}

.dm-bildsektion__body {
	flex: 1 1 42%;
	min-width: 0;
}

/* Behandlung des Motivs: abgerundeter Rahmen, weicher Schatten und eine
   dezente Verlaufskante, damit das Foto in der Fläche liegt statt zu schweben.
   e_optimized_markup ist aktiv, deshalb sitzt das img direkt im Widget, es
   gibt kein .elementor-widget-container. */
.dm-bildsektion .elementor-widget-image {
	position: relative;
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
	box-shadow: var(--dm-shadow-lg);
	background: var(--dm-bg);
}

.dm-bildsektion .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* Verlaufskante: ein zarter Rand innen plus ein kaum sichtbarer Verlauf,
   der das Motiv gegen helle Flächen abgrenzt, ohne als harte Linie zu wirken. */
.dm-bildsektion .elementor-widget-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(11, 27, 77, 0.08);
	background: linear-gradient(157deg, rgba(255, 255, 255, 0.12), rgba(11, 27, 77, 0.05) 62%);
}

/* Der Textkörper stapelt Eyebrow, Überschrift und Bildunterschrift.
   Die Bildunterschrift kommt aus dem Text-Widget linksbündig, nicht zentriert. */
.dm-bildsektion__body .elementor-widget-text-editor p {
	text-align: left;
}

/* Unter dieser Breite werden zwei Spalten zu eng, dann sauber untereinander. */
@media (max-width: 880px) {
	.dm-bildsektion > .e-con-inner {
		flex-direction: column;
		align-items: stretch;
		padding: clamp(1.25rem, 5vw, 2rem);
	}

	.dm-bildsektion > .e-con-inner > .elementor-widget-image,
	.dm-bildsektion__body {
		flex-basis: auto;
		width: 100%;
	}
}

/* Variante ohne blaue Fläche: für freigestellte Produktmotive, die direkt auf
   der Sektionsfarbe stehen. Das Panel entfällt, damit das Motiv nicht in einem
   farbigen Kasten sitzt. Der Freisteller hat selbst einen weißen Grund und steht
   auf der weißen Sektion, deshalb kein Rahmen, kein Schatten und keine Kachel,
   das Motiv liegt frei. Layout (zwei Spalten, Stapeln unter 880px) erbt es. */
.dm-bildsektion--plain > .e-con-inner {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.dm-bildsektion--plain .elementor-widget-image {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Die zarte Verlaufskante des Panels würde den Freisteller eintönen, hier weg. */
.dm-bildsektion--plain .elementor-widget-image::after {
	display: none;
}

/* ==========================================================================
   Karten
   ========================================================================== */

.dm-card {
	background: var(--dm-surface);
	border: 1px solid var(--dm-border);
	border-radius: var(--dm-radius-lg);
	box-shadow: var(--dm-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dm-shadow-lg);
	border-color: var(--dm-accent-light);
}

/* Kartenbilder auf ein gemeinsames Seitenverhältnis bringen. Die Motive
   kommen aus verschiedenen Quellen, ohne das starten die Überschriften
   der Karten auf unterschiedlicher Höhe. */
.dm-card .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Das freigestellte Bauzaunmotiv steht auf Weiß. Auf der weißen Karte
   braucht es einen dezenten Grund, sonst schwebt es. */
.dm-card .elementor-widget-image {
	background: var(--dm-bg);
	border-radius: 8px;
	overflow: hidden;
}

/* ==========================================================================
   Tabellen (Formate und Größen auf den Leistungsseiten)
   ========================================================================== */

.dm-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--dm-surface);
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
	box-shadow: var(--dm-shadow);
}

.dm-table th,
.dm-table td {
	padding: 0.9rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--dm-border);
	font-size: 0.97rem;
}

/* Eigene Textfarbe für den Tabellenkörper. Steht die Tabelle in einer
   dunklen Sektion, würde sie sonst die weiße Sektionsfarbe erben und auf
   dem weißen Tabellengrund unsichtbar werden. */
.dm-table td {
	color: var(--dm-text);
}

.dm-table th {
	background: var(--dm-secondary);
	color: var(--dm-surface);
	font-family: var(--dm-font-head);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.dm-table tr:last-child td {
	border-bottom: 0;
}

.dm-table tbody tr:hover td {
	background: var(--dm-accent-light);
}

/* Breite Tabellen scrollen in sich, nie die Seite.
   Die Klasse sitzt auf dem Elementor-Widget, gescrollt wird aber im inneren
   Container. Ohne min-width:0 wachsen Flex-Kinder auf ihre Inhaltsbreite und
   der Scroll-Container greift nicht. */
.dm-table,
.dm-table > .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

/* Unterhalb dieser Breite werden vier Spalten unlesbar, deshalb lieber
   scrollen als quetschen. */
.dm-table table {
	min-width: 560px;
}

/* Dezenter Hinweis, dass hier seitwärts gescrollt werden kann. */
@media (max-width: 620px) {
	.dm-table {
		position: relative;
	}

	.dm-table::after {
		content: "seitlich scrollbar";
		display: block;
		padding-top: 0.5rem;
		font-size: 0.78rem;
		color: var(--dm-text-muted);
	}
}

/* ==========================================================================
   Elementor Formulare an das Design-System angleichen
   ========================================================================== */

.elementor-field-group .elementor-field {
	border: 1px solid var(--dm-border) !important;
	border-radius: var(--dm-radius) !important;
	background: var(--dm-surface) !important;
	color: var(--dm-text) !important;
	padding: 0.75rem 0.9rem !important;
	font-family: var(--dm-font-body) !important;
}

.elementor-field-group .elementor-field:focus {
	border-color: var(--dm-primary) !important;
	box-shadow: 0 0 0 3px var(--dm-accent-light) !important;
}

.elementor-field-group .elementor-field-label {
	font-weight: 500;
	color: var(--dm-text);
}

/* ==========================================================================
   Header
   Das Layout kommt aus dem Theme-Builder-Template, hier stehen nur die
   Feinheiten, die sich in Elementor umständlich klicken lassen.
   ========================================================================== */

.dm-header {
	z-index: 100;
}

/* Der Schatten kommt erst beim Scrollen, damit der Kopf im Ruhezustand
   ruhig auf der Seite liegt. */
.dm-header.elementor-sticky--effects {
	box-shadow: var(--dm-shadow);
	-webkit-backdrop-filter: saturate(1.1);
	backdrop-filter: saturate(1.1);
}

.dm-header img {
	display: block;
}

/* Der Kundencenter-Button ist die einzige gefüllte Fläche im Kopf und darf
   deshalb nicht mit der Navigation verschmelzen. */
.dm-header__cta .elementor-button {
	white-space: nowrap;
}

/* Flex-Kinder haben von Haus aus min-width:auto und schrumpfen deshalb nicht
   unter ihre Inhaltsbreite. Ohne das schiebt der Kopf auf schmalen Geräten die
   ganze Seite auf und es entsteht horizontales Scrollen. */
.dm-header > .e-con-inner > .e-con,
.dm-header > .e-con-inner > .elementor-element,
.dm-header > .e-con,
.dm-header > .elementor-element {
	min-width: 0;
}

/* Letzte Absicherung: die Seite scrollt nie seitwärts, breite Inhalte
   scrollen in ihrem eigenen Container (siehe .dm-table). */
html,
body {
	overflow-x: clip;
}

/* Mobiles Ausklappmenü an die Palette angleichen. */
.dm-header .elementor-nav-menu--dropdown {
	border-radius: 0 0 var(--dm-radius-lg) var(--dm-radius-lg);
	box-shadow: var(--dm-shadow-lg);
}

@media (max-width: 767px) {
	/* Auf kleinen Geräten reicht das Signet nicht, aber die Wortmarke darf
	   den Button nicht verdrängen. */
	.dm-header__cta .elementor-button {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Touch-Targets: Burger und Kundencenter-Button mindestens 44x44 px, damit
	   sie sich mit dem Daumen sicher treffen lassen. Die Groesse steckt im
	   Trefferbereich, nicht im sichtbaren Padding, damit der Kopf schlank bleibt. */
	.dm-header .elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Die Default-Flaeche des Togglers weg, das Signet steht frei im Kopf. */
		background-color: transparent;
	}

	.dm-header__cta .elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Spaltenraster statt fixer Prozentbreiten. Vorher summierten sich vier feste
   Breiten plus 40 px Gap auf mehr als 100 %, deshalb rutschte die vierte Spalte
   (Kundencenter) unter die Logo-Spalte. Ein Grid rechnet die Gaps selbst ein.
   Marke bekommt etwas mehr Raum, die drei Link-Spalten teilen sich den Rest. */
.dm-footer__cols {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 1024px) {
	.dm-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 36px 40px;
	}
}

@media (max-width: 767px) {
	.dm-footer__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.dm-footer a,
.dm-footer__bar a {
	text-decoration: none;
}

.dm-footer a:hover,
.dm-footer__bar a:hover {
	text-decoration: underline;
}

/* Inline-Links in den Footer-Textblöcken (Telefon, E-Mail) müssen auf dem Navy
   lesbar sein. Das globale Königsblau ist als Linkfarbe hier zu dunkel. Die
   Navigationsmenüs setzen ihre Farbe selbst über Elementor-Globals und bleiben
   davon unberührt. */
.dm-footer__cols .elementor-widget-text-editor a {
	color: var(--dm-accent-light);
	text-decoration: none;
}

.dm-footer__cols .elementor-widget-text-editor a:hover {
	color: var(--dm-surface);
	text-decoration: underline;
}

.dm-footer p {
	margin-bottom: 0.6em;
}

.dm-footer .elementor-nav-menu a {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dm-footer__bar p {
	margin: 0;
}

/* ==========================================================================
   Footer-Signatur
   ========================================================================== */

.dm-footer-signature {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.55);
}

.dm-footer-signature a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.dm-footer-signature a:hover {
	color: var(--dm-surface);
	text-decoration: underline;
}

/* ==========================================================================
   Jubiläums-Signet (Footer)
   Plastisches Wappen aus [dma_jubilaeum]. Das PNG trägt Jahreszahl und
   Schriftzug "JAHRE AUSSENWERBUNG" selbst, deshalb steht kein Text mehr daneben.
   Feste Pixelhöhe, damit das Signet auf jeder Monitorbreite exakt gleich bleibt
   und nichts skaliert. Der spezifischere Selektor muss Elementors Reset
   ".elementor img { height:auto }" (Spezifität 0,1,1) schlagen, sonst gewinnt
   dessen height:auto und das Bild fällt auf seine Naturgröße zurück.
   Höhe hier ist der einzige Stellhebel für die Größe.
   ========================================================================== */

.dm-anniversary {
	display: inline-flex;
	margin-top: 8px;
}

.dm-anniversary .dm-anniversary__badge {
	display: block;
	width: auto;
	height: 150px;
}

/* ==========================================================================
   Ländermarker (Flaggen)
   Kleines Flaggen-Chip vor einer Länderüberschrift, damit die DACH-Region auf
   einen Blick lesbar ist. Die Flaggen sind Inline-SVG als Data-URI, also
   self-hosted und ohne externen Request, analog zum Lorbeer-Signet im Footer.
   Einsatz als zusätzliche CSS-Klasse am Heading-Widget:
     dm-country dm-country--de  (Modifier: --de, --at, --ch, --eu)
   Elementor hängt CSS-Klassen an den Block-Wrapper (.elementor-element), nicht
   an die Überschrift selbst. Das Chip muss aber inline VOR den Text, deshalb
   sitzt das ::before an .elementor-heading-title und nicht am Wrapper, sonst
   stünde die Flagge als Block über der Überschrift.
   Die Chip-Größe skaliert über em mit der Schriftgröße, sitzt also am H3 größer
   als am kleinen Eyebrow. Die Sterne der Europa-Flagge sind ein exakt
   gerechneter Zwölferkranz.
   ========================================================================== */

:root {
	--dm-flag-de: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23000000'/%3E%3Crect width='30' height='13.34' y='6.66' fill='%23DD0000'/%3E%3Crect width='30' height='6.67' y='13.33' fill='%23FFCE00'/%3E%3C/svg%3E");
	--dm-flag-at: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23ED2939'/%3E%3Crect width='30' height='6.67' y='6.66' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--dm-flag-ch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23D52B1E'/%3E%3Crect x='13.2' y='4' width='3.6' height='12' fill='%23FFFFFF'/%3E%3Crect x='9' y='8.2' width='12' height='3.6' fill='%23FFFFFF'/%3E%3C/svg%3E");
	--dm-flag-eu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23003399'/%3E%3Cg fill='%23FFCC00'%3E%3Cpolygon points='15,2.65 15.26,3.44 16.09,3.44 15.42,3.94 15.68,4.73 15,4.24 14.32,4.73 14.58,3.94 13.91,3.44 14.74,3.44'/%3E%3Cpolygon points='18.1,3.48 18.36,4.28 19.19,4.28 18.52,4.77 18.78,5.56 18.1,5.07 17.42,5.56 17.68,4.77 17.01,4.28 17.84,4.28'/%3E%3Cpolygon points='20.37,5.75 20.63,6.54 21.46,6.54 20.79,7.04 21.05,7.83 20.37,7.34 19.69,7.83 19.95,7.04 19.28,6.54 20.11,6.54'/%3E%3Cpolygon points='21.2,8.85 21.46,9.64 22.29,9.64 21.62,10.14 21.88,10.93 21.2,10.44 20.52,10.93 20.78,10.14 20.11,9.64 20.94,9.64'/%3E%3Cpolygon points='20.37,11.95 20.63,12.74 21.46,12.74 20.79,13.24 21.05,14.03 20.37,13.54 19.69,14.03 19.95,13.24 19.28,12.74 20.11,12.74'/%3E%3Cpolygon points='18.1,14.22 18.36,15.01 19.19,15.01 18.52,15.51 18.78,16.3 18.1,15.81 17.42,16.3 17.68,15.51 17.01,15.01 17.84,15.01'/%3E%3Cpolygon points='15,15.05 15.26,15.84 16.09,15.84 15.42,16.34 15.68,17.13 15,16.64 14.32,17.13 14.58,16.34 13.91,15.84 14.74,15.84'/%3E%3Cpolygon points='11.9,14.22 12.16,15.01 12.99,15.01 12.32,15.51 12.58,16.3 11.9,15.81 11.22,16.3 11.48,15.51 10.81,15.01 11.64,15.01'/%3E%3Cpolygon points='9.63,11.95 9.89,12.74 10.72,12.74 10.05,13.24 10.31,14.03 9.63,13.54 8.95,14.03 9.21,13.24 8.54,12.74 9.37,12.74'/%3E%3Cpolygon points='8.8,8.85 9.06,9.64 9.89,9.64 9.22,10.14 9.48,10.93 8.8,10.44 8.12,10.93 8.38,10.14 7.71,9.64 8.54,9.64'/%3E%3Cpolygon points='9.63,5.75 9.89,6.54 10.72,6.54 10.05,7.04 10.31,7.83 9.63,7.34 8.95,7.83 9.21,7.04 8.54,6.54 9.37,6.54'/%3E%3Cpolygon points='11.9,3.48 12.16,4.28 12.99,4.28 12.32,4.77 12.58,5.56 11.9,5.07 11.22,5.56 11.48,4.77 10.81,4.28 11.64,4.28'/%3E%3C/g%3E%3C/svg%3E");
}

.dm-country .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 1.35em;
	aspect-ratio: 3 / 2;
	margin-right: 0.5em;
	vertical-align: -0.1em;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	/* Hairline, damit die weißen Flaggenanteile (DE, AT) nicht in helle
	   Flächen auslaufen und der Rand sauber sitzt. */
	box-shadow: inset 0 0 0 1px rgba(11, 27, 77, 0.16);
}

.dm-country--de .elementor-heading-title::before { background-image: var(--dm-flag-de); }
.dm-country--at .elementor-heading-title::before { background-image: var(--dm-flag-at); }
.dm-country--ch .elementor-heading-title::before { background-image: var(--dm-flag-ch); }
.dm-country--eu .elementor-heading-title::before { background-image: var(--dm-flag-eu); }

/* Inline-Variante für Fließtext, z.B. die Länderzeile unter "Drei Länder" im
   Hero, wo mehrere Länder in einer Zeile stehen. Das Wort wird in einen Span
   mit .dm-flag dm-flag--xx gefasst, die Flagge sitzt als ::before im Wort und
   bleibt per nowrap am Namen kleben. Nutzt dieselben --dm-flag-* Variablen.
   Hairline hell, weil diese Zeile auf dem dunklen Hero steht. */
.dm-flag {
	white-space: nowrap;
}

.dm-flag::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	aspect-ratio: 3 / 2;
	margin-right: 0.35em;
	vertical-align: -0.1em;
	border-radius: 2px;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.dm-flag--de::before { background-image: var(--dm-flag-de); }
.dm-flag--at::before { background-image: var(--dm-flag-at); }
.dm-flag--ch::before { background-image: var(--dm-flag-ch); }
.dm-flag--eu::before { background-image: var(--dm-flag-eu); }

/* ==========================================================================
   Screenreader
   ========================================================================== */

.dm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}