/*
 * garten für alle 2026 – Frontend-Stylesheet.
 * Maße, Abstände und Farben aus der Design-Referenz übernommen, Struktur
 * nach WordPress-Konventionen neu aufgebaut (Abschnitt 2 der Spezifikation).
 * Farben/Schriftgrößen kommen aus theme.json (--wp--preset--*), damit
 * Theme-Setup und Ausgabe eine einzige Quelle haben.
 */

/* ---------- Reset ---------- */
/* Nur für Screenreader – WordPress gibt solche Beschriftungen etwa im
   Suchformular aus; ohne diese Regel stünden sie sichtbar auf der Seite. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul[class] { list-style: none; }
a { color: inherit; }

/* ---------- Lokale Schrift (Abschnitt 5) – keine Google-Fonts-Verbindung ---------- */
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Höhe des Teaserbilds im Einzelbeitrag – auch vom ersten Sidebar-Bild
	   genutzt, damit beide Spalten auf gleicher Höhe weiterlaufen.
	   328 statt 340 px: Das Bild endet bündig mit dem Karopapier und ist
	   dafür um den rechten Innenabstand des Spiralblocks schmaler – die
	   Höhe folgt im selben Verhältnis (340 × 683/709). */
	--gfa-hero-height: 328px;
	/* Abstand zwischen den Sidebar-Widgets. */
	--gfa-sidebar-gap: 18px;
	/* Innenabstand des Spiralblocks: Abstand vom grünen Rahmen zum Karopapier. */
	--gfa-spiral-pad: 26px;
}

