/*
Theme Name: LD Magazin
Theme URI: https://www.lightingdeluxe.de/
Author: Daniela Schär / LightingDeluxe
Author URI: https://www.lightingdeluxe.de/
Description: Editorial-ruhiges Child-Theme fuer das LightingDeluxe-Magazin. Basiert auf Twenty
Twenty-Five. Farben, Typografie und Raster folgen dem Designsystem
DESIGN_LD_ELEGANZ-VORSCHLAG 4.md (gesichert in docs/DESIGN-QUELLE-ELEGANZ-4.md), Teil A + B3:
"Der Blog folgt Teil A, nicht dem gemessenen Live-Shop-CSS". Fliesstext- und
Ueberschriften-Schrift: Sans = Muller (Fallback Jost, lokal gehostet), Serif = Cormorant Garamond
(lokal gehostet).
Lesegrund/Lesefarbe (A1 von Vorschlag 4, ausdruecklich entschieden): Seitengrund WEISS (Creme ist
laut A1 nur fuer sektionsweise eingestreute Kaesten/Zebra, nie fuer die ganze Seite), Fliesstext/
Auszuege/Meta-Beschreibungstexte BRAUN (A1: "Ein Textsystem fuer alle Flaechen... Fuer das Magazin
war eine Ausnahme mit schwarzem Text vorgeschlagen; sie ist nicht uebernommen. Schwarz auf Weiss
erzeugt ueber lange Lesestrecken Halation."). Kicker/Meta-Labels gold, Links gold-dark, Ueber-
schriften schwarz, Footer-Flaeche gold, Navigation unveraendert. Siehe OFFENE_PUNKTE.md
Abschnitt 13/14/15 fuer die Versionsgeschichte dieser Entscheidung (v1.1.0 Cream+Braun ->
v1.1.1 Weiss+Schwarz, versuchsweise -> v1.1.2 Weiss+Braun, endgueltig laut Vorschlag 4).
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.4
Version: 1.1.2
Text Domain: ld-magazin

Alle Farben, Schriften, Groessen und Breiten stehen in theme.json. Diese Datei ergaenzt nur, was
theme.json nicht abdeckt: Kartenoptik der Beitragsliste, die Kicker-Metazeile (Datum/Autor),
Bildbreiten im Content, Zustaende (Hover/Active/Focus), Raster-Fluchten von Header/Nav/Footer und
ein paar mobile Feinheiten. Wird von functions.php als Stylesheet der Kindtheme eingebunden (und
als add_editor_style() auch im Block-Editor genutzt).
*/

/* ---------------------------------------------------------------------------
   Bilder im Content: nie breiter als die Lesespalte, KEIN Hochskalieren ueber
   die native Bildgroesse (width:auto neutralisiert auch zu grosse width-
   Attribute aus dem Alt-HTML), kein auffaelliger Radius (Shop-Optik: eckig).
   Eigenstaendige Bilder stehen standardmaessig ZENTRIERT in der Spalte -
   kleine Altbilder (600-900px) wirken so ruhig statt links "angeklebt".
   -------------------------------------------------------------------------- */
.entry-content img,
.wp-block-post-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	width: auto;
	height: auto;
	border-radius: 0;
}

/* Ausnahme: explizit links/rechts umflossene Bilder (WP-align-Klassen oder
   Inline-float aus dem Alt-HTML) behalten ihre Ausrichtung und ihren Umfluss. */
