/**
 * Gegenlicht — Komponenten
 *
 * Farben, Schriften, Größen und Abstände stehen in theme.json und sind hier
 * nur als CSS-Variablen (var(--wp--preset--…)) in Gebrauch. Wer eine Farbe
 * ändern will, ändert sie dort, nicht hier.
 */

:root {
	--gl-papier:      var(--wp--preset--color--papier, #FBF9F5);
	--gl-papier-2:    var(--wp--preset--color--papier-2, #F3EFE7);
	--gl-flaeche:     var(--wp--preset--color--flaeche, #FFFFFF);
	--gl-tinte:       var(--wp--preset--color--tinte, #14120F);
	--gl-tinte-2:     var(--wp--preset--color--tinte-2, #4A443B);
	--gl-tinte-3:     var(--wp--preset--color--tinte-3, #7A736A);
	--gl-linie:       var(--wp--preset--color--linie, #E2DBCE);
	--gl-linie-stark: var(--wp--preset--color--linie-stark, #C7BCA9);
	--gl-licht:       var(--wp--preset--color--licht, #E4A11B);
	--gl-licht-tinte: var(--wp--preset--color--licht-tinte, #8A5D00);
	--gl-gegenrede:   var(--wp--preset--color--gegenrede, #1F3A4D);
	--gl-gegenrede-fl:var(--wp--preset--color--gegenrede-fl, #EDF1F3);
	--gl-grotesk:     var(--wp--preset--font-family--grotesk);
	--gl-radius:      2px;
}

/* ============================================================
   Grundlagen
   ============================================================ */
body { -webkit-font-smoothing: antialiased; }

a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

.entry-content a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--gl-licht);
	text-decoration-thickness: 2px;
}
.entry-content a:where(:not(.wp-element-button)):hover { background: #FBEED4; }

:focus-visible { outline: 2px solid var(--gl-licht); outline-offset: 2px; }

/* Sprungmarke zum Inhalt */
.skip-link.screen-reader-text:focus {
	background: var(--gl-tinte); color: var(--gl-papier);
	font-family: var(--gl-grotesk); font-size: .82rem; font-weight: 600;
	padding: .8rem 1.2rem; z-index: 100;
}

/* ============================================================
   Kopf und Fuß
   ============================================================ */
.gl-kopf { border-bottom: 1px solid var(--gl-linie); }
.gl-claim {
	font-family: var(--gl-grotesk); font-weight: 500; font-size: .7rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--gl-tinte-3); margin: .42rem 0 0;
}
.gl-marke { display: flex; align-items: center; gap: .85rem; }

/* Archivlink oben rechts — der einzige Weg aus dem Kopf heraus */
.gl-archivlink { margin: 0; }
.gl-archivlink a {
	font-family: var(--gl-grotesk); font-weight: 600; font-size: .82rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--gl-tinte-2); text-decoration: none;
	padding-bottom: .3rem; border-bottom: 2px solid transparent;
}
.gl-archivlink a:hover { color: var(--gl-tinte); border-bottom-color: var(--gl-linie-stark); }
.gl-archivlink--hier a { color: var(--gl-tinte); border-bottom-color: var(--gl-licht); }

.gl-fuss { background: var(--gl-tinte); color: #CFC7B8; }
.gl-fuss a { color: #CFC7B8; text-decoration: none; }
.gl-fuss a:hover { color: var(--gl-licht); }
.gl-fuss .wp-block-heading { color: #8F887C; }
.gl-fuss .wp-block-site-title a { color: var(--gl-papier); }
.gl-fuss ul,
.gl-fuss .wp-block-categories-list { list-style: none; margin: 0; padding: 0; }
.gl-fuss li { margin-bottom: .6rem; font-family: var(--gl-grotesk); font-size: .88rem; }

/* ============================================================
   Aufmacher — Bild oder berechnetes Motiv
   ============================================================ */
.gl-aufmacher {
	position: relative; overflow: hidden; margin: 0;
	background-color: var(--gl-tinte); border-radius: var(--gl-radius);
}
.gl-aufmacher__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aufmacher, der die Ueberschrift traegt */
.gl-aufmacher--titel {
	display: flex; align-items: flex-end;
	min-height: clamp(15rem, 26vw, 23rem);
}
.gl-aufmacher--titel .gl-aufmacher__bild {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.gl-aufmacher__schleier {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top,
		rgba(12, 10, 8, .82) 0%,
		rgba(12, 10, 8, .62) 34%,
		rgba(12, 10, 8, .18) 66%,
		rgba(12, 10, 8, 0) 100%);
}
.gl-aufmacher__text {
	position: relative; width: 100%;
	padding: clamp(1.4rem, 3vw, 2.6rem);
	padding-top: clamp(3rem, 8vw, 5rem);
}
.gl-aufmacher__kicker {
	font-family: var(--gl-grotesk); font-weight: 700; font-size: .7rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--gl-licht);
	display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem;
}
.gl-aufmacher__kicker::before {
	content: ""; width: 1.5rem; height: 2px; background: var(--gl-licht); flex: none;
}
/* Gattungshinweis in der Kickerzeile — „Glosse“ neben der Rubrik.
   Weiß statt bernsteinfarben, damit die Rubrik ihre Farbe behält und der
   Hinweis trotzdem gelesen wird. */
.gl-aufmacher__punkt { opacity: .55; margin: 0 .5rem; }
.gl-gattung { color: #FFF; }

.gl-aufmacher__titel {
	font-family: var(--gl-grotesk); font-weight: 800;
	font-size: clamp(1.7rem, 3.6vw, 2.85rem); line-height: 1.06;
	letter-spacing: -.022em; color: #FFF; margin: 0;
	max-width: 26ch; text-wrap: balance;
}

.gl-bildzeile {
	font-family: var(--gl-grotesk); font-size: .7rem; line-height: 1.45;
	color: var(--gl-tinte-3); margin: .55rem 0 0;
}

/* ============================================================
   Textbausteine
   ============================================================ */

/* Kicker — Rubrik über der Überschrift */
.is-style-kicker,
.gl-kicker {
	font-family: var(--gl-grotesk); font-weight: 700; font-size: .7rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--gl-licht-tinte);
	display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem;
}
.is-style-kicker::before,
.gl-kicker::before {
	content: ""; width: 1.5rem; height: 2px; background: var(--gl-licht); flex: none;
}

/* Meta-Zeile */
.is-style-meta {
	font-family: var(--gl-grotesk); font-weight: 500; font-size: .76rem;
	letter-spacing: .05em; color: var(--gl-tinte-3);
	border-top: 1px solid var(--gl-linie); padding-top: 1rem; margin-top: 1.5rem;
}
.is-style-meta a { color: var(--gl-tinte-2); }
.gl-meta--kopf { border-top: 0; padding-top: 0; margin-top: 0; }

/* Feine Linie zwischen Vorspann und Fliesstext */
.gl-trenner {
	border: 0; border-top: 1px solid var(--gl-linie);
	margin: var(--wp--preset--spacing--30, 2rem) 0;
	background: none; height: 0;
}

/* Vorspann und verwandte Einleitungen.
   Der Vorspann steht auf Fließtextgröße — er hebt sich durch Schnitt ab,
   nicht durch Größe. Das lässt der Überschrift den Vortritt und dem
   Vorspann trotzdem sein eigenes Gewicht. */
.is-style-vorspann,
.gl-intro {
	font-size: 1.1875rem; line-height: 1.56; color: var(--gl-tinte-2);
}
.is-style-vorspann {
	font-weight: 700; font-style: italic;
}

/* Zwischenthese — Zwischenüberschrift, die ein Argument trägt */
.is-style-these {
	max-width: 32ch; position: relative; padding-top: 1.4rem;
	margin-top: 2.9rem; margin-bottom: 1.1rem; text-wrap: balance;
}
.is-style-these::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: var(--wp--custom--lesespalte, 41rem); max-width: 100%;
	height: 1px; background: var(--gl-linie);
}

/* Kernsatz — der Satz, der beim Ueberfliegen haengen bleibt.
   Grotesk statt Serife, damit er sich vom Fliesstext abhebt, aber
   deutlich kleiner als eine Zwischenthese, damit die Rangfolge stimmt. */
.is-style-kernsatz {
	/* 2 pt über dem bisherigen Wert: 1,3rem = 20,8px, plus 2pt = 2,67px. */
	font-family: var(--gl-grotesk); font-weight: 700; font-style: italic;
	font-size: 1.467rem; line-height: 1.38; letter-spacing: -.008em;
	color: var(--gl-tinte); text-wrap: pretty;
	margin: 2.1rem 0; padding-left: 1.15rem;
	border-left: 3px solid var(--gl-licht);
}

/* Hervorhebung — ein Satz im Fließtext, der Gewicht bekommen soll.
   Bewusst leiser als der Kernsatz: gleiche Schrift, gleiche Größe, nur
   fett und mit grauer statt bernsteinfarbener Linie. Das Bernstein bleibt
   dem Kernsatz vorbehalten, sonst konkurrieren beide um dieselbe Aufmerksamkeit. */
.is-style-hervorhebung {
	font-weight: 700;
	margin-top: 6px; margin-bottom: 6px;
	padding-left: 1.15rem;
	border-left: 3px solid var(--gl-linie-stark);
}

/* Belegkasten */
.is-style-belegkasten {
	background: var(--gl-flaeche);
	border: 1px solid var(--gl-linie);
	border-top: 3px solid var(--gl-licht);
	border-radius: var(--gl-radius);
	padding: 1.6rem 1.65rem 1.35rem;
	margin-block: 2.2rem 2.4rem;
}
.is-style-belegkasten > .wp-block-heading:first-child,
.is-style-belegkasten > p:first-child {
	font-family: var(--gl-grotesk); font-weight: 700; font-size: .74rem;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--gl-licht-tinte); margin: 0 0 1rem;
}
.is-style-belegkasten ul { list-style: none; margin: 0; padding: 0; }
.is-style-belegkasten li {
	font-size: 1rem; line-height: 1.5; padding-left: 1.5rem; position: relative;
	margin-bottom: .9rem;
}
.is-style-belegkasten li:last-child { margin-bottom: 0; }
.is-style-belegkasten li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: .5rem; height: .5rem; background: var(--gl-licht); border-radius: 50%;
}

/* Gegenrede */
.is-style-gegenrede {
	background: var(--gl-gegenrede-fl);
	border-left: 4px solid var(--gl-gegenrede);
	border-radius: 0 var(--gl-radius) var(--gl-radius) 0;
	padding: 1.55rem 1.7rem 1.3rem;
	margin-block: 2.3rem;
}
.is-style-gegenrede > .wp-block-heading:first-child,
.is-style-gegenrede > p:first-child {
	font-family: var(--gl-grotesk); font-weight: 700; font-size: .74rem;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--gl-gegenrede); margin: 0 0 .85rem;
}
.is-style-gegenrede p { font-size: 1.02rem; line-height: 1.55; }
/* Letzter Absatz im Kasten ist die Attributionszeile */
.is-style-gegenrede > p:last-child {
	font-family: var(--gl-grotesk); font-size: .78rem; font-weight: 500;
	color: var(--gl-tinte-2);
	border-top: 1px solid rgba(31, 58, 77, .18);
	padding-top: .75rem; margin-top: 1rem; margin-bottom: 0;
}

/* Schlusszeile */
.is-style-schlusszeile {
	margin-block: 3rem 0; padding-block: 2rem 2.2rem;
	border-top: 2px solid var(--gl-tinte); border-bottom: 2px solid var(--gl-tinte);
	position: relative;
}
.is-style-schlusszeile::before {
	content: ""; display: block; width: 2.4rem; height: 4px;
	background: var(--gl-licht); margin-bottom: 1.3rem;
}
.is-style-schlusszeile p {
	font-family: var(--gl-grotesk); font-weight: 700;
	font-size: clamp(1.32rem, 2.7vw, 1.75rem); line-height: 1.28;
	letter-spacing: -.016em; margin: 0;
}

/* Zitat-Einschub */
.is-style-einschub {
	border-left: 3px solid var(--gl-licht); border-right: 0;
	padding-left: 1.6rem; margin-block: 2.6rem;
}
.is-style-einschub cite {
	display: block; font-family: var(--gl-grotesk); font-style: normal;
	font-size: .78rem; font-weight: 500; color: var(--gl-tinte-3); margin-top: .9rem;
}

/* Quellenapparat */
.is-style-quellen {
	font-size: .92rem; line-height: 1.5; color: var(--gl-tinte-2);
	padding-left: 1.5rem;
}
.is-style-quellen li { margin-bottom: .7rem; }
.is-style-quellen a { color: var(--gl-tinte); text-decoration-color: var(--gl-linie-stark); }
.gl-quellen-kopf {
	font-family: var(--gl-grotesk); font-weight: 700; font-size: .76rem;
	letter-spacing: .15em; text-transform: uppercase; color: var(--gl-tinte-3);
	border-top: 1px solid var(--gl-linie); padding-top: 1.6rem; margin-top: 3rem;
}

/* Quellenziffer im Fließtext: <sup class="gl-q"><a href="#q1">1</a></sup> */
.gl-q { font-size: .66em; vertical-align: .42em; line-height: 0; }
.gl-q a {
	font-family: var(--gl-grotesk); font-weight: 700;
	color: var(--gl-licht-tinte); text-decoration: none; padding: 0 .12em;
}
.gl-q a:hover { text-decoration: underline; }

/* Korrekturzeile */
.gl-korrektur {
	font-family: var(--gl-grotesk); font-size: .76rem; color: var(--gl-tinte-3);
	margin-top: 1.4rem;
}

/* Anschlussfrage am Textende — ein Satz, ein Ziel */
.gl-anschluss {
	margin-block: 3rem 3.6rem;
	padding-top: 1.6rem;
	border-top: 2px solid var(--gl-tinte);
}
.gl-anschluss::before {
	content: ""; display: block; width: 2.4rem; height: 4px;
	background: var(--gl-licht); margin-bottom: 1.2rem;
}
.gl-anschluss__satz {
	font-family: var(--gl-grotesk); font-weight: 700;
	font-size: clamp(1.12rem, 2.2vw, 1.34rem); line-height: 1.32;
	letter-spacing: -.012em; margin: 0; max-width: 34ch;
}
.gl-anschluss__satz em { font-style: normal; color: var(--gl-licht-tinte); }
.gl-anschluss__ziel { margin: .9rem 0 0; }
.gl-anschluss__ziel a {
	font-family: var(--gl-grotesk); font-weight: 600; font-size: .88rem;
	letter-spacing: .02em; text-decoration: none;
	border-bottom: 2px solid var(--gl-licht); padding-bottom: 2px;
}
.gl-anschluss__ziel a:hover { background: #FBEED4; }
.gl-anschluss__ziel a::after { content: " →"; }

/* Autorenbox */
.gl-autor {
	background: var(--gl-papier-2); border-radius: var(--gl-radius);
	padding: 1.6rem 1.7rem; margin-top: 2.6rem;
}
.gl-autor .wp-block-avatar img { border-radius: 50%; display: block; }
.gl-autor a { text-decoration: none; }
.gl-autor a:hover { text-decoration: underline; text-decoration-color: var(--gl-licht); }

/* Initial im ersten Absatz */
.entry-content > p.has-drop-cap:first-of-type::first-letter {
	font-family: var(--gl-grotesk); font-weight: 800; font-size: 3.55rem;
	line-height: .82; padding: .16rem .5rem 0 0; color: var(--gl-tinte);
}

/* ============================================================
   Listen und Karten
   ============================================================ */
.gl-stueck {
	border-top: 2px solid var(--gl-tinte); padding-top: 1.05rem;
}
.gl-stueck .wp-block-post-title a { text-decoration: none; }
.gl-stueck .wp-block-post-title a:hover {
	text-decoration: underline; text-decoration-color: var(--gl-licht);
	text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.gl-stueck .wp-block-post-excerpt__excerpt {
	font-size: .98rem; line-height: 1.55; color: var(--gl-tinte-2);
}

/* Archivliste */
.gl-liste .wp-block-post {
	border-bottom: 1px solid var(--gl-linie); padding-block: 1.35rem;
}
.gl-liste .wp-block-post-title { font-size: 1.06rem; font-weight: 700; letter-spacing: -.008em; }
.gl-liste .wp-block-post-title a { text-decoration: none; }
.gl-liste .wp-block-post-title a:hover { text-decoration: underline; }

/* Abo-Block */
.gl-abo { position: relative; overflow: hidden; }
.gl-abo::before {
	content: ""; position: absolute; right: -14%; top: -46%; width: 52%;
	aspect-ratio: 1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(228,161,27,.42) 0%, rgba(228,161,27,0) 68%);
}
.gl-abo > * { position: relative; }

/* ============================================================
   Editor — damit die Bausteine dort genauso aussehen
   ============================================================ */
.editor-styles-wrapper .is-style-these::before { width: 100%; }

/* ============================================================
   Druck
   ============================================================ */
@media print {
	.gl-archivlink, .gl-abo, .gl-fuss, .wp-block-post-navigation-link { display: none; }
	.gl-aufmacher--motiv { display: none; }
	body { background: #fff; font-size: 11pt; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ============================================================
   Bewegung
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Initialenzeichen statt Gravatar — kein externer Bildaufruf. */
.gl-initialen {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wp--preset--color--tinte, #1A1611);
  color: var(--wp--preset--color--licht, #B87E06);
  font-family: var(--wp--preset--font-family--grotesk, sans-serif);
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}