/*
 * Hof Darscheid: Gestaltung
 *
 * Grundwerte (Farben, Schriften, Groessen) stehen in theme.json. Hier
 * steht nur, was theme.json nicht ausdruecken kann.
 *
 * KONTRASTREGELN (gemessen, WCAG):
 *   Tinte      #23291F auf Papier  13,45:1   Lesetext
 *   Stein      #5F6657 auf Papier   5,37:1   Nebentext
 *   Waldgruen  #4A6149 auf Papier   6,12:1   Ueberschriften, Links, Knoepfe
 *   Papier auf Waldgruen dunkel     9,09:1   dunkle Baender
 *   Terrakotta #B0664A auf Papier   3,91:1   NUR Flaeche oder Schrift ab 24 px
 *   Terrakotta dunkel #96513A        5,36:1   Terrakotta als Schrift
 *   Senfocker  #CB9131 auf Papier   2,48:1   NIE Schrift auf hellem Grund
 *   Tinte auf Senfocker             5,42:1   Schrift auf Ocker-Flaechen
 *
 * DAS ZEICHEN AUS DEM LOGO: der geteilte Ring, links Terrakotta, rechts
 * Waldgruen. Er rahmt Fotos (.hd-ringbild) und steht klein als
 * Schmuckform (.hd-ringmarke). Sonst gilt: gerade Kanten, flache
 * Flaechen, keine Verlaeufe, keine Schatten.
 */

/* Lato: nur fuer die Wortmarke im Kopf und im Fuss, nicht fuer Text.
   Deshalb hier und nicht in theme.json, wo sie sonst in der Schriftauswahl
   des Editors auftauchen wuerde. Erzeugt mit scripts/lato-bauen.py. */
@font-face {
	font-family: "Lato Marke";
	src: url(../fonts/lato-halb.woff2) format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lato Marke";
	src: url(../fonts/lato.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--hd-papier: var(--wp--preset--color--base);
	--hd-creme: var(--wp--preset--color--base-2);
	--hd-tinte: var(--wp--preset--color--contrast);
	--hd-stein: var(--wp--preset--color--muted);
	--hd-gruen: var(--wp--preset--color--gruen);
	--hd-gruen-dunkel: var(--wp--preset--color--gruen-dunkel);
	--hd-terra: var(--wp--preset--color--terrakotta);
	--hd-terra-dunkel: var(--wp--preset--color--terrakotta-dunkel);
	--hd-ocker: var(--wp--preset--color--ocker);
	--hd-linie: var(--wp--preset--color--linie);
	--hd-display: var(--wp--preset--font-family--display);
	--hd-text: var(--wp--preset--font-family--text);
	--hd-radius: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

::selection { background: var(--hd-ocker); color: var(--hd-tinte); }

/* Kein Rahmen beim Anklicken mit Maus oder Finger. Nur wer per Tastatur
   bedient, sieht, wo er gerade ist. */
:focus:not(:focus-visible) { outline: none; }
:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--hd-terra-dunkel);
	outline-offset: 3px;
	border-radius: 2px;
}

.hd-haupt > .wp-block-post-content > :first-child { margin-block-start: 0; }

/* Kein Blockabstand zwischen Kopf, Inhalt und Fuss: sonst steht vor dem
   Fussbereich ein heller Streifen. Endet die Seite mit einem
   Abschnitt, entfaellt auch der Innenabstand unten: der Abschnitt bringt seinen eigenen mit. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.hd-haupt:has(> .wp-block-post-content > .hd-abschnitt:last-child) { padding-bottom: 0 !important; }
.hd-haupt > .wp-block-post-content > .has-background:last-child { margin-block-end: 0; }

/* ------------------------------------------------------------------ */
/* Kopfbereich                                                         */
/* ------------------------------------------------------------------ */

.hd-kopf { border-bottom: 1px solid var(--hd-linie); background: var(--hd-papier); }