.entry-content img.alignleft,
.entry-content img[style*="float: left"],
.entry-content img[style*="float:left"],
.wp-block-post-content img.alignleft,
.wp-block-post-content img[style*="float: left"],
.wp-block-post-content img[style*="float:left"] {
	display: inline-block;
	float: left;
	margin-left: 0;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.entry-content img.alignright,
.entry-content img[style*="float: right"],
.entry-content img[style*="float:right"],
.wp-block-post-content img.alignright,
.wp-block-post-content img[style*="float: right"],
.wp-block-post-content img[style*="float:right"] {
	display: inline-block;
	float: right;
	margin-right: 0;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

/* Umflossene Figure-Bloecke (WP-Bild-Block mit Links-/Rechts-Ausrichtung):
   das innere Bild nicht zusaetzlich zentrieren. */
.entry-content .alignleft img,
.entry-content .alignright img,
.wp-block-post-content .alignleft img,
.wp-block-post-content .alignright img {
	display: inline-block;
	margin-left: 0;
	margin-right: 0;
}

/* ---------------------------------------------------------------------------
   Aufmacherbild im Einzelbeitrag (.ld-hero-image in templates/single.html):
   NIE ueber die native Bildbreite hinaus vergroessern. Grosse Bilder fuellen
   weiter die Contentbreite, kleine Altbilder (600-900px) erscheinen ehrlich
   in Originalgroesse, mittig - statt hochskaliert und pixelig. Core setzt auf
   .wp-block-post-featured-image img sonst width:100%.
   -------------------------------------------------------------------------- */
.wp-block-post-featured-image.ld-hero-image {
	text-align: center;
}

.wp-block-post-featured-image.ld-hero-image img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* In den Karten der Beitragsliste ist Beschneiden/Fuellen weiterhin gewollt
   (kleine Flaeche, einheitliches 4:3-Raster) - die Karten-Regel weiter unten
   (aspect-ratio + object-fit: cover) bleibt bewusst bestehen. */

/* Karten nutzen den dezenten 3px-Radius, wie im Shop bei Buttons/Panels gemessen. */
.ld-card,
.wp-block-query .wp-block-post {
	border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Alt-Content aus Shopware: Tabellen und Farb-Boxen.

   Am Live-Original (Human-Centric-Lighting-Beitrag) nachgemessen: Shopware
   legt global table{border-collapse:separate;border-spacing:1px} plus
   td{background:#fff}, th/thead td{background:#897965;color:#fff} und
   tr:nth-child(even) td{background:#f5f5f5} unter den Content. Eine
   Tabellen-Hintergrundfarbe (z.B. style="background-color: #8f826e") scheint
   dadurch nur als feine Rasterlinie zwischen den weissen Zellen durch -
   NICHT als Flaeche. Ohne diese Basis rendert WordPress die Taupe-Flaeche
   voll und Taupe-Text der ersten Spalte wird unsichtbar. Wir bilden die
   Shopware-Basis deshalb 1:1 nach.
   -------------------------------------------------------------------------- */
.entry-content table,
.wp-block-post-content table {
	border-collapse: separate;
	border-spacing: 1px;
	max-width: 100%;
	table-layout: auto;
}

.entry-content table td,
.wp-block-post-content table td {
	background: var(--wp--preset--color--white);
	padding: 5px 10px;
	border: 1px solid var(--wp--preset--color--sand);
}

.entry-content table th,
.entry-content table thead td,
.wp-block-post-content table th,
.wp-block-post-content table thead td {
	background: var(--wp--preset--color--greige);
	color: var(--wp--preset--color--black);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 5px 10px;
}

.entry-content table tr:nth-child(even) td,
.wp-block-post-content table tr:nth-child(even) td {
	background: var(--wp--preset--color--cream);
}

.entry-content table img,
.wp-block-post-content table img {
	max-width: 100%;
	height: auto;
}

/* Zellen/Boxen mit EIGENER Inline-Hintergrundfarbe (z.B. die Taupe-Boxen mit
   color: #ffffff auf der Zelle): Inline-Styles gewinnen gegen die weisse
   Zellen-Basis, und ALLE Text-Kinder darin erben die Schriftfarbe der Box,
   statt die Theme-Standardfarbe zu behalten (das war der Dunkel-auf-dunkel-
   Bug). Wichtig: :not(table) - die inherit-Kaskade darf nur von dem Element
   ausgehen, das die Flaeche wirklich traegt, nicht von einer Tabelle, deren
   Hintergrund nur als Rasterlinie sichtbar ist (sonst wuerde z.B. eine weisse
   Zelle mit Inline-color:#ffffff ihre Ueberschrift weiss auf weiss faerben).
   Gilt auch fuer das alte bgcolor="..."-Attribut. */
.entry-content :not(table)[style*="background-color"],
.entry-content :not(table)[style*="background-color"] *,
.entry-content :not(table)[bgcolor],
.entry-content :not(table)[bgcolor] *,
.wp-block-post-content :not(table)[style*="background-color"],
.wp-block-post-content :not(table)[style*="background-color"] *,
.wp-block-post-content :not(table)[bgcolor],
.wp-block-post-content :not(table)[bgcolor] * {
	color: inherit;
}

/* Links in solchen Boxen wuerden sonst farblich untergehen (Gold auf Taupe) -
   deshalb dort immer unterstrichen, damit sie als Links erkennbar bleiben. */
.entry-content :not(table)[style*="background-color"] a,
.entry-content :not(table)[bgcolor] a,
.wp-block-post-content :not(table)[style*="background-color"] a,
.wp-block-post-content :not(table)[bgcolor] a {
	text-decoration: underline;
}

/* Breite Alt-Tabellen auf schmalen Screens: horizontal scrollen statt das
   Layout zu sprengen. (Nur mobil - auf Desktopbreite fuellen die Tabellen
   die Spalte normal, display:block wuerde dort Leerflaechen erzeugen.) */
@media (max-width: 781px) {
	.entry-content table,
	.wp-block-post-content table {
		display: block;
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
   Kicker-Metazeile (Datum + Verfasser) - Versal-Label nach A2/A3:
   14px / 600 / letter-spacing 0.14em / Gold. Magenta bleibt ungenutzt
   (Designsystem A1: Magenta nur fuer Preis/Prozent-Badge/Newsletter-CTA,
   die es im Magazin nicht gibt).
   -------------------------------------------------------------------------- */
.ld-meta-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 1rem;
}

.ld-meta-kicker .wp-block-post-author-name {
	color: var(--wp--preset--color--brown);
}

.ld-meta-kicker .ld-meta-sep {
	color: var(--wp--preset--color--sand);
}

/* ---------------------------------------------------------------------------
   Beitragskarten (Startseite/Archiv) - Beitragsbild, Titel, Datum, Auszug.
   Der Seitengrund liegt auf Weiss (A1 von Vorschlag 4: Creme nur fuer
   eingestreute Kaesten/Zebra, nie fuer die ganze Seite) - Karten sind damit
   weiss auf weiss. Der Sand-Rahmen bekommt deshalb einen leichten
   Basis-Schatten dazu, damit die Kartenabgrenzung auch im Ruhezustand
   sichtbar bleibt, nicht erst beim Hover.
   -------------------------------------------------------------------------- */
.wp-block-query .wp-block-post {
	overflow: hidden;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-query .wp-block-post:hover {
	border-color: var(--wp--preset--color--gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.wp-block-query .wp-block-post:active {
	transform: scale(0.98);
}

.wp-block-query .wp-block-post .wp-block-post-featured-image img {
	border-radius: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Header - dreiteilig wie die Shop-Kopfzeile (Struktur weiter am Shop
   orientiert, Farben seit v1.1.0 aus dem neuen Designsystem): obere Zeile
   mit Suchfeld links und Logo mittig, darunter das zentrierte Navigationsband
   auf Sand (das Band endet wie im Shop ohne Linie). Markup kommt aus
   patterns/header.php (Locale-Weiche DE/EN).
   -------------------------------------------------------------------------- */

/* Obere Zeile: 3 Spalten (Suche | Logo | leer), Logo dadurch exakt mittig.
   Inhalt an der contentSize-Kante (1160px) ausgerichtet - dieselbe Flucht wie
   Beitragstitel und Fliesstext im Einzelbeitrag (Designsystem B3: Header-
   Inhaltszeile und Nav-Band-Inhalt folgen contentSize, nicht wideSize).
   Das seitliche Padding schrumpft ab 1160px Fensterbreite auf 0, damit die
   Suchfeld-Kante exakt auf derselben linken Flucht liegt wie Beitragstitel
   und Fliesstext (deren linke Kante liegt ab breiten Fenstern bei
   (100vw - 1160px) / 2, darunter beim Root-Padding 1.5rem aus theme.json). */
.ld-header-top {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	max-width: var(--wp--style--global--content-size, 1160px);
	margin: 0 auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: clamp(0px, calc(1.5rem - (100vw - 1160px) / 2), 1.5rem);
	padding-right: clamp(0px, calc(1.5rem - (100vw - 1160px) / 2), 1.5rem);
}

.ld-header-search-wrap {
	justify-self: start;
	width: 100%;
	max-width: 320px;
}

.ld-header-spacer {
	justify-self: end;
}

/* Logo: Original 2000x924px (Retina-tauglich, randlos inkl. Unterzeile
   "exklusives Licht mit Konzept"). Passt sich in eine Box von max. 150x65px
   ein, Proportionen (~2,16:1) bleiben exakt erhalten - bei 2,16:1 begrenzt
   faktisch die 65px-Hoehe auf ~140px Breite. CSS skaliert das grosse
   Original, dadurch Retina-scharf. */
.ld-logo {
	justify-self: center;
	text-align: center;
}

.ld-logo img {
	max-width: 150px;
	max-height: 65px;
	width: auto;
	height: auto;
	display: block;
}

/* Suchfeld im Unterstrich-Stil des Shops: kein Rahmen ausser einer feinen
   Linie unten (Trennlinien sind immer Sand, A4), Lupe dezent in Brown, kein
   Radius. */
.ld-header-search .wp-block-search__inside-wrapper {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--sand);
	border-radius: 0;
	padding: 0;
	background: var(--wp--preset--color--white);
}

.ld-header-search .wp-block-search__input {
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--black);
	padding: 0.5rem 0.25rem;
}

/* outline:none braucht immer einen Ersatz (A3) - die Unterlinie wechselt bei
   Tastatur- wie Maus-Fokus auf Gold Dark. */
.ld-header-search .wp-block-search__input:focus {
	outline: none;
}

.ld-header-search .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--wp--preset--color--gold-dark);
}

.ld-header-search .wp-block-search__button {
	border: none;
	background: transparent;
	color: var(--wp--preset--color--brown);
	padding: 0 0.5rem;
	margin: 0;
	cursor: pointer;
}

.ld-header-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--gold-dark);
}

/* Navigationsband: zentriert, Grossbuchstaben. Flaeche jetzt Sand statt des
   altpalettenfremden #f7f7f7 (Designsystem-Umstellung 29.7., kein eigener
   Grauton mehr - Sand ist der Flaechen-/Trennlinien-Token, A1). Normale
   Punkte in Brown (Nav-Punkte folgen der A-Logik "Brown oder Black"), aktiv/
   Hover in Gold Dark (Teil C: #b49d83 -> --gold-dark, Rolle "Links und
   Buttons"). Flach: 45px hoch, Punkte vertikal zentriert (Zeilenhoehe =
   Bandhoehe = 45px Touch-Ziel). Der Hintergrund laeuft als Farbband
   fensterbreit weiter, der Inhalt ist an der contentSize-Kante (1160px)
   ausgerichtet - dieselbe Flucht wie die Suche im Header und der Fliesstext
   im Beitrag. Burger-Overlay bleibt unveraendert. */
.ld-nav-band {
	background-color: var(--wp--preset--color--sand);
}

.ld-main-nav {
	padding: 0;
	min-height: 45px;
	align-items: center;
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.ld-main-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brown);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	padding: 0 0.875rem;
	line-height: 45px;
}

.ld-main-nav .wp-block-navigation-item__content:hover,
.ld-main-nav .current-menu-item > .wp-block-navigation-item__content,
.ld-main-nav .ld-nav-aktiv > .wp-block-navigation-item__content,
.ld-main-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--gold-dark);
	text-decoration: none;
}

/* Aktiver Menuepunkt: Gold Dark UND fett, Hover Gold Dark ohne fett (Shop-
   Verhalten unveraendert uebernommen, nur die Farbe ist auf das neue System
   gemappt). Der Aktiv-Zustand kommt serverseitig als Klasse ld-nav-aktiv aus
   patterns/header.php (robust auch in Vorschauen); die WP-eigenen current-
   Klassen bleiben als Fallback. */
.ld-main-nav .current-menu-item > .wp-block-navigation-item__content,
.ld-main-nav .ld-nav-aktiv > .wp-block-navigation-item__content,
.ld-main-nav .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
}

