/*
 Theme Name:   eifel.xyz — GeneratePress Child
 Theme URI:    https://eifel.xyz/
 Description:  Child-Theme für eifel.xyz. Enthält die Farbwelt nach dem Vorbild der
               GeneratePress-Starter-Site "Wilder", die Gestaltung der Startseiten-
               bausteine und den ersetzten Fußzeilen-Hinweis.
 Author:       Thomas Koll
 Author URI:   https://eifel.xyz/impressum/
 Template:     generatepress
 Version:      1.9
 Text Domain:  eifel-child
*/

/* ==========================================================================
   eifel.xyz — Farb- und Gestaltungsschema
   Grundlage: GeneratePress 3.6.1 · Farbwelt nach der Starter Site "Wilder"

   DIESE DATEI IST DIE style.css DES CHILD-THEMES.
   Sie wird vollständig ersetzt — alles markieren, einfügen, speichern.
   Einbauort: Design → Theme-Datei-Editor → Theme "eifel.xyz — GeneratePress
   Child" → style.css

   ℹ️ Das Umbenennen im Kopf oben ändert nur den Anzeigenamen. WordPress
   erkennt das aktive Theme am Ordnernamen (generatepress_child), nicht am
   Theme Name — die Seite bleibt also aktiv und es geht nichts verloren.

   FASSUNGEN
   ---------
   1.0  Grundschema
   1.1  zwei an der laufenden Seite gemessene Korrekturen:
        Copyright-Leiste (.site-info) und Knopf-Spezifität
   1.2  Aufmacher (Abschnitt 10), Abschnittsüberschriften mit mehr Gewicht,
        Kacheln mit Rahmen und festem Seitenverhältnis, Themen als dunkles
        Band, Einleitungssatz hell statt dunkel
   1.3  Theme-Header auf eifel.xyz und Thomas Koll umgeschrieben; diese Datei
        wird ab jetzt immer vollständig geliefert
   1.4  Randlose Abschnitte statt Kästen (Abschnitt 11). Grundlage ist eine
        Messung beider Seiten am 25.08.2026:

          Wilder      no-sidebar · full-width-content · .inside-article ohne
                      Polster und ohne Hintergrund · Abschnitte je 128 px
                      Polster oben und unten, Aufmacher 192 px
          eifel.xyz   right-sidebar · eingerückt · .inside-article als weiße
                      Box im 1200-px-Kasten

        ⚠️ VORAUSSETZUNG: Die Startseite muss im Editor unter „Layout" auf
        Seitenleiste = „Inhalt (keine Seitenleisten)" und Container = „Volle
        Breite" stehen. Ohne das fängt GeneratePress die randlosen Blöcke
        wieder ein. Diese beiden Felder sind über die REST-Schnittstelle
        NICHT erreichbar (geprüft: _generate_sidebar_layout und
        _generate_container_type werden als ignored_keys abgewiesen).
   1.5  Nach der Messung an der umgestellten Seite feinjustiert: Abschnitts-
        polster von 112 auf 128 px (Wilders Wert), Aufmacher von fester
        460-px-Höhe auf mitwachsende Höhe.
   1.6  Innenseiten (Abschnitt 12). Gemessen am 25.08.2026:
          /eifel-orte/monschau/   Textbreite 1732 px  → ~200 Zeichen je Zeile
          /radtour-durch-das-…/   Textbreite 1147 px  → ~135 Zeichen je Zeile
        Lesbar sind 60 bis 75.

   1.7  drei an Fassung 1.6 gemessene Korrekturen:
        · Ausbrecher (Bilder, Tabellen, Karten) von 100 % auf 64 rem gedeckelt —
          die Leaflet-Karte auf /eifel-orte/monschau/ lief sonst über 1705 px
          neben 704 px Lesetext
        · Inhaltsverzeichnis von display:table auf block; es war 104 px breit
        · Änderungsdatum wieder eingeblendet — GeneratePress versteckt es. Die
          in 1.6 beschriebene ineinanderlaufende Datumszeile war deshalb nur im
          Quelltext zu sehen, nicht am Bildschirm.

   1.8  Beitragsbild gedeckelt. Gemessen an Fassung 1.7 auf
        /eifel-orte/monschau/: Bild 1897 × 1256 px, Seitentitel bei y = 1519
        bei 994 px Fensterhöhe. Mit Deckel: 457 px hoch, Titel bei y = 720.

   1.9  Beigestreifen zwischen Beitragsbild und Inhaltskasten geschlossen.
        Gemessen auf /eifel-orte/monschau/: Bildunterkante y = 592, weißer
        Kasten ab y = 624 — 32 px Seitenhintergrund dazwischen. Jetzt 0.

   WIE ES ARBEITET
   ---------------
   GeneratePress malt seine Oberfläche über CSS-Variablen. Gemessen am
   25.08.2026 gibt das Theme im Kopf aus:

     :root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;
           --base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be;}
     body{background-color:var(--base-2);color:var(--contrast);}
     a{color:var(--accent);}

   Abschnitt 1 überschreibt sechs dieser sieben Variablen mit Werten aus der
   Wilder-Demo und ergänzt drei eigene (contrast-3, eifel-erde, eifel-sand).
   Was aus Wilder stammt und was nicht, steht an der jeweiligen Zeile.

   ℹ️ REIHENFOLGE — passt bereits. GeneratePress gibt seine Farben als
   <style id="generate-style-inline-css"> an Position 45.494 aus und bindet das
   Child-Stylesheet bei 52.663 ein, also danach. Gemessen an der laufenden
   Seite; es ist keine Abhängigkeit in der functions.php nötig.

   ⚠️ DOPPELTE PFLEGE VERMEIDEN: Werden die Farben später im Customizer unter
   „Globale Farben" gesetzt, gehört Abschnitt 1 hier ENTFERNT. Sonst stehen die
   Werte an zwei Stellen und eine Änderung im Customizer verpufft.

   ⚠️ NICHT IN DIESER DATEI: der Fußzeilentext. Der steht in der functions.php
   des Child-Themes (Filter generate_copyright).
   ========================================================================== */