/* flex statt inline: sonst haengt unter dem Logo eine Textzeile und es sitzt zu hoch */
.hd-marke { display: flex; align-items: center; line-height: 1; }
.hd-marke__link {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--hd-gruen);
}
.hd-marke__zeichen { display: block; width: auto; height: 52px; }
.hd-marke__name {
	font-family: "Lato Marke", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: 1.1875rem;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.hd-marke__link:hover .hd-marke__name { color: var(--hd-gruen-dunkel); }
.hd-marke__text { display: flex; flex-direction: column; gap: 2px; }
.hd-marke__claim {
	/* Dieselbe Familie wie der Name, nur leichter und kleiner: im Logo
	   steht eine Schrift, den Charakter traegt die Zeichnung. */
	font-family: "Lato Marke", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0.005em;
	line-height: 1.2;
	color: var(--hd-stein);
	white-space: nowrap;
}
.hd-marke--fuss .hd-marke__claim { font-size: 0.9375rem; }

.hd-marke--fuss .hd-marke__link { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.hd-marke--fuss .hd-marke__zeichen { height: 112px; }

/* Navigation */
.hd-navi .wp-block-navigation-item__content {
	color: var(--hd-tinte);
	text-decoration: none;
	padding-block: 0.35em;
	/* Oben dieselbe unsichtbare Linie wie unten, sonst sitzt die Schrift
	   um die Linienstaerke zu hoch und die Leiste wirkt unruhig. */
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}
.hd-navi .wp-block-navigation-item__content:hover { color: var(--hd-gruen); border-bottom-color: var(--hd-linie); }
.hd-navi .current-menu-item > .wp-block-navigation-item__content,
.hd-navi .current-menu-ancestor > .wp-block-navigation-item__content,
.hd-navi [aria-current="page"] {
	color: var(--hd-gruen);
	border-bottom-color: var(--hd-ocker);
}
.hd-navi .wp-block-navigation__container { gap: 1.6rem; }

/* Letzter Menuepunkt ("Kontakt") als Knopf */
.hd-navi .hd-navi__knopf > .wp-block-navigation-item__content {
	background: var(--hd-gruen);
	color: var(--hd-papier);
	border: 0;
	border-radius: 999px;
	padding: 0.55em 1.15em;
	font-weight: 600;
}
.hd-navi .hd-navi__knopf > .wp-block-navigation-item__content:hover { background: var(--hd-gruen-dunkel); color: var(--hd-papier); }

@media (max-width: 1020px) {
	.hd-navi .wp-block-navigation__container { gap: 1.1rem; }
	.hd-marke__name { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
	.hd-marke__zeichen { height: 44px; }
	.hd-marke__name { font-size: 1rem; letter-spacing: 0.035em; }
	.hd-marke__claim { font-size: 0.75rem; }
	.hd-marke__link { gap: 0.6rem; }
	/* Menue als Vollbild: gross, rechtsbuendig unter dem Schliessen-Kreuz, gut zu treffen */
	.hd-navi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.4rem; align-items: flex-end; text-align: right; }
	.hd-navi .is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
	.hd-navi .is-menu-open .hd-navi__knopf > .wp-block-navigation-item__content { padding: 0.45em 1.2em; margin-top: 0.6rem; }
	/* WordPress setzt beim Oeffnen den Fokus auf den ersten Punkt. Statt Kasten
	   nur die Unterstreichung, per Tastatur bleibt der Fokus sichtbar. */
	/* Liste am rechten Rand, Punkte untereinander rechtsbuendig */
	.hd-navi .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-end; }
	.hd-navi .is-menu-open .wp-block-navigation-item__content:focus { outline: 0; }
	.hd-navi .is-menu-open .wp-block-navigation-item:not(.hd-navi__knopf) > .wp-block-navigation-item__content:focus-visible { border-bottom-color: var(--hd-terra-dunkel); }
	.hd-navi .is-menu-open .hd-navi__knopf > .wp-block-navigation-item__content:focus-visible { box-shadow: 0 0 0 3px var(--hd-papier), 0 0 0 5px var(--hd-terra-dunkel); }
}

@media (max-width: 360px) {
	/* Sehr schmale Geraete: sonst stossen Unterzeile und Menuezeichen an. */
	.hd-marke__zeichen { height: 38px; }
	.hd-marke__name { font-size: 0.9375rem; }
	.hd-marke__claim { font-size: 0.6875rem; }
}

/* ------------------------------------------------------------------ */
/* Abschnitte                                                          */
/* ------------------------------------------------------------------ */

.hd-abschnitt { padding-block: var(--wp--preset--spacing--70); }
.hd-abschnitt--eng { padding-block: var(--wp--preset--spacing--60); }
/* Zwei helle Abschnitte hintereinander: nur einmal Abstand. Nach einem
   farbigen Band dagegen voller Abstand, sonst klebt der Text am Band. */
.hd-abschnitt:not(.has-background) + .hd-abschnitt:not(.has-background) { padding-top: 0; }

.hd-abschnitt--gruen { color: var(--hd-papier); }
.hd-abschnitt--gruen :where(h1, h2, h3, h4) { color: var(--hd-papier); }
.hd-abschnitt--gruen a { color: var(--hd-papier); }

/* Dachzeile ueber Ueberschriften */
.hd-dachzeile {
	font-family: var(--hd-display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hd-terra-dunkel);
	margin-bottom: 0.6rem !important;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.hd-abschnitt--gruen .hd-dachzeile { color: var(--hd-ocker); }

/* Kleine Ringmarke vor der Dachzeile */
.hd-dachzeile::before,
.hd-ringmarke {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: conic-gradient(from 180deg, var(--hd-terra) 0 50%, var(--hd-gruen) 50% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
}
.hd-abschnitt--gruen .hd-dachzeile::before {
	background: conic-gradient(from 180deg, var(--hd-terra) 0 50%, var(--hd-ocker) 50% 100%);
}

.hd-nobr { white-space: nowrap; }

.hd-einleitung { font-size: var(--wp--preset--font-size--lg); line-height: 1.5; max-width: 38em; }

/* ------------------------------------------------------------------ */
/* Der Ring als Bildrahmen                                             */
/* ------------------------------------------------------------------ */

/*
 * Kreisfoto im geteilten Ring. Das Bild sitzt in einem Kreis, darum
 * liegt der Ring aus dem Logo mit einer schmalen Papierfuge. Die
 * Ringstaerke skaliert mit der Groesse, wie im Logo (rund 7 %).
 */
.hd-ringbild {
	--ring: max(8px, 7%);
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	padding: calc(var(--ring) + 1.5%);
	margin-inline: auto;
	max-width: 520px;
	width: 100%;
	isolation: isolate;
}
.hd-ringbild::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 180deg, var(--hd-terra) 0 50%, var(--hd-gruen) 50% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
	z-index: -1;
}
.hd-ringbild img,
.hd-ringbild figure { margin: 0; width: 100%; height: 100%; }
.hd-ringbild img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50% !important;
	display: block;
}
.hd-ringbild figcaption { display: none; }
.hd-ringbild--klein { max-width: 220px; }

/* ------------------------------------------------------------------ */
/* Kuh und Kalb: zwei Kreisfotos wie im Logo                           */
/* ------------------------------------------------------------------ */

/*
 * Grosses Ringfoto (die Kuh) und ein kleines Kreisfoto (das Kalb), das
 * rechts unten ueber den Ring ragt. Die Papierfuge um das Kalb ist
 * dieselbe Aussparung wie im Zeichen: Das Kalb steht vor der Mutter.
 */
.hd-paar { position: relative; max-width: 520px; width: 100%; margin-inline: auto; padding-bottom: 6%; }
.hd-paar > .hd-ringbild { max-width: 88%; margin: 0; }
.hd-paar__kalb {
	position: absolute !important;
	right: 0;
	bottom: 0;
	width: 44%;
	aspect-ratio: 1;
	margin: 0 !important;
	border-radius: 50%;
	box-shadow: 0 0 0 clamp(6px, 1.4vw, 11px) var(--hd-papier);
	overflow: hidden;
}
.hd-paar__kalb figure, .hd-paar__kalb img { margin: 0; width: 100%; height: 100%; display: block; }
.hd-paar__kalb img { object-fit: cover; border-radius: 50% !important; aspect-ratio: 1; }
.hd-paar__kalb figcaption { display: none; }

/* Bildausschnitt, von der Redaktion per Klasse waehlbar */
.hd-fokus-rechts img { object-position: 74% 40% !important; }
.hd-fokus-links img { object-position: 26% 45% !important; }
.hd-fokus-oben img { object-position: 50% 22% !important; }

/* ------------------------------------------------------------------ */
/* Weideband: ein Foto ueber die volle Breite                          */
/* ------------------------------------------------------------------ */

.hd-bildband { margin-block: 0 !important; }
.hd-bildband img {
	width: 100%;
	height: clamp(240px, 36vw, 520px) !important;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
}
.hd-bildband figcaption {
	max-width: var(--wp--style--global--wide-size, 1120px);
	margin: 0.6rem auto 0 !important;
	padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

/* Personen auf "Wer wir sind": je ein Block mit Trennlinie */
.hd-person { border-top: 1px solid var(--hd-linie); padding-top: 1.5rem; margin-block-start: 2rem !important; }
.hd-person > .wp-block-heading { margin-block: 0 0.5rem; }
.hd-person > .hd-dachzeile { margin-block: 0 0.35rem; }

/* ------------------------------------------------------------------ */
/* Bildmosaik mit Namen                                                */
/* ------------------------------------------------------------------ */

.hd-mosaik {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 17vw, 230px);
	gap: 0.9rem;
	margin-top: var(--wp--preset--spacing--40) !important;
}
.hd-mosaik > .wp-block-image { margin: 0 !important; position: relative; overflow: hidden; border-radius: var(--hd-radius); }
.hd-mosaik > .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.hd-mosaik > .wp-block-image:nth-child(4) { grid-column: span 2; }
.hd-mosaik img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 0 !important; display: block; }
.hd-mosaik figcaption {
	position: absolute;
	left: 0.7rem;
	bottom: 0.7rem;
	margin: 0 !important;
	background: var(--hd-papier);
	color: var(--hd-tinte);
	font-family: var(--hd-display);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.3em 0.75em;
	border-radius: 999px;
}