/* Kein Klick-Rechteck an Menuepunkten und Header-Elementen: Outline nur beim
   Maus-Fokus unterdruecken - Tastatur-Fokus (:focus-visible) behaelt seinen
   sichtbaren Indikator in Gold Dark (Barrierefreiheit, A3-Farb-Update). */
.ld-header a:focus:not(:focus-visible),
.ld-header button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.ld-header a:focus-visible,
.ld-header button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-dark);
	outline-offset: 2px;
}

/* Mobil: Logo kleiner (Shop: 35px), Suche in voller Breite ueber dem Logo. */
@media (max-width: 781px) {
	.ld-header-top {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0.75rem;
	}

	.ld-header-search-wrap {
		max-width: 100%;
		justify-self: stretch;
	}

	.ld-header-spacer {
		display: none;
	}

	.ld-logo img {
		max-width: 120px;
		max-height: 56px;
	}
}

/* ---------------------------------------------------------------------------
   Footer (Markup aus patterns/footer.php, Texte/Links 1:1 vom Live-Shop
   uebernommen, Farben ab v1.1.0 auf das neue Designsystem umgestellt): Gold
   ersetzt das bisherige Taupe als Footer-Flaeche (A1: "Footer-Flaeche" ist
   ausdruecklich eine Gold-Rolle - siehe OFFENE_PUNKTE.md), 4 Spalten auf
   1460px zentriert (wideSize, dieselbe Flucht-Formel wie im Header, nur mit
   der breiteren Kante fuer Karten-/Footer-Raster statt der Lesespalte),
   Spaltentitel fett weiss, Links weiss mit Unterstrich-Hover; darunter die
   Copyright-Zeile auf der Gold-Flaeche (kein eigenes schwarzes Band, siehe
   v1.0.7-Korrektur).
   -------------------------------------------------------------------------- */