body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	background: var(--wp--preset--color--background, #f2f2ef);
	color: var(--wp--preset--color--text, #4a4a4a);
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- Seitenrahmen (Abschnitt 6.1) ---------- */
.gfa-page {
	background: var(--wp--preset--color--white, #fff);
	max-width: 1200px;
	margin: 0 auto;
}
.frame {
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 20px 46px;
}

/* ---------- Kopfbereich (Abschnitt 6.2) ---------- */
.header-f {
	text-align: left;
	padding: 0;
	background: var(--wp--preset--color--white, #fff);
}
.header-f .brand { display: block; padding: 0 0 20px 5px}
.header-f .wordmark {
	font-family: Courier, monospace;
	font-size: 30px;
	letter-spacing: 4px;
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	/* Gleiches Grün wie der Hintergrund der inaktiven Menüpunkte. */
	color: var(--wp--preset--color--green, #a3c43a);
}
.header-f .sub {
	display: block;
	font-size: 11.5px;
	letter-spacing: 2.5px;
	color: var(--wp--preset--color--gray, #757575);
	text-transform: uppercase;
	margin-top: 3px;
	font-weight: 400;
}
.custom-logo-link img { display: block; max-height: 60px; width: auto; }

/* Menüleiste nach Entwurf A: gleich breite grüne Reiter, 6 px Fuge,
   zentrierte weiße Schrift, aktiver Punkt in Grün dunkel. */
.menu-f {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 40px 0 0;
	padding: 0;
}
.menu-f li { flex: 1; margin: 0; min-width: 0; }
.menu-f li > a {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--green, #a3c43a);
	color: #fff;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	padding: 9px 4px;
	letter-spacing: .3px;
}
.menu-f li.current-menu-item > a,
.menu-f li.current-menu-parent > a,
.menu-f li.current-menu-ancestor > a,
.menu-f li > a:hover {
	background: var(--wp--preset--color--green-dark, #7f9c25);
	color: #fff;
}

/* ---------- Inhaltsspalte + Randbanner (Abschnitt 6.1, 6.3) ---------- */
.main-grid { display: flex; margin-top: 5px; align-items: flex-start; }
.main-grid .col { flex: 1; min-width: 0; }

.gfa-banner { width: 81px; flex: 0 0 81px; }
.gfa-banner img { display: block; width: 81px; height: 398px; max-width: none; }

/* ---------- Grüne Inhaltsfläche (Abschnitt 6.4) ---------- */
.content-panel {
	background: var(--wp--preset--color--panel, #dce8b4);
	padding: 34px 38px 38px;
}
/* Eine einzige Inhaltsfläche für alle Templates – Startseite, Seiten, Blog,
   Archiv, Suche und Artikel liegen gleichermaßen auf dem hellen Grün. */

h1.pagetitle {
	color: var(--wp--preset--color--ink, #3c451f);
	font-size: var(--wp--preset--font-size--large, 25px);
	margin-bottom: 14px;
	letter-spacing: .2px;
}
.intro { max-width: 760px; color: #4c5230; }
.intro p { margin-bottom: 10px; }
.intro strong { color: var(--wp--preset--color--ink, #3c451f); }

/* ---------- Aufzählungen im Fließtext ----------
   Der Reset ganz oben nimmt allen Listen Innen- und Außenabstand – das ist
   für die gestalteten Listen des Themes (Menü, Widgets, Kacheln) richtig,
   lässt aber die Punkte redaktioneller Listen links neben dem Textblock
   hängen. Diese Regel holt die Einrückung für Inhalte aus dem Editor zurück.
   Dieselben Werte stehen in editor.css, damit der Redaktionsbereich das
   Frontend zeigt. */
.intro ul,
.intro ol,
.prose ul,
.prose ol {
	margin: 0 0 12px;
	padding-left: 22px;
}
.intro ul,
.prose ul { list-style: disc outside; }
.intro ol,
.prose ol { list-style: decimal outside; }
.intro li,
.prose li { margin-bottom: 4px; }
/* Verschachtelte Listen: kein doppelter Abstand nach unten. */
.intro li > ul,
.intro li > ol,
.prose li > ul,
.prose li > ol { margin: 4px 0 0; }

/* ---------- Ausrichtung von Bildern im Inhalt ----------
   WordPress vergibt beim Einfügen nur die Klassen (Position „links",
   „rechts", „zentriert"), das Aussehen muss das Theme mitbringen – ohne
   diese Regeln steht jedes Bild über dem Text. Die Klasse kann je nach
   Einfügeart am <img>, am <a>, am <figure> oder am [caption]-Container
   hängen, deshalb die Aufzählung. */
.alignleft,
a.alignleft,
figure.alignleft,
.wp-caption.alignleft {
	float: left;
	margin: 4px 24px 14px 0;
}
.alignright,
a.alignright,
figure.alignright,
.wp-caption.alignright {
	float: right;
	margin: 4px 0 14px 24px;
}
.aligncenter,
figure.aligncenter,
.wp-caption.aligncenter {
	display: block;
	margin: 16px auto;
	float: none;
}
.alignnone { margin: 0 0 14px; }
.aligncenter img { margin: 0 auto; }

/* Der Textfluss soll den Absatz nicht verlassen: flow-root schließt die
   umflossenen Bilder in ihren Inhaltsbereich ein. */
.intro,
.prose { display: flow-root; }

/* Bildunterschriften aus dem klassischen Editor ([caption]). */
.wp-caption { max-width: 100%; }
.wp-caption img { margin: 0; }
.wp-caption-text {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--gray, #757575);
}

/* Zweispaltige Aufzählung im Fließtext (Startseite „garten für alle …").
   Ersetzt die frühere Tabellenlösung: Auto-Flow füllt zeilenweise auf, eine
   ungerade Anzahl Blöcke lässt die letzte Zelle frei – wie vorher die
   Tabellenzeile mit nur einer Spalte. Die 5 % Spaltenfuge entsprechen dem
   alten padding-right der linken Zelle. */
.gfa-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 5%;
	align-items: start;
	margin-top: 18px;
}
.gfa-cols > * { min-width: 0; }
.gfa-cols > * > :first-child { margin-top: 0; }
.gfa-cols > * > :last-child { margin-bottom: 0; }

/* ---------- Bildkacheln (Abschnitt 6.5) ---------- */
.tile {
	position: relative;
	overflow: hidden;
	display: block;
	background-color: #8aa84f;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}
.tile.tile--teaser { height: 230px; }
.tile.tile--tile { height: 230px; }
.tile .cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(60, 69, 31, .82);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 14px;
	letter-spacing: .3px;
}
.tile .cap small {
	display: block;
	font-weight: 400;
	color: #cfe0a0;
	font-size: 11.5px;
	letter-spacing: .6px;
	margin-top: 1px;
}
.teaser-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 24px;
}

/* ---------- Drei Blöcke am Fuß der Startseite (Widget-Bereiche) ---------- */
.gfa-front-blocks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 28px;
}
/* Ein Bereich = eine Karte. Die Karte sitzt auf dem Block, nicht auf den
   einzelnen Widgets – sonst bekommt jedes Widget eines Bereichs seinen
   eigenen Rahmen und dazwischen scheint die grüne Fläche durch.
   Hintergrund „Papier"; alle Karten sind gleich hoch, weil die Rasterspalten
   gleich hoch sind und die Karte die Spalte ausfüllt. */
.gfa-front-block {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper, #fbfcfe);
	border: 1px solid var(--wp--preset--color--line, #e1e1e1);
	padding: 16px 15px 18px;
}
.gfa-front-block .widget {
	background: transparent;
	border: 0;
	margin: 0 0 10px;
}
.gfa-front-block .widget:last-child { margin-bottom: 0; }

/* Inhalte sitzen im Innenabstand der Karte, also ohne eigene Einrückung. */
.gfa-front-block p,
.gfa-front-block .textwidget { font-size: 13.5px; line-height: 1.5; }
.gfa-front-block p { margin: 0 0 10px; }
.gfa-front-block p:last-child { margin-bottom: 0; }
.gfa-front-block .textwidget { padding: 0; }
.gfa-front-block h2,
.gfa-front-block h3,
.gfa-front-block h4 { font-size: var(--wp--preset--font-size--medium, 18px); color: var(--wp--preset--color--ink, #3c451f); margin: 0 0 10px; }
.gfa-front-block .has-background { padding: 8px 12px; }
.gfa-front-block .widget-title { margin: 0 0 10px; }
.gfa-front-block ul { padding: 0; margin: 0 0 10px; list-style: none; }
.gfa-front-block ul li a {
	display: block;
	padding: 7px 0;
	color: var(--wp--preset--color--ink, #3c451f);
	text-decoration: none;
	font-size: 13.5px;
	border-bottom: 1px solid #f0f0e8;
}
.gfa-front-block ul li:last-child a { border-bottom: 0; }

/* Core-Block „Neueste Beiträge" im Startseiten-Block (z. B. die letzten
   Presse-Beiträge). Er ersetzt die früher von Hand gepflegte Linkliste und
   soll genauso aussehen: eine Zeile je Beitrag mit feiner Trennlinie. Die
   Trennlinie sitzt hier am <li>, weil unter dem Titel noch das Datum stehen
   kann – bei der einfachen Linkliste darüber trägt sie der Link selbst. */
.gfa-front-block .wp-block-latest-posts__list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.gfa-front-block .wp-block-latest-posts__list li {
	padding: 7px 0;
	border-bottom: 1px solid #f0f0e8;
}
.gfa-front-block .wp-block-latest-posts__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.gfa-front-block .wp-block-latest-posts__post-title {
	display: block;
	padding: 0;
	border-bottom: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #3c451f);
	text-decoration: none;
}
.gfa-front-block .wp-block-latest-posts__post-title:hover,
.gfa-front-block .wp-block-latest-posts__post-title:focus { text-decoration: underline; }
/* Optionale Angaben des Blocks: Datum und Textauszug. */
.gfa-front-block .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--wp--preset--color--gray, #757575);
}
.gfa-front-block .wp-block-latest-posts__post-excerpt {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
}

.gfa-front-block .haet-cleverreach { padding: 0; }
.gfa-front-blocks-hint { margin-top: 28px; font-size: 13px; color: var(--wp--preset--color--gray, #757575); }

/* ---------- Filterleiste / Pagination ---------- */
.filter-row { display: flex; gap: 10px; margin: 18px 0 20px; flex-wrap: wrap; }
.filter-row a,
.filter-row span { border: 1.5px solid var(--wp--preset--color--green, #a3c43a); color: var(--wp--preset--color--green-deep, #55671b); text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 14px; }
.filter-row a.active,
.filter-row .current { background: var(--wp--preset--color--green, #a3c43a); color: #fff; }
.gfa-pagination { justify-content: center; }

/* ---------- Kachelübersicht / Projekte (Abschnitt 6.5) ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.gfa-filter + .proj-grid { margin-top: 0; }
.gfa-filter { margin-top: 4px; }
/* Text folgt unter den Kacheln – auf Unterseiten wie auf der Startseite. */
.gfa-tiles + .intro,
.teaser-row + .intro { margin-top: 26px; }
.tile[hidden] { display: none; }

/* ---------- Blog: Hauptspalte + Sidebar (Abschnitt 6.6) ---------- */
/* minmax(0, 1fr) statt 1fr: Ohne die Null-Untergrenze kann sich die
   Inhaltsspalte nicht unter ihren Inhalt verkleinern – ein breites Bild
   schiebt dann die Sidebar nach rechts aus der Seite. */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
.blog-layout > * { min-width: 0; }
/* Die Sidebar beginnt auf Höhe des Karopapiers statt am grünen Rahmen des
   Spiralblocks – dieser hat 26 px Innenabstand. Nur auf Blogübersicht und
   Archiven; die Suchseite hat keinen Spiralblock. */
.blog .blog-layout > aside,
.archive .blog-layout > aside { margin-top: 26px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
.blog-grid > * { min-width: 0; }
.blog-header-img { display: block; height: auto; margin: 0 0 6px -4px; }

/* Beitragsbild am Seitenende (page.php) – höchstens ein Drittel der
   Inhaltsbreite, kein Zuschnitt; kleinere Bilder werden nicht hochskaliert.
   Auf Kundenwunsch wieder am Fuß der Seite statt als Teaser im Kopf, damit
   es den Text nicht dominiert. */
.page-thumbnail { margin: 28px 0 0; max-width: 33.333%; }
.page-thumbnail img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.card { background: transparent; }
.card .ph { display: block; height: 150px; position: relative; overflow: hidden; background-color: #8aa84f; background-size: cover; background-position: center; }
.card .body { padding: 11px 2px 16px; }
.card .kicker { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wp--preset--color--green-dark, #7f9c25); font-weight: 700; }
.card h3 { overflow-wrap: break-word; font-size: 15px; color: var(--wp--preset--color--ink, #3c451f); margin: 5px 0 6px; line-height: 1.3; }
.card h3 a { text-decoration: none; color: inherit; }
.card .meta { font-size: 12px; color: #9a9a90; }

/* ---------- Spiralblock (Originaldesign, Abschnitt 6.7) ---------- */
/* Ringbindung = Originalgrafik des Alt-Themes, freigestellt und exakt
   kachelbar (60 × 708 px). Sie liegt über dem Papier, dessen linke Kante
   25 px vom Blockrand beginnt – genau wie im Original. */
.spiral { position: relative; background: var(--wp--preset--color--panel, #dce8b4); padding: var(--gfa-spiral-pad, 26px) 26px var(--gfa-spiral-pad, 26px) 25px; }
.spiral::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--gfa-spiral-pad, 26px);
	bottom: var(--gfa-spiral-pad, 26px);
	width: 60px;
	background: url("../images/spiral-binding.png") repeat-y left top;
	z-index: 3;
	pointer-events: none;
}
.spiral-paper {
	position: relative;
	background-color: var(--wp--preset--color--paper, #fbfcfe);
	background-image:
		/* Gepunktete grüne Randlinie – wie im Original 55 px innerhalb der
		   Papierkante, nicht auf der Kante selbst. */
		repeating-linear-gradient(180deg, var(--wp--preset--color--green, #a3c43a) 0 4px, transparent 4px 8px),
		repeating-linear-gradient(0deg, rgba(200, 217, 232, .3) 0 1px, transparent 1px 18px),
		repeating-linear-gradient(90deg, rgba(200, 217, 232, .3) 0 1px, transparent 1px 18px);
	background-size: 3px 100%, auto, auto;
	background-position: 55px 0, 0 0, 0 0;
	background-repeat: repeat-y, repeat, repeat;
	padding: 26px 30px 32px 72px;
}
.spiral-paper.abody { padding: 26px 32px 32px 72px; }

/* ---------- Sidebar-Widgets (Abschnitt 6.8) ---------- */
aside .widget { background: var(--wp--preset--color--white, #fff); border: 1px solid var(--wp--preset--color--line, #e1e1e1); margin-bottom: var(--gfa-sidebar-gap, 18px); }
/* Bild- und Suchwidget ohne Kasten – sie stehen frei auf der grünen Fläche. */
aside .widget_media_image,
aside .widget_search { background: transparent; border: 0; }

/* Suchformular in der Optik der Newsletter-Felder. */
aside .widget_search .search-form { display: flex; gap: 6px; }
aside .widget_search .search-form label { display: block; flex: 1; min-width: 0; margin: 0; }
aside .widget_search .search-field {
	width: 100%;
	border: 1px solid #cfcfc4;
	background: #fafaf6;
	padding: 9px 11px;
	font-family: inherit;
	font-size: 13px;
	color: var(--wp--preset--color--text, #4a4a4a);
}
aside .widget_search .search-submit {
	background: var(--wp--preset--color--green, #a3c43a);
	color: #fff;
	border: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .5px;
	padding: 10px 14px;
	cursor: pointer;
}
aside .widget_search .search-submit:hover { background: var(--wp--preset--color--green-dark, #7f9c25); }
aside .widget-title,
.gfa-front-block .widget-title {
	background: var(--wp--preset--color--green, #a3c43a);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 9px 14px;
	margin: 0;
}
aside ul.cat-list, aside .widget_categories ul { list-style: none; padding: 6px 0; margin: 0; }
aside ul.cat-list li a, aside .widget_categories li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 14px;
	color: var(--wp--preset--color--ink, #3c451f);
	text-decoration: none;
	font-size: 13.5px;
	border-bottom: 1px solid #f0f0e8;
}
aside .widget_categories .count { background: var(--wp--preset--color--panel, #dce8b4); color: var(--wp--preset--color--green-deep, #55671b); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 2px; }

aside .recent-list { list-style: none; padding: 8px 0; margin: 0; }
aside .recent-list li { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #f0f0e8; }
aside .recent-list .thumb { width: 52px; height: 44px; flex: 0 0 52px; background-size: cover; background-position: center; }
aside .recent-list h4 { font-size: 12.5px; color: var(--wp--preset--color--ink, #3c451f); line-height: 1.28; font-weight: 600; margin: 0; }
aside .recent-list .d { font-size: 11px; color: #9a9a90; margin-top: 2px; }

/* ---------- Newsletter-Formular (CleverReach) ----------
   Das Plugin stellt Label und Feld nebeneinander (40/60 mit float), was in
   schmalen Spalten bricht. Hier auf gestapelte Felder umgestellt und an die
   Design-Referenz angeglichen. Gilt für das Sidebar-Widget und für den
   Shortcode [cleverreach_signup] im Seiteninhalt (z. B. Startseite).
   Der Vorsatz .gfa-page hebt die Spezifität über die Plugin-Regeln. */
/* Innenabstand im Sidebar-Widget, damit der Inhalt nicht am Rahmen klebt. */
.gfa-page aside .widget .haet-cleverreach { padding: 16px 15px 18px; }
.gfa-page .haet-cleverreach-form { margin: 0; }
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap { margin-bottom: 10px; }
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap.type-description { margin-bottom: 12px; }
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap p { font-size: 13px; color: #555; line-height: 1.45; }

.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap label,
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap input,
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap select {
	float: none;
	display: block;
	width: 100%;
}
.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap > label {
	font-size: 12px;
	letter-spacing: .3px;
	color: var(--wp--preset--color--gray, #757575);
	margin: 0 0 4px;
}
.gfa-page .haet-cleverreach input[type="text"],
.gfa-page .haet-cleverreach input[type="email"],
.gfa-page .haet-cleverreach input[type="date"],
.gfa-page .haet-cleverreach input[type="number"],
.gfa-page .haet-cleverreach select {
	border: 1px solid #cfcfc4;
	background: #fafaf6;
	padding: 9px 11px;
	font-family: inherit;
	font-size: 13px;
	color: var(--wp--preset--color--text, #4a4a4a);
}

/* Einverständnis-Zeile: Kästchen und Text auf einer Linie, Text umbricht sauber. */
.gfa-page .haet-cleverreach .cleverreach-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
}
.gfa-page .haet-cleverreach .cleverreach-checkbox input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	margin: 2px 0 0;
}
.gfa-page .haet-cleverreach .cleverreach-checkbox label {
	width: auto;
	margin: 0;
	font-size: 12px;
	color: #555;
}
.gfa-page .haet-cleverreach .cleverreach-checkbox label a { color: var(--wp--preset--color--green-deep, #55671b); }

.gfa-page .haet-cleverreach .haet-cleverreach-field-wrap.type-submit { margin-bottom: 0; text-align: left; }
.gfa-page .haet-cleverreach button#haet-cleverreach-submit {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--green, #a3c43a);
	color: #fff;
	border: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .5px;
	padding: 10px;
	cursor: pointer;
}
.gfa-page .haet-cleverreach button#haet-cleverreach-submit:hover { background: var(--wp--preset--color--green-dark, #7f9c25); }

.gfa-page .haet-cleverreach .message-success { font-size: 13px; color: var(--wp--preset--color--green-deep, #55671b); margin-bottom: 10px; }
.gfa-page .haet-cleverreach .message-error,
.gfa-page .haet-cleverreach .cleverreach-error-message { font-size: 12px; margin-top: 4px; }

/* Im Seiteninhalt steht das Formular frei – deshalb derselbe Kasten wie in
   der Sidebar, nur in begrenzter Breite statt über die volle Textspalte. */
.gfa-page .intro .haet-cleverreach {
	max-width: 420px;
	margin: 18px 0;
	padding: 16px 15px 18px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--line, #e1e1e1);
}

/* ---------- Artikel (Abschnitt 6.9) ---------- */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
.article-wrap > * { min-width: 0; }
/* Der Artikel liegt direkt auf der grünen Fläche – kein zweiter Kasten. */
.article { background: transparent; border: 0; }
/* Rechte Kante auf dem Karopapier, nicht auf dem grünen Rahmen des
   Spiralblocks: Dessen Grün ist dasselbe wie das der Inhaltsfläche und
   deshalb nicht zu sehen – das Bild wirkte sonst 26 px zu weit rechts.
   Links bleibt es bündig, dort sitzt die Ringbindung. */
.ph.hero {
	width: calc(100% - var(--gfa-spiral-pad, 26px));
	height: var(--gfa-hero-height, 328px);
	position: relative;
	overflow: hidden;
	max-width: 100%;
	background-size: cover;
	background-position: center;
}

/* Im Einzelbeitrag bildet das erste Bild-Widget der Sidebar ein Paar mit dem
   Teaserbild: gleiche Höhe, gleicher Beschnitt, kein Abstand darunter.
   Dadurch beginnt das Suchfeld exakt auf Höhe des Spiralblocks. Greift nur,
   wenn der Beitrag überhaupt ein Teaserbild hat. */
/* Nur im zweispaltigen Layout sinnvoll – darunter stehen die Spalten
   untereinander, dort behält das Bild seine natürliche Höhe. */
@media (min-width: 901px) {
	.single .article-wrap:has(.ph.hero) > aside > .widget_media_image:first-child {
		/* Bildhöhe + Abstand = Teaserbildhöhe + Innenabstand des Spiralblocks.
		   Die Oberkante des Suchfelds trifft damit die Oberkante des
		   Karopapiers, und zwischen Bild und Suchfeld bleibt Luft. */
		height: calc(var(--gfa-hero-height, 328px) - var(--gfa-sidebar-gap, 18px));
		margin-bottom: calc(var(--gfa-sidebar-gap, 18px) + var(--gfa-spiral-pad, 26px));
		overflow: hidden;
	}
	/* Das Media-Image-Widget schreibt „max-width:100%; height:auto" als Inline-
	   Style direkt an das Bild. Inline schlägt jede Stylesheet-Regel – nur
	   deshalb steht hier !important. Die Höhe gibt der Rahmen vor, das Bild
	   füllt ihn beschnitten aus. */
	.single .article-wrap:has(.ph.hero) > aside > .widget_media_image:first-child img {
		display: block;
		width: 100%;
		max-width: none;
		height: 100% !important;
		object-fit: cover;
	}
}
.ph.hero .cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(60, 69, 31, .82); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 14px;
}
.ph.hero .cap small { display: block; font-weight: 400; color: #cfe0a0; font-size: 11.5px; margin-top: 1px; }

.crumb { font-size: 12px; color: #9aa26e; letter-spacing: .5px; margin-bottom: 8px; }
.tag-cat { display: inline-block; text-decoration: none; background: var(--wp--preset--color--panel, #dce8b4); color: var(--wp--preset--color--green-deep, #55671b); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 10px; }
.tag-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.article h1 { color: var(--wp--preset--color--ink, #3c451f); font-size: 27px; margin: 6px 0 4px; }
.post-meta { font-size: 12.5px; color: #8b9160; margin-bottom: 4px; }

/* Schlagwörter am Ende des Beitrags (single.php). Sie erscheinen nur, wenn
   welche vergeben sind; die Kategorie steht weiterhin oben als Badge. */
.post-tags { margin-top: 18px; font-size: 12.5px; color: #8b9160; }
.post-tags-label { color: var(--wp--preset--color--ink, #3c451f); font-weight: 600; }
.post-tags a { color: var(--wp--preset--color--green-dark, #7f9c25); text-decoration: none; }
.post-tags a:hover,
.post-tags a:focus { text-decoration: underline; }

.prose { overflow-wrap: break-word; }
.prose p { margin-bottom: 12px; }
.prose h2 { color: var(--wp--preset--color--ink, #3c451f); font-size: var(--wp--preset--font-size--medium, 18px); margin: 20px 0 7px; }
.prose h3 { line-height: 1.3; margin: 20px 0 1.3em; }
.prose strong { color: var(--wp--preset--color--ink, #3c451f); }
.prose blockquote,
.prose .pullquote {
	border-left: 5px solid var(--wp--preset--color--green, #a3c43a);
	background: var(--wp--preset--color--panel-soft, #eef3d9);
	padding: 16px 20px;
	margin: 20px 0;
	font-size: 16px;
	color: var(--wp--preset--color--ink, #3c451f);
	font-style: italic;
}
.prose blockquote p:last-child,
.prose .pullquote p:last-child { margin-bottom: 0; }
.prose blockquote cite,
.prose .pullquote cite { display: block; font-style: normal; font-size: 13px; color: #7d8358; margin-top: 6px; }

/* ---------- Breadcrumb (Plugin „Flexy Breadcrumb") ----------
   Das Plugin rückt den ersten Eintrag um 16 px ein; hier bündig zum
   Seitentitel ausgerichtet. Der Vorsatz `.gfa-page` hebt die Spezifität
   über die Plugin-Regel, damit die Ladereihenfolge keine Rolle spielt. */
.gfa-page .fbc-page .fbc-wrap .fbc-items li:first-child { padding-left: 0; }

/* Zeilenumbruch der Spur: Die Einträge des Plugins sind inline-block mit
   15 px Innenabstand oben und unten. Bei einer Zeile ergibt das den richtigen
   Rahmen, bei mehreren stand jede Folgezeile 49 px tief. Der Abstand wandert
   deshalb von den Einträgen auf die Liste; als Flex-Zeile mit 2 px
   Zeilenfuge liegen umgebrochene Zeilen dicht beieinander. Die einzeilige
   Spur bleibt dabei unverändert hoch (48 statt 49 px), und die waagrechten
   Abstände sind identisch, weil die seitlichen Innenabstände bleiben. */
.gfa-page .fbc-page .fbc-wrap .fbc-items {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 2px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.gfa-page .fbc-page .fbc-wrap .fbc-items li {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.5;
}

/* ---------- Galerien ([gallery]-Shortcode, HTML5-Markup) ----------
   Mit html5-Galerie-Unterstützung liefert WordPress bewusst keine eigenen
   Layout-Styles; das Raster kommt daher vollständig von hier.
   Mauerwerk-Layout: gleich breite Spalten, jedes Vorschaubild in seinem
   echten Seitenverhältnis und vollständig sichtbar (nichts abgeschnitten),
   14 px Fuge, kein Rahmen. Die Lightbox (Plugin) bleibt unberührt. */
.gallery {
	display: block;
	column-count: 3;
	column-gap: 14px;
	margin: 20px 0;
}
.gallery-columns-1 { column-count: 1; }
.gallery-columns-2 { column-count: 2; }
.gallery-columns-3 { column-count: 3; }
.gallery-columns-4 { column-count: 4; }
.gallery-columns-5 { column-count: 5; }
.gallery-columns-6 { column-count: 6; }
.gallery-columns-7 { column-count: 7; }
.gallery-columns-8 { column-count: 8; }
.gallery-columns-9 { column-count: 9; }

/* Größenauswahl aus dem Editor: WordPress setzt `gallery-size-<größe>`.
   Vorschaubild → quadratische Kacheln, „Lightbox Grid" → 4:3-Kacheln
   (beide zugeschnitten, Spaltenzahl aus `columns`); Voll → eine Spalte, Bild in voller Breite, nichts
   abgeschnitten. Alle übrigen Größen bleiben im Mauerwerk-Layout. */
.gallery-size-thumbnail .gallery-icon img,
.gallery-size-gfa-grid .gallery-icon img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.gallery-size-gfa-grid .gallery-icon img { aspect-ratio: 4 / 3; }
.gallery.gallery-size-full { column-count: 1; }

/* Fuge als padding statt margin: Browser kappen/verschieben Außenabstände
   an Spaltenumbrüchen (break-inside: avoid) und setzen sonst die Folge-
   spalten um genau eine Fuge (14 px) nach unten. */
.gallery br { display: none; }
.gallery .gallery-item {
	width: 100%;
	margin: 0;
	padding: 0 0 14px;
	min-width: 0;
	text-align: left;
	break-inside: avoid;
}
.gallery .gallery-icon { margin: 0; }
.gallery .gallery-icon a { display: block; }
.gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}
.gallery .gallery-caption {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--gray, #757575);
}

@media (max-width: 900px) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { column-count: 3; }
}
@media (max-width: 600px) {
	.gallery,
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { column-count: 2; }
}

/* Gleich große Kacheln (Lightbox Grid, Vorschaubild) als echtes Raster:
   Reihenfolge zeilenweise, alle Zeilen gleich lang (nur die letzte darf
   unvollständig sein). Spaltenzahl weiter aus `columns`, mobil reduziert. */
.gallery-columns-1 { --gfa-cols: 1; }
.gallery-columns-2 { --gfa-cols: 2; }
.gallery-columns-3 { --gfa-cols: 3; }
.gallery-columns-4 { --gfa-cols: 4; }
.gallery-columns-5 { --gfa-cols: 5; }
.gallery-columns-6 { --gfa-cols: 6; }
.gallery-columns-7 { --gfa-cols: 7; }
.gallery-columns-8 { --gfa-cols: 8; }
.gallery-columns-9 { --gfa-cols: 9; }
@media (max-width: 900px) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { --gfa-cols: 3; }
}
@media (max-width: 600px) {
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { --gfa-cols: 2; }
}
.gallery.gallery-size-gfa-grid {
	display: grid;
	grid-template-columns: repeat(var(--gfa-cols, 3), minmax(0, 1fr));
	gap: 14px;
	column-count: auto;
}
/* Vorschaubild: 150×150-px-Kacheln, Spaltenzahl aus `columns` (mobil
   reduziert), linksbündig. Ist die Spalte schmaler als 150 px, schrumpft
   die Kachel mit (quadratisch bleibt sie). */
.gallery.gallery-size-thumbnail {
	display: grid;
	grid-template-columns: repeat(var(--gfa-cols, 3), minmax(0, 150px));
	gap: 14px;
	justify-content: start;
	column-count: auto;
}
.gallery.gallery-size-gfa-grid .gallery-item,
.gallery.gallery-size-thumbnail .gallery-item { padding: 0; }
.gallery.gallery-size-thumbnail .gallery-icon img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------- Von WordPress vorgesehene Zustandsklassen ----------
   „Sticky" markiert einen oben gehaltenen Beitrag, „bypostauthor" einen
   Kommentar der Autorin. Beide gehören zum Pflichtumfang eines Themes. */
.sticky .card h3::before {
	content: "\2605\00a0";
	color: var(--wp--preset--color--green-dark, #7f9c25);
}
.comment.bypostauthor > .comment-body {
	border-left: 3px solid var(--wp--preset--color--green, #a3c43a);
	padding-left: 12px;
}

/* ---------- Kommentare ---------- */
.comments-area { margin-top: 24px; padding: 0 32px 32px; }
.comments-title { font-size: 18px; color: var(--wp--preset--color--ink, #3c451f); margin-bottom: 12px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { border-top: 1px solid var(--wp--preset--color--line, #e1e1e1); padding: 14px 0; }
.comment-list .comment-author { font-weight: 600; color: var(--wp--preset--color--ink, #3c451f); }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	border: 1px solid #cfcfc4;
	background: #fafaf6;
	padding: 9px 11px;
	font-size: 13px;
	margin-bottom: 9px;
	font-family: inherit;
}
.comment-respond .submit {
	background: var(--wp--preset--color--green, #a3c43a);
	color: #fff;
	border: 0;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .5px;
	padding: 10px 22px;
}

/* ---------- Footer (Abschnitt 6.10) ---------- */
.site-footer {
	border-top: 4px solid var(--wp--preset--color--green, #a3c43a);
	padding: 20px 44px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	color: var(--wp--preset--color--gray, #757575);
	background: #fafaf7;
}
.site-footer .foot-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer nav.foot-menu ul { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.site-footer nav.foot-menu a { color: var(--wp--preset--color--gray, #757575); text-decoration: none; margin-left: 18px; }
/* Social-Icons liefert das Plugin „Ultimate Social Media Icons" per Shortcode
   samt eigener Styles – hier bewusst keine Vorgaben. */

/* ---------- Responsive (Abschnitt 8) ---------- */
@media (max-width: 900px) {
	.gfa-banner { display: none; }
	/* Reiter zweizeilig, damit die Beschriftungen nicht gequetscht werden. */
	.menu-f li { flex: 1 1 calc(33.333% - 4px); }
	.blog-layout,
	.article-wrap { grid-template-columns: 1fr; }
	.gfa-front-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.menu-f li { flex: 1 1 calc(50% - 3px); }
	.teaser-row,
	.proj-grid,
	.blog-grid,
	.gfa-cols,
	.gfa-front-blocks { grid-template-columns: 1fr; }
	.gfa-cols { gap: 18px; }
	/* Auf dem Telefon bleibt neben einem umflossenen Bild keine lesbare
	   Textspalte übrig – Bilder stehen dort untereinander. */
	.alignleft,
	a.alignleft,
	figure.alignleft,
	.wp-caption.alignleft,
	.alignright,
	a.alignright,
	figure.alignright,
	.wp-caption.alignright {
		float: none;
		margin: 0 0 14px;
	}
	.teaser-row .tile.tile--teaser { height: 220px; }
	/* Ein Drittel der Breite wäre auf dem Telefon nur noch briefmarkengroß. */
	.page-thumbnail { max-width: 100%; }
	/* Bindung bleibt vollständig, nur der übrige Innenabstand wird knapper –
	   eine schmalere Spalte würde die Ringe mittendrin abschneiden. */
	.spiral { padding: 18px 12px 18px 20px; }
	/* Schmalerer Innenabstand des Spiralblocks – das Teaserbild zieht mit. */
	.ph.hero { width: calc(100% - 12px); }
	.spiral::before { top: 18px; bottom: 18px; }
	.spiral-paper,
	.spiral-paper.abody { padding: 18px 14px 22px 52px; background-position: 44px 0, 0 0, 0 0; }
	.frame { padding: 18px 14px 30px; }
	.content-panel { padding: 22px 20px 26px; }
	.site-footer { flex-direction: column; align-items: flex-start; }
	.site-footer nav.foot-menu a { margin-left: 0; margin-right: 16px; }
}