/* 1 · Farbpalette
   -------------------------------------------------------------------------
   Werte aus den CSS-Variablen der Wilder-Demo ausgelesen, nicht geschätzt.
   Kontraste nach WCAG-Formel gerechnet.
   ------------------------------------------------------------------------- */

:root {
	--base:        #F5F3EB;  /* warmes Cremeweiß — Seitenhintergrund          */
	--base-2:      #FFFFFF;  /* Weiß — Karten, Artikelflächen                 */
	--base-3:      #FFFFFF;
	--contrast:    #2E3D29;  /* dunkles Waldgrün — Text        10,41:1 auf base */
	--contrast-2:  #576452;  /* Graugrün — Meta, Datum          5,64:1        */
	--contrast-3:  #8C9787;  /* helles Graugrün — Linien, Rahmen              */
	                         /* ⚠️ NICHT aus Wilder übernommen: Die Demo führt
	                            keinen contrast-3. Von mir aus contrast-2
	                            aufgehellt. Nur dekorativ verwendet (Trennlinie
	                            unter Abschnittsüberschriften, 2,74:1) — für
	                            Text ist der Ton zu schwach. */
	--accent:      #55722F;  /* Moosgrün — Links, Knöpfe        4,93:1        */

	/* Zwei Töne, die GeneratePress von Haus aus nicht kennt: */
	--eifel-erde:  #A1683A;  /* Erdbraun  ⚠️ 4,15:1 — nur GROSSER Text/Flächen */
	--eifel-sand:  #D9B382;  /* Sand — Schrift auf dunklen Flächen  5,90:1     */
}


/* 2 · Grundflächen
   ------------------------------------------------------------------------- */