.ld-footer {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
	margin-top: 3rem;
}

.ld-footer-inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	max-width: 1460px;
	margin: 0 auto;
	padding-top: 3rem;
	padding-bottom: 2.5rem;
	/* Flucht wie im Header, aber auf wideSize: Padding schrumpft ab 1460px
	   Fensterbreite auf 0. */
	padding-left: clamp(0px, calc(1.5rem - (100vw - 1460px) / 2), 1.5rem);
	padding-right: clamp(0px, calc(1.5rem - (100vw - 1460px) / 2), 1.5rem);
}

.ld-footer-headline {
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.625;
	margin: 0 0 0.75rem 0;
	letter-spacing: 0.02em;
}

.ld-footer-text {
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0 0 1rem 0;
}

.ld-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ld-footer a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.ld-footer-tel {
	font-size: 1.1875rem;
	font-weight: 700;
}

.ld-footer-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ld-footer-liste li {
	margin: 0;
	padding: 0;
}

.ld-footer-liste a {
	display: block;
	padding: 0.3rem 0;
	font-size: 0.875rem;
}

/* Newsletter-Feld-Optik: sieht aus wie Eingabefeld + Knopf, ist aber EIN Link
   auf die Shop-Newsletter-Seite (Shopware lehnt externe POSTs ohne
   CSRF-Token ab, siehe OFFENE_PUNKTE.md). Knopf folgt der globalen
   Knopf-Regel (Gold Dark, Hover Brown, A1) plus Hover-Lift/Active-Scale
   (A3/A6). */