/* Zwei oder drei Fotos nebeneinander */
.hd-bilderreihe { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.hd-bilderreihe > .wp-block-image { margin: 0 !important; }
.hd-bilderreihe img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ------------------------------------------------------------------ */
/* Startseite: Aufmacher                                               */
/* ------------------------------------------------------------------ */

.hd-held { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }
.hd-held .wp-block-columns { align-items: center !important; gap: var(--wp--preset--spacing--60); }
.hd-held h1 {
	font-size: var(--wp--preset--font-size--riesig);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin-top: 0;
}
.hd-held .hd-einleitung { margin-top: 1.1rem; }

/* ------------------------------------------------------------------ */
/* Text und Bild nebeneinander                                         */
/* ------------------------------------------------------------------ */

.hd-duo.wp-block-columns { align-items: center !important; gap: var(--wp--preset--spacing--60); }
.hd-duo .wp-block-image img { border-radius: var(--hd-radius); width: 100%; height: auto; }
/* Hochformatfotos vom Handy sonst so hoch wie zwei Bildschirme */
.hd-duo > .wp-block-column > .wp-block-image:not(.hd-paar__kalb) img { max-height: 560px; object-fit: cover; }
.hd-duo--oben.wp-block-columns { align-items: flex-start !important; }
.hd-duo h2 { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Zahlenband                                                          */
/* ------------------------------------------------------------------ */

/* Zahlenband als Gitter: Wert und Erklaerung stehen in allen Spalten auf
   derselben Hoehe, auch wenn ein Wert zweizeilig wird. */
.hd-zahlen.wp-block-columns {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: var(--wp--preset--spacing--50);
}
.hd-zahl {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
}
.hd-zahl__wert {
	/* Unten in der Zeile: einzeilige Werte stehen damit direkt ueber
	   ihrer Erklaerung, der Ausgleich zum zweizeiligen Wert liegt oben. */
	align-self: end;
	/* Die Ockerlinie sitzt unter dem Wert und damit auf der gemeinsamen
	   Kante zum Text: in allen Spalten auf derselben Hoehe, auch wenn ein
	   Wert zweizeilig ist. */
	border-bottom: 3px solid var(--hd-ocker);
	padding-bottom: 0.6rem;
	font-family: var(--hd-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	margin: 0 0 0.85rem !important;
	color: var(--hd-papier);
}
.hd-zahl__text { margin: 0 !important; font-size: var(--wp--preset--font-size--sm); line-height: 1.45; color: var(--hd-creme); }

/* ------------------------------------------------------------------ */
/* Karten                                                              */
/* ------------------------------------------------------------------ */

.hd-karten.wp-block-columns { gap: var(--wp--preset--spacing--40); }
.hd-karte {
	background: var(--hd-papier);
	border-radius: var(--hd-radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.has-base-background-color .hd-karte,
.hd-neuigkeiten .hd-karte { background: var(--hd-creme); }
.hd-karte > * { margin-inline: 1.25rem; }
.hd-karte > .wp-block-image,
.hd-karte > .wp-block-post-featured-image { margin: 0 0 1.1rem; }
.hd-karte .wp-block-image img,
.hd-karte .wp-block-post-featured-image img { border-radius: 0 !important; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hd-karte h3, .hd-karte__titel { margin-top: 0.2rem; font-size: var(--wp--preset--font-size--lg); }
.hd-karte__titel a, .hd-karte h3 a { color: var(--hd-gruen); text-decoration: none; }
.hd-karte__titel a:hover, .hd-karte h3 a:hover { text-decoration: underline; }
.hd-karte > :last-child { margin-bottom: 1.4rem; }
.hd-karte .wp-block-post-date { margin-top: 0; }
.hd-karte__weiter { margin-top: auto !important; font-family: var(--hd-display); font-weight: 600; }
.hd-karte__weiter a { text-decoration: none; }
.hd-karte__weiter a::after { content: " \2192"; }

/* ------------------------------------------------------------------ */
/* Blattliste: Aufzaehlung mit der Ohrform aus dem Logo                */
/* ------------------------------------------------------------------ */

.hd-blattliste { list-style: none; padding-left: 0 !important; }
.hd-blattliste li { position: relative; padding-left: 1.9rem; margin-bottom: 0.6rem; }
.hd-blattliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 1.15rem;
	height: 0.72rem;
	background: var(--hd-ocker);
	/* Blattform wie die Ohren im Logo: zwei Boegen, spitz auslaufend */
	clip-path: path("M0 5.8 C 4 -0.5, 13 -0.5, 18.4 5.8 C 13 12.1, 4 12.1, 0 5.8 Z");
}
.hd-abschnitt--gruen .hd-blattliste li::before { background: var(--hd-ocker); }

/* Nummerierte Schritte */
.hd-schritte { counter-reset: schritt; list-style: none; padding-left: 0 !important; }
.hd-schritte li { counter-increment: schritt; position: relative; padding-left: 3.4rem; margin-bottom: 1.2rem; min-height: 2.4rem; }
.hd-schritte li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--hd-gruen);
	color: var(--hd-papier);
	font-family: var(--hd-display);
	font-weight: 600;
	display: grid;
	place-items: center;
}

/* ------------------------------------------------------------------ */
/* Block: Naechster Schlachttermin                                     */
/* ------------------------------------------------------------------ */

.hd-termin {
	background: var(--hd-creme);
	border-radius: var(--hd-radius);
	border-left: 6px solid var(--hd-terra);
	padding: 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.hd-termin--steht { border-left-color: var(--hd-gruen); }
.hd-termin > * { margin: 0; }
.hd-termin p { margin: 0; }
.hd-termin__marke {
	font-family: var(--hd-display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hd-terra-dunkel);
	margin-bottom: 0.35rem !important;
}
.hd-termin__datum {
	font-family: var(--hd-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	color: var(--hd-gruen);
}
.hd-termin__hinweis { margin-top: 0.5rem !important; }
.hd-termin__preis { margin-top: 0.6rem !important; font-family: var(--hd-display); }
.hd-termin--band { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.has-base-2-background-color .hd-termin { background: var(--hd-papier); }

/* ------------------------------------------------------------------ */
/* Block: Hofdaten                                                     */
/* ------------------------------------------------------------------ */

.hd-hofdaten p { margin: 0 0 1rem; }
.hd-hofdaten--kurz p { margin: 0 0 0.8rem; }
.hd-hofdaten__anfahrt { color: var(--hd-stein); }

/* ------------------------------------------------------------------ */
/* Knoepfe                                                             */
/* ------------------------------------------------------------------ */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--hd-gruen);
	border-color: var(--hd-gruen);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--hd-gruen);
	color: var(--hd-papier);
}
.hd-abschnitt--gruen .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--hd-ocker);
	border-color: var(--hd-ocker);
	color: var(--hd-tinte);
}
.hd-abschnitt--gruen .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--hd-papier);
	border-color: var(--hd-papier);
}
.hd-abschnitt--gruen .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--hd-papier); border-color: var(--hd-papier); }
.hd-abschnitt--gruen .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--hd-papier); color: var(--hd-gruen-dunkel); }

