/* ── Pilzgarten Basis ─────────────────────────────────────────
   Globale Kleinigkeiten, die theme.json nicht abdeckt.        */

/* Gestalterische Kennwerte an einer Stelle statt verstreut im CSS.
   Am Original vermessen, aber als Absicht benannt — nicht als
   Implementierungsartefakt uebernommen. */
:root {
	--pg-header-hoehe:   110px;    /* Hoehe der Kopfleiste */
	--pg-nav-groesse:    1.1375rem;/* 18.2px — Navigation */
	--pg-inhalt-breite:  1300px;   /* Standard-Inhaltsbreite */
	--pg-splitt-luecke:  30px;     /* Spaltenluecke im Bild-Text-Splitt */

	/* Sektionsabstaende — am Original vermessen und zu einer kleinen
	   Skala zusammengefasst, statt an jeder Sektion eigene Zahlen
	   zu setzen. */
	--pg-abstand-eng:    25px;
	--pg-abstand-mittel: 50px;
	--pg-abstand-weit:   105px;
	--pg-abstand-ruhe:   240px;    /* grosszuegiger Innenraum (Demeter) */
}

/* Eyebrow-Stil (z. B. "DAS IST") */
.pg-eyebrow {
	font-family: var(--wp--preset--font-family--acanthus);
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* Kursive Zwischentitel im Original-Stil ("Unsere Frischpilze") */
.pg-italic-title {
	font-family: var(--wp--preset--font-family--acanthus);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;   /* Titel, nicht Fliesstext — kein Durchschuss */
	text-align: center;
}

/* Vertikale Trennlinie (Original: #strich3) */
.pg-vline {
	width: 1px;
	height: clamp(4rem, 10vh, 7rem);
	background: currentColor;
	margin-inline: auto;
}

/* Header: weiße UI-Chrome-Fläche. Standard: sticky ab oben
   (Unterseiten). Auf der Startseite überschreibt hero.css das mit
   dem Fly-in beim Scrollen. */
.pg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(29, 29, 27, 0.08);
}
.admin-bar .pg-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .pg-header { top: 46px; }
}

/* Header — Grid statt fester Pixelbreiten.
   "1fr auto 1fr" haelt das Logo bei JEDER Breite exakt mittig; die
   Menuepunkte verteilen sich gleichmaessig im verbleibenden Platz.
   Das ergibt dieselbe luftige Optik wie das 186px-Raster des
   Originals, skaliert aber von Tablet bis Ultrawide und bricht
   nicht, wenn ein Label laenger wird. */
.pg-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--pg-header-hoehe);
	gap: 0;
}
.pg-header .wp-block-navigation {
	font-size: var(--pg-nav-groesse);
	font-weight: 400;
	letter-spacing: normal;
}
.pg-header .wp-block-navigation__container {
	width: 100%;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	gap: 0;
}
/* Untermenues folgen ihrer eigenen Logik, nicht der Verteilung */
.pg-header .wp-block-navigation__submenu-container {
	justify-content: flex-start;
	width: auto;
}

.pg-logo-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 2rem;
}

/* Mobil: das Original hat hier gar keine Navigation — nach dem
   Scrollen erscheint kein Kopf. Statt diesen Mangel nachzubauen,
   klappen beide Menues zu je einem Burger zusammen. Die Aufteilung
   links/rechts um das Logo bleibt damit auch auf dem Handy lesbar. */
@media (max-width: 600px) {
	.pg-header__inner {
		grid-template-columns: auto 1fr auto;
		min-height: 72px;
	}
	.pg-logo-circle { padding-inline: 0; }
	.pg-logo-circle svg { width: 48px; height: 48px; }
	.pg-header .wp-block-navigation__container { width: auto; }
}

/* Sektionsabstaende: als Klasse am Block, nicht als Inline-Style im
   Pattern — so liegen alle Werte an einer Stelle. */
.pg-sektion--kacheln { padding-block: var(--pg-abstand-mittel) var(--pg-abstand-weit); }
.pg-sektion--splitt  { padding-block: var(--pg-abstand-eng); }

/* Demeter — im Original eine eingerueckte Box, kein vollbreites Band.
   Die Beige-Flaeche endet also mit Seitenabstand zum Fensterrand,
   und der Innenraum ist bewusst sehr grosszuegig. */
.pg-demeter {
	width: min(var(--pg-inhalt-breite), 100% - 8rem);
	margin-inline: auto;
	/* Oben weniger Polster als unten, weil hier zusaetzlich das
	   Demeter-Logo steht. Im Original faellt dessen SVG mangels
	   Breitenangabe auf 0 zusammen und beansprucht keinen Platz —
	   den Fehler bauen wir nicht nach, den Freiraum gleichen wir aus. */
	padding-block: calc(var(--pg-abstand-ruhe) - 90px) var(--pg-abstand-ruhe);
}
@media (max-width: 780px) {
	.pg-demeter { padding-block: var(--pg-abstand-weit); }
}
@media (max-width: 600px) {
	/* 8rem Rand je Seite waeren hier die halbe Bildschirmbreite */
	.pg-demeter { width: calc(100% - 2rem); }
}