body {
	/* GeneratePress nimmt hier --base-2 (Weiß). Wilder setzt den warmen Ton
	   als Seitenhintergrund und Weiß nur für die Inhaltsflächen. */
	background-color: var(--base);
}

/* Beiträge und Seiten als weiße Karte auf dem warmen Grund. */
.inside-article,
.sidebar .widget,
.comments-area {
	background-color: var(--base-2);
	padding: 2.5em;
	border-radius: 4px;
}

.separate-containers .site-main {
	background-color: transparent;
}


/* 3 · Kopf und Navigation
   ------------------------------------------------------------------------- */

.site-header {
	background-color: var(--base-2);
	border-bottom: 3px solid var(--contrast);
}

.main-navigation {
	background-color: var(--contrast);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--base);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-color: var(--accent);
	color: #FFFFFF;
	/* Bewusst NICHT das Erdbraun: Es läge auf dem Waldgrün bei rund 2,3:1
	   und wäre schlechter lesbar als die inaktiven Punkte. Genau dieser
	   Fehler steckte im alten Magazine-Pro-Design (2,18:1). */
}

.main-navigation ul ul {
	background-color: var(--contrast);
}

.site-branding .main-title a {
	color: var(--contrast);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-description {
	color: var(--contrast-2);
}


/* 4 · Fußzeile
   ------------------------------------------------------------------------- */

.site-footer,
.footer-widgets,
.site-info {
	background-color: var(--contrast);
	color: var(--base);
}

/* ⚠️ .site-info MUSS einzeln stehen. GeneratePress setzt darauf
   `.site-info { background-color: var(--base-3) }` — ohne diese Zeile bliebe
   die Copyright-Leiste weiß und der cremefarbene Text darauf unlesbar.
   Am 25.08.2026 an der laufenden Seite gemessen. */

.footer-widgets .widget-title,
.site-footer h2,
.site-footer h3 {
	color: var(--eifel-sand);
}

.site-footer a,
.footer-widgets a {
	color: var(--base);
	text-decoration: underline;
}

.site-footer a:hover,
.footer-widgets a:hover {
	color: var(--eifel-sand);
}

/* Der Hinweis „Erstellt mit GeneratePress" gehört im Customizer unter
   Layout → Fußzeile → Copyright ersetzt. Nur falls das dort nicht geht,
   diese Zeile einkommentieren — sie blendet die ganze Zeile aus, also
   auch das eigene Copyright:
   .copyright-bar { display: none; } */


/* 5 · Links, Knöpfe, Überschriften
   ------------------------------------------------------------------------- */

a:hover,
a:focus {
	color: var(--eifel-erde);
	/* Erdbraun ist hier vertretbar: Hover-Zustand, kurze Sichtbarkeit,
	   und der Link ist unterstrichen. Für Fließtext im Ruhezustand nicht. */
}

h1, h2, h3, h4, h5, h6 {
	color: var(--contrast);
}

/* ⚠️ Spezifität: GeneratePress setzt Knopffarben über
   `.wp-block-button .wp-block-button__link` (0,2,0) und gibt das in einem
   <style>-Block aus, der NACH diesem Stylesheet steht. Eine Regel mit nur
   `.wp-block-button__link` (0,1,0) verliert deshalb. Gemessen am 25.08.2026:
   Der Themen-Knopf blieb GeneratePress-grau (#55555E) statt sandfarben.
   Deshalb hier durchgehend die Elternklasse mitschreiben. */

.wp-block-button .wp-block-button__link,
button,
input[type="submit"],
.button {
	background-color: var(--accent);
	color: #FFFFFF;
	border-radius: 3px;
}

.wp-block-button .wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
	background-color: var(--contrast);
	color: var(--eifel-sand);
}


/* 6 · Bausteine der Startseite
   -------------------------------------------------------------------------
   Diese Klassen stehen im Seiteninhalt (Seite 12) und sonst nirgends.
   Der Inhalt trägt nur die Klassen, die Gestaltung steht hier.
   ------------------------------------------------------------------------- */