/* ------------------------------------------------------------------ */
/* Seiten: Titel und Fliesstext                                        */
/* ------------------------------------------------------------------ */

.hd-seitentitel { margin-bottom: var(--wp--preset--spacing--50); }

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol { max-width: 680px; }

/* Bildunterschriften */
.wp-block-image figcaption { margin-top: 0.55rem; }

/* ------------------------------------------------------------------ */
/* Galerie                                                             */
/* ------------------------------------------------------------------ */

/* Festes Raster statt Flexbox: WordPress zieht sonst das letzte Bild
   einer unvollstaendigen Reihe auf volle Breite (bei 13 Bildern in drei
   Spalten steht das dreizehnte riesig allein). */
.hd-galerie.wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem 1rem !important;
	align-items: start;
}
.hd-galerie.wp-block-gallery > .wp-block-image { width: auto !important; margin: 0 !important; justify-content: flex-start !important; align-self: start !important; }
@media (max-width: 781px) { .hd-galerie.wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* WordPress gibt Galeriebildern flex: 1 0 0%. Zusammen mit der
   senkrechten Anordnung darunter (Bild, dann Unterschrift) wird die
   Bildhoehe sonst null und die Kachel bleibt leer. */
.hd-galerie .wp-block-image img { flex: none !important; height: auto !important; width: 100% !important; border-radius: var(--hd-radius); aspect-ratio: 4 / 3; object-fit: cover; }
.hd-galerie .wp-block-image figcaption {
	position: static !important;
	background: none !important;
	color: var(--hd-stein) !important;
	padding: 0.45rem 0 0 !important;
	text-align: left !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	max-height: none !important;
	overflow: visible !important;
}
.hd-galerie .wp-block-image figcaption::before { display: none !important; }
.hd-galerie .wp-block-image { flex-direction: column !important; }

/* ------------------------------------------------------------------ */
/* Beitraege                                                           */
/* ------------------------------------------------------------------ */

.hd-beitrag__zurueck a { font-family: var(--hd-display); font-weight: 600; text-decoration: none; }
.hd-beitrag__zurueck a::before { content: "\2190  "; }
/* Beitragsbild quer zugeschnitten: Viele Hoffotos sind Hochformat vom
   Handy und wuerden sonst den ganzen Bildschirm fuellen. */
.hd-beitrag__bild img { border-radius: var(--hd-radius); width: 100%; aspect-ratio: 3 / 2; height: auto !important; max-height: 520px; object-fit: cover; }
/* Feste Spaltenzahl statt auto-fill: bei drei Beitraegen sonst zwei
   Spalten und eine verwaiste dritte Karte. */
.hd-neuigkeiten.wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--40) !important; }
@media (max-width: 900px) { .hd-neuigkeiten.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599px) { .hd-neuigkeiten.wp-block-post-template { grid-template-columns: 1fr !important; } }