/* Demeter-Zitat — 28.8px kursiv, also Titelgrad, nicht Fliesstext. */
.pg-zitat {
	font-size: 1.8rem;
	line-height: 1.27;
}

/* Bild-Text-Splitt (Know-how u. a.) — Original: zwei gleich breite
   Spalten mit 30px Lueckenmass, oben buendig. Der Core-Block setzt
   "50% auto" ohne Luecke; ein eigenes Grid ist hier kuerzer als
   Prozentrechnerei mit Innenabstaenden. */
.pg-splitt {
	grid-template-columns: 1fr 1fr;
	gap: var(--pg-splitt-luecke);
	align-items: start;
}
.pg-splitt .wp-block-media-text__content { padding: 0; }
@media (max-width: 780px) {
	.pg-splitt { grid-template-columns: 1fr; }
}

/* Aufrechter Serifentitel. Das Original fuehrt Acanthus als zwei
   getrennte Familien (Regular / Italic) — kursiv ist hier also
   ausdruecklich falsch, auch wenn die Kacheltitel kursiv sind. */
.pg-splitt__titel {
	font-family: var(--wp--preset--font-family--acanthus);
	font-style: normal;
	font-weight: 700;
	line-height: 1.1;
}

/* Header: Logo-Kreis */
.pg-logo-circle img {
	border-radius: 50%;
}

/* Kachel-Bilder: Hover ohne Plugin (ersetzt Image Hover Effects) */
.pg-card figure {
	overflow: hidden;
	margin-block-start: 14px; /* Titel gehoert zum Bild, nicht zum Block davor */
}
.pg-card img {
	transition: transform .5s ease, opacity .5s ease;
	display: block;
}
@media (hover: hover) {
	.pg-card a:hover img { transform: scale(1.04); opacity: .92; }
}

/* Fokus-Sichtbarkeit */
:where(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--schwarz);
	outline-offset: 3px;
}

/* ── Unterseiten (Gruppe "pilze" u. a.) ─────────────────────── */

/* Weißer Kreis hinter der Titel-Initiale (Original: Unterseiten-Hero) */
.pg-titlecircle {
	position: relative;
	display: inline-block;
	isolation: isolate; /* Kreis bleibt über der Farbfläche, hinter der Schrift */
}
.pg-titlecircle::before {
	content: "";
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss);
	left: -0.35em;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

/* Unterseiten-Titel: Versalien mit Sperrung */
.pg-versal-titel {
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Versal-Claim unter Teaser-Bildern ("WERDEN SIE SELBER PILZZÜCHTER") */
.pg-versal-claim {
	font-family: var(--wp--preset--font-family--acanthus);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.4;
}

/* Versal-Link mit Pfeil ("→ MEHR ZU …") */
.pg-arrow-link a {
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Sprungnavigation auf Sorten-Detailseiten — Versal-Links mit
   ↓-Pfeil zwischen schwarzen Linien (Design: PgSprungNav) */
.pg-sprungnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 36px;
	border-top: 1px solid var(--wp--preset--color--schwarz);
	border-bottom: 1px solid var(--wp--preset--color--schwarz);
	padding: 14px 0;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.pg-sprungnav a { text-decoration: none; }

/* Tabellen im Original-Stil: Kopflinie + schwarze Zeilenlinien,
   kein Rahmen (Design: PgLinienTabelle) */
.pg-tabelle table {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--schwarz);
	border-collapse: collapse;
}
.pg-tabelle td,
.pg-tabelle th {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--schwarz);
	padding: 10px 2px;
	vertical-align: top;
}
.pg-tabelle td:last-child { text-align: right; }
.pg-tabelle--links td:last-child { text-align: left; }

/* Kursivtitel darf per Core-Alignment linksbündig stehen (Tabellen-Titel) */
.pg-italic-title.has-text-align-left { text-align: left; }

/* Kursivtitel als Kachel-Link (Abteilungs-Grid): erbt Kursiv-Serife */
.pg-italic-title a {
	text-decoration: none;
	color: inherit;
}

/* ── Chronik / Zeitstrahl ───────────────────────────────────── */

/* Jahr-Marker vor einem Meilenstein: Serife, dezent hervorgehoben */
.pg-jahr {
	font-family: var(--wp--preset--font-family--acanthus);
	color: var(--wp--preset--color--oliv);
	margin-right: .5em;
	white-space: nowrap;
}
.pg-chronik__eintrag + .pg-chronik__eintrag {
	margin-top: .6em;
}

/* ── Team-Porträt ───────────────────────────────────────────── */

/* Rolle über dem Namen: Versalien mit Sperrung */
.pg-portrait__rolle {
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: .3em;
}
/* Media-Text der Porträts/Chronik: mobil sauber gestapelt ohne fixe Spalten */
@media (max-width: 600px) {
	.pg-portrait,
	.pg-chronik {
		grid-template-columns: 1fr !important;
	}
}