/* Das dunkle Band trägt jetzt der Aufmacher (Abschnitt 10). Der Einleitungssatz
   steht deshalb hell und ruhig darunter, damit nicht zwei dunkle Flächen
   übereinander liegen. */

.eifel-intro {
	border-left: 4px solid var(--accent);
	padding: 0.2rem 0 0.2rem 1.6rem;
	margin: 2.5rem 0 3rem;
}

.eifel-intro__lead {
	font-size: 1.3rem;
	line-height: 1.55;
	color: var(--contrast-2);
	margin-bottom: 0;
}

.eifel-abschnitt {
	margin-top: 4rem;
	margin-bottom: 1.8rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--contrast-3);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

/* Kleiner Farbakzent am Anfang jeder Abschnittsüberschrift — ersetzt die
   Zierschrift, die Wilder an dieser Stelle benutzt. */
.eifel-abschnitt::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.7rem;
	vertical-align: 0.15em;
	background-color: var(--accent);
}

.eifel-mehr {
	margin-top: 1.2rem;
	font-weight: 600;
}

.eifel-mehr a {
	text-decoration: none;
}

.eifel-mehr a:hover {
	text-decoration: underline;
}

.eifel-themen {
	background-color: var(--contrast);
	padding: 2rem;
	border-radius: 4px;
	justify-content: center;
	gap: 0.8rem;
}

.eifel-themen .wp-block-button .wp-block-button__link {
	background-color: var(--eifel-sand);
	color: var(--contrast);
	font-weight: 600;
}

.eifel-themen .wp-block-button .wp-block-button__link:hover {
	background-color: var(--eifel-erde);
	color: #FFFFFF;
}


/* 7 · Kachelraster — Handkacheln und Query-Loop-Raster gleich behandeln
   ------------------------------------------------------------------------- */