/* ------------------------------------------------------------------ */
/* Fussbereich                                                         */
/* ------------------------------------------------------------------ */

.hd-fuss { border-top: 1px solid var(--hd-linie); }
.hd-fuss__titel {
	font-size: 0.875rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hd-terra-dunkel);
	margin: 0.2rem 0 1rem;
}
.hd-fuss__liste { list-style: none; padding: 0 !important; margin: 0; }
.hd-fuss__liste li { margin-bottom: 0.5rem; }
.hd-fuss a { color: var(--hd-tinte); }
.hd-fuss a:hover { color: var(--hd-gruen); }
.hd-fuss__unten {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--hd-linie);
	color: var(--hd-stein);
}
.hd-fuss__unten p { margin: 0; }

/* Das Bioland-Zeichen in der Fusszeile.

   Vorher stand es freistehend am Ende der Startseite, in einem eigenen
   Farbband, ohne Bezug zu irgendetwas. Es wirkte deplatziert, und das
   zu Recht: Ein Siegel ist keine Aussage fuer sich, es belegt eine.
   Die Aussage steht schon zweimal auf der Seite, im Zahlenband oben
   und hier unten in der Kontrollstellennummer.

   Jetzt steht es neben genau dieser Zeile. Das ist der Ort, an dem
   Siegel erwartet werden, es erscheint auf jeder Seite statt nur auf
   der Startseite, und es unterbricht den Erzaehlfluss nicht mehr.

   34 px ist gemessen, nicht geraten: Das ist die Hoehe von zwei Zeilen
   der kleinen Schrift, die daneben steht. Groesser draengt sich das
   Zeichen in den Vordergrund, kleiner ist der Schriftzug darin nicht
   mehr zu lesen.

   Die Masse stehen im Blockmarkup in parts/footer.html, nicht hier:
   Der Blockeditor schreibt sie als style-Attribut ans Bild, und das
   schlaegt jede Regel aus dem Stylesheet. Eine width-Angabe an dieser
   Stelle waere wirkungslos und wuerde nur vortaeuschen, dass sie
   etwas tut. */