.ld-newsletter-optik {
	display: flex;
	align-items: stretch;
	text-decoration: none;
	margin-bottom: 0.75rem;
	transition: transform 0.15s ease;
}

.ld-newsletter-optik:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.ld-newsletter-optik:active {
	transform: scale(0.98);
}

.ld-newsletter-feld {
	flex: 1 1 auto;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--greige);
	font-size: 0.8125rem;
	padding: 0.65rem 0.75rem;
	border-radius: 3px 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ld-newsletter-knopf {
	flex: 0 0 auto;
	background: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	padding: 0.65rem 1rem;
	border-radius: 0 3px 3px 0;
	white-space: nowrap;
}

.ld-newsletter-optik:hover .ld-newsletter-knopf {
	background: var(--wp--preset--color--brown);
}

.ld-newsletter-privacy {
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0;
}

.ld-newsletter-privacy a {
	text-decoration: underline;
}

/* Footer-Abschluss (seit v1.0.7: kein eigenes schwarzes Band - der Shop
   schliesst auf der Footer-Flaeche mit einer feinen hellen Trennlinie und
   zentrierten Zeilen ab). Das Magazin zeigt dort nur die Copyright-Zeile -
   ohne MwSt-Fussnote und Widerruf-Button. Breite wie ld-footer-inner auf
   wideSize (1460px). */