.eifel-kacheln .wp-block-column,
.eifel-raster .wp-block-post {
	background-color: var(--base-2);
	border: 1px solid rgba(46, 61, 41, 0.09);
	border-radius: 4px;
	overflow: hidden;
	padding-bottom: 1.4rem;
	box-shadow: 0 1px 3px rgba(46, 61, 41, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eifel-kacheln .wp-block-column:hover,
.eifel-raster .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(46, 61, 41, 0.15);
}

.eifel-kacheln figure,
.eifel-raster .wp-block-post-featured-image {
	margin: 0 0 1rem 0;
}

.eifel-kacheln img,
.eifel-raster .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ⚠️ Warum das nötig ist: Die sechs Handkacheln benutzen die Größe "medium",
   und die fällt je nach Ursprungsbild unterschiedlich aus — 300×200 bei den
   einen, 300×225 bei den anderen. Ohne festes Seitenverhältnis stehen die
   Kacheln unterschiedlich hoch. Gemessen am 25.08.2026. */

.eifel-kacheln h3,
.eifel-raster .wp-block-post-title {
	margin: 0 0 0.5rem 0;
	padding: 0 1.2rem;
	line-height: 1.25;
}

.eifel-kacheln h3 a,
.eifel-raster .wp-block-post-title a {
	color: var(--contrast);
	text-decoration: none;
}

.eifel-kacheln h3 a:hover,
.eifel-raster .wp-block-post-title a:hover {
	color: var(--accent);
}

.eifel-kacheln p,
.eifel-raster .wp-block-post-excerpt {
	padding: 0 1.2rem;
	margin-bottom: 0;
	color: var(--contrast-2);
	font-size: 0.95rem;
	line-height: 1.55;
}

.eifel-raster .wp-block-post-excerpt__more-text {
	display: none;
}


/* 8 · Kleine Bildschirme
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.inside-article,
	.sidebar .widget,
	.comments-area {
		padding: 1.5em;
	}

	.eifel-intro {
		padding: 1.5rem;
	}

	.eifel-intro__lead {
		font-size: 1.15rem;
	}

	.eifel-abschnitt {
		margin-top: 2rem;
	}
}


/* 9 · Schriften — bewusst NICHT gesetzt
   -------------------------------------------------------------------------
   Wilder nutzt Rubik (Text und Überschriften) und Amatic SC (Zierschrift).

   ⚠️ NICHT über eine @import-Zeile von fonts.googleapis.com einbinden. Seit
   dem Themewechsel lädt eifel.xyz KEINE externen Schriften mehr — das ist ein
   datenschutzrechtlicher Gewinn, den ein @import wieder zunichte machen würde.

   GP Premium bringt eine eigene Schriftbibliothek mit, die Schriften lokal
   ablegen kann (REST-Routen /generatepress-font-library/v1/upload-fonts und
   /optimize-google-fonts sind auf eifel.xyz vorhanden — Stand 25.08.2026).
   Der saubere Weg führt darüber, nicht über dieses Stylesheet.

   Sind die Dateien lokal abgelegt, hier ergänzen:

   :root { --eifel-schrift: 'Rubik', system-ui, sans-serif; }
   body, h1, h2, h3, h4, h5, h6, .main-navigation a { font-family: var(--eifel-schrift); }
   ------------------------------------------------------------------------- */


/* 10 · Aufmacher der Startseite
   -------------------------------------------------------------------------
   Der Cover-Block im Seiteninhalt trägt nur die Klasse .eifel-hero und die
   Standard-Abdunklung von WordPress (has-background-dim-60). Farbe und Maße
   stehen hier, nicht im Inhalt.

   Der Seitentitel des Themes wird auf der Startseite ausgeblendet, weil die
   H1 jetzt im Aufmacher steht — sonst stünden zwei H1 auf der Seite.
   ------------------------------------------------------------------------- */

.home .entry-header {
	display: none;
}

.eifel-hero {
	/* Wilders Aufmacher füllt den oberen Bildschirmbereich. Feste 460 px
	   wirkten auf großen Monitoren wie ein Streifen. */
	min-height: clamp(420px, 62vh, 700px);
	margin-bottom: 0;
	border-radius: 4px;
	align-items: flex-end;
}

/* Abdunklung: statt einer gleichmäßigen 60-%-Fläche ein Verlauf, der unten
   fast deckend ist und nach oben aufklart. Damit steht der Text immer auf
   dunklem Grund — unabhängig davon, wie hell das Foto an dieser Stelle ist —
   und das Motiv bleibt oben trotzdem sichtbar. */
.eifel-hero .wp-block-cover__background {
	opacity: 1;
	background: linear-gradient(
		to top,
		rgba(46, 61, 41, 0.92) 0%,
		rgba(46, 61, 41, 0.78) 35%,
		rgba(46, 61, 41, 0.30) 100%
	);
}

.eifel-hero .wp-block-cover__inner-container {
	padding-bottom: 0.5rem;
}

.eifel-hero__kicker {
	color: var(--eifel-sand);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.eifel-hero__titel {
	color: #FFFFFF;
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin-bottom: 0.8rem;
}

.eifel-hero__lead {
	color: var(--base);
	font-size: 1.15rem;
	line-height: 1.55;
	max-width: 46rem;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.eifel-hero {
		min-height: 340px;
	}

	.eifel-sektion > .wp-block-group__inner-container {
		max-width: 100%;
	}

	.eifel-hero__lead {
		font-size: 1rem;
	}

	.eifel-themen {
		padding: 1.4rem;
	}
}


/* 11 · Randlose Abschnitte — das Wilder-Skelett
   -------------------------------------------------------------------------
   Wilder baut die Startseite aus Abschnitten, die über die volle Fensterbreite
   laufen; nur der Inhalt darin ist begrenzt. Genau das bilden die Gruppen mit
   .alignfull im Seiteninhalt nach.
   ------------------------------------------------------------------------- */

/* Den Kasten auf der Startseite auflösen: keine weiße Fläche, kein Polster,
   keine Abrundung — die Abschnitte bringen ihre Flächen selbst mit. */
.home .inside-article {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

.home .site-content,
.home .content-area,
.home .site-main {
	padding: 0;
	margin: 0;
}

.home .entry-content {
	margin-top: 0;
}

/* Abschnitt: läuft randlos, Inhalt innen auf Wilders Containerbreite begrenzt. */
.eifel-sektion {
	/* 8rem = 128px — der an der Wilder-Demo gemessene Wert. */
	padding-top: clamp(2.75rem, 7vw, 8rem);
	padding-bottom: clamp(2.75rem, 7vw, 8rem);
	padding-left: 20px;
	padding-right: 20px;
}

.eifel-sektion > .wp-block-group__inner-container {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

.eifel-sektion--hell   { background-color: var(--base); }
.eifel-sektion--weiss  { background-color: var(--base-2); }

.eifel-sektion--dunkel {
	background-color: var(--contrast);
	color: var(--base);
}

.eifel-sektion--dunkel .eifel-abschnitt,
.eifel-sektion--dunkel h2,
.eifel-sektion--dunkel h3 {
	color: #FFFFFF;
	border-bottom-color: rgba(217, 179, 130, 0.35);
}

.eifel-sektion--dunkel .eifel-abschnitt::before {
	background-color: var(--eifel-sand);
}

/* Kicker: die kleine Zeile über der Abschnittsüberschrift. Ersetzt die
   Zierschrift, die Wilder an dieser Stelle einsetzt. */
.eifel-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 0.5rem;
}

.eifel-sektion--dunkel .eifel-kicker {
	color: var(--eifel-sand);
}

/* Innerhalb eines Abschnitts sitzt die Überschrift direkt unter dem Kicker,
   der große Abstand kommt jetzt vom Abschnitt selbst. */
.eifel-sektion .eifel-abschnitt {
	margin-top: 0;
}

/* Zweispalter „Was die Eifel ist": Text und Bild nebeneinander. */
.eifel-zweispalt {
	gap: clamp(2rem, 5vw, 4rem);
}

.eifel-bild img {
	border-radius: 4px;
	display: block;
	width: 100%;
	height: auto;
}

/* Der Aufmacher läuft ebenfalls randlos und braucht keine Abrundung mehr. */
.eifel-hero.alignfull {
	border-radius: 0;
}

.eifel-hero .wp-block-cover__inner-container {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

/* Das Themen-Band steht jetzt in einem dunklen Abschnitt — die eigene
   Hintergrundfläche daran entfällt. */
.eifel-sektion--dunkel .eifel-themen {
	background-color: transparent;
	padding: 0;
	justify-content: flex-start;
}

@media (max-width: 768px) {
	.eifel-sektion {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}


/* 12 · Innenseiten — Beiträge, Orts- und Verteilerseiten
   -------------------------------------------------------------------------
   Gilt für alles AUSSER der Startseite; die hat ihr eigenes Skelett in
   Abschnitt 11.

   Kern des Ganzen: die Zeilenlänge. Gemessen am 25.08.2026 lief der Text auf
   /eifel-orte/monschau/ über 1732 px und auf Beiträgen über 1147 px. Bei 17 px
   Schriftgröße sind das rund 200 beziehungsweise 135 Zeichen pro Zeile.
   Typografisch lesbar sind 60 bis 75. Deshalb wird der Lesetext begrenzt —
   Bilder, Tabellen, Karten und Kachelraster dürfen weiterhin ausbrechen.
   ------------------------------------------------------------------------- */

/* Der Artikel als ruhige weiße Fläche auf dem warmen Grund. */
body:not(.home) .inside-article {
	padding: clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 4px;
}

/* Lesetext auf eine vernünftige Zeilenlänge begrenzen und zentrieren. */
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > ul,
body:not(.home) .entry-content > ol,
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3,
body:not(.home) .entry-content > h4,
body:not(.home) .entry-content > blockquote,
body:not(.home) .entry-content > .wp-block-heading,
body:not(.home) .entry-content > .wp-block-paragraph,
body:not(.home) .entry-content > .wp-block-list,
body:not(.home) .entry-content > .wp-block-quote {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/* Was ausbrechen darf: alles Bildhafte und alle Raster — aber nicht beliebig
   weit. Gemessen am 25.08.2026 lief die Leaflet-Karte auf /eifel-orte/monschau/
   über 1705 px, neben 704 px Lesetext. 64 rem (1024 px) hält den Abstand zum
   Text sichtbar, ohne dass die Karte die Seite sprengt. */
body:not(.home) .entry-content > figure,
body:not(.home) .entry-content > .wp-block-image,
body:not(.home) .entry-content > .wp-block-gallery,
body:not(.home) .entry-content > .wp-block-table,
body:not(.home) .entry-content > .wp-block-embed,
body:not(.home) .entry-content > .wp-block-query,
body:not(.home) .entry-content > .wp-block-columns,
body:not(.home) .entry-content > iframe,
body:not(.home) .entry-content > .leaflet-map,
body:not(.home) .entry-content > .WPLeafletMap {
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
}

/* Lesetypografie: etwas größer und luftiger als der Theme-Standard
   (gemessen: 17 px auf 25,5 px Zeilenhöhe = 1,5). */
body:not(.home) .entry-content {
	font-size: 1.125rem;
	line-height: 1.7;
}

body:not(.home) .entry-content p {
	margin-bottom: 1.4em;
}

/* Überschriften im Fließtext bekommen denselben Akzent wie auf der Startseite. */
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > .wp-block-heading:is(h2) {
	margin-top: 2.6em;
	margin-bottom: 0.7em;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

body:not(.home) .entry-content > h2::before,
body:not(.home) .entry-content > .wp-block-heading:is(h2)::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.6rem;
	vertical-align: 0.16em;
	background-color: var(--accent);
}

body:not(.home) .entry-content > h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: 1.35rem;
	font-weight: 600;
}

/* Seitentitel */
body:not(.home) .entry-title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

/* Beitragsbild oben
   ⚠️ Gemessen am 25.08.2026 auf /eifel-orte/monschau/: das Bild lief
   1897 × 1256 px, der Seitentitel stand dadurch bei y = 1519 — bei 994 px
   Fensterhöhe also weit unterhalb der ersten Bildschirmseite. Wer die Seite
   öffnet, sieht ein Foto und sonst nichts. Deshalb ein Höhendeckel mit
   object-fit: cover; der Bildausschnitt wird beschnitten, nicht gestaucht.
   Gemessen mit Deckel: 1897 × 457 px, Titel bei y = 720. */
body:not(.home) .featured-image img,
body:not(.home) .post-image img {
	width: 100%;
	height: clamp(260px, 46vh, 560px);
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	display: block;
}

body:not(.home) .featured-image,
body:not(.home) .post-image {
	margin-bottom: 2rem;
}

/* ⚠️ Auf SEITEN (nicht auf Beiträgen) hängt das Beitragsbild als
   .featured-image.page-header-image direkt im <body>, also AUSSERHALB des
   weißen Inhaltskastens. Seine Außenabstand-Unterkante ließ dort einen
   Streifen Seitenhintergrund durchscheinen: gemessen am 25.08.2026 auf
   /eifel-orte/monschau/ endete das Bild bei y = 592, der weiße Kasten begann
   erst bei y = 624 — 32 px warmes Beige (#F5F3EB) quer über die ganze Breite.
   Hier auf null gesetzt; der Abstand zum Text kommt ohnehin aus dem
   Innenabstand von .site-content (gemessen 40 px).
   ℹ️ Auf Beiträgen heißt der Container .page-header-image-single und liegt
   INNERHALB des weißen Kastens — dort bleiben die 34 px als Abstand stehen. */
body:not(.home) .featured-image.page-header-image {
	margin-bottom: 0;
}

/* Meta-Zeile
   Im Quelltext stehen zwei <time>-Elemente unmittelbar hintereinander, ohne
   Trennzeichen: erst das Änderungs-, dann das Veröffentlichungsdatum. Sichtbar
   war davon bislang nur das Veröffentlichungsdatum, weil GeneratePress das
   Änderungsdatum ausblendet. Hier stehen beide, in der richtigen Reihenfolge
   und beschriftet.
   ℹ️ Wurde ein Beitrag nie geändert, gibt WordPress nur ein <time> aus; dann
   erscheint der Zusatz gar nicht. */
body:not(.home) .entry-meta {
	font-size: 0.875rem;
	color: var(--contrast-2);
	margin-bottom: 1.8rem;
}

body:not(.home) .entry-meta .posted-on {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
}

body:not(.home) .entry-meta .posted-on .entry-date.published { order: 1; }

/* GeneratePress blendet das Änderungsdatum in seiner main.min.css aus:
   .entry-header .gp-icon, .posted-on .updated { display: none }
   Hier wieder eingeblendet.
   → Soll es verborgen bleiben, diese Regel löschen; der Zusatz darunter
     entfällt dann von selbst, weil er an einem unsichtbaren Element hängt. */
body:not(.home) .entry-meta .posted-on .updated {
	order: 2;
	display: inline;
}

body:not(.home) .entry-meta .posted-on .updated::before {
	content: "· aktualisiert am";
	margin: 0 0.35em;
}

/* Seitenleiste
   Gemessen: 545 px von 1912 px Fensterbreite — zu breit, sie zieht Aufmerk-
   samkeit vom Text ab. */
#right-sidebar {
	max-width: 340px;
}

.sidebar .widget-title {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 1rem;
}

.sidebar .widget {
	margin-bottom: 1.5rem;
}

.sidebar .widget ul li {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(46, 61, 41, 0.08);
}

.sidebar .widget ul li:last-child {
	border-bottom: none;
}

/* Inhaltsverzeichnis (Easy Table of Contents) an die Palette angleichen. */
div#ez-toc-container {
	/* Das Plugin setzt display:table; der Kasten schrumpft dadurch auf die
	   Breite des Wortes „Inhalt" — gemessen 104 px. Als Block nimmt er die
	   Lesebreite ein. */
	display: block;
	width: auto;
	background-color: var(--base);
	border: 1px solid rgba(46, 61, 41, 0.12);
	border-left: 4px solid var(--accent);
	border-radius: 4px;
	box-shadow: none;
	max-width: 44rem;
	margin: 2rem auto 2.5rem;
	padding: 1.2rem 1.4rem;
}

div#ez-toc-container .ez-toc-title {
	color: var(--contrast);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.82rem;
	font-weight: 700;
}

div#ez-toc-container a {
	color: var(--contrast-2);
	text-decoration: none;
}

div#ez-toc-container a:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* Kommentare */
body:not(.home) .comments-area {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background: transparent;
}

body:not(.home) .comments-title,
body:not(.home) .comment-reply-title {
	font-size: 1.4rem;
	font-weight: 700;
}

body:not(.home) .comment-body {
	border-bottom: 1px solid rgba(46, 61, 41, 0.1);
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
}

/* Verteilerseiten wie /eifel-orte/ oder /eifelmaare/ dürfen ihre Kachelraster
   über die volle Artikelbreite ziehen. */
body:not(.home) .eifel-raster .wp-block-post-template {
	max-width: 100%;
}

@media (max-width: 1024px) {
	#right-sidebar {
		max-width: 100%;
	}
}