.hd-siegel {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.hd-siegel__zeichen {
	margin: 0;
	flex: 0 0 auto;
}

.hd-siegel__zeichen img {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 0;
}

@media (max-width: 599px) {
	/* Auf dem Handy bricht die Zeile auf zwei bis drei Zeilen um.
	   Dann sitzt das Zeichen oben statt in der Mitte, sonst schwebt
	   es neben einem Textblock. */
	.hd-siegel { align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* Handy                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 781px) {
	/* Alles linksbuendig, nichts zentriert */
	.hd-held, .hd-held * { text-align: left; }
	.hd-held .wp-block-columns { flex-direction: column-reverse; }
	.hd-held .hd-paar { max-width: 340px; margin-inline: 0; }
	.hd-mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
	.hd-mosaik > .wp-block-image:nth-child(4) { grid-column: span 1; }

	/* Knoepfe ueber die volle Breite */
	.wp-block-post-content .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-post-content .wp-block-buttons .wp-block-button { width: 100%; }
	/* box-sizing gehoert dazu: ohne das legt der Browser Innenabstand
	   und Rahmen AUF die 100 Prozent drauf, und der Knopf steht rund
	   45 px ueber den Bildschirmrand hinaus. Auf /kontakt/ liess sich
	   die Seite deshalb bis 414 px Breite quer schieben. */
	.wp-block-post-content .wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.hd-duo.wp-block-columns { gap: var(--wp--preset--spacing--50); }
	.hd-zahlen.wp-block-columns { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	/* Zweispaltig ist die Spalte ~170 px breit; "rund 85 ha" passt nur kleiner hinein. */
	.hd-zahl__wert { font-size: 1.75rem; overflow-wrap: normal; word-break: keep-all; }
	.hd-termin--band { flex-direction: column; align-items: stretch; }

	/* Fussbereich zweispaltig statt gestapelt */
	.hd-fuss__spalten.wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
	.hd-fuss__spalten .hd-fuss__marke { grid-column: 1 / -1; }
	.hd-marke--fuss .hd-marke__link { flex-direction: row; align-items: center; }
	.hd-marke--fuss .hd-marke__zeichen { height: 72px; }
}
@media (max-width: 380px) {
	.hd-fuss__spalten.wp-block-columns { grid-template-columns: 1fr; }
	.hd-zahlen.wp-block-columns { grid-template-columns: 1fr; }
}

/* Die Unterzeile im Fussbereich darf umbrechen.

   Warum das noetig ist: Oben steht bei .hd-marke__claim ein
   white-space: nowrap, damit die Zeile im Kopf nicht mitten im Satz
   bricht. Im Fussbereich ist sie groesser (0.9375rem) und steht seit
   der 781er-Regel neben dem Zeichen statt darunter. Zusammen sind das
   rund 333 px, und die passen unter etwa 370 px Breite nicht mehr
   hinein. Die Verkleinerung bei 360 px greift dort nicht, weil
   .hd-marke--fuss .hd-marke__claim die hoehere Spezifitaet hat.

   Gemessen am 24.09.2026: ohne diese Regel liess sich jede Seite von
   Hof Darscheid bei 320 px um 47 px quer schieben. */
@media (max-width: 599px) {
	.hd-marke--fuss .hd-marke__claim {
		white-space: normal;
		font-size: 0.8125rem;
	}

	.hd-marke--fuss .hd-marke__zeichen { height: 60px; }
}

/* Das Menuezeichen erscheint schon ab 781 px, nicht erst ab 599 px.

   Der Navigationsblock steht auf overlayMenu: "mobile", und der Core
   legt diese Grenze auf 600 px. Zwischen 600 und 781 px stand die
   Menueleiste deshalb voll ausgeschrieben da: sechs Punkte, rund
   400 px, dazu die Marke mit 308 px. Zusammen mehr, als hineinpasst.
   Am 24.09.2026 gemessen liess sich jede Seite bei 600 px um 154 px
   quer schieben, bei 760 px noch um 12 px. Betroffen waren Tablets im
   Hochformat und Handys im Querformat.

   Die drei Regeln nehmen genau den Block des Cores zurueck, der bei
   600 px die Leiste wieder aufklappt (@media (min-width: 600px) in
   style.css des Navigationsblocks). Die Grenze 781 px ist dieselbe,
   die das Theme sonst ueberall als Handy-Grenze benutzt. */
@media (min-width: 600px) and (max-width: 781px) {
	.hd-navi .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
	}

	.hd-navi .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Im aufgeklappten Menue dieselbe Anmutung wie auf dem Handy:
	   gross, rechtsbuendig, gut zu treffen. */
	.hd-navi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.4rem; align-items: flex-end; text-align: right; }
	.hd-navi .is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
	.hd-navi .is-menu-open .hd-navi__knopf > .wp-block-navigation-item__content { padding: 0.45em 1.2em; margin-top: 0.6rem; }
	.hd-navi .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-end; }
	.hd-navi .is-menu-open .wp-block-navigation-item__content:focus { outline: 0; }
}

/* Druck: keine Navigation, keine Knoepfe */
@media print {
	.hd-kopf .hd-navi, .wp-block-buttons, .hd-fuss__spalten > :last-child { display: none !important; }
}