.ld-footer-abschluss {
	max-width: 1460px;
	margin: 0 auto;
	box-sizing: border-box;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	text-align: center;
	padding-top: 1.25rem;
	padding-bottom: 1.5rem;
	padding-left: clamp(0px, calc(1.5rem - (100vw - 1460px) / 2), 1.5rem);
	padding-right: clamp(0px, calc(1.5rem - (100vw - 1460px) / 2), 1.5rem);
}

.ld-footer-copyright {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

/* Mobil: Spalten untereinander. */
@media (max-width: 991px) {
	.ld-footer-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.ld-footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ---------------------------------------------------------------------------
   Mobile Feinheiten - Typo-Stufen etwas kompakter auf schmalen Bildschirmen,
   Karten einspaltig (Query-Loop-Grid faellt ohnehin per minimumColumnWidth um,
   das hier ist nur die Feinjustierung fuer sehr kleine Screens).
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	:where(.wp-block-post-title) {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}

	.ld-meta-kicker {
		font-size: 0.8125rem;
		letter-spacing: 0.12em;
	}
}

/* ---------------------------------------------------------------------------
   Zustaende (A3/A6): Hover hebt Buttons/Karten/Links 2px, :active skaliert
   auf 0.98, :focus-visible bekommt einen sichtbaren Ring in Gold Dark statt
   outline:none ohne Ersatz. prefers-reduced-motion schaltet die Bewegung ab,
   der Farbwechsel bleibt erhalten. Fliesstext-Links (A4) bekommen eine
   Unterlaenge von rund 3px.
   -------------------------------------------------------------------------- */
.entry-content a,
.wp-block-post-content a,
.wp-block-post-excerpt a {
	text-underline-offset: 3px;
}

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

:where(a, button, .wp-element-button, .wp-block-button__link, input[type="submit"], input[type="search"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query .wp-block-post,
	.wp-element-button,
	.wp-block-button__link,
	.ld-newsletter-optik {
		transition-property: color, background-color, border-color, box-shadow;
		transform: none !important;
	}
}