/*
Theme Name: Classic Garden Elements
Theme URI: https://www.classic-garden-elements.de/
Author: Daniel Paul Töpp
Author URI: https://onlinemarketing-consultant.de/
Description: Individuelles Classic Theme für den Shop von Classic Garden Elements. Umsetzung des Design-Vorschlags, ohne Build-Prozess, WooCommerce-fähig.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cge
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* --------------------------------------------------------------
   Inhalt
   1.0  Design-Tokens
   1.5  Schriften
   2.0  Reset und Grundlagen
   3.0  Typografie
   4.0  Layout-Bausteine
   5.0  Buttons und Formulare
   6.0  Topbar
   7.0  Kopfbereich
   8.0  Hauptnavigation, Mega-Menü, Mobilmenü
   9.0  Breadcrumb
   10.0 Startseite
   11.0 Produktkarten und Raster
   12.0 Kategorie- und Archivseiten
   13.0 Produktseite
   14.0 Beiträge, Seiten, Kommentare
   15.0 Fußbereich
   16.0 WooCommerce-Anpassungen
   17.0 Barrierefreiheit
   18.0 Responsive
   -------------------------------------------------------------- */


/* --------------------------------------------------------------
   1.5 Schriften
   --------------------------------------------------------------

   Die drei Schriften des Entwurfs liegen unter `assets/fonts/` im Theme.

   Zuvor meldete das Theme eine Adresse bei `fonts.googleapis.com` an und
   verließ sich darauf, dass ein Plugin sie lokal umschreibt — erst OMGF,
   später WP Rocket. Beides funktionierte, aber nicht lückenlos: WP Rocket
   ersetzt die Adresse im fertigen HTML und damit nur auf Seiten, die es
   verarbeitet. Warenkorb, Kundenkonto, Suchergebnisse und sortierte
   Kategorieseiten werden nie gecacht — dort ging die Anfrage weiterhin an
   Google, also ausgerechnet bei den Besuchern, die am tiefsten im Kaufprozess
   stecken.

   Lokal im Theme kann diese Lücke nicht mehr auftreten, und es ist eine
   Abhängigkeit weniger beim Rollout.

   Übernommen sind `latin` und `latin-ext`; Kyrillisch, Griechisch und
   Vietnamesisch entfallen. Die Dateien stammen aus derselben Quelle, die
   Google ausliefert. `font-display: swap` zeigt sofort die Ersatzschrift und
   tauscht sie aus, sobald die Datei da ist.

   Cormorant Garamond (Gewicht 300–700) und Jost (100–900) sind Variable
   Fonts und je Teilmenge mit ihrem Gewichtsbereich angemeldet. Bis
   22.10.2026 standen dort einzelne Gewichte (Cormorant 300 und 400, Jost
   300–600) – Fettdruck in Überschriften und Preisen (`strong`, 700) erzeugte
   der Browser deshalb künstlich, obwohl die Datei echtes Fett enthält. Jost
   ist bewusst bei 600 gedeckelt: So sah Fettdruck in Jost schon bisher aus.
   EB Garamond lag bis 22.10.2026 als statische Datei nur mit Gewicht 400 vor,
   Fettdruck im Fließtext war künstlich verbreitert. Seither die variable
   Fassung von Google Fonts (400–800, Version 1.003 wie zuvor, gleiche
   Zeichen je Teilmenge); die statischen Dateien liegen unter
   `Backups/eb-garamond-statisch-2026-10-22/`. */

/* Cormorant Garamond 300–700 italic — latin-ext */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond 300–700 italic — latin */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond 300–700 normal — latin-ext */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond 300–700 normal — latin */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 400–800 italic — latin-ext */
@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/eb-garamond-var-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400–800 italic — latin */
@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/eb-garamond-var-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 400–800 normal — latin-ext */
@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/eb-garamond-var-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400–800 normal — latin */
@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/eb-garamond-var-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 300–600 normal — latin-ext */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('assets/fonts/jost-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 300–600 normal — latin */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('assets/fonts/jost-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Symbolschrift von WooCommerce (Bewertungssterne, einzelne Symbole) mit
   `font-display: swap`.

   WooCommerce deklariert sie ohne Angabe, der Browser hält damit bis zu drei
   Sekunden jeden Text in dieser Schrift zurück. Auf der Produktseite stand die
   Datei im Messprotokoll mit 990 ms Wartezeit (gedrosselter Mobilfunk,
   24.09.2026). Die Deklaration hier steht nach der des Plugins und gilt
   deshalb; Datei und Familiennamen sind dieselben. **Ändert WooCommerce den
   Pfad, muss diese Regel mit:** Bei gleichen Angaben gilt nur die letzte
   Deklaration, ein 404 hier ließe die Sterne als Ersatzzeichen stehen. */
@font-face {
	font-family: 'star';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../plugins/woocommerce/assets/fonts/WooCommerce.woff2') format('woff2');
}

@font-face {
	font-family: 'WooCommerce';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../plugins/woocommerce/assets/fonts/WooCommerce.woff2') format('woff2');
}

/* 1.0 Design-Tokens
   -------------------------------------------------------------- */

:root {
	--cream: #f7f3ec;
	--cream-dark: #ede7da;
	--green-deep: #2a3d28;
	--green-mid: #4a6b46;
	--green-light: #7a9b74;
	--green-pale: #c8d9c4;
	--bronze: #9b7c45;
	--bronze-light: #c4a26a;
	--bronze-pale: #ead9ba;
	--brown-dark: #1e1a14;
	--brown-mid: #4a3f30;
	--taupe: #b8a898;
	--taupe-light: #ddd4c8;
	--white: #fffdf9;
	--text-main: #1e1a14;
	--text-muted: #6b6056;
	--sale: #b33a2a;
	--sale-dark: #8a2010;

	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--body: 'EB Garamond', Georgia, serif;

	--page: #f0ebe0;
	--wrap: 1400px;
	--gutter: 48px;

	/* Höhe von Topbar plus Kopfbereich – steuert die klebrigen Elemente. */
	--topbar-h: 47px;
	--header-h: 100px;
}


/* 2.0 Reset und Grundlagen
   -------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #f0ebe0;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 18px;
	-webkit-text-size-adjust: 100%;
}

/* Der Grund der Seite.

   Im Entwurf liegt jeder Inhaltsrahmen — Kategorie, Produkt, Textabschnitt —
   auf demselben warmen Ton; die Bereiche setzen ihre eigene Fläche darauf ab.
   Hier stand zuvor `--white`, und nur die Produktseite hob das mit einer
   eigenen Regel wieder auf. Auf breiten Bildschirmen liefen die Ränder damit in
   zwei verschiedenen Tönen, je nachdem, auf welcher Seite man stand. */
.cge-main {
	background: var(--page);
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Für Rahmen gilt nur die Breitenbegrenzung. `height: auto` schlug hier das
   Höhenattribut des Einbettungscodes, und eingebettete Videos fielen auf die
   150 Pixel Standardhöhe eines iframe zusammen. */
iframe {
	max-width: 100%;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--taupe-light);
	margin: 40px 0;
}

/* Bedienelemente erben die Schrift (22.10.2026). Ohne diese Regel setzt der
   Browser Knöpfe, Eingabefelder und Auswahllisten in Arial mit 13,3 Pixeln –
   jede Komponente musste selbst daran denken, und die Farbknöpfe, die
   Preisregler und die Kästchen in Formularen taten es nicht (Schrift-QA vom
   22.10.2026). Eigene Regeln der Komponenten gehen weiter vor. */
button,
input,
select,
textarea,
optgroup {
	font: inherit;
	letter-spacing: inherit;
}


/* 3.0 Typografie
   -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.2;
	margin: 0 0 16px;
	text-wrap: balance;
}

/* Größenstaffel für jede Überschrift (22.10.2026). Bis dahin stand sie nur im
   Inhaltsbereich (`.cge-entry-content`, `.cat-text`, siehe 13.x); überall
   sonst setzte der Browser die Größe – 2em, 1,5em, 1,17em, 1em … der
   Umgebung. Betroffen waren die Überschriften in allen Produktbeschreibungen
   (H2 27, H3 21, H4 18 Pixel), der Seitentitel (36) und die Titel von
   Suchergebnis und 404. Komponenten mit eigener Überschrift (Produktkachel,
   Warenkorb, Fuß …) setzen ihre Größe weiter selbst; hier steht nur das Netz,
   damit keine Überschrift mehr ohne Vorgabe bleibt. */
h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 27px; }
h4 { font-size: 23px; }
h5 { font-size: 21px; }
h6 { font-size: 20px; }

p, ul, ol, blockquote, table {
	margin: 0 0 20px;
}

a {
	color: var(--green-mid);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--green-deep);
}

.section-label {
	display: block;
	margin-bottom: 12px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

/* Auf dem dunklen Bildkopf der Kategorieseiten heller; stand bis 22.10.2026
   als style-Attribut in woocommerce/archive-product.php. */
.cat-hero .section-label {
	color: var(--bronze-light);
}

.section-title {
	font-family: var(--serif);
	font-size: 44px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.2;
}

.section-title-md {
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.2;
}

/* 4.0 Layout-Bausteine
   -------------------------------------------------------------- */

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 80px var(--gutter);
}

.section-header {
	text-align: center;
	margin-bottom: 56px;
}


/* 5.0 Buttons und Formulare
   -------------------------------------------------------------- */

/* `.sh-toggle` und `.sh-link > a` sind der Umschalter der aufklappbaren
   Abschnitte („mehr lesen“). Sie stehen hier mit in der Liste, statt ihre
   Gestaltung weiter unten zu wiederholen: Auf der Produktseite steht der
   Umschalter dicht neben dem Anfrage-Knopf, und zwei getrennte Regelblöcke
   liefen bei jeder Änderung auseinander – anfangs um Schriftstärke und
   Zeilenhöhe, was den Umschalter vier Pixel niedriger machte. Was ihn vom
   Anfrage-Knopf unterscheidet, steht in Abschnitt 17.0: Flex für die Spitze
   und deren Drehung. */
.btn-primary,
.btn-outline,
.btn-green,
.btn-inquiry,
.btn-atc,
.btn-filter,
.sh-toggle,
.sh-link > a {
	display: inline-block;
	font-family: var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border-radius: 1px;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.btn-primary {
	background: var(--bronze);
	color: #fff;
	border: 1px solid var(--bronze);
	font-size: 17px;
	padding: 16px 36px;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--bronze-light);
	border-color: var(--bronze-light);
	color: #fff;
}

.btn-outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgb(255 255 255 / 50%);
	font-size: 17px;
	padding: 16px 36px;
}

.btn-outline:hover,
.btn-outline:focus {
	background: rgb(255 255 255 / 10%);
	border-color: #fff;
	color: #fff;
}

.btn-green {
	background: var(--green-deep);
	color: #fff;
	border: 1px solid var(--green-deep);
	font-size: 17px;
	padding: 15px 32px;
	align-self: flex-start;
}

.btn-green:hover,
.btn-green:focus {
	background: var(--green-mid);
	border-color: var(--green-mid);
	color: #fff;
}

.btn-inquiry,
.sh-toggle,
.sh-link > a,
.cge-entry-content .sh-link > a {
	background: none;
	color: var(--green-deep);
	border: 1px solid var(--green-deep);
	font-size: 16px;
	padding: 11px 24px;
}

.btn-inquiry:hover,
.btn-inquiry:focus,
.sh-toggle:hover,
.sh-toggle:focus,
.sh-link > a:hover,
.sh-link > a:focus,
.cge-entry-content .sh-link > a:hover,
.cge-entry-content .sh-link > a:focus {
	background: var(--green-deep);
	color: #fff;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
	background: var(--white);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
}

textarea {
	width: 100%;
}


/* 6.0 Topbar
   -------------------------------------------------------------- */

/* Mindesthöhe = endgültige Höhe (Performance-Audit 29.10.2026): Die
   Sprachauswahl setzt GTranslate erst per Skript ein; bis dahin war die Leiste
   auf dem Telefon 35 statt 40 Pixel hoch, danach rutschte die ganze Seite um
   5 Pixel (Layout-Verschiebung 0,088 auf der Startseite). */
.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 42px;
	padding: 8px var(--gutter);
	background: var(--green-deep);
	color: rgb(255 255 255 / 80%);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.05em;
}

.topbar a {
	color: rgb(255 255 255 / 80%);
	text-decoration: none;
}

.topbar a:hover,
.topbar a:focus {
	color: var(--bronze-light);
}

.topbar-left,
.topbar-right {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Die Eintraege bleiben einzeilig. Ohne das schrumpfen sie im Flex-Container,
   bis sie umbrechen: "Besichtigung vor Ort Mo - Fr 8:00 - 13:00 Uhr" und
   "Fertigung auf Mass & Design Service" liefen ueber zwei Zeilen und machten
   die Leiste 63 statt 47 Pixel hoch. */
.topbar-left > *,
.topbar-right li,
.topbar-right a {
	flex-shrink: 0;
	white-space: nowrap;
}

.topbar-left ul,
.topbar-right ul {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Sprachauswahl von GTranslate.

   Das Plugin haengt ein `<select>` in die Menueposition. Ohne eigene Regeln
   greift die allgemeine Formularvorgabe des Themes: weisser Grund, Rahmen,
   17 Pixel Schrift, 10 Pixel Innenabstand - zusammen 47 Pixel hoch. Das ist
   die volle Hoehe der Topbar, die dadurch von 47 auf 63 Pixel wuchs, und ein
   helles Feld mitten in der dunklen Leiste.

   Hier wird es zu dem, was es neben den uebrigen Eintraegen sein soll: Text in
   derselben Schrift und Farbe, mit einem Pfeil als einzigem Hinweis darauf,
   dass sich etwas aufklappen laesst. */

.topbar .gt_selector,
.topbar select.gt_selector {
	height: auto;
	padding: 2px 16px 2px 0;
	border: 0;
	border-radius: 0;
	color: rgb(255 255 255 / 80%);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.4;
	cursor: pointer;

	/* Eigener Pfeil: `appearance: none` nimmt den des Systems, der auf dunklem
	   Grund kaum zu sehen waere. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Die Breite richtet sich sonst nach dem laengsten Eintrag der Liste
   ("Nederlands"), nicht nach dem gewaehlten ("Deutsch") - der Pfeil stuende
   weit hinter dem Namen. theme.js misst den sichtbaren Text und setzt die
   Breite danach. */
.topbar .gt_selector[style*="width"] {
	text-overflow: clip;
}

.topbar .gt_selector:hover {
	color: var(--bronze-light);
}

.topbar .gt_selector:focus-visible {
	outline: 2px solid var(--bronze-light);
	outline-offset: 3px;
}

/* Die aufgeklappte Liste zeichnet das Betriebssystem auf hellem Grund -
   helle Schrift waere dort unlesbar. */
.topbar .gt_selector option {
	background: var(--white);
	color: var(--text-main);
}

.topbar .menu-item-gtranslate {
	display: flex;
	align-items: center;
}

/* Länderflaggen hinter der Sprachauswahl (cge_topbar_country_flags()). Flagge
   und Sprachauswahl gehören zusammen: kein Trenner dazwischen, engerer
   Abstand. Der feine Rand hält die weißen Flächen von UK und USA auf dem
   dunklen Grund zusammen. */
.topbar .menu-item-laender {
	display: flex;
	align-items: center;
	gap: 8px;
}

.topbar .cge-land {
	display: flex;
	padding: 2px;
	border-radius: 2px;
	opacity: 0.85;
	transition: opacity 0.15s;
}

.topbar .cge-land:hover,
.topbar .cge-land:focus-visible {
	opacity: 1;
}

.topbar .cge-land:focus-visible {
	outline: 2px solid var(--bronze-light);
	outline-offset: 1px;
}

.cge-flagge {
	display: block;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
}

.topbar-right .menu-item-gtranslate + .menu-item-laender {
	margin-left: -8px;
}

.topbar-right .menu-item-gtranslate + .menu-item-laender::before {
	content: none;
}

.topbar-divider {
	opacity: 0.3;
}

/* Trenner zwischen den Eintraegen rechts.

   Links stehen sie als eigene <span> im Markup. Rechts geht das nicht: Dort
   kommen die Eintraege aus wp_nav_menu() und der letzte von GTranslate. Der
   Strich entsteht deshalb vor jedem Eintrag ausser dem ersten.

   Der Abstand rechts vom Strich entspricht dem gap der Liste - so steht er
   mittig zwischen den Eintraegen, genau wie links. */
.topbar-right li + li::before {
	content: "|";
	margin-right: 24px;
	opacity: 0.3;
}

/* Der Strich ist Zierrat und soll nicht vorgelesen werden. Die zweite
   Zeichenkette ist der Alternativtext fuer Vorlesegeraete; Browser ohne
   Unterstuetzung ignorieren die Regel und behalten die einfache Fassung. */
@supports ( content: "a" / "b" ) {
	.topbar-right li + li::before {
		content: "|" / "";
	}
}


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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	border-bottom: 1px solid var(--taupe-light);
}

/* Der Kopfbereich ist ein Raster aus drei Spalten: Suchfeld, Schriftzug,
   Symbole. Auf dem Telefon rückt das Suchfeld in eine zweite Zeile neben den
   Menüknopf – siehe unten.

   Links stand zuvor nur eine Lupe, rechts drei Symbole mit Beschriftung. Die
   Symbole füllten ihre Spalte fast ganz und rückten bis an den Schriftzug,
   links blieb die Spalte leer. Das offene Suchfeld gibt der linken Seite
   dasselbe Gewicht.

   minmax(0, 1fr) statt 1fr: Sonst bestimmt der breiteste Inhalt die
   Mindestbreite einer Spalte, und die Mitte stünde nicht mehr mittig. */
.header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	column-gap: 32px;
	align-items: center;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.logo-block {
	grid-column: 2;
	grid-row: 1;
}

.header-right {
	grid-column: 3;
	grid-row: 1;
}

.header-search {
	grid-column: 1;
	grid-row: 1;
	container: header-search / inline-size;
}

/* Die Spalte ist ein Größen-Container: Wird sie zu schmal für die
   Beschriftungen, weichen diese – siehe `.header-icon .label`. */
.header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	container: header-right / inline-size;
}

.logo-block {
	padding: 18px 0;
	text-align: center;
}

.logo-block img {
	margin-inline: auto;
}

/* Das Ornament steht als Hintergrund eines Pseudoelements vor dem Schriftzug,
   nicht als Bild im Markup: Es ist Zierrat und soll von Vorlesegeraeten nicht
   angekuendigt werden. Dieselbe Grafik traegt auch der Kopf der Blogbeitraege. */
.logo-main::before {
	display: inline-block;
	/* Genau die Schriftgröße des Schriftzugs daneben. Dessen Versalhöhe ist
	   kleiner als diese 28 Pixel, deshalb hängt die Grafik ein Stück unter die
	   Grundlinie – sonst stünde sie optisch zu hoch. */
	width: 28px;
	height: 28px;
	margin-right: 10px;
	vertical-align: -5px;
	background: url('assets/img/ornament-zapfen.png') no-repeat center / contain;
	content: '';
}

.logo-main {
	display: block;
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 300;
	color: var(--green-deep);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-decoration: none;
}

.logo-sub {
	margin-top: 2px;
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.25em;
	color: var(--bronze);
	text-transform: uppercase;
}

/* Beschriftung unter dem Symbol, nicht daneben: halbiert die Breite der
   Gruppe, ohne die Beschriftung aufzugeben. Für die Zielgruppe ist ein Herz
   allein nicht eindeutig „Merkzettel". */
.header-icon {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	background: none;
	border: none;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
	text-decoration: none;
	cursor: pointer;
}

.header-icon:hover,
.header-icon:focus {
	color: var(--green-deep);
}

/* Der Zähler sitzt in der oberen Ecke des Symbols statt daneben. Das spart in
   der schmalen Kopfzeile des Telefons den Platz einer ganzen Beschriftung und
   bindet die Zahl sichtbar an das Symbol, zu dem sie gehört. */
/* inline-flex, nicht block: Als Blockelement in einer Flex-Zeile haette der
   Rahmen keine eigene Breite, und das SVG darin mit `max-width: 100%` fiele auf
   null zusammen – das Warenkorb-Symbol verschwand. */
.header-icon__mark {
	position: relative;
	display: inline-flex;
}

/* Der Zähler sitzt in der linken oberen Ecke, nicht in der rechten: Rechts
   schloss die Beschriftung an und wurde halb verdeckt. */
.cart-count {
	position: absolute;
	top: -6px;
	left: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--bronze);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Symbole folgen der Textfarbe und stehen optisch auf der Grundlinie. */
.cge-icon {
	display: block;
	flex: none;
}

/* Der Merkzettel wartet noch auf seine Funktion. */
.header-icon--soon {
	cursor: default;
	opacity: 0.55;
}

/* „Mein Konto" brach auf mittleren Breiten in zwei Zeilen um und machte die
   Kopfzeile höher als nötig. */
.header-icon .label {
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

/* Reicht der Platz neben dem Schriftzug nicht, bleiben nur die Symbole. Die
   Beschriftung wird dabei nicht entfernt, sondern nur unsichtbar – sie ist der
   Name des Links für Vorlesegeräte. Die drei Einträge brauchen mit
   Beschriftung 265 Pixel. */
@container header-right (max-width: 268px) {
	.header-icon .label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Suchfeld links im Kopfbereich, so breit wie die Symbolgruppe gegenüber
   (gemessen 265 Pixel). Dann steht der Schriftzug zu beiden Seiten gleich weit
   entfernt. Mit 340 Pixeln füllte das Feld bei 1250 Pixeln Fensterbreite seine
   Spalte ganz und rückte bis auf 32 Pixel an den Schriftzug. */
.header-search form {
	max-width: 270px;
}

/* Auf mittleren Breiten (etwa 800 bis 1120 Pixel) weichen rechts die
   Beschriftungen, die Symbolgruppe schrumpft auf 138 Pixel. Füllte das
   Suchfeld dann weiter seine ganze Spalte, stünde es 32 Pixel vor dem
   Schriftzug, die Symbole 160 Pixel dahinter. Etwas Abstand zur Mitte hält
   beide Seiten ungefähr gleich.

   Noch schmaler (Tablet hochkant, rund 880 Pixel) geht die Lesbarkeit vor:
   Das Feld bekommt die ganze Spalte, sonst blieben vom Eingabefeld 75 Pixel. */
@container header-search (max-width: 268px) {
	.header-search form {
		max-width: calc(100% - 48px);
	}
}

@container header-search (max-width: 230px) {
	.header-search form {
		max-width: none;
	}
}

/* Die Lupe sitzt im Feld, ohne eigene Fläche. Als dunkelgrüner Block neben
   dem Feld wog der Knopf im hellen Kopfbereich schwerer als alles andere
   dort. Das Feld behält die ganze Breite des Formulars und reserviert rechts
   Platz für das Symbol. */
.header-search form {
	position: relative;
	gap: 0;
}

.header-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding-right: 46px;
}

/* Im Kopf nur die Lupe; „Suchen" steht für Vorlesegeräte weiter da. */
.header-search .cge-search-form__submit {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	justify-content: center;
	width: 44px;
	gap: 0;
	padding: 0;
	background: none;
	color: var(--green-mid);
}

.header-search .cge-search-form__submit:hover,
.header-search .cge-search-form__submit:focus-visible {
	color: var(--green-deep);
}

.header-search .cge-search-form__submit:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: -4px;
}

.header-search .cge-search-form__submit-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}


/* 8.0 Hauptnavigation, Mega-Menü, Mobilmenü
   -------------------------------------------------------------- */

.main-nav {
	position: relative;
	z-index: 90;
	background: var(--cream);
	border-bottom: 1px solid var(--taupe-light);
}

/* Der untere Abstand der allgemeinen Listenregel gehört hier nicht hin: Er
   machte die Navigationsleiste zwanzig Pixel höher, als sie aussieht, und
   verschob damit alles darunter. */
.main-nav > ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.nav-item-wrap {
	position: relative;
}

.nav-link-btn {
	display: block;
	padding: 15px 18px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.nav-link-btn:hover,
.nav-link-btn:focus,
.nav-link-btn.nav-active {
	color: var(--green-deep);
	border-bottom-color: var(--bronze);
}

/* Menüpunkte mit der CSS-Klasse "sale" werden rot hervorgehoben. */
.nav-item-wrap.sale > .nav-link-btn {
	color: var(--sale);
}

.nav-item-wrap.sale > .nav-link-btn:hover,
.nav-item-wrap.sale > .nav-link-btn:focus {
	color: var(--sale-dark);
	border-bottom-color: var(--sale);
}

.nav-toggle-icon {
	margin-left: 4px;
	font-size: 0.8em;
}

/* Einfaches Aufklappmenü */
.drop-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	min-width: 240px;
	padding: 8px 0;
	background: var(--white);
	border: 1px solid var(--taupe-light);
	border-top: 2px solid var(--bronze);
	list-style: none;
	margin: 0;
}

.drop-panel.open {
	display: block;
}

.drop-link {
	display: block;
	padding: 9px 20px;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 16px;
	text-decoration: none;
	transition: color 0.15s, background 0.15s;
}

.drop-link:hover,
.drop-link:focus {
	color: var(--green-deep);
	background: var(--cream);
}

.drop-head {
	padding: 10px 20px 4px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.drop-divider {
	height: 1px;
	margin: 6px 0;
	background: var(--taupe-light);
}

/* Zweispaltiges Aufklappmenü.

   Greift, sobald ein Menü mehr als elf Links hat – im Bestand trifft das
   „Service". Einspaltig wäre das Menü höher als das Fenster; die Spalten
   trennen die Gruppen deutlich genug, deshalb entfallen dort die Linien. */
/* Die Rasteranordnung gehört an den geöffneten Zustand, nicht an das Panel.

   Steht `display: grid` an `.drop-panel--wide`, hat diese Regel dieselbe
   Spezifität wie `.drop-panel { display: none }`, steht aber später in der
   Datei – und gewinnt damit. Das Menü „Service" war dauerhaft aufgeklappt. */
.drop-panel--wide.open {
	display: grid;
}

.drop-panel--wide {
	/* 38rem ergeben zwei Spalten zu 298 Pixeln. Der längste Eintrag im Bestand
	   („Tipps zur Wahl passender Rankhilfen") misst mit seinen Innenabständen
	   290 – er passt damit in eine Zeile, ein noch längerer bricht um.

	   Eine feste Breite, weil `max-content` hier nicht greift: Das Panel ist
	   absolut positioniert und bestimmt seine Breite aus dem Inhalt, der Inhalt
	   aber aus der Spaltenbreite. Der Browser löst diesen Ring zugunsten der
	   Mindestbreite auf – die Spalten blieben bei 240 Pixeln. */
	width: min(38rem, calc(100vw - 2 * var(--gutter)));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 12px;
	align-content: start;
	padding: 12px 0;

}

/* Das Panel beginnt an seinem Menüpunkt – wie jedes andere Aufklappmenü auch.

   Hier stand zwischenzeitlich `right: var(--gutter)` samt einem Menüpunkt ohne
   eigenen Bezugsrahmen, damit das breite Panel auf schmalen Bildschirmen nicht
   rechts hinausragt. Es klebte dadurch am Seitenrand und stand sichtbar neben
   seinem Menüpunkt statt darunter.

   Ab welcher Fensterbreite es eng wird, lässt sich ausrechnen: Die Leiste ist
   mittig, der Punkt „Service" beginnt bei etwa W/2 + 19 Pixeln, das Panel ist
   608 breit. Es passt, solange W/2 + 627 unter die Fensterbreite fällt – also
   ab rund 1286 Pixeln. Darunter richtet sich das Panel an der rechten Kante
   seines Menüpunkts aus und wächst nach links. */
@media (max-width: 81rem) {
	.drop-panel--wide {
		left: auto;
		right: 0;
	}
}

.drop-panel--wide .drop-divider {
	display: none;
}

/* Die Überschrift einer Gruppe steht nicht über der ersten Zeile der Spalte,
   sondern eng bei ihren Links. Ohne den Ausgleich säße sie zu weit oben. */
.drop-group > .drop-head:first-child {
	padding-top: 4px;
}

/* Mega-Menü */
/* Der Menüpunkt gibt seinen Bezugsrahmen ab, damit sich das Panel an der
   Navigationsleiste ausrichtet und nicht am Punkt: Bei 960 Pixeln Breite ragte
   es sonst über den linken Bildschirmrand hinaus, sobald „Kollektionen" näher
   als 480 Pixel am Rand stand – also auf jedem Bildschirm unter etwa 1700
   Pixeln. Die Aufklappmenüs behalten ihren Bezug auf den Punkt. */
.nav-item-wrap.has-mega {
	position: static;
}

.mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	width: min(960px, calc(100vw - 32px));
	background: var(--white);
	border: 1px solid var(--taupe-light);
	border-top: 2px solid var(--bronze);
}

.mega-panel.open {
	display: block;
}

.mega-body {
	display: grid;
	grid-template-columns: 1.15fr 1.15fr 1fr;
}

/* Ohne gepflegte Werbespalte bleibt es bei zwei Linkspalten. */
.mega-body--2col {
	grid-template-columns: 1fr 1fr;
}

/* Als Flex-Spalte, damit der Übersichtslink per margin-top:auto an den Fuß
   rutscht und damit auf Höhe des Endes der längeren Spalte steht. */
.mega-col {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border-right: 1px solid var(--taupe-light);
	list-style: none;
	margin: 0;
}

.mega-col:last-child {
	border-right: none;
}

.mega-col-head {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--taupe-light);
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Zweite und jede weitere Gruppe innerhalb einer Spalte bekommt Luft nach oben,
   damit ihre Überschrift nicht am letzten Link der Gruppe darüber klebt. */
.mega-col-gap {
	margin-top: 32px;
}

/* Dieselbe Hervorhebung wie im Aufklappmenü: Der Link hinterlegt sich beim
   Überfahren. Zuvor rückte er stattdessen vier Pixel ein - zwei Menüs
   nebeneinander in derselben Leiste mit zwei verschiedenen Antworten auf
   denselben Zeiger.

   Der seitliche Innenabstand wird über ein negatives Außenmaß wieder
   ausgeglichen: Die Fläche braucht Luft um den Text, der Text selbst soll aber
   unter der Überschrift seiner Gruppe bündig stehen bleiben. */

.mega-link {
	display: block;
	margin-inline: -10px;
	padding: 6px 10px;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 16px;
	text-decoration: none;
	transition: color 0.15s, background 0.15s;
}

.mega-link:hover,
.mega-link:focus {
	color: var(--green-deep);
	background: var(--cream);
}

.mega-feature {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	background: var(--cream);
}

/* Rahmen im Querformat. Das Seitenverhältnis liegt am Rahmen, damit es auch
   dann gilt, wenn ein Plugin dem Bild eigene Maße zuweist. */
.mega-feat-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-bottom: 14px;
	overflow: hidden;
	background: linear-gradient(145deg, var(--green-mid), var(--green-deep));
}

.mega-feat-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;

	/* Oben ansetzen und nach unten beschneiden: Bei den hohen Produkten sitzt
	   der charakteristische Teil – Spitze, Knauf, Bogen – im oberen Bilddrittel. */
	object-position: top;
}

.mega-feat-label {
	margin-bottom: 5px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mega-feat-title {
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.3;
}

.mega-feat-sub {
	flex: 1;
	margin-bottom: 16px;
	color: var(--text-muted);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
}

.mega-b2b {
	display: block;
	margin-top: auto;
	padding: 12px 16px;
	background: var(--green-deep);
	text-decoration: none;
}

.mega-b2b-title {
	margin-bottom: 2px;
	color: rgb(255 255 255 / 90%);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mega-b2b-sub {
	color: rgb(255 255 255 / 55%);
	font-family: var(--sans);
	font-size: 14px;
}

/* Die Leiste bleibt einzeilig. Wie viele Produkte hineinpassen, entscheidet
   `cge_render_mega_footer()` anhand der Namenslänge; `nowrap` und `hidden` sind
   nur die Rückversicherung, falls die Schätzung einmal danebenliegt. Ohne sie
   rutschte ein Name in eine zweite Zeile und die Leiste wuchs um 32 Pixel. */
.mega-footer {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	overflow: hidden;
	background: var(--cream-dark);
	border-top: 1px solid var(--taupe-light);
}

.mega-footer a,
.mega-footer-label {
	flex: none;
	white-space: nowrap;
}

.mega-footer-label {
	margin-right: 4px;
	color: var(--taupe);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.mega-footer a {
	color: var(--green-mid);
	font-family: var(--sans);
	font-size: 15px;
	text-decoration: none;
}

.mega-footer a:hover,
.mega-footer a:focus {
	color: var(--green-deep);
}

.mega-footer-sep {
	color: var(--taupe-light);
}

/* Fläche, die ein offenes Menü per Klick daneben wieder schließt. */
.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 80;
}

.nav-overlay.open {
	display: block;
}

/* Mobilmenü */
.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
}

.hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--brown-mid);
	transition: transform 0.3s, opacity 0.3s;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
	display: none;
	background: var(--cream);
	border-top: 1px solid var(--taupe-light);
}

.mobile-nav.open {
	display: block;
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav a {
	display: block;
	padding: 16px 24px;
	border-bottom: 1px solid var(--taupe-light);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.mobile-nav a:hover,
.mobile-nav a:focus {
	color: var(--green-deep);
	background: var(--cream-dark);
}

.mobile-nav .sub-menu a {
	padding-left: 44px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0.02em;
}

.mobile-nav .sub-menu .sub-menu a {
	padding-left: 64px;
}


/* 9.0 Breadcrumb
   -------------------------------------------------------------- */

.breadcrumb {
	background: var(--cream);
	border-bottom: 1px solid var(--taupe-light);
}

.breadcrumb-inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 13px var(--gutter);
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.05em;
}

.breadcrumb a {
	color: var(--green-mid);
	text-decoration: none;
}

.breadcrumb .separator,
.breadcrumb-inner > span:not(.separator) {
	margin: 0;
}

.breadcrumb .separator {
	margin: 0 8px;
	color: var(--taupe);
}

/* Telefon: ohne das letzte Glied (29.10.2026, Wunsch des Betreibers). Es
   ist die aktuelle Seite und steht als Überschrift direkt darunter – bei
   Kategorien liefen die Breadcrumbs sonst über drei Zeilen. Der Trenner davor
   geht mit (`cge_breadcrumb_separator()` gibt ihm ein Element), das Schema
   von Yoast bleibt vollständig. */
@media (max-width: 768px) {
	.breadcrumb .breadcrumb_last,
	.breadcrumb .breadcrumb-sep:has(+ .breadcrumb_last) {
		display: none;
	}
}


/* 10.0 Startseite
   -------------------------------------------------------------- */

/* Abschnitte der Startseite: abwechselnd hell und dunkel.

   Die Kategorie-Kacheln laufen breiter (siehe `.home-band--full`), die übrigen
   Abschnitte stehen in der Inhaltsbreite von 1400 Pixeln. Der Grund geht in
   beiden Fällen über die ganze Breite. */
.home-band {
	padding: 80px var(--gutter);
}

/* Ein eigener innerer Rahmen statt `.home-band > *`: Komponenten wie das
   Produktraster setzen `margin: 0` und hoben die Zentrierung sonst auf – die
   Bestseller standen links statt mittig. */
.home-band__inner {
	max-width: var(--wrap);
	margin-inline: auto;
}

/* Breiter als der übrige Inhalt (Vorgabe des Betreibers, 15.09.2026: die
   Kategorie-Kacheln dürfen über die 1400 Pixel hinausragen), aber höchstens
   80 % des Fensters (16.10.2026) – über die volle Breite wurden die Kacheln
   auf einem 4K-Monitor zu groß. Nie schmaler als die Inhaltsbreite.
   `--band-breite` ist die tatsächliche Breite, `.cat-grid` rechnet damit. */
.home-band--full {
	--band-breite: min(100vw - 2 * var(--gutter), max(var(--wrap), 80vw));
}

.home-band--full .home-band__inner {
	max-width: max(var(--wrap), 80vw);
}

.home-band--light {
	background: var(--cream);
}

.home-band--dark {
	background: var(--cream-dark);
}

/* Kollektionen: die erste Kachel groß über zwei Spalten und zwei Reihen,
   die übrigen daneben. Bei neun Kategorien füllen acht kleine genau vier
   Spalten in zwei Reihen.

   Die Kacheln stehen im Hochformat 2 : 3 wie die Kategoriebilder des Kunden
   (16.10.2026), die große ergibt sich daraus ebenso. Vorher waren sie fest
   300 Pixel hoch – das Band lief über die volle Breite, und bei 2560 Pixeln
   (4K-Monitor mit 150 %) wurden sie 409 × 300 groß, das Bild verlor die
   Hälfte seiner Höhe. Damit der Block auf breiten Monitoren nicht höher wird
   als der Bildschirm, sind die Reihen zugleich auf die halbe Fensterhöhe
   abzüglich Kopf, Abschnittsüberschrift (142) und Admin-Leiste begrenzt;
   dann schneidet das Bild seitlich etwas ab. Nie niedriger als bisher (300). */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: max(300px, min(calc((var(--band-breite, 100vw - 2 * var(--gutter)) - 10px) / 6 * 1.5), calc((100svh - var(--cge-kopf, 90px) - var(--wp-admin--admin-bar--height, 0px) - 150px) / 2)));
	grid-auto-flow: row dense;
	gap: 2px;
}

.cat-card--lead {
	grid-column: span 2;
	grid-row: span 2;
}

/* Die Kachel wächst mit ihrer Beschriftung. Die Überschriften kommen aus
   `product_group_title` und sind lange Sätze („Metall Rosenobelisken und
   Rosengitter schaffen Akzente im Garten"). In Kacheln fester Höhe liefen sie
   bei 1024 Pixeln auf sieben Zeilen und oben aus der Kachel, auf dem Telefon
   ebenso. Das Bild liegt deshalb absolut dahinter, die Höhe ist nur noch eine
   Mindesthöhe, und die Beschriftung steht im Fluss am unteren Rand. */
.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	overflow: hidden;
	text-decoration: none;
}

.cat-card:hover .cat-img,
.cat-card:focus .cat-img {
	transform: scale(1.04);
}

.cat-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Oben sitzen meist die Details – Spitzen, Zapfen, Dachkronen. */
	object-position: center top;
	background: var(--green-light);
	transition: transform 0.6s ease;
}

/* Die Abdunklung hängt an der Beschriftung, nicht an der Kachel: Sie reicht
   so weit, wie Text steht, plus Übergang darüber. Vorher lag ein Verlauf über
   der unteren Hälfte der Kachel – mehrzeilige Überschriften ragten in den
   hellen Teil und waren auf hellen Motiven kaum zu lesen. */
.cat-label {
	position: relative;
	padding: 56px 18px 18px;
	background: linear-gradient(to top, rgb(26 38 24 / 85%) 0%, rgb(26 38 24 / 65%) 55%, rgb(26 38 24 / 0%) 100%);
}

.cat-card--lead .cat-label {
	padding: 64px 28px 28px;
}

/* Keine Silbentrennung: Sie zerlegte auch Wörter, die in die Zeile gepasst
   hätten („Rankgit-ter"). Nur ein Wort, das allein breiter ist als die
   Kachel, wird umbrochen. */
.cat-label-title {
	margin-bottom: 6px;
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 300;
	color: #fff;
	line-height: 1.2;
	overflow-wrap: break-word;
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.cat-card--lead .cat-label-title {
	font-size: 32px;
}

.cat-label-sub {
	color: var(--bronze-light);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Startseite (inc/startseite.php), Aufbau nach den
   Vorgaben des Kunden vom 16.10.2026: Texte 1:1, lange Abschnitte mit
   „Weiterlesen", leere Bildrahmen bis zur Auswahl der Fotos.

   Bausteine: `.sn-split` (Text und Bild nebeneinander), `.sn-prose`
   (Fließtext mit Listen), `.sn-mehr` (Aufklapper mit Pfeil), `.sn-frame`
   (leerer Bildrahmen), `.sn-kacheln` (Raster mit Beschriftung). */

/* Bühne (Entscheidung des Kunden, 22.10.2026, im Test als Variante „foto"):
   das Bühnenbild ohne Text und Knöpfe, so groß wie möglich; Überschrift und
   ein Knopf darunter. Auf dem Desktop füllt das Foto die volle Breite, höchstens so
   hoch wie das Fenster unter dem klebenden Kopf, dann schneidet es oben und
   unten ab. Auf dem Smartphone steht es unbeschnitten in seinem eigenen
   Format, damit Pavillon und Statue ganz zu sehen sind. */
.sn-buehne-foto {
	background: var(--green-deep);
}

.sn-buehne-foto .sn-buehne-foto__bild {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: calc(100svh - var(--cge-kopf, 90px));
	object-fit: cover;
	object-position: center;
}

.sn-buehne-titel {
	padding: 72px var(--gutter) 88px;
	/* Dunkler Grund wie die übrigen Bänder; danach folgen die Spezialprojekte
	   auf hellem Grund. Weiß wirkte fremd (Betreiber, 20.10.2026). */
	background: var(--cream-dark);
	text-align: center;
}

.sn-buehne-titel__text {
	max-width: 1000px;
	margin: 0 auto 36px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 300;
	line-height: 1.15;
}

@media (max-width: 768px) {
	.sn-buehne-foto .sn-buehne-foto__bild {
		max-height: none;
	}

	.sn-buehne-titel {
		padding: 44px var(--gutter) 52px;
	}

	.sn-buehne-titel__text {
		margin-bottom: 28px;
	}
}

/* Leerer Bildrahmen */
.sn-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 24px;
	border: 1px dashed var(--taupe);
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, rgb(184 168 152 / 10%) 14px 15px),
		var(--white);
	text-align: center;
}

.sn-frame__hint {
	max-width: 32ch;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.sn-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Text und Bild nebeneinander; das Bild klebt beim Lesen langer Texte. */
.sn-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: start;
}

.sn-split--bild-links {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.sn-split--bild-links .sn-split__media {
	order: -1;
}

.sn-split__media {
	position: sticky;
	top: calc(var(--cge-kopf, 90px) + 32px);
}

.sn-titel {
	margin-bottom: 16px;
}

.sn-leitsatz {
	margin: 0 0 28px;
	color: var(--bronze);
	font-family: var(--serif);
	font-size: 26px;
	font-style: italic;
	line-height: 1.35;
}

/* Fließtext der Kundentexte, mit Listen („Besonderheiten") */
.sn-prose {
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.9;
}

.sn-prose p {
	margin: 0 0 20px;
}

.sn-prose > :last-child {
	margin-bottom: 0;
}

.sn-prose ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.sn-prose li {
	position: relative;
	margin-bottom: 6px;
	padding-left: 22px;
	line-height: 1.6;
}

.sn-prose li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bronze);
}

.sn-prose strong {
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sn-prose--mitte {
	max-width: 760px;
	margin: -24px auto 48px;
	text-align: center;
}

/* Aufklapper „Weiterlesen" mit Pfeil */
.sn-mehr {
	margin-top: 24px;
}

.sn-mehr__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.sn-mehr__toggle::-webkit-details-marker {
	display: none;
}

.sn-mehr__toggle:hover {
	color: var(--bronze);
}

.sn-mehr__toggle .cge-icon {
	transition: transform 0.2s;
}

.sn-mehr[open] > .sn-mehr__toggle .cge-icon {
	transform: rotate(180deg);
}

.sn-mehr__zu,
.sn-mehr[open] .sn-mehr__auf {
	display: none;
}

.sn-mehr[open] .sn-mehr__zu {
	display: inline;
}

.sn-mehr__inhalt {
	padding-top: 8px;
}

/* Schlusssatz eines Abschnitts */
.sn-statement {
	max-width: 900px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--taupe-light);
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 28px;
	font-style: italic;
	line-height: 1.4;
	text-align: center;
}

.sn-split__text .sn-statement {
	margin: 28px 0 0;
	padding: 0 0 0 20px;
	border-top: none;
	border-left: 2px solid var(--bronze);
	font-size: 22px;
	text-align: left;
}

/* Einleitung über Kollektionen, Ansprechpartnern, Inspiration */
.sn-intro {
	max-width: 860px;
	margin: 0 auto 72px;
}

/* Kollektionen */
.sn-kollektion + .sn-kollektion {
	margin-top: 80px;
	padding-top: 80px;
	border-top: 1px solid var(--taupe-light);
}

.sn-kollektion__name {
	margin-bottom: 6px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
}

.sn-unterzeile {
	margin: 0 0 24px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sn-kategorien {
	margin: 24px 0 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
}

.sn-weiter {
	display: inline-block;
	margin-top: 28px;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}

.sn-weiter:hover,
.sn-weiter:focus {
	color: var(--bronze);
}

/* Kachelraster (Referenzen, Bildwelten): vier je Reihe, eine unvollständige
   letzte Reihe mittig. */
.sn-kacheln {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-kachel {
	flex: 0 0 calc((100% - 3 * 24px) / 4);
}

.sn-kachel__titel {
	display: block;
	margin-top: 12px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.3;
}

.sn-kachel__titel a {
	color: inherit;
	text-decoration: none;
}

/* Ein Link je Kachel: Er liegt am Titel und spannt sich über Bild und Text
   wie bei der Produktkachel – Vorlesegeräte hören nur den Titel. */
.sn-kachel:has(a) {
	position: relative;
}

.sn-kachel__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sn-kachel__titel a:focus-visible {
	outline: none;
}

.sn-kachel__titel a:focus-visible::after {
	outline: 2px solid var(--green-deep);
	outline-offset: 4px;
}

.sn-kachel:has(a):hover .sn-kachel__titel a {
	color: var(--bronze);
}

/* Qualität je Kollektion als Aufklapper */
.sn-zwischen {
	margin: 0 0 20px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 400;
}

/* Nach Text (Inspiration „Bildwelten“) – der letzte Absatz hat keinen Abstand nach unten */
.sn-prose + .sn-zwischen {
	margin-top: 48px;
}

/* Endet die Einleitung mit der Zwischenüberschrift, gehört sie zu den Kacheln
   darunter – näher an sie heran als an den Text darüber. */
.sn-intro:has(> .sn-zwischen:last-child) {
	margin-bottom: 24px;
}

.sn-akkordeon {
	max-width: 960px;
	margin: 72px auto 0;
}

.sn-akkordeon__eintrag {
	border-top: 1px solid var(--taupe-light);
}

.sn-akkordeon__eintrag:last-child {
	border-bottom: 1px solid var(--taupe-light);
}

.sn-akkordeon__eintrag > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 0;
	color: var(--green-deep);
	cursor: pointer;
	list-style: none;
}

.sn-akkordeon__eintrag > summary::-webkit-details-marker {
	display: none;
}

.sn-akkordeon__titel {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1.3;
}

.sn-akkordeon__eintrag > summary .cge-icon {
	flex: none;
	transition: transform 0.2s;
}

.sn-akkordeon__eintrag[open] > summary .cge-icon {
	transform: rotate(180deg);
}

.sn-akkordeon__eintrag > .sn-prose {
	padding: 0 0 28px;
}

/* Ansprechpartner: zwei Karten, ohne Fotos. Weiße Fläche mit Bronzelinie
   oben, wie in der ersten Fassung vom 15.10.2026 – beim Neuschreiben der
   Vorlage am 16.10. zunächst verloren gegangen. */
.sn-personen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-person {
	padding: 40px;
	border-top: 2px solid var(--bronze);
	background: var(--white);
}

.sn-person__name {
	margin-bottom: 8px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
}

/* Beratung und Kontakt */
.sn-kontakt .sn-split {
	align-items: start;
}

.sn-kontakt .sn-actions {
	margin-top: 36px;
	text-align: left;
}

/* Kontaktdaten: weiße Fläche mit Bronzelinie links, in der Fließtextschrift
   – wie in der ersten Fassung. */
.sn-kontakt__karte {
	padding: 36px 40px;
	border-left: 2px solid var(--bronze);
	background: var(--white);
}

.sn-kontakt__daten {
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	font-style: normal;
	line-height: 1.8;
}

.sn-kontakt__daten p {
	margin: 0 0 20px;
}

.sn-kontakt__daten a {
	color: var(--green-deep);
}

/* Telefonnummern nie mitten in der Zahl umbrechen. */
.sn-kontakt__daten a[href^="tel:"] {
	white-space: nowrap;
}

.sn-kontakt__hinweis {
	margin: 24px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--taupe-light);
	color: var(--text-muted);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.7;
}

.sn-kontakt__claim {
	margin: 24px 0 0;
	color: var(--bronze);
	font-family: var(--serif);
	font-size: 22px;
	font-style: italic;
	line-height: 1.5;
}

.sn-actions {
	margin-top: 48px;
	text-align: center;
}

@media (max-width: 1024px) {
	.sn-split,
	.sn-split--bild-links {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Untereinander steht das Bild über dem Text und klebt nicht. */
	.sn-split__media {
		position: static;
		order: -1;
	}

	.sn-kachel {
		flex-basis: calc((100% - 24px) / 2);
	}

	.sn-personen {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.sn-leitsatz {
		font-size: 22px;
	}

	.sn-prose {
		font-size: 18px;
	}

	.sn-kollektion__name {
		font-size: 30px;
	}

	.sn-kollektion + .sn-kollektion {
		margin-top: 56px;
		padding-top: 56px;
	}

	.sn-statement {
		font-size: 23px;
	}

	.sn-kacheln {
		gap: 16px;
	}

	.sn-kachel {
		flex-basis: calc((100% - 16px) / 2);
	}

	.sn-kachel__titel {
		font-size: 18px;
	}

	.sn-person,
	.sn-kontakt__karte {
		padding: 24px;
	}

	.sn-akkordeon__titel {
		font-size: 22px;
	}
}


/* 11.0 Produktkarten und Raster
   -------------------------------------------------------------- */

/* Vier Kacheln je Reihe, wie im Bestand.

   Der Entwurf zeigt drei; mit den hochformatigen Bildern werden die Kacheln
   dadurch aber sehr hoch, und der Bestand ist auf vier ausgelegt — die
   Kategorieseiten und die Top-10-Seite stellen ihre Produkte seit jeher
   vierspaltig dar.

   Dieselben Werte gelten für die Schleifen von WooCommerce weiter unten
   (`ul.products`): Bestseller, Kategorieraster, ähnliche Produkte und die
   Angebotsseite sollen gleich aussehen. Eine Klasse für alle Raster des
   Themes; bis zum 21.09.2026 gab es `.product-grid-4` (Startseite, 24 Pixel
   Abstand, auf dem Tablet zwei Spalten) und `.product-grid-3`
   (Kategorieseite, 20 Pixel, drei Spalten) nebeneinander. Die Namen logen
   ohnehin, beide standen vierspaltig. */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alle Kacheln einer Reihe sind gleich hoch, und der Preis steht immer unten.

   Von 377 Produktnamen brauchen 178 eine Zeile, 196 zwei und drei sogar drei
   („Versailler Pflanzkübel mit Pyramiden Rankgitter Abusir"). Ohne diese Regeln
   endete jede Kachel dort, wo ihr Text aufhört – die Unterkanten und die Preise
   standen dadurch auf verschiedenen Höhen.

   Bewusst keine Mindesthöhe: Die wäre ein geratener Wert, der bei einer anderen
   Schriftgröße oder Spaltenzahl wieder nicht passt. Das Raster kennt die Höhe
   seiner Reihe bereits; die Kachel muss sie nur ausfüllen. */
/* Eigene Grundschrift (22.10.2026): Steht die Kachel in einem Textbereich –
   `[products]` auf „Top 10“ und „Angebote“, Vorschläge im Warenkorb –, erbte
   sie sonst EB Garamond 19 Pixel mit Zeilenhöhe 1,9 von `.cge-entry-content`
   (und `li.product` von dessen Listenregel); Maßzeile und Preis standen dort
   luftiger als auf der Kategorieseite. */
.prod-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--taupe-light);
	font-family: var(--sans);
	font-size: 18px;
	line-height: normal;
	/* Größen-Container für den Produktnamen, siehe .prod-name. */
	container-type: inline-size;
	transition: box-shadow 0.3s;
}

.prod-card:hover {
	box-shadow: 0 8px 32px rgb(42 61 40 / 10%);
}

.prod-img-wrap {
	position: relative;
	overflow: hidden;
}

/* Produktbilder stehen im Hochformat.

   Der Bestand ist durchgängig darauf ausgelegt: WooCommerce schneidet die
   Vorschaubilder im Verhältnis 81:121 zu (Einstellung aus dem alten Theme,
   entspricht 2:3), und die Motive sind entsprechend aufgebaut — Rosenbögen,
   Obelisken und Säulen sind hoch, nicht breit.

   Hier stand zuvor eine feste Höhe von 280 Pixeln mit `object-fit: cover`. Das
   schnitt aus jedem Hochformat einen Querformat-Ausschnitt heraus und kappte
   damit genau das, was die Produkte ausmacht. Über `aspect-ratio` folgt die
   Kachel dem Seitenverhältnis der Datei; zugeschnitten wird nichts mehr. */
.prod-img-wrap img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 81 / 121;
	object-fit: cover;
	background: linear-gradient(145deg, var(--cream-dark) 0%, var(--green-pale) 100%);
}

.prod-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	background: rgb(42 61 40 / 60%);
	transition: opacity 0.3s;
}

.prod-img-wrap:hover .prod-overlay,
.prod-img-wrap:focus-within .prod-overlay {
	opacity: 1;
}

.prod-overlay-btn {
	padding: 12px 24px;
	background: #fff;
	border: none;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.prod-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

/* Der Preis rückt an den Fuß der Kachel, gleich wie viele Zeilen der Name
   darüber braucht. */
.prod-price {
	margin-top: auto;
}

/* 24 statt 20 Pixel (22.10.2026, Wunsch des Betreibers): Cormorant hat kleine
   Kleinbuchstaben, bei 20 Pixeln wirkte der Name kaum größer als die Maßzeile
   darunter (Jost 16) und schwächer als der Preis (Jost 20, 500). Auf dem
   Telefon mit zwei schmalen Kacheln nebeneinander 22.

   Zweiter Selektor: In den Schleifen von WooCommerce (`[products]` auf
   „Top 10“ und „Angebote“, Vorschläge im Warenkorb, ähnliche Produkte) gilt
   `.woocommerce ul.products li.product h3 { font-size: 1em; padding: .5em 0;
   margin: 0 }` aus woocommerce.css – spezifischer als `.prod-name`. Dort
   stand der Name bis 22.10.2026 in der Größe der Umgebung (18–19 Pixel).

   Größe nach Kachelbreite (`9cqi`, höchstens 24, mindestens 16 Pixel):
   Höchstens drei Zeilen, auch für den längsten Namen („Versailler
   Pflanzkübel mit Pyramiden Rankgitter Abusir“). Fest 24 Pixel ergaben auf
   Kategorieseiten bei 1440 Pixeln (Kachel 244) zwei vierzeilige Namen.
   Ausgezählt mit allen 373 Namen bei 360–2560 Pixeln Fensterbreite. Volle
   24 Pixel ab rund 267 Pixeln Kachelbreite – „Top 10“, „Angebote“,
   Warenkorb; auf Kategorieseiten bei 1440 rund 22. */
.prod-name,
.woocommerce ul.products li.product .prod-name {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--serif);
	font-size: clamp(16px, 9cqi, 24px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--green-deep);
}

@media (max-width: 768px) {
	.prod-name,
	.woocommerce ul.products li.product .prod-name {
		font-size: clamp(16px, 9cqi, 22px);
	}
}

/* Kategorieseiten (neben der Filterspalte) von 1025 bis 1366 Pixeln drei
   statt vier Kacheln: Vierspaltig schrumpften sie auf 147–232 Pixel, Namen
   liefen auf vier bis sechs Zeilen (22.10.2026). Darüber und bis 1024
   unverändert. */
@media (min-width: 1025px) and (max-width: 1366px) {
	.cat-layout .product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.prod-name a {
	color: inherit;
	text-decoration: none;
}

/* Die ganze Kachel ist der Anklickbereich.

   Der Link liegt am Produktnamen und spannt sich über die Karte auf. Das ist
   dem naheliegenden Weg – ein <a> um die gesamte Kachel – vorzuziehen: Ein
   Vorlesegerät kündigte dann Bild, Kennzeichnung, Name, Maße und Preis als
   einen einzigen, sehr langen Linktext an. So bleibt der Linktext der
   Produktname, und markieren lässt sich der Text weiterhin. */
.prod-card {
	cursor: pointer;
}

.prod-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Die Bildfläche zeigt den Knopf, sobald die Karte berührt wird – nicht erst
   über dem Bild selbst: Der Knopf ist nur noch Beschriftung, gehandelt wird
   über die Fläche darunter. */
.prod-card:hover .prod-overlay,
.prod-card:focus-within .prod-overlay {
	opacity: 1;
}

.prod-variant {
	margin-bottom: 12px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

.prod-price {
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 500;
}

.prod-price del {
	margin-right: 6px;
	color: var(--taupe);
	font-weight: 400;
}

.prod-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	/* Die Kennzeichnung liegt über der Kachel und nähme dort sonst als
	   einzige Stelle den Klick weg. */
	pointer-events: none;
	padding: 5px 10px;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prod-badge--new {
	background: var(--bronze);
}

.prod-badge--sale {
	background: var(--sale);
}

.prod-materials {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.mat-chip {
	padding: 3px 8px;
	border: 1px solid var(--green-pale);
	color: var(--green-mid);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.08em;
}


/* 12.0 Kategorie- und Archivseiten
   -------------------------------------------------------------- */

.cat-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Mindesthöhe, keine feste: Ein langer Titel mit Untertitel (Shop-Seite,
	   Telefon) ragte sonst oben in die Brotkrumen und unten unter die
	   Filterleiste. Das Bild füllt per `inset: 0` mit. */
	min-height: 380px;
	background: linear-gradient(135deg, #3d5a38 0%, #2a3d28 100%);
}

.cat-hero .cat-hero-overlay {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	opacity: 0.3;
	object-fit: cover;
	object-position: center;
}

.cat-hero-content {
	position: relative;
	max-width: 800px;
	padding: 48px;
	text-align: center;
}

.cat-hero-title {
	margin-bottom: 12px;
	font-family: var(--serif);
	font-size: 58px;
	font-weight: 300;
	color: #fff;
	line-height: 1.1;
}

.cat-hero-sub {
	margin: 0;
	color: rgb(255 255 255 / 75%);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.7;
}

/* Die Beschreibung kommt als Absatzfolge aus dem Editor. */
.cat-hero-sub p {
	margin: 0;
}

.cat-hero-sub p + p {
	margin-top: 10px;
}

/* Die Filterleiste läuft mit, sie klebt nicht.

   Im Entwurf steht sie klebend unter dem Kopfbereich. Mit dem ebenfalls
   klebenden Kopfbereich davor ergab das beim Scrollen zwei gestapelte Leisten
   über den Produkten – die zweite wirkt dort wie ein abgeschnittener Rest. */
.filter-bar {
	background: var(--white);
	border-bottom: 1px solid var(--taupe-light);
}

.filter-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 16px var(--gutter);
	gap: 12px;
}

.filter-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Eine Linie für die ganze Leiste.

   In ihr stehen Elemente dreierlei Herkunft nebeneinander: eigene
   Auswahllisten, das Sortierformular von WooCommerce und schlichter Text.
   Ohne gemeinsame Höhe, Schrift und Innenabstand steht jedes davon ein paar
   Pixel woanders. Deshalb hier alles auf denselben Nenner, statt an drei
   Stellen einzeln nachzujustieren. */

.filter-bar select,
.filter-summary select {
	/* Begrenzt, damit die Leiste einzeilig bleibt: „Nach Beliebtheit sortieren"
	   und „Abnehmbare Rankgitter für Metall Pflanzkübel" zögen sie sonst über
	   die verfügbaren 1400 Pixel hinaus. Beim Aufklappen zeigt der Browser die
	   Einträge ohnehin in voller Länge. */
	max-width: 13rem;
	height: 42px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
	background-color: var(--white);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 40px;
	text-overflow: ellipsis;
}

.filter-bar select:focus,
.filter-summary select:focus {
	border-color: var(--green-mid);
	outline: none;
}

/* Das Sortierformular bringt einen Außenabstand mit, der die Zeile kippt. */
.filter-bar .woocommerce-ordering,
.filter-bar form {
	display: flex;
	align-items: center;
	margin: 0;
}

.filter-label,
.filter-bar .count-label,
.filter-reset {
	display: inline-flex;
	align-items: center;
	height: 42px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
}

/* Hebt alle gesetzten Filter auf einmal auf. Höhe und Preis haben daneben
   ihren eigenen Rückweg in der Seitenspalte. */
.filter-reset {
	gap: 6px;
	color: var(--sale);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.filter-reset:hover,
.filter-reset:focus {
	border-bottom-color: var(--sale);
	color: var(--sale-dark);
}

.filter-reset-x {
	font-size: 20px;
	line-height: 1;
}

.filter-label {
	color: var(--text-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}



/* Zusatzfilter einzelner Produktgruppen (Design, Art, Ursprung …).

   Höhe und Schrift entsprechen den Kacheln daneben, damit die Leiste eine Linie
   behält. Die Breite ist begrenzt: „Abnehmbare Rankgitter für Metall
   Pflanzkübel" zöge die Liste sonst über die halbe Leiste. */
.cge-tag-filter {
	max-width: 15rem;
}

.filter-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.count-label {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

/* Mobile Filter (seit 22.10.2026, cge_render_filter_toggle(),
   cge_render_filter_summary(), cge_shop_sidebar()): Auf dem Smartphone
   klebt die Leiste mit zwei Knöpfen, „Filter" und „Sortieren"; „Filter"
   öffnet die Filterspalte als Fläche über der ganzen Seite, darunter stehen
   Trefferzahl, Seitengröße und die gesetzten Filter als Chips. Auf dem
   Desktop bleibt alles beim Alten – die Teile dafür sind hier ausgeblendet.
   Regeln für das Smartphone im Abschnitt bis 768 Pixel. Dieselbe Leiste
   und Fläche trägt „Alle Pflanzkübel" (page.php), dort nur mit „Filter"
   über die volle Breite und den Zusatzfiltern in der Fläche
   (`.cat-sidebar--seite`, cge_page_filter_panel()). */
.cat-sidebar--seite,
.filter-toggle,
.filter-summary,
.filter-sort__label,
.sidebar-panel-head,
.sidebar-panel-foot,
.sidebar-tagfilters {
	display: none;
}

.filter-sort {
	display: flex;
}

.filter-toggle {
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
	background: var(--white);
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.filter-toggle[hidden] {
	display: none !important;
}

.filter-toggle:focus-visible {
	border-color: var(--green-mid);
	outline: 2px solid var(--green-mid);
	outline-offset: 2px;
}

.filter-toggle__anzahl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--green-deep);
	color: #fff;
	font-size: 14px;
	line-height: 1;
}

.filter-toggle__symbol {
	flex: none;
}

.cat-layout {
	display: grid;
	grid-template-columns: 256px minmax(0, 1fr);
	max-width: var(--wrap);
	margin-inline: auto;
}

.cat-sidebar {
	/* Gleicher Abstand links und rechts, aber schmaler als der Seitenrand:
	   Mit 48 Pixeln stand der Inhalt der Spalte weit von ihrer Kante ab und die
	   Filterzeilen brachen frueh um. 20 Pixel geben den Zeilen Platz und halten
	   die Spalte trotzdem deutlich vom Produktraster getrennt. */
	padding: 40px 20px;
	border-right: 1px solid var(--taupe-light);
	background: var(--white);
}

/* Ein div, kein h2 – die drei Werte darunter kamen vorher von h1–h6. */
.sidebar-title {
	margin: 32px 0 16px;
	color: var(--bronze);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.2;
	text-wrap: balance;
	font-size: 15px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cge-widget:first-child .sidebar-title,
.sidebar-title:first-child {
	margin-top: 0;
}

.cat-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cat-sidebar li {
	margin-bottom: 10px;
}

/* Links in den Seitenspalten - Filterspalte wie Blog-Seitenleiste.

   Beide Spalten tragen dieselbe Schrift und dieselbe Farbe: gruen, ohne
   Unterstreichung, beim Ueberfahren dunkler. Zuvor stand die Filterspalte in
   gedaempftem Braun ohne Linkfarbe, die Blog-Seitenleiste dagegen im
   Standardgruen mit Unterstreichung - zwei Spalten mit derselben Aufgabe und
   zwei Schriftbildern. */

.cat-sidebar li a,
.cat-sidebar .cge-widget a,
.cge-sidebar .cge-widget a {
	color: var(--green-mid);
	font-family: var(--sans);
	font-size: 17px;
	text-decoration: none;
	transition: color 0.2s;
}

.cat-sidebar li a {
	display: flex;
	justify-content: space-between;
}

.cat-sidebar li a:hover,
.cat-sidebar li a:focus,
.cat-sidebar .cge-widget a:hover,
.cat-sidebar .cge-widget a:focus,
.cge-sidebar .cge-widget a:hover,
.cge-sidebar .cge-widget a:focus {
	color: var(--green-deep);
	text-decoration: none;
}

/* Höhenfilter: Stufenliste mit Trefferzahl (inc/filters.php).
   Die gewählte Stufe trägt `.active`; `current-cat` stammte vom
   Kategoriebaum, der nicht mehr in der Spalte steht. */

.cat-sidebar li a.active {
	color: var(--green-deep);
	font-weight: 500;
}

.sidebar-count {
	margin-left: 8px;
	color: var(--taupe);
	font-variant-numeric: tabular-nums;
}

/* Hinweiskästchen am Fuß der Filterspalte.

   Alles, was im Widget-Bereich „Filterspalte“ liegt, erscheint hier unter den
   Filtern als Kasten – dieselbe Gestaltung wie das Anfragefeld der Produktseite.
   Gedacht für den Hinweis auf die Planung großer Projekte; gepflegt wird er als
   gewöhnliches Widget mit Titel und Text, ohne dass jemand Auszeichnung
   schreiben muss. */

.cat-sidebar .cge-widget {
	margin-top: 32px;
	padding: 20px;
	border: 1px solid var(--taupe-light);
	background: var(--cream-dark);
}

.cat-sidebar .cge-widget .sidebar-title {
	margin-top: 0;
}

.cat-sidebar .cge-widget p:last-child {
	margin-bottom: 0;
}

/* Handlungsaufforderung im Hinweiskästchen.

   Als einziger Link der Spalte unterstrichen - er ist kein Filter, sondern
   führt aus der Seite heraus. Der Selektor nennt die Spalte mit, weil die
   Regel für die Spaltenlinks sonst gewinnt und die Linie wieder abräumt.

   **Ohne Spitze dahinter.** Sie stand hier als Pseudoelement und brauchte einen
   Abstand zum Wort - der unterbrach die Unterstreichung. Im Mega-Menü geht das
   gut, dort steht der Linktext ohne Linie. */

.cat-sidebar .cge-widget a.sidebar-cta {
	text-decoration: underline;
}

/* Preisfilter mit Doppelregler.
   Die beiden Regler liegen deckungsgleich übereinander. Damit der untere
   erreichbar bleibt, nehmen die Eingabefelder selbst keine Zeigerereignisse
   an – nur ihre Griffe tun das. Ohne diese Umkehr finge der obere Regler
   jeden Klick ab, und der untere Griff ließe sich nie fassen. */

.price-range {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.price-slider {
	position: relative;
	height: 28px;
}

.price-slider-track,
.price-slider-fill {
	position: absolute;
	top: 13px;
	height: 2px;
	border-radius: 1px;
}

.price-slider-track {
	right: 0;
	left: 0;
	background: var(--taupe-light);
}

.price-slider-fill {
	right: var(--fill-end, 0%);
	left: var(--fill-start, 0%);
	background: var(--green-mid);
}

.price-slider .range-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.price-slider .range-slider::-webkit-slider-runnable-track {
	height: 28px;
	background: none;
}

.price-slider .range-slider::-moz-range-track {
	height: 28px;
	background: none;
}

.price-slider .range-slider::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: 5px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--green-deep);
	box-shadow: 0 1px 3px rgb(30 26 20 / 30%);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.price-slider .range-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--green-deep);
	box-shadow: 0 1px 3px rgb(30 26 20 / 30%);
	cursor: grab;
	pointer-events: auto;
}

.price-slider .range-slider:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
}

.price-slider .range-slider:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
}

.price-inputs {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* Die Filterspalte ist 240 Pixel breit, abzüglich Innenabstand bleiben 160.
   Zwei Felder darin fassen bei großzügigem Innenabstand nur zwei Ziffern –
   aus „6700" wurde „67". Deshalb hier schmaler und ohne die Pfeilchen, die
   Chrome an Zahlenfelder hängt und die allein 15 Pixel kosten. */

.price-inputs .price-input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	padding: 8px 4px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.price-input:focus {
	border-color: var(--green-mid);
	outline: none;
}

.price-inputs-sep {
	color: var(--taupe);
}

.btn-filter {
	width: 100%;
	margin-top: 4px;
	padding: 10px 16px;
	border: none;
	background: var(--green-deep);
	color: var(--white);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-filter:hover,
.btn-filter:focus {
	background: var(--green-mid);
}

.price-reset {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
}

.price-reset:hover,
.price-reset:focus {
	color: var(--green-deep);
}

.cat-content {
	padding: 40px var(--gutter);
	background: var(--cream);
}

/* Blätternavigation */
.cge-pagination {
	margin-top: 16px;
}

/* Abstand zum Produktraster wie im Entwurf: dort stehen 48 Pixel unter dem
   Raster und 16 über der Navigation. Der Abstand sitzt hier an der Navigation,
   weil `.product-grid` auch auf der Startseite verwendet wird, wo darunter
   keine Blätternavigation folgt. */
.woocommerce nav.woocommerce-pagination {
	margin-top: 64px;
}

.cge-pagination .nav-links,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	white-space: normal;
}

/* Die Kästchen sind die Links und die aktuelle Seite – nicht die Liste.
   WooCommerce vergibt die Klasse `page-numbers` an beide: an `ul.page-numbers`
   und an jeden Eintrag darin. Ohne die Einschränkung auf `a` und `span` bekam
   die Liste selbst 44 × 44 Pixel, und die Seitenzahlen standen untereinander. */
.cge-pagination a.page-numbers,
.cge-pagination span.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--taupe-light);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
	text-decoration: none;
}

.cge-pagination a.page-numbers.current,
.cge-pagination span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: var(--green-deep);
	border-color: var(--green-deep);
	color: #fff;
}

.cge-pagination a.page-numbers:hover:not(.current),
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover:not(.current) {
	border-color: var(--green-mid);
	color: var(--green-deep);
}

/* WooCommerce lässt die Einträge schweben und gibt ihnen einen Trennstrich.
   Im Flex-Raster braucht es beides nicht. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	display: block;
	flex-shrink: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Sehr schmale Telefone (29.10.2026): Sechs Kästchen zu 44 Pixeln mit 8 Pixeln
   Abstand brauchen 304 Pixel, bei 320 Pixeln Fensterbreite stehen 288 zur
   Verfügung – sie schoben sich übereinander. 40 Pixel bleiben über der
   Mindestgröße für Tippflächen; der Umbruch fängt längere Leisten ab. */
@media (max-width: 380px) {
	.cge-pagination .nav-links,
	.woocommerce nav.woocommerce-pagination ul.page-numbers {
		flex-wrap: wrap;
		gap: 4px;
	}

	.cge-pagination a.page-numbers,
	.cge-pagination span.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
		width: 40px;
		height: 40px;
	}
}

/* SEO-Text unter Kategorien */
.cat-text {
	padding: 56px var(--gutter);
	background: var(--cream-dark);
	border-top: 1px solid var(--taupe-light);
}

/* Einspaltig: Der Text nimmt die volle Breite. Früher stand rechts daneben
   eine Spalte „Weitere Kategorien"; die Kategorien sind bereits über die
   Filterleiste und den Fußbereich erreichbar. */
.cat-text-inner {
	max-width: var(--wrap);
	margin-inline: auto;
}

.cat-text p {
	margin-bottom: 12px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.9;
}


/* Überschriften im Fließtext.

   Die allgemeine Regel weiter oben setzt Schrift, Farbe und Gewicht, aber
   keine Groessen - es galten die Vorgaben des Browsers. Gemessen bei 20 Pixel
   Fliesstext: h1 36, h2 34, h3 21, h4 18, h5 15, h6 12 Pixel. Eine h4 war
   damit kleiner als der Absatz darunter, h5 und h6 erst recht, und zwischen
   h2 und h3 lag ein Absturz von 13 Pixeln.

   Die Staffel darunter haelt jede Stufe klar unterscheidbar und keine unter
   der Groesse des Fliesstextes. Die h6 bleibt auf Textgroesse, hebt sich aber
   ueber Versalien und Sperrung ab - eine siebte Stufe nach oben braeuchte
   niemand.

   Gewicht 400 statt 300: Cormorant Garamond ist fein geschnitten, bei 300
   verschwinden Ueberschriften im Text. Mehr als 400 gibt es nicht - die
   Schrift liegt nur in diesen beiden Schnitten im Theme; 500 oder 600 wuerde
   der Browser kuenstlich verfetten.

   Der Kopfbereich der Kategorieseiten (`.cat-hero-title`) bleibt ausgenommen,
   der sitzt wie er ist.

   Seit 22.10.2026 gehört die Produktbeschreibung (`.woocommerce-tabs .panel`)
   dazu – ihre Überschriften standen bis dahin in Browsergröße und Gewicht
   300 –, und die Größen gelten als Netz zusätzlich für jede Überschrift
   (Abschnitt 3.0). */

.cge-entry-content h1,
.cat-text h1,
.woocommerce-tabs .panel h1 {
	font-size: 44px;
}

.cge-entry-content h2,
.cat-text h2,
.woocommerce-tabs .panel h2 {
	font-size: 34px;
}

.cge-entry-content h3,
.cat-text h3,
.woocommerce-tabs .panel h3 {
	font-size: 27px;
}

.cge-entry-content h4,
.cat-text h4,
.woocommerce-tabs .panel h4 {
	font-size: 23px;
}

.cge-entry-content h5,
.cat-text h5,
.woocommerce-tabs .panel h5 {
	font-size: 21px;
}

.cge-entry-content h6,
.cat-text h6,
.woocommerce-tabs .panel h6 {
	font-family: var(--sans);
	font-size: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cge-entry-content :is(h1, h2, h3, h4, h5, h6),
.cat-text :is(h1, h2, h3, h4, h5, h6),
.woocommerce-tabs .panel :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
}

/* Luft nach oben, damit die Ueberschrift zum folgenden Abschnitt gehoert und
   nicht am vorigen klebt. */
.cge-entry-content :is(h1, h2, h3),
.cat-text :is(h1, h2, h3),
.woocommerce-tabs .panel :is(h1, h2, h3) {
	margin-top: 48px;
}

.cge-entry-content :is(h4, h5, h6),
.cat-text :is(h4, h5, h6),
.woocommerce-tabs .panel :is(h4, h5, h6) {
	margin-top: 32px;
}

/* Kein Abstand, wenn die Ueberschrift ihren Abschnitt eroeffnet. Ohne den
   Nachfahren-Selektor griffe das nur bei direkten Kindern - die Seiten aus
   WPBakery verschachteln ihre Inhalte aber in mehrere Ebenen, und die erste
   Ueberschrift stand mit 48 Pixeln Luft unter dem Seitenkopf. */
.cge-entry-content :is(h1, h2, h3, h4, h5, h6):first-child,
.cat-text :is(h1, h2, h3, h4, h5, h6):first-child,
.woocommerce-tabs .panel :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}


/* Das Aenderungsdatum ist fuer Maschinen da, nicht fuer Leser.

   cge_posted_on() zeichnet bei einem nachtraeglich geaenderten Beitrag beide
   Daten aus - Veroeffentlichung und Aenderung. Beide sichtbar ergab im Blog
   "23. Juni 202623. Juni 2026", zwei Daten ohne Trennung hintereinander.
   Sichtbar bleibt das Veroeffentlichungsdatum; wurde nichts geaendert, traegt
   dasselbe Element beide Klassen und bleibt stehen. */
.updated:not(.published) {
	display: none;
}


/* Fliesstext in Widgets.

   Die Seitenleiste erbt Jost - richtig fuer Listen und Beschriftungen, falsch
   fuer einen Absatz. Der Firmentext im HTML-Widget stand damit in der
   Auszeichnungsschrift. Listen bleiben, wie sie sind. */
.cge-widget p,
.cge-widget .textwidget,
.cge-widget .custom-html-widget {
	color: var(--text-main);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.7;
}

/* Bildunterschriften der Envira-Galerie.

   Das Plugin bringt eigene Werte mit: generisches sans-serif in 12 Pixel. Die
   weisse Schrift auf dunkler Flaeche bleibt - sie liegt ueber dem Bild und
   braucht den Kontrast -, Schriftart und Groesse folgen dem Theme. */
/* Drei Klassen sind noetig: justifiedGallery.css bringt
   `.justified-gallery > div > div > a > .caption` mit und schlaegt mit zwei
   Klassen und drei Elementen jeden kuerzeren Selektor. */
.cge-entry-content .envira-gallery-item .caption,
.cge-entry-content .justified-gallery .caption {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
}


/* 13.0 Produktseite
   -------------------------------------------------------------- */

.prod-page {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 40px var(--gutter);
}

/* minmax(0, …) statt blossem fr: Ein fr-Anteil hat als Mindestmaß die
   Inhaltsbreite. Die Bildspalte waere sonst ueber ihren Anteil hinausgewachsen
   und haette die Textspalte auf die Haelfte zusammengedrueckt. */
.prod-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 64px;
	margin-bottom: 72px;
}

.prod-gallery {
	position: sticky;
	top: calc(var(--header-h) + 40px);
	align-self: start;
}

/* Vorschaubild: Das Produkt steht vollständig im Rahmen (contain), damit hohe
   Objekte wie Obelisken nicht angeschnitten werden. */
/* Ohne Rahmen und ohne Innenabstand: Das Foto fuellt die Flaeche, wie im
   Entwurf. Rahmen und Polsterung liessen bei hochformatigen Aufnahmen breite
   leere Streifen entstehen. */
.main-img-wrap {
	position: relative;
	margin: 0 0 12px;
	background: transparent;
	border: 0;
}

.main-img-wrap > a {
	display: block;
}

.main-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: transparent;
}

/* „Abgebildet: …" – nennt die Ausführung, deren Bild gerade zu sehen ist.
   Liegt über dem Foto statt darunter, damit Miniaturen und Seite beim
   Wechsel nicht springen. */
.main-img-caption {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	max-width: calc(100% - 24px);
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.4;
	pointer-events: none;
}

.main-img-caption[hidden] {
	display: none;
}

.thumbnails {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.thumb {
	display: block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border: 1px solid var(--taupe-light);
	background: var(--cream);
	cursor: pointer;
	transition: border-color 0.2s;
}

.thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumb:hover,
.thumb:focus-visible {
	border-color: var(--green-light);
}

.thumb.is-active {
	border-color: var(--green-mid);
	border-width: 2px;
}

.prod-breadcrumb {
	margin-bottom: 16px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

.prod-breadcrumb a {
	color: var(--green-mid);
	text-decoration: none;
}

.prod-title {
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: 48px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.15;
}

.prod-subtitle {
	margin-bottom: 20px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prod-price-block,
.single-product .summary > .price {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--taupe-light);
	border-bottom: 1px solid var(--taupe-light);
	font-family: var(--serif);
	font-size: 38px;
	font-weight: 400;
	color: var(--green-deep);
}

.single-product .summary > .price del {
	color: var(--taupe);
	font-size: 0.7em;
}

.price-note,
.single-product .summary .woocommerce-price-suffix {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

.prod-short-desc,
.woocommerce-product-details__short-description {
	margin-bottom: 28px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.8;
}

/* Variantenauswahl */
.variant-group,
.single-product .variations tr {
	display: block;
	margin-bottom: 24px;
}

.variant-label,
.single-product .variations label {
	display: block;
	margin-bottom: 10px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.variant-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.variant-btn {
	padding: 10px 18px;
	border: 1px solid var(--taupe-light);
	background: none;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.variant-btn.active {
	background: var(--green-deep);
	border-color: var(--green-deep);
	color: #fff;
}

.variant-btn:hover:not(.active) {
	border-color: var(--green-mid);
}

.finish-options {
	display: flex;
	gap: 10px;
}

/* Das Farbfeld selbst steht weiter unten: Es ist keine Fläche mehr, sondern ein
   Knopf aus Fläche und RAL-Nummer. Eine feste Höhe hier stauchte die Fläche. */

/* In den Warenkorb */
.atc-row,
.single-product form.cart {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.qty-control,
.single-product form.cart .quantity {
	display: flex;
	border: 1px solid var(--taupe-light);
}

.qty-btn {
	width: 44px;
	height: 54px;
	background: none;
	border: none;
	color: var(--brown-mid);
	font-size: 20px;
	cursor: pointer;
}

.qty-input,
.single-product form.cart .quantity input {
	width: 54px;
	height: 54px;
	border: none;
	border-left: 1px solid var(--taupe-light);
	border-right: 1px solid var(--taupe-light);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 19px;
	text-align: center;
}

.btn-atc,
.single-product form.cart button[type="submit"] {
	flex: 1;
	padding: 0 24px;
	background: var(--green-deep);
	border: none;
	color: #fff;
	font-family: var(--sans);
	font-size: 17px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s;
}

/* Die Schriftfarbe steht hier ausdrücklich, obwohl sie sich nicht ändert: Die
   allgemeine Regel `a:hover, a:focus` führt eine Pseudoklasse mehr und schlug
   die Farbe der Schaltfläche. Die Beschriftung nahm dadurch bei Mauskontakt und
   bei Tastaturfokus Dunkelgrün an – und verschwand auf dem grünen Grund. */
.btn-atc:hover,
.btn-atc:focus,
.single-product form.cart button[type="submit"]:hover,
.single-product form.cart button[type="submit"]:focus {
	background: var(--green-mid);
	color: #fff;
}

.btn-wishlist {
	width: 54px;
	height: 54px;
	border: 1px solid var(--taupe-light);
	background: none;
	color: var(--text-muted);
	font-size: 22px;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.btn-wishlist:hover {
	border-color: var(--bronze);
	color: var(--bronze);
}

/* Vertrauenselemente auf der Produktseite */
.prod-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

/* Datenblatt der gewählten Ausführung */
.cge-variant-specs {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-top: 1px solid var(--taupe-light);
}

.cge-variant-specs li {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--taupe-light);
	font-family: var(--sans);
	font-size: 17px;
}

.cge-variant-specs__label {
	color: var(--brown-mid);
	font-weight: 500;
}

.cge-variant-specs__value {
	color: var(--text-muted);
}

/* Akkordeon „Produktdetails" um das Datenblatt der Ausführung (seit
   24.09.2026). Zugeklappt, damit „In den Warenkorb" auf dem Desktop ohne
   Rollen erreichbar ist. Die Beschriftung folgt `.variant-label`. */
.cge-specs {
	margin: 0 0 20px;
	border-top: 1px solid var(--taupe-light);
	border-bottom: 1px solid var(--taupe-light);
}

.cge-specs__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.cge-specs__toggle::-webkit-details-marker {
	display: none;
}

.cge-specs__toggle::after {
	content: "\203A";
	font-size: 1.6em;
	line-height: 0;
	transform: rotate( 90deg );
	transition: transform 0.3s;
}

.cge-specs[open] > .cge-specs__toggle::after {
	transform: rotate( -90deg );
}

.cge-specs__toggle:hover,
.cge-specs__toggle:focus-visible {
	color: var(--green-deep);
}

/* Die Liste bringt ihre Linien mit; im Akkordeon übernimmt der Rahmen des
   Akkordeons oben und unten. */
.cge-specs .cge-variant-specs {
	margin: 0;
}

.cge-specs .cge-variant-specs li:last-child {
	border-bottom: 0;
}

.cge-legal-note {
	margin-bottom: 24px;
}

/* Vergleichstabelle der Ausführungen */
.cge-table-scroll {
	overflow-x: auto;
}

.cge-variant-table th[scope="col"] {
	padding: 14px 12px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 400;
	text-align: left;
}

.cge-variant-table th[scope="row"] {
	width: 30%;
	padding-right: 16px;
	color: var(--brown-mid);
	font-weight: 500;
	vertical-align: top;
}

.cge-variant-table td {
	padding: 14px 12px;
	vertical-align: top;
}

.cge-variant-table thead tr {
	border-bottom: 2px solid var(--bronze);
}

.prod-trust-item {
	padding: 16px 8px;
	border: 1px solid var(--taupe-light);
	background: var(--cream);
	text-align: center;
}

.prod-trust-icon {
	display: block;
	margin-bottom: 6px;
	font-size: 22px;
}

.prod-trust-text {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.4;
}

.inquiry-box {
	margin-bottom: 28px;
	padding: 24px;
	border: 1px solid var(--taupe-light);
	background: var(--cream-dark);
}

.inquiry-text {
	margin-bottom: 16px;
	color: var(--brown-mid);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
}

.prod-assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.prod-assurance {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

.prod-assurance::before {
	content: '✓';
	color: var(--green-mid);
}

/* Reiter im Inhalt (Kurzbefehl `[tabby]`, siehe inc/tabby.php).

   Sie stehen meist innerhalb eines Produktreiters, also Reiter in Reitern.
   Deshalb dieselbe Form wie oben, aber eine Stufe leiser: kleinere Schrift,
   keine Versalien.

   Die Überschriften bleiben im Markup stehen und werden nur ausgeblendet,
   sobald das Skript die Leiste gebaut hat. Ohne JavaScript stehen sie sichtbar
   über ihren Abschnitten, und der Text bleibt vollständig lesbar. */

.responsive-tabs__list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--taupe-light);
}

.responsive-tabs__list__item {
	margin-bottom: -1px;
	padding: 12px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.responsive-tabs__list__item--active {
	color: var(--green-deep);
	border-bottom-color: var(--bronze);
}

.responsive-tabs__list__item:hover:not(.responsive-tabs__list__item--active) {
	color: var(--brown-mid);
}

.responsive-tabs__heading {
	display: none;
}

.responsive-tabs__panel {
	padding-bottom: 8px;
}

/* Reiter */
.prod-tabs,
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 40px;
	padding: 0;
	border-bottom: 1px solid var(--taupe-light);
	list-style: none;
}

.tab-btn,
.woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: -1px;
	padding: 16px 28px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.tab-btn.active,
.woocommerce-tabs ul.tabs li.active a {
	color: var(--green-deep);
	border-bottom-color: var(--bronze);
}

.tab-btn:hover:not(.active) {
	color: var(--brown-mid);
}

.tab-content {
	display: none;
	max-width: 860px;
	padding-bottom: 48px;
}

.tab-content.active {
	display: block;
}

.tab-content p,
.woocommerce-tabs .panel p {
	margin-bottom: 16px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.9;
}

.specs-table,
.woocommerce-product-attributes {
	width: 100%;
	max-width: 600px;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 18px;
}

.specs-table tr,
.woocommerce-product-attributes tr {
	border-bottom: 1px solid var(--taupe-light);
}

.specs-table td,
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 14px 0;
	color: var(--text-muted);
	text-align: left;
}

.specs-table td:first-child,
.woocommerce-product-attributes th {
	width: 40%;
	color: var(--brown-mid);
	font-weight: 500;
}

.specs-table tr:last-child,
.woocommerce-product-attributes tr:last-child {
	border-bottom: none;
}

/* Von WooCommerce selbst ausgegebene Schleifen – verwandte Produkte,
   Cross-Sells, [products]-Shortcode. Die Kacheln darin liefert
   woocommerce/content-product.php. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

/* Die Spaltenzahl steht am Element: WooCommerce vergibt `columns-1` bis
   `columns-6`, gespeist aus dem Kurzbefehl. Die Seite „Top 10" etwa ruft
   `[products columns="4"]` neunmal auf; die feste Vorgabe von drei Spalten
   oben hat das übergangen.

   `:where()` steuert nichts zur Spezifität bei. Dadurch sind diese Regeln
   gleich stark wie die Grundregel darüber und werden nur deshalb wirksam, weil
   sie später stehen — und die Regeln für schmale Bildschirme weiter unten
   setzen sich aus demselben Grund gegen sie durch. Mit einer echten Klasse
   wären sie stärker gewesen und hätten die Umbrüche ausgehebelt. */
.woocommerce ul.products:where(.columns-1) { grid-template-columns: minmax(0, 1fr); }
.woocommerce ul.products:where(.columns-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products:where(.columns-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products:where(.columns-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products:where(.columns-5) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products:where(.columns-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* Die runde Angebots-Kennzeichnung des Kerns erscheint nie.

   Das Theme zeichnet sie selbst – eckig und rot, über dem großen Bild und in
   der Produktkachel. `span.onsale` ist die grüne, runde Fassung aus
   `woocommerce.css`. Ihre beiden Rückrufe sind in `inc/woocommerce.php` von
   den Haken genommen; diese Regel fängt ab, was ohne Haken entsteht – ein
   Produktblock im Editor, ein Widget, ein Plugin mit eigener Schleife. Gilt
   für alle Seitentypen. */
span.onsale,
.woocommerce span.onsale {
	display: none;
}

/* Auch in den Schleifen von WooCommerce sitzt die Kachel in einem `li`. Damit
   sie dessen volle Reihenhöhe übernehmen kann, muss das `li` sie strecken. */
.woocommerce ul.products li.product {
	display: flex;
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce ul.products li.product > .prod-card {
	width: 100%;
}

.related.products,
.upsells.products {
	clear: both;
	padding: 64px var(--gutter);
	margin-inline: calc(var(--gutter) * -1);
	background: var(--cream);
}

.related.products > h2,
.upsells.products > h2 {
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 300;
	text-align: center;
}

/* Auf dem Tablet zwei Kacheln je Reihe, nicht drei: Vier Einträge – die
   Bestseller, die ähnlichen Produkte – stehen dann zwei plus zwei statt drei
   plus einer allein. Gilt für alle Produktraster gleichermaßen, siehe
   Abschnitt 11.0. */
@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* Bis 480 statt 400 Pixel eine Kachel je Reihe (22.10.2026): Zwei Kacheln
   standen bei 401–480 Pixeln nur 165–204 Pixel breit, Namen liefen auf vier
   bis sechs Zeilen. */
@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Vorschläge als wischbare Reihe (29.10.2026, Wunsch des Betreibers):
   ähnliche Produkte, Upsells, Vorschläge im Warenkorb und auf der
   Bestellbestätigung. Untereinander waren das auf dem Telefon vier volle
   Kacheln, rund 2.800 Pixel. Die nächste Kachel schaut rechts herein, damit
   die Reihe als wischbar erkennbar ist; jede rastet am linken Rand ein. Die
   Reihe läuft bis an den Bildschirmrand, die erste Kachel steht bündig mit
   dem Inhalt darüber. Kategorieraster und `[products]` bleiben Raster. */
@media (max-width: 768px) {
	.related.products ul.products,
	.upsells.products ul.products,
	.cross-sells ul.products,
	.cge-order-upsell .product-grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		margin-inline: calc(var(--gutter) * -1);
		padding: 0 var(--gutter) 12px;
		scrollbar-width: thin;
	}

	.related.products ul.products > li.product,
	.upsells.products ul.products > li.product,
	.cross-sells ul.products > li.product,
	.cge-order-upsell .product-grid > * {
		flex: 0 0 min(72%, 280px);
		scroll-snap-align: start;
	}
}


/* --- Standardausgabe von WooCommerce und Germanized im Entwurfsraster ---
   Diese Elemente erzeugt nicht das Theme, sondern die Haken der Plugins.
   Sie werden hier nur gestaltet, damit sie dem Entwurf entsprechen. */

.prod-info-col .product_title {
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: 48px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.15;
}

.prod-info-col .woocommerce-product-rating {
	margin-bottom: 16px;
	font-family: var(--sans);
	font-size: 16px;
}

/* Die Linien trägt der umschließende Preisblock, nicht der Preis selbst. */
.prod-info-col .prod-price-block > .price {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font-family: var(--serif);
	font-size: 38px;
	font-weight: 400;
	color: var(--green-deep);
}

.prod-info-col .prod-price-block > .price del {
	margin-right: 10px;
	color: var(--taupe);
	font-size: 0.65em;
}

.prod-info-col .prod-price-block > .price ins {
	text-decoration: none;
}

/* Grundpreis, Umsatzsteuer- und Versandkostenhinweis, Pfand, Lieferzeit */
.prod-info-col .wc-gzd-additional-info,
.prod-info-col .woocommerce-price-suffix,
.prod-info-col .wc-gzd-additional-info-placeholder {
	margin: 0 0 4px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	font-style: normal;
}


.prod-info-col .product_meta {
	margin: 24px 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
}

.prod-info-col .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* Reiter erzeugt woocommerce_output_product_data_tabs */
.woocommerce-tabs {
	clear: both;
	padding-top: 24px;
}

/* Volle Breite: Der Inhalt der Reiter - vor allem das Datenblatt mit mehreren
   Ausfuehrungen - braucht jeden Pixel. Fuer Fliesstext sorgt .panel p fuer eine
   ertraegliche Zeilenlaenge. */
.woocommerce-tabs .panel {
	max-width: none;
	padding-bottom: 48px;
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* 14.0 Beiträge, Seiten, Kommentare
   -------------------------------------------------------------- */

/* Eine Spalte mit `minmax(0, 1fr)` auch unter 60rem: Ohne Vorgabe richtete
   sich die Spalte nach dem breitesten unteilbaren Inhalt. Auf „Datenschutz"
   war sie bei 390 Pixeln Fenster 469 breit (ausgeschriebene Adressen wie
   https://ec.europa.eu/info/law/…), der Text rechts abgeschnitten
   (22.10.2026). Lange Adressen im Text brechen deshalb auch um. */
.cge-content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 56px var(--gutter);
}

.cge-entry-content a {
	overflow-wrap: anywhere;
}

@media (min-width: 60rem) {
	.cge-content-area {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}

	.cge-content-area--full {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fliesstext im Blog.

   Jeder Fliesstext des Themes steht in EB Garamond, 19 Pixel, Zeilenhoehe 1,9 -
   Kategorietext, Produktbeschreibung, Reiter und Textabschnitte der Startseite.
   Der Blog folgt derselben Norm. Die Groesse steht zusaetzlich am Absatz, damit
   keine Regel aus einem Plugin sie ueberschreibt: Die Beitraege durchlaufen
   WPBakery, dessen Stilblatt eigene Absatzregeln mitbringt.

   Einzige Abweichung ist die Schriftfarbe: Der Artikeltext ist der Hauptinhalt
   seiner Seite und steht deshalb im dunkleren --text-main, waehrend die uebrigen
   Fliesstexte begleitend sind. */

.cge-entry-content {
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.9;
	color: var(--text-main);
}

.cge-entry-content p,
.cge-entry-content li {
	font-size: 19px;
	line-height: 1.9;
}

/* Tabellen im Inhalt (22.10.2026). Schrift und Größe standen bis dahin als
   Inline-Stil oder <style>-Block im Inhalt selbst und sind dort entfernt –
   Daten in Jost wie in Warenkorb und Datenblatt, Kopfzeile auf hellem Grund.
   Ein <p> in der Zelle bringt keinen eigenen Abstand mit.

   Nicht in WooCommerce (`:not(.woocommerce *)`): Warenkorb, Kasse, Konto und
   Bestätigung laufen über die Seitenvorlage, ihre Tabellen stehen also auch
   in `.cge-entry-content`. Am 22.10.2026 bekamen sie dadurch Rahmen um jede
   Zelle und Kopfzeilen auf Creme – dort gilt allein Abschnitt 16. */

.cge-entry-content table:not(.woocommerce *) {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.5;
}

.cge-entry-content th:not(.woocommerce *),
.cge-entry-content td:not(.woocommerce *) {
	padding: 12px 14px;
	font-size: inherit;
	border: 1px solid var(--taupe-light);
	text-align: left;
	vertical-align: top;
}

.cge-entry-content th:not(.woocommerce *) {
	font-weight: 500;
	color: var(--green-deep);
	background: var(--cream);
}

.cge-entry-content td:not(.woocommerce *) p,
.cge-entry-content th:not(.woocommerce *) p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* Trennlinien im Inhalt: eine Linie in Taupe-hell, wie <hr> überall. Die
   Trenner von WPBakery und die Blöcke „Trennzeichen“ brachten eigene Farben,
   Stärken und Deckkraft mit; Farbangaben im Inhalt sind entfernt. */

.cge-entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--taupe-light);
	background: none;
	opacity: 1;
	margin: 40px 0;
}

/* Vier Klassen: WPBakery färbt mit .vc_separator.vc_sep_color_grey
   .vc_sep_line (drei) und lädt sein Stilblatt nach diesem. */
.cge-entry-content .vc_separator .vc_sep_holder .vc_sep_line {
	border-color: var(--taupe-light);
	border-top-width: 1px;
}

/* Kategoriekarten der Aktionsblöcke („Angebote“, „Alle Pflanzkübel“, im
   Raw HTML): Fläche und Linie wie im Theme statt Weiß und schwarzem Balken. */

.cge-entry-content .kategorien-card {
	background: var(--white);
	border: 1px solid var(--taupe-light);
}

.cge-entry-content .kategorien-card::after {
	height: 1px;
	background: var(--taupe-light);
}

/* Der Inhalt nimmt die volle Breite seiner Spalte ein.

   Hier stand zuvor eine Lesbreite von 46rem an jedem Kindelement. Die Rechnung
   ging im Bestand nicht auf: Im Blog ist die Inhaltsspalte neben der
   Seitenleiste 968 Pixel breit, jeder Absatz blieb bei 736 – rechts stand ein
   leerer Streifen, und die Bilder der Beiträge (bis 1134 Pixel) wurden mitten
   in der Spalte beschnitten. Die Zeilenlänge begrenzt stattdessen die Spalte
   selbst: Wo eine Seitenleiste steht, ist sie ohnehin schmal genug. */

/* Bilder im Fließtext nehmen die volle Spaltenbreite ein.

   Im Bestand tragen die Bilder ihre Uploadbreite als Attribut, meist 1134
   Pixel. Die Inhaltsspalte ist 1304 Pixel breit – rechts blieb also ein
   Streifen, und bei mehreren Bildern untereinander sprang die Kante je nach
   Bildgröße hin und her.

   Der Preis ist Hochskalierung: 595 der 623 Bilder im Bestand sind schmaler
   als die Spalte, im Schnitt um den Faktor 1,4. Wo das sichtbar wird, hilft
   nur ein größeres Bild – bewusst so entschieden, statt den Bildbestand
   anzutasten.

   Ausgenommen bleiben Galerien (sie füllen ihre Rasterzelle, nicht die
   Spalte), umflossene Bilder und Emojis. */

.cge-entry-content img,
.cat-text img {
	width: 100%;
}

.cge-entry-content img.alignleft,
.cge-entry-content img.alignright,
.cge-entry-content img.emoji,
.cat-text img.alignleft,
.cat-text img.alignright,
.cat-text img.emoji {
	width: auto;
}

/* Bildunterschriften bringen ihre Breite als Attribut mit („width: 1144px"),
   sonst bliebe der Rahmen um das gestreckte Bild bei der alten Breite. */
.cge-entry-content .wp-caption,
.cat-text .wp-caption {
	width: auto !important;
	max-width: 100%;
}

/* Aufklappbare Textabschnitte (Kurzbefehl `[showhide]`).

   Der Umschalter ist ein Knopf — für Tastatur und Vorlesegeräte richtig — und
   sieht seit 21.09.2026 auch so aus. Als Textlink ging er zwischen den Links
   der Produktbeschreibung unter; auf der alten Website war er eine Fläche.

   **Er trägt die Gestaltung des Anfrage-Knopfes** (`.btn-inquiry`, Abschnitt
   5.0) – umrandet statt gefüllt, damit er nicht mit „In den Warenkorb"
   verwechselt wird: Der Warenkorb-Knopf ist dunkelgrün gefüllt und führt zum
   Kauf, dieser klappt nur Text auf. Erst beim Überfahren füllt er sich. Auf
   der Produktseite stehen beide dicht beieinander, deshalb dieselben Regeln
   und nicht nachgebaute.

   Hier steht nur, was hinzukommt: Flex, damit die Spitze neben der Schrift
   sitzt und sich drehen kann.

   `line-height: normal` gleicht die beiden Fassungen aneinander an. Ein
   Knopf erbt die Zeilenhöhe seiner Umgebung nicht, ein Link schon: Der
   Umschalter im Alt-Markup der Startseite steht mitten im Fließtext und war
   damit 54 statt 47 Pixel hoch. `normal` ist der Wert, den auch `.btn-inquiry`
   an seiner Stelle bekommt.

   Die zweite Auswahl `.sh-link > a` gilt dem Markup des alten Plugins: Wo
   jemand dessen fertige Ausgabe in einen Text kopiert hat, steht dort ein Link
   statt eines Knopfes (siehe `theme.js`). */
.sh-toggle,
.sh-link > a,
.cge-entry-content .sh-link > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--green-deep);
	line-height: normal;
	text-decoration: none;
}

/* Die Spitze zeigt nach unten, solange der Abschnitt zu ist, und nach oben,
   sobald er offen steht. Sie dreht sich mit dem Zustand am Rahmen. */
.sh-toggle::after,
.sh-link > a::after {
	content: "\203A";
	display: inline-block;
	font-size: 1.2em;
	line-height: 0;
	transform: rotate( 90deg );
	transition: transform 0.3s;
}

.sh-link.sh-show .sh-toggle::after,
.sh-link.sh-show > a::after {
	transform: rotate( -90deg );
}

.sh-link {
	margin: 20px 0;
}

/* `hidden` bedeutet bereits `display: none`. Eine Themenregel mit einer Klasse
   überstimmte das aber und ließe den Abschnitt offen stehen — zwei Klassen
   schlagen eine. */
.wp-showhide.sh-content[hidden] {
	display: none;
}

/* 3D-Ansicht: Das Element braucht eine Fläche, bevor es die Bibliothek gibt.

   Ein noch nicht registriertes eigenes Element ist für den Browser ein
   Inline-Element; `width` und `height` aus dem Inhalt greifen daran nicht. Es
   blieb dadurch null Pixel groß – und weil das Nachladen der Bibliothek an
   seiner Sichtbarkeit hängt (siehe inc/model-viewer.php), lud sie nie.
   Henne und Ei, aufgelöst mit einer Zeile. */
model-viewer:not(:defined) {
	display: block;
}

/* Bildergalerien – eine Darstellung für alle Quellen.

   `[gallery]`, Envira und die Referenzprojekte laufen durch dasselbe Markup
   (inc/galleries.php) und sehen deshalb gleich aus: gleich große Kacheln im
   Seitenverhältnis 4:3, feiner Rahmen, gleiche Abstände, dieselbe Lightbox.

   **Beschnittene Kacheln statt natürlicher Proportionen.** Im Bestand mischen
   sich Hoch- und Querformate. In natürlicher Größe ergab das Reihen mit
   unterschiedlich hohen Bildern – Envira löste das mit einem Mauerwerk, das
   ein Skript nach dem Laden zusammensetzt. Die Lightbox zeigt das Bild
   vollständig.

   **Flex statt Grid**, damit eine unvollständige letzte Reihe mittig steht
   und die Kacheln dabei ihre Größe behalten. Das alte Referenzen-Template
   rückte zwei Bilder ebenso zur Mitte. Die Spaltenzahl kommt aus der Klasse,
   die WordPress vergibt (`gallery-columns-3`). */

.gallery {
	--galerie-spalten: 3;
	--galerie-abstand: 20px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--galerie-abstand);
	margin: 32px 0;
}

.gallery-columns-1 { --galerie-spalten: 1; }
.gallery-columns-2 { --galerie-spalten: 2; }
.gallery-columns-3 { --galerie-spalten: 3; }
.gallery-columns-4 { --galerie-spalten: 4; }
.gallery-columns-5 { --galerie-spalten: 5; }
.gallery-columns-6 { --galerie-spalten: 6; }

.gallery-item {
	flex: 0 0 auto;
	width: calc( ( 100% - ( var(--galerie-spalten) - 1 ) * var(--galerie-abstand) ) / var(--galerie-spalten) );
	margin: 0;
}

.gallery-icon {
	margin: 0;
}

.gallery-icon a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--taupe-light);
	background: var(--cream-dark);
}

.gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.2s;
}

.gallery-icon a:hover img,
.gallery-icon a:focus-visible img {
	transform: scale( 1.03 );
	opacity: 0.92;
}

/* Im Fließtext rückt eine Galerie unter ein links stehendes Beitragsbild.
   Als Flex-Behälter wiche sie ihm sonst aus und stünde schmal daneben. */
.cge-entry-content .gallery {
	clear: left;
}

/* Projekte der Referenzseiten: Überschrift, Text, Bilder. Zwischen zwei
   Projekten eine Linie, wie im alten Template. */

.cge-projects {
	clear: left;
	margin-top: 48px;
}

.cge-project + .cge-project {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--taupe-light);
}

.cge-entry-content .cge-project__title {
	margin: 0 0 12px;
	text-align: center;
}

.cge-project__text {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.cge-project__text p:last-child {
	margin-bottom: 0;
}

.cge-project .gallery {
	margin-bottom: 0;
}

/* Zwei Textspalten (Feldgruppe „Two Columns"). */

.cge-two-columns-block {
	clear: left;
	margin-top: 32px;
}

/* H2-Überschrift der Feldgruppe „Zwei Spalten", in Bronze und mittig wie der
   Seitentitel darüber und die Spalten darunter. */
.cge-entry-content .cge-two-columns__title {
	margin: 0 0 24px;
	color: var(--bronze);
	text-align: center;
}

.cge-two-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 24px 48px;
	text-align: center;
}

/* Aufzählungen stehen in den mittigen Spalten sonst als Block am linken Rand,
   ihre Punkte davor im Leeren: Die Marke rückt in die Zeile, der Einzug
   entfällt. */
.cge-two-columns__col ul,
.cge-two-columns__col ol {
	padding-left: 0;
	list-style-position: inside;
}

.cge-two-columns__col > :first-child {
	margin-top: 0;
}

.cge-two-columns__col > :last-child {
	margin-bottom: 0;
}

/* Bildunterschriften.

   Fuer Galerien gab es hier schon dezente Werte, Einzelbilder hatten keine
   eigene Regel: Sie erbten 18 Pixel in Fliesstextfarbe und lasen sich damit
   wie ein weiterer Absatz. Die alte Website zeigt sie klein, grau und kursiv
   mit etwas Abstand zum Bild - diese Anmutung ist hier uebernommen, in der
   Schrift des Themes statt in Times.

   Bildunterschriften sind Beiwerk, kein Lesetext. Die Anhebung um 2 Pixel fuer
   die Zielgruppe 65+ gilt hier deshalb nicht, wie im Fussbereich auch. */

.gallery-caption,
.cge-entry-content .wp-caption-text,
.cge-entry-content figcaption,
.cat-text .wp-caption-text,
.cat-text figcaption {
	margin-top: 10px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
}

@media (max-width: 40rem) {
	/* Auf dem Telefon wären drei Spalten je 100 Pixel breit. */
	.gallery {
		--galerie-spalten: 2;
		--galerie-abstand: 12px;
	}

	.gallery-columns-1 {
		--galerie-spalten: 1;
	}
}

.cge-entry + .cge-entry {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--taupe-light);
}

.cge-entry__title {
	margin-bottom: 8px;
}

/* Seitentitel (22.10.2026): hatte keine eigene Größe, es galt die Vorgabe des
   Browsers (2em = 36 Pixel) – kleiner als jede H2 im Inhalt (34 Pixel, 400).
   Jetzt 44 Pixel wie die H1 im Inhalt und der Blogtitel, im feinen Gewicht
   300 der allgemeinen Überschriftenregel (400 wirkte am Titel zu schwer).
   Gilt für alle Seiten, auch Warenkorb, Kasse und Konto; Blogbeiträge haben
   ihren eigenen Kopf (.cge-entry__header--post). Auf dem Telefon 36 statt
   44 – nicht kleiner, denn die H2 im Inhalt bleibt dort bei 34. */
.type-page .cge-entry__title {
	font-size: 44px;
}

@media (max-width: 40rem) {
	.type-page .cge-entry__title {
		font-size: 36px;
	}
}

.cge-entry__title a {
	color: inherit;
	text-decoration: none;
}

/* Kopf eines Blogbeitrags, uebernommen aus dem alten Blog.

   Aufbau von oben: Ornament, darunter das Datum zwischen zwei Zierzeichen,
   eine Trennlinie, dann der Titel. Alle drei Grafiken sind Dekoration und
   stehen deshalb als Hintergrund in Pseudoelementen, nicht im Markup - so
   liest kein Vorlesegeraet sie vor.

   Dieselbe Anordnung gilt in der Uebersicht wie auf der Beitragsseite. */

.cge-entry__header--post {
	margin-bottom: 32px;
	text-align: center;
}

.cge-entry__header--post::before {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 18px;
	background: url('assets/img/ornament-zapfen.png') no-repeat center / contain;
	content: '';
}

.cge-entry__header--post .cge-entry__meta {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bronze);
	color: var(--bronze);
	font-family: var(--serif);
	font-size: 19px;
	font-style: italic;
	letter-spacing: 0.02em;
}

/* Die Zierzeichen links und rechts des Datums. */
.cge-entry__header--post .cge-entry__meta::before,
.cge-entry__header--post .cge-entry__meta::after {
	flex: none;
	width: 16px;
	height: 10px;
	content: '';
}

.cge-entry__header--post .cge-entry__meta::before {
	background: url('assets/img/ornament-links.png') no-repeat center / contain;
}

.cge-entry__header--post .cge-entry__meta::after {
	background: url('assets/img/ornament-rechts.png') no-repeat center / contain;
}

.cge-entry__header--post .cge-entry__title {
	margin-bottom: 0;
	color: var(--bronze);
	font-size: 44px;
}

.cge-entry__header--post .cge-entry__title a:hover,
.cge-entry__header--post .cge-entry__title a:focus {
	color: var(--green-deep);
}

@media (max-width: 40rem) {
	.cge-entry__header--post .cge-entry__title {
		font-size: 32px;
	}

	.cge-entry__header--post .cge-entry__meta {
		font-size: 17px;
	}
}

.cge-entry__subtitle {
	margin-bottom: 24px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Vorlage „Titel zentriert" – für Landingpages mit mittig gesetztem Inhalt. */
.cge-entry__header--center {
	text-align: center;
}

.cge-entry__meta {
	margin-bottom: 24px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.08em;
}

.cge-entry__meta > * + *::before {
	content: '·';
	margin-inline: 0.4em;
}

/* Beitragsbild.

   Blogbeiträge: über die ganze Spalte. Ihre Bilder sind quer, und neben der
   Spalte steht die Seitenleiste – zu groß skaliert wird dadurch nichts.

   Statische Seiten mit schmalem Bild (`--float`, entschieden in
   `cge_thumbnail_floats()`): links, der Text umfließt es. Über die volle
   Breite gestreckt würde das hochkante Bild der Seite „Winterliche
   Metamorphosen" (478 × 800) auf 968 Pixel mehr als verdoppelt. Höchstens
   die halbe Spalte, damit daneben eine lesbare Textspalte bleibt; ein
   schmales Bild behält seine Größe. */

.cge-entry__thumbnail {
	margin: 0 0 32px;
}

.cge-entry__thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.cge-entry__thumbnail--float {
	float: left;
	max-width: 50%;
	margin: 0 32px 16px 0;
}

.cge-entry__thumbnail--float img {
	width: auto;
	max-width: 100%;
}

/* Der Beitrag schließt sein Bild ein. Ohne das ragte ein hohes Bild bei
   kurzem Text aus dem Beitrag heraus – in der Übersicht in den nächsten
   Beitrag, auf der Einzelseite in die Blätternavigation. */
.cge-entry {
	display: flow-root;
}

/* Ein Bild im Fließtext rückt unter das Beitragsbild.

   Text weicht einem Float von allein aus, ein Bild in voller Spaltenbreite
   aber nicht: Es beginnt am linken Rand und liefe quer über das Beitragsbild.
   Getroffen sind nur Absätze und Rahmen, die nichts als ein solches Bild
   enthalten – ein Bild mitten im Satz und die bewusst umflossenen
   `alignleft`/`alignright` bleiben, wo sie sind.

   Browser ohne `:has()` zeigen den alten Zustand; dort überlappen die beiden
   Bilder wie bisher. */

.cge-entry-content p:has( > img:not( .alignleft ):not( .alignright ):not( .emoji ) ),
.cge-entry-content figure:not( .alignleft ):not( .alignright ),
.cge-entry-content .wp-caption:not( .alignleft ):not( .alignright ) {
	clear: left;
}

/* WPBakery-Zeilen neben dem Beitragsbild.

   Die meisten Seiten und Beiträge liegen in einer WPBakery-Zeile mit einer
   einzigen Spalte. WPBakery lässt ab 768 Pixeln jede Spalte floaten, auch
   diese eine mit voller Breite (`.vc_col-sm-12 { float: left }`). Ein Float mit
   100 Prozent passt nicht neben ein anderes Float und rutscht darunter – samt
   dem ganzen Text. Der Text umfloss das Beitragsbild deshalb nie.

   Einspaltige Zeilen floaten hier nicht. An ihrer Darstellung ändert das
   nichts, eine volle Spalte steht ohnehin allein. Mehrspaltige Zeilen brauchen
   ihre Floats und rücken stattdessen unter das Bild: Zwei halbe Spalten neben
   einem halbbreiten Bild wären nicht mehr lesbar. */

/* Die Spaltenklassen stehen einzeln statt als Liste in `:is()`. Im Bestand
   kommt nur `vc_col-sm-12` vor; die übrigen sind Vorsorge für künftige
   Seiten, deren Spalten an einem anderen Umbruchpunkt floaten. */

.cge-entry-content .vc_col-xs-12,
.cge-entry-content .vc_col-sm-12,
.cge-entry-content .vc_col-md-12,
.cge-entry-content .vc_col-lg-12 {
	float: none;
}

.cge-entry-content .vc_row:has(> .vc_column_container:not(.vc_col-sm-12)) {
	clear: left;
}

@media (max-width: 40rem) {
	/* Nebeneinander bleibt zu wenig Platz für beides. */
	.cge-entry__thumbnail--float {
		float: none;
		max-width: 100%;
		margin: 0 0 24px;
	}
}

.cge-page-header {
	margin-bottom: 40px;
}

/* Warenkorb, Kasse, Konto: Unter dem Seitentitel folgt direkt eine
   Abschnittsüberschrift („Rechnungsdaten") oder das Kontomenü; mit den 8
   Pixeln des Titels standen beide gedrängt. */
.woocommerce-cart .cge-entry__header,
.woocommerce-checkout .cge-entry__header,
.woocommerce-account .cge-entry__header {
	margin-bottom: 32px;
}

.woocommerce-cart .cge-entry__header,
.woocommerce-checkout .cge-entry__header {
	margin-bottom: 24px;
}

/* „Passend dazu im Ratgeber“ unter den Produkten der Suche, auf Kategorie- und
   Produktseiten (inc/ratgeber.php).
   Eine Liste, kein zweites Kachelraster – die Produkte bleiben das Ergebnis,
   der Ratgeber ist Zugabe. */
.cge-ratgeber {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--taupe-light);
}

.cge-ratgeber__titel {
	margin: 0 0 24px;
	font-size: 34px;
}

.cge-ratgeber__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cge-ratgeber__eintrag {
	padding: 16px 0;
	border-bottom: 1px solid var(--taupe-light);
}

.cge-ratgeber__art {
	display: block;
	margin-bottom: 4px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cge-ratgeber__link {
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1.25;
	text-decoration: none;
}

.cge-ratgeber__link:hover,
.cge-ratgeber__link:focus {
	color: var(--green-mid);
	text-decoration: underline;
}

.cge-ratgeber__auszug {
	margin: 6px 0 0;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
}

/* Produktseite: Der Reiterbereich darüber bringt unten schon 48 Pixel
   Innenabstand mit, ein Außenabstand dazu ergab 140 Pixel bis zur Linie.
   Unten derselbe Abstand vor dem hellen Band der ähnlichen Produkte – sonst
   stieß die letzte Linie direkt daran. */
.single-product .cge-ratgeber {
	margin-top: 0;
	margin-bottom: 48px;
}

/* Inhaltsverzeichnis in Ratgebern (inc/ratgeber.php, seit 29.10.2026).
   Navigation, also Jost wie Menü und Brotkrumen; eine Liste ohne Ziffern,
   weil viele Überschriften selbst nummeriert sind. Die Regeln für Absätze und
   Listen des Inhaltsbereichs gelten hier nicht, daher die längeren Selektoren. */
.cge-entry-content .cge-toc {
	max-width: 640px;
	margin: 32px 0 40px;
	padding: 20px 24px;
	background: var(--cream);
	border: 1px solid var(--taupe-light);
	font-family: var(--sans);
	text-align: left;
}

.cge-entry-content .cge-toc__titel {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.cge-entry-content .cge-toc__titel::-webkit-details-marker {
	display: none;
}

/* Spitze rechts, dreht sich beim Aufklappen – wie der Umschalter „mehr lesen“. */
.cge-entry-content .cge-toc__titel::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.cge-entry-content .cge-toc__aufklapper[open] > .cge-toc__titel {
	margin-bottom: 10px;
}

.cge-entry-content .cge-toc__aufklapper[open] > .cge-toc__titel::after {
	transform: translateY(2px) rotate(-135deg);
}

.cge-entry-content .cge-toc__anzahl {
	letter-spacing: 0;
	text-transform: none;
}

.cge-entry-content .cge-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cge-entry-content .cge-toc ul ul {
	margin: 4px 0 6px;
	padding-left: 18px;
}

.cge-entry-content .cge-toc li {
	margin: 0;
	padding: 4px 0;
	font-size: 17px;
	line-height: 1.45;
}

.cge-entry-content .cge-toc ul ul li {
	padding: 2px 0;
	font-size: 16px;
}

.cge-entry-content .cge-toc a {
	color: var(--green-deep);
	text-decoration: none;
}

.cge-entry-content .cge-toc a:hover,
.cge-entry-content .cge-toc a:focus-visible {
	color: var(--green-mid);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.cge-entry-content .cge-toc {
		padding: 16px 18px;
	}

	.cge-ratgeber--kompakt .cge-ratgeber__auszug {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cge-entry-content .cge-toc__titel::after {
		transition: none;
	}
}

/* Häufige Fragen (inc/faq.php, seit 29.10.2026): unter dem Text von Seiten,
   Beiträgen und Kategorien. Aufbau wie das Akkordeon der Startseite – Linien
   zwischen den Fragen, Spitze rechts. Die Frage ist eine H3 in `summary`;
   ihre Abstände aus der Überschriften-Staffel entfallen. */
.cge-faq {
	max-width: 960px;
	margin: 56px 0 0;
	text-align: left;
}

.cge-faq .cge-faq__titel {
	margin: 0 0 16px;
}

/* Hinweisband für Downloads, Kurzbefehl [download] (inc/download.php).
   Größen-Container: unter 640 Pixeln eigener Breite rutscht der Button
   unter den Text – auf dem Telefon wie in der schmalen Produktbeschreibung. */
.cge-download {
	container-type: inline-size;
	margin: 24px 0 32px;
}

.cge-download + .cge-download {
	margin-top: -16px;
}

.cge-download__innen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	padding: 28px 36px;
	background: var(--cream-dark);
	border-left: 3px solid var(--bronze);
	text-align: left;
}

.cge-download__vorschau {
	display: grid;
	place-items: center;
	width: 92px;
	aspect-ratio: 210 / 297;
	padding: 6px;
	background: var(--white);
	border: 1px solid var(--taupe-light);
	box-shadow: 4px 4px 0 var(--bronze-pale);
	color: var(--bronze);
	font-family: var(--serif);
	font-size: 13px;
	line-height: 1.15;
	text-align: center;
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: auto;
}

.cge-download__vorschau--bild {
	width: 120px;
	aspect-ratio: auto;
	padding: 4px;
}

.cge-download .cge-download__vorschau img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 140px;
	margin: 0;
	object-fit: contain;
}

.cge-download__ueberzeile {
	margin-bottom: 6px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cge-download__titel {
	margin-bottom: 6px;
	color: var(--text-main);
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.2;
}

.cge-download__titel:last-child {
	margin-bottom: 0;
}

.cge-download__text {
	color: var(--text-main);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.6;
}

.cge-download__aktion {
	text-align: center;
}

.cge-download a.cge-download__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	background: var(--green-deep);
	color: var(--white);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.cge-download a.cge-download__knopf:hover,
.cge-download a.cge-download__knopf:focus-visible {
	background: var(--green-mid);
	color: var(--white);
}

.cge-download__angabe {
	display: block;
	margin-top: 8px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

@container (max-width: 640px) {
	.cge-download__innen {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 24px 20px;
	}

	.cge-download__vorschau:not(.cge-download__vorschau--bild) {
		display: none;
	}

	.cge-download__titel {
		font-size: 26px;
	}

	.cge-download a.cge-download__knopf {
		width: 100%;
		white-space: normal;
	}
}

/* Auf Seiten mit mittigem Titel der ganze Block mittig, die Fragen darin
   linksbündig, siehe cge_faq_markup(). */
.cge-faq--mittig {
	margin-inline: auto;
}

.cge-faq--mittig .cge-faq__titel {
	text-align: center;
}

.cge-faq__eintrag {
	border-top: 1px solid var(--taupe-light);
}

.cge-faq__eintrag:last-child {
	border-bottom: 1px solid var(--taupe-light);
}

.cge-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	color: var(--green-deep);
	cursor: pointer;
	list-style: none;
}

.cge-faq__frage::-webkit-details-marker {
	display: none;
}

.cge-faq__frage::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.2s ease;
}

.cge-faq__eintrag[open] > .cge-faq__frage::after {
	transform: translateY(2px) rotate(-135deg);
}

.cge-faq .cge-faq__frage h3 {
	margin: 0;
	color: inherit;
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.cge-faq__frage:hover h3,
.cge-faq__frage:focus-visible h3 {
	color: var(--green-mid);
}

.cge-faq__antwort {
	padding: 0 0 24px;
}

.cge-faq__antwort > :first-child {
	margin-top: 0;
}

.cge-faq__antwort > :last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.cge-faq .cge-faq__frage h3 {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cge-faq__frage::after {
		transition: none;
	}
}

/* Vergleichstabellen ([produktvergleich] in inc/product.php, Materialtabelle
   im Ratgeber): wie die Tabellen im Inhalt, auch im Kategorietext. Auf dem
   Telefon rollt die Tabelle in ihrem Rahmen statt die Seite zu verbreitern.
   Eine klebende erste Spalte war probiert und verworfen: Der Kopf rollte mit,
   und im Seitenrand schienen die Werte durch. */
.cge-vergleich {
	margin: 32px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cge-vergleich table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.5;
}

.cge-vergleich caption {
	margin-bottom: 10px;
	color: var(--text-muted);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

.cge-vergleich th,
.cge-vergleich td {
	padding: 12px 14px;
	border: 1px solid var(--taupe-light);
	font-size: inherit;
	text-align: left;
	vertical-align: top;
}

.cge-vergleich thead th {
	font-weight: 500;
	color: var(--green-deep);
	background: var(--cream);
}

.cge-vergleich tbody th {
	font-weight: 500;
	background: var(--white);
}

.cge-vergleich tbody th a {
	color: var(--green-deep);
	text-decoration: none;
}

.cge-vergleich tbody th a:hover,
.cge-vergleich tbody th a:focus-visible {
	color: var(--green-mid);
	text-decoration: underline;
}

.cge-vergleich td {
	white-space: nowrap;
	background: var(--white);
}

.cge-vergleich--text td {
	white-space: normal;
}

@media (max-width: 768px) {
	.cge-vergleich tbody th {
		min-width: 9em;
	}
}

.cge-ratgeber__alle,
.cge-suche-zurueck {
	margin: 20px 0 0;
	font-family: var(--sans);
	font-size: 16px;
}

/* Beschreibung eines Archivs, unter Beiträgen und Blätternavigation. */
.cge-archive-description {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--taupe-light);
}

.cge-post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--taupe-light);
	font-family: var(--sans);
	font-size: 17px;
}

.cge-sidebar .cge-widget + .cge-widget {
	margin-top: 40px;
}

.cge-widget__title {
	margin-bottom: 16px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cge-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cge-widget li + li {
	margin-top: 8px;
}

.cge-comments {
	max-width: 46rem;
	margin-top: 56px;
}

.cge-comments__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.cge-comments__list .children {
	list-style: none;
	padding-left: 32px;
}

.cge-comments__list li {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--taupe-light);
}

.cge-search-form {
	display: flex;
	gap: 8px;
}

.cge-search-form__field {
	flex: 1;
}

.cge-search-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--green-deep);
	border: none;
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Newsletter-Anmeldung (Mailchimp for WP, Seite „Newsletteranmeldung")
   --------------------------------------------------------------
   Das Plugin bringt kein Stilblatt mit, das Formular stand mit Beschriftung
   und Feld nebeneinander und einem Knopf des Browsers da. Gestaltet wie die
   Anmeldekarte unter „Mein Konto": Karte mit feinem Rahmen, Beschriftung in
   Jost über dem Feld, Felder 48 Pixel hoch über die volle Breite, gefüllter
   grüner Knopf. Das Markup kommt aus den Einstellungen des Plugins
   (Formular 5459) und bleibt unverändert. */
.mc4wp-form {
	max-width: 640px;
	margin: 32px 0;
	padding: 24px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
}

.cge-entry-content .mc4wp-form-fields p {
	margin: 0 0 20px;
}

.cge-entry-content .mc4wp-form-fields p:last-child {
	margin-bottom: 0;
}

.mc4wp-form-fields label {
	display: block;
	margin-bottom: 6px;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
}

/* Pflichtfelder: Sternchen wie bei WooCommerce. */
.mc4wp-form-fields .required {
	color: var(--sale);
}

.mc4wp-form-fields input[type="text"],
.mc4wp-form-fields input[type="email"] {
	display: block;
	width: 100%;
	min-height: 48px;
	color: var(--text-main);
}

.mc4wp-form-fields input::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

.mc4wp-form-fields input[type="text"]:focus-visible,
.mc4wp-form-fields input[type="email"]:focus-visible {
	border-color: var(--green-deep);
	outline: 1px solid var(--green-deep);
}

/* Einwilligung: Kästchen und Text in einer Zeile, der Text bricht neben
   dem Kästchen um statt darunter. */
.mc4wp-form-fields label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 0;
}

.mc4wp-form-fields input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 4px 0 0;
	accent-color: var(--green-deep);
}

.mc4wp-form-fields label a {
	color: var(--green-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mc4wp-form-fields label a:hover,
.mc4wp-form-fields label a:focus-visible {
	color: var(--green-mid);
}

.mc4wp-form-fields input[type="submit"] {
	padding: 14px 28px;
	border: 1px solid var(--green-deep);
	border-radius: 1px;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

.mc4wp-form-fields input[type="submit"]:hover,
.mc4wp-form-fields input[type="submit"]:focus-visible {
	border-color: var(--green-mid);
	background: var(--green-mid);
}

/* Rückmeldung nach dem Absenden wie die Hinweise von WooCommerce. */
.mc4wp-response:empty {
	display: none;
}

.mc4wp-alert {
	margin-top: 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--green-mid);
	background: var(--cream);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
}

.mc4wp-alert p {
	margin: 0;
}

.mc4wp-error {
	border-left-color: var(--sale);
}

@media (max-width: 768px) {
	.mc4wp-form {
		padding: 20px 16px;
	}
}


/* 15.0 Fußbereich
   -------------------------------------------------------------- */

/* Kein Abstand über dem Fußbereich.

   Hier standen 80 Pixel. Sie lagen zwischen Inhalt und Fußbereich und zeigten
   den Grund der Seite – auf der Startseite als heller Streifen unter der
   Textfläche, die dort in einem anderen Ton endet. Luft zum Fußbereich bringt
   jeder Inhaltsblock schon selbst mit: 40 bis 80 Pixel Innenabstand. */

.site-footer {
	background: var(--green-deep);
	color: rgb(255 255 255 / 80%);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.5fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 60px var(--gutter) 40px;
}

.footer-logo {
	margin-bottom: 16px;
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 300;
	color: #fff;
}

.footer-about {
	color: rgb(255 255 255 / 65%);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.7;
}

.footer-title {
	margin-bottom: 20px;
	color: var(--bronze-light);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color: rgb(255 255 255 / 65%);
	font-family: var(--sans);
	font-size: 15px;
	text-decoration: none;
	transition: color 0.2s;
}

.footer-links a:hover,
.footer-links a:focus {
	color: var(--bronze-light);
}

.footer-social {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.footer-social a {
	padding: 8px 14px;
	border: 1px solid rgb(255 255 255 / 20%);
	color: rgb(255 255 255 / 50%);
	font-family: var(--sans);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.footer-social a:hover,
.footer-social a:focus {
	color: var(--bronze-light);
	border-color: var(--bronze-light);
}

/* Waagerecht 10 statt 12 Pixel (29.10.2026): Mit „Vorkasse, PayPal, Klarna,
   Kreditkarte, Google & Apple Pay“ fehlten bei 1366 Pixeln Fensterbreite
   1,1 Pixel für zwei statt drei Zeilen. */
.footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 10px;
}

.footer-badge {
	padding: 6px 12px;
	border: 1px solid rgb(255 255 255 / 15%);
	border-radius: 4px;
	background: rgb(255 255 255 / 8%);
	color: rgb(255 255 255 / 60%);
	font-family: var(--sans);
	font-size: 14px;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	/* Rechts frei für „Nach oben“ (rechts 24 + 48 Pixel), sonst lag der Knopf
	   am Seitenende über der Zeile „Historische Gartenelemente …“. */
	padding: 20px max(var(--gutter), 96px) 20px var(--gutter);
	border-top: 1px solid rgb(255 255 255 / 10%);
	color: rgb(255 255 255 / 40%);
	font-family: var(--sans);
	font-size: 14px;
}

.footer-legal + .footer-bottom {
	border-top: 0;
	padding-top: 8px;
}

.footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-bottom a {
	color: rgb(255 255 255 / 40%);
	text-decoration: none;
}

.footer-bottom a:hover,
.footer-bottom a:focus {
	color: var(--bronze-light);
}


/* Pflichthinweise (Umsatzsteuer, Streichpreise) über der Schlusszeile.

   Die Trennlinie eröffnet den Schlussbereich. Stehen die Hinweise davor,
   gehört sie an sie; ohne Germanized bleibt sie bei der Schlusszeile — dafür
   die Regel weiter unten. */
.footer-legal {
	padding: 24px var(--gutter) 8px;
	border-top: 1px solid rgb(255 255 255 / 10%);
	color: rgb(255 255 255 / 35%);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
}

/* Die Zentrierung der Hinweise stammt von Germanized (`p.footer-info` in
   layout-styles.css) und bleibt so gewollt – die Verkleinerung auf 0,9em
   von dort nicht: Sie ergab 11,7 Pixel, unter der Untergrenze von 14. */
.footer-legal p {
	margin: 0 0 4px;
}

/* Zwei Klassen: Germanizeds `p.footer-info` ist gleich spezifisch und lädt
   später. */
.footer-legal p.footer-info {
	font-size: inherit;
}

.footer-legal a {
	color: rgb(255 255 255 / 55%);
}

/* 16.0 WooCommerce-Anpassungen
   -------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-bottom: 24px;
	padding: 16px 20px;
	/* WooCommerce setzt oben eine farbige Linie (Blau, Lila) – hier steht
	   die Markierung links. */
	border-top: none;
	border-left: 3px solid var(--green-mid);
	background: var(--cream);
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 17px;
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--sale);
}

.woocommerce-result-count {
	margin: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	padding: 12px 24px;
	border-radius: 1px;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--green-mid);
	color: #fff;
}

.woocommerce-cart .cge-main,
.woocommerce-checkout .cge-main,
.woocommerce-account .cge-main {
	padding-block: 40px;
}

/* 16.1 Merkzettel (inc/merkzettel.php)
   -------------------------------------------------------------- */

/* Für Gäste ist das Herz ein Link zur Anmeldung, für Kunden ein Knopf. */
a.cge-wishlist {
	text-decoration: none;
}

.cge-wishlist[aria-pressed="true"] {
	border-color: var(--bronze);
	color: var(--bronze);
}

.cge-wishlist[aria-pressed="true"] svg {
	fill: currentColor;
}

.cge-wishlist:focus-visible {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
}

/* In der Kachel: rund, oben rechts, über dem Kachel-Link (z-index 1). Die
   Kennzeichnung „Angebot" steht oben links. Mit `.prod-card` davor, weil die
   Grundregel `.cge-wishlist` (Produktseite) weiter unten im Stilblatt steht. */
.prod-card .prod-wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	flex: none;
	width: 42px;
	min-height: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgb(255 253 249 / 92%);
	box-shadow: 0 1px 3px rgb(30 26 20 / 15%);
}

.prod-card .prod-wishlist[aria-pressed="true"] {
	border: none;
}

.prod-card .prod-wishlist svg {
	width: 20px;
	height: 20px;
}

.cge-merkzettel__leer {
	max-width: 640px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.9;
}

.cge-merkzettel__leer a {
	display: inline-block;
	margin-left: 4px;
	color: var(--green-deep);
}

/* Neben dem Kontomenü bleibt weniger Breite als im Katalog. */
.woocommerce-MyAccount-content .cge-merkzettel__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 16.2 Kundenkonto
   --------------------------------------------------------------
   Nur Stilblatt, keine kopierten WooCommerce-Vorlagen. Das Raster greift nur
   mit Kontomenü, also angemeldet – die Anmeldeseite behält ihre zwei
   Spalten. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Die Clearfix-Pseudoelemente von WooCommerce würden im Raster zu eigenen
   Zellen und schöben Menü und Inhalt um eine Zelle weiter; Floats und
   Prozentbreiten (30 % / 68 %) gelten im Raster nicht mehr. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	list-style: none;
}

.woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--taupe-light);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 20px;
	border-left: 3px solid transparent;
	color: var(--brown-mid);
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--cream);
	color: var(--green-deep);
}

.woocommerce-MyAccount-navigation .is-active a {
	border-left-color: var(--bronze);
	background: var(--cream);
	color: var(--green-deep);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--text-muted);
}

.woocommerce-MyAccount-content {
	min-width: 0;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.8;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.cge-account-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.cge-account-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	color: var(--green-deep);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.cge-account-tile:hover,
.cge-account-tile:focus-visible {
	border-color: var(--bronze);
	box-shadow: 0 2px 10px rgb(30 26 20 / 8%);
}

.cge-account-tile__icon {
	display: flex;
	color: var(--bronze);
}

.cge-account-tile__label {
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1.2;
}

/* Bestellungen: „Anzeigen" und Co. umrandet statt gefüllt – in jeder Zeile
   ein gefüllter Knopf erschlug die Tabelle. */
.woocommerce-MyAccount-content .woocommerce-orders-table .button,
.woocommerce-MyAccount-content .woocommerce-PaymentMethods .button {
	padding: 9px 18px;
	border: 1px solid var(--green-deep);
	background: none;
	color: var(--green-deep);
	font-size: 15px;
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-content .woocommerce-PaymentMethods .button:hover {
	background: var(--green-deep);
	color: #fff;
}

/* Aktionen (Bezahlen, Anzeigen, Widerrufen von Germanized …): mit Abstand
   nebeneinander, umbrechen nur zwischen den Buttons. Vorher klebten sie
   aneinander und brachen ab drei Buttons unregelmäßig um. Abstand über
   Außenabstände, nicht per Flex an der Zelle – die bliebe sonst keine
   Tabellenzelle mehr. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	display: inline-block;
	margin: 4px 8px 4px 0;
	white-space: nowrap;
}

/* Zahlung offen (ausstehend, fehlgeschlagen – dort bietet WooCommerce
   „Bezahlen“ an): Zeile leicht getönt mit roter Kante, „Bezahlen“ als
   einziger gefüllter Button (27.10.2026). Die Statusspalte entfällt seit
   29.10.2026 (cge_account_orders_without_status()). */
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-pending,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-failed {
	background: rgb(179 58 42 / 5%);
}

.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-pending > :first-child,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-failed > :first-child {
	box-shadow: inset 3px 0 0 var(--sale);
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button.pay,
.cge-zahlung-offen .cge-zahlung-offen__knopf {
	border-color: var(--green-deep);
	background: var(--green-deep);
	color: #fff;
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button.pay:hover,
.cge-zahlung-offen .cge-zahlung-offen__knopf:hover {
	border-color: var(--green-mid);
	background: var(--green-mid);
	color: #fff;
}

/* Hinweis im Dashboard (cge_account_pending_payment_notice()). */
.woocommerce-info.cge-zahlung-offen {
	border-left-color: var(--sale);
}

.cge-zahlung-offen__titel {
	margin: 0 0 12px;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 500;
}

.cge-zahlung-offen__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cge-zahlung-offen__liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 8px 0;
	border-top: 1px solid var(--taupe-light);
}

.cge-zahlung-offen__liste li:first-child {
	border-top: none;
	padding-top: 0;
}

.cge-zahlung-offen .cge-zahlung-offen__knopf {
	padding: 9px 18px;
	border: 1px solid var(--green-deep);
	font-size: 15px;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	color: var(--green-deep);
	font-weight: 500;
}

/* Adressen: zwei Karten nebeneinander. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: 28px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 400;
}

.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
}

/* Formulare im Konto (Adresse, Kontodaten): nicht breiter als nötig. */
.woocommerce-MyAccount-content form {
	max-width: 760px;
}

.woocommerce-MyAccount-content fieldset {
	margin: 32px 0 0;
	padding: 24px;
	border: 1px solid var(--taupe-light);
}

.woocommerce-MyAccount-content legend {
	padding: 0 8px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 22px;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Kontomenü als Buttons, die umbrechen (29.10.2026, Wunsch des
	   Betreibers). Vorher eine Leiste zum seitlichen Wischen: Von 811 Pixeln
	   Menü waren bei 375 Pixeln Fensterbreite 319 zu sehen, „Adressen“,
	   „Kontodetails“ und „Abmelden“ lagen außerhalb, ohne Hinweis darauf. */
	/* Zwei gleich breite Spalten: Frei umbrechend standen die Buttons zu
	   zweit, zu zweit, allein und ungleich breit. */
	.woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		border: 0;
		background: none;
	}

	.woocommerce-MyAccount-navigation li + li {
		border-top: none;
	}

	.woocommerce-MyAccount-navigation a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--taupe-light);
		background: var(--white);
		font-size: 15px;
		white-space: nowrap;
	}

	.woocommerce-MyAccount-navigation .is-active a {
		border-color: var(--green-deep);
		background: var(--green-deep);
		color: #fff;
	}

	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-MyAccount-content .cge-merkzettel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Bestellnummer als Kopf der Karte: `woocommerce-smallscreen.css` blendet
   bis 768 Pixel jede `th` im Tabellenkörper aus – in „Bestellungen“ ist das
   die Nummer, die Karten zeigten nur Datum, Summe und „Anzeigen“
   (29.10.2026). Dieselbe Grenze wie bei WooCommerce, darüber ist es noch eine
   Tabelle. */
@media (max-width: 768px) {
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody th {
		display: block;
		padding: 12px 16px;
		text-align: left !important;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody th::before {
		content: attr(data-title) " ";
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody th a {
		color: var(--green-deep);
		font-weight: 500;
	}
}


/* 16.3 Warenkorb
   --------------------------------------------------------------
   Tabelle links, Summe rechts daneben, Vorschläge über die volle Breite
   darunter. `.cart-collaterals` wird aufgelöst (`display: contents`), damit
   Summe und Vorschläge Zellen desselben Rasters sind. Die Clearfix-
   Pseudoelemente von WooCommerce würden sonst eigene Zellen. */
.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: 32px 48px;
	align-items: start;
}

.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)::before,
.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)::after {
	display: none;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-cart-form {
	grid-column: 1;
}

.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-cart wc-order-attribution-inputs {
	display: none;
}

.woocommerce-cart .cart-collaterals {
	display: contents;
}

/* Die Summe läuft mit (seit 22.10.2026, Wunsch des Betreibers) – klebend
   schob sie sich beim Rollen über die Vorschläge darunter. */
.woocommerce-cart .cart-collaterals .cart_totals {
	grid-column: 2;
	grid-row: 1 / span 3;
	float: none;
	width: auto;
	padding: 28px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

/* `order`: WooCommerce gibt die Vorschläge vor der Summe aus. In einer
   Spalte (unter 1024 Pixeln) stand „Weiter zur Kasse“ damit unter den
   Vorschlägen. */
.woocommerce-cart .cart-collaterals .cross-sells {
	order: 1;
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin-top: 32px;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cross-sells h2 {
	margin: 0 0 20px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 400;
}

/* Wie unter der Bestellbestätigung: linksbündig, eine Spur größer. */
.woocommerce-cart .cross-sells h2 {
	margin-bottom: 24px;
	font-size: 32px;
	line-height: 1.2;
}

/* Tabelle der Positionen */
.woocommerce-cart table.shop_table.cart {
	border: 1px solid var(--taupe-light);
	border-radius: 0;
	background: var(--white);
	font-family: var(--sans);
	font-size: 18px;
}

.woocommerce-cart table.cart th {
	padding: 14px 16px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-cart table.cart td {
	padding: 20px 16px;
	border-top: 1px solid var(--taupe-light);
	vertical-align: middle;
}

/* Quadratische Vorschau (inc/cart.php, `cge_cart_item_square_thumbnail()`).
   Die Zelle muss Bild und Innenabstand fassen: War sie zu schmal, griff
   `max-width: 100%` – das Bild wurde schmaler, die feste Höhe blieb, und
   aus dem Quadrat wurde ein Hochformat. */
.woocommerce-cart table.cart td.product-thumbnail {
	width: 128px;
}

.woocommerce-cart table.cart img,
.woocommerce-checkout table.woocommerce-checkout-review-order-table img {
	display: block;
	width: 96px;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.woocommerce-cart table.cart img.cge-cart-thumb--swatch,
.woocommerce-checkout table.woocommerce-checkout-review-order-table img.cge-cart-thumb--swatch {
	object-position: center bottom;
}

/* Der Name steht an der Zelle, nicht nur am Link: Positionen ohne eigene
   Produktseite (Farbzuschlag) haben keinen Link und standen sonst in Jost. */
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart td.product-name a {
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.25;
	text-decoration: none;
}

/* Beschriftung, die WooCommerce auf dem Telefon vor die Zelle setzt. */
.woocommerce-cart table.cart td.product-name::before {
	font-family: var(--sans);
	font-size: 15px;
}

.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--bronze);
}

.woocommerce-cart table.cart td.product-name .delivery-time-info,
.woocommerce-cart table.cart td.product-name p,
.woocommerce-cart table.cart td.product-name dl {
	margin: 6px 0 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
}

.woocommerce-cart table.cart td.product-subtotal {
	color: var(--text-main);
	font-weight: 500;
	white-space: nowrap;
}

/* Entfernen: ein ruhiges Kreuz statt des roten Zeichens von WooCommerce. */
.woocommerce-cart table.cart a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--taupe-light);
	border-radius: 50%;
	color: var(--text-muted) !important;
	font-size: 22px;
	font-weight: 300;
}

.woocommerce-cart table.cart a.remove:hover {
	border-color: var(--sale);
	background: none;
	color: var(--sale) !important;
}

.woocommerce-cart table.cart .quantity .qty {
	width: 72px;
	min-height: 44px;
	text-align: center;
}

/* Gutschein und „Warenkorb aktualisieren" in der Fußzeile der Tabelle:
   umrandet, damit „Weiter zur Kasse" der einzige gefüllte Knopf bleibt. */
.woocommerce-cart table.cart td.actions {
	padding: 16px;
	background: var(--cream);
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 220px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
}

.woocommerce-cart table.cart td.actions .button {
	min-height: 44px;
	border: 1px solid var(--green-deep);
	background: none;
	color: var(--green-deep);
	font-size: 15px;
}

.woocommerce-cart table.cart td.actions .button:hover {
	background: var(--green-deep);
	color: #fff;
}

.woocommerce-cart table.cart td.actions .button:disabled {
	opacity: 0.45;
}

/* Gutscheinfeld eingeklappt: Nur ein Link „Gutscheincode einlösen", Feld und
   Knopf erst auf Klick (inc/cart.php, theme.js). Wer einen Code hat, findet
   ihn; wer keinen hat, wird nicht zur Suche angeregt. Ohne Skript bleibt das
   Feld offen. */
.woocommerce-cart table.cart td.actions .coupon.is-collapsed > :not(.cge-coupon-toggle) {
	display: none;
}

.woocommerce-cart table.cart td.actions .cge-coupon-toggle {
	min-height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.woocommerce-cart table.cart td.actions .cge-coupon-toggle:hover {
	color: var(--green-mid);
}

.woocommerce-cart table.cart td.actions .cge-coupon-toggle[hidden] {
	display: none;
}

/* Summe */
.woocommerce-cart .cart_totals table.shop_table {
	margin: 0 0 24px;
	border: none;
	font-family: var(--sans);
	font-size: 18px;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 10px 0;
	border-top: 1px solid var(--taupe-light);
	background: none;
	vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: none;
}

.woocommerce-cart .cart_totals table.shop_table th {
	width: 40%;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
}

.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
	padding-top: 16px;
	color: var(--green-deep);
	font-size: 22px;
}

.woocommerce-cart .cart_totals .order-tax th,
.woocommerce-cart .cart_totals .order-tax td {
	padding-top: 0;
	border-top: none;
	font-size: 15px;
}

.woocommerce-cart .cart_totals #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die Abschlussknöpfe beider Seiten: gefüllt wie „In den Warenkorb". */
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	border: none;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 18px;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--green-mid);
}

/* Leerer Warenkorb */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop {
	text-align: center;
}

.woocommerce-cart .return-to-shop .button {
	padding: 16px 32px;
}

/* 16.4 Kasse
   --------------------------------------------------------------
   Kundendaten links, Zahlart und Bestellübersicht rechts in einer Karte.
   Innerhalb der Karte bleibt die Reihenfolge von Germanized. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: 48px;
	align-items: start;
}

.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after,
.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after {
	display: none;
}

/* Feste Plätze statt automatischer Verteilung: Stripe setzt Schnellzahl-
   Knöpfe, „— ODER —" und ein leeres Element für die Herkunftsdaten
   (`wc-order-attribution-inputs`) in das Formular. Jedes davon wurde zur
   Rasterzelle und schob die Kundendaten nach rechts, die Karte darunter.
   Reihen: 1 Hinweise, 2 Schnellzahl-Knöpfe, 3 „— ODER —", 4 Kundendaten;
   die Karte rechts läuft von Reihe 2 bis 4. Nur Reihe 4 ist `1fr` und nimmt
   auf, was die Karte höher ist – sonst verteilte der Browser den Überhang
   auch auf die Reihen der Knöpfe. Leere Reihen haben keine Höhe; die
   Abstände stehen deshalb als Außenabstand, nicht als `row-gap`. */
.woocommerce-checkout form.checkout {
	grid-template-rows: auto auto auto 1fr;
	row-gap: 0;
}

.woocommerce-checkout form.checkout > * {
	grid-column: 1;
}

.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
	grid-row: 1;
	grid-column: 1 / -1;
	margin-bottom: 32px;
}

.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element {
	grid-row: 2;
	margin-top: 0 !important; /* steht bei Stripe inline */
}

.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator {
	grid-row: 3;
	margin: 20px 0 28px !important; /* dito */
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-checkout form.checkout > #customer_details {
	grid-row: 4;
}

.woocommerce-checkout form.checkout > #order_review_heading {
	grid-row: 2;
	grid-column: 2;
}

.woocommerce-checkout form.checkout > #order_review {
	grid-row: 2 / 5;
	grid-column: 2;
}

.woocommerce-checkout form.checkout:has(> #order_review_heading) > #order_review {
	grid-row: 3 / 5;
}

.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
	display: none;
}

/* Die linke Spalte ist schmaler als die volle Seite: Rechnungs- und
   Lieferdaten stehen untereinander statt nebeneinander. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: auto;
}

.woocommerce-checkout #customer_details .col-2 {
	margin-top: 32px;
}

.woocommerce-checkout #order_review {
	padding: 32px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

.woocommerce-checkout h3 {
	margin: 0 0 20px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 32px;
}

.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: inherit;
}

.woocommerce-checkout .form-row label {
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 16px;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	min-height: 48px;
}

/* WooCommerce gibt der Auswahl zusätzlich 8,5 Pixel Innenabstand oben und
   unten – sie stand dadurch 16 Pixel höher als die Textfelder daneben. */
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	line-height: 46px;
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

/* Zahlarten: WooCommerce bringt einen grauen Kasten mit lila Hinweisfeld.
   Dieselben Kacheln unter „Mein Konto → Zahlungsweg hinzufügen“ (27.10.2026). */
.woocommerce-checkout #payment,
#add_payment_method #payment {
	border-radius: 0;
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods,
#add_payment_method #payment ul.payment_methods {
	padding: 0;
	border: none;
}

/* Jede Zahlart eine Kachel: ganze Zeile anklickbar (die Beschriftung trägt den
   Innenabstand), Logo rechts, gewählte Kachel mit dunkelgrünem Rahmen. Die
   Beschreibung steht ohne eigene Fläche unter dem Namen der gewählten Zahlart. */
.woocommerce-checkout #payment ul.payment_methods li,
#add_payment_method #payment ul.payment_methods li {
	position: relative;
	margin: 0 0 8px;
	padding: 0;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.5;
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-checkout #payment ul.payment_methods li:hover,
#add_payment_method #payment ul.payment_methods li:hover {
	border-color: var(--taupe);
}

/* Innerer Schatten statt 2 Pixel Rahmen: Die Kachel wird beim Wählen nicht größer. */
.woocommerce-checkout #payment ul.payment_methods li:has(> input:checked),
#add_payment_method #payment ul.payment_methods li:has(> input:checked) {
	border-color: var(--green-deep);
	box-shadow: inset 0 0 0 1px var(--green-deep);
}

.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"],
#add_payment_method #payment ul.payment_methods li > input[type="radio"] {
	position: absolute;
	top: 19px;
	left: 16px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--green-deep);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li > label,
#add_payment_method #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	margin: 0;
	padding: 12px 16px 12px 48px;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li:has(> input:checked) > label,
#add_payment_method #payment ul.payment_methods li:has(> input:checked) > label {
	font-weight: 500;
}

/* Logos der Zahlart (PayPal) rechtsbündig statt in einer eigenen Zeile. */
.woocommerce-checkout #payment ul.payment_methods li > label img,
#add_payment_method #payment ul.payment_methods li > label img {
	flex: none;
	max-height: 24px;
	width: auto;
	margin: 0 0 0 auto;
}

.woocommerce-checkout #payment div.payment_box,
#add_payment_method #payment div.payment_box {
	margin: 0;
	padding: 0 16px 16px 48px;
	background: none;
	color: var(--brown-mid);
	font-size: 16px;
	line-height: 1.6;
}

/* Die Kasse steht in .cge-entry-content – dessen Absatzregel (19 Pixel,
   Zeilenhöhe 1,9) schlüge sonst durch. */
.woocommerce-checkout #payment div.payment_box p,
#add_payment_method #payment div.payment_box p {
	margin: 0 0 8px;
	font-size: inherit;
	line-height: inherit;
}

.woocommerce-checkout #payment div.payment_box p:last-child,
#add_payment_method #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* Stripe legt sein Formular (und „Zahlungsinformationen speichern“) in ein
   fieldset – mit dem eingeprägten Standardrahmen des Browsers stand ein
   zweiter grauer Kasten in der Kachel. */
.woocommerce-checkout #payment div.payment_box fieldset,
#add_payment_method #payment div.payment_box fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Auf dem Telefon bekäme das Kartenformular von Stripe mit dem Einzug unter
   dem Namen nur rund 200 Pixel Breite. */
@media (max-width: 768px) {
	.woocommerce-checkout #payment div.payment_box,
	#add_payment_method #payment div.payment_box {
		padding-left: 16px;
	}
}

.woocommerce-checkout #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.form-row,
#add_payment_method #payment div.form-row {
	padding: 0;
}

/* Bestellübersicht */
/* Germanized hinterlegt die Übersicht grau; in der weißen Karte reicht die Linie. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
	background: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	margin: 0 0 24px;
	border: none;
	font-family: var(--sans);
	font-size: 17px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-top: 1px solid var(--taupe-light);
	background: none;
	vertical-align: top;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	border-top: none;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table img {
	width: 64px;
}

/* Germanized legt Bild, Name und „× 1" als Flex-Zeile an. Brach der Name um,
   stand „× 1" mittig neben dem zweizeiligen Namen statt an seinem Ende. Jetzt
   fließt der Text rechts am Bild vorbei: Name und Menge auf einer Linie,
   Angaben darunter (Lieferzeit, Merkmale) ebenfalls neben dem Bild.
   Germanized setzt die Flex-Zeile mit `table… tr.wc-gzd-cart-item-has-thumbnail
   .wc-gzd-cart-item-name-wrapper` – daher `tr.cart_item` in den Selektoren. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
	display: flow-root;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item .wc-gzd-cart-item-name-wrapper {
	display: block;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item .wc-gzd-cart-item-thumbnail {
	float: left;
	width: 64px;
	max-width: none;
	margin: 0 16px 8px 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item .wc-gzd-cart-item-name-wrapper .product-quantity {
	display: inline;
	margin-left: 4px;
	white-space: nowrap;
}

/* Merkmale einer Position („Farbe: …") in Warenkorb und Kasse: Beschriftung
   und Wert in einer Zeile und einer Größe. WooCommerce floatet die
   Beschriftung und gibt dem Wert die Größe der Zelle. */
.woocommerce-page table.shop_table dl.variation {
	margin: 4px 0 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
}

.woocommerce-page table.shop_table dl.variation dt,
.woocommerce-page table.shop_table dl.variation dd {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
}

.woocommerce-page table.shop_table dl.variation dd p {
	display: inline;
	margin: 0;
}

.woocommerce-page table.shop_table dl.variation dd::after {
	content: "";
	display: block;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td {
	color: var(--green-deep);
	font-size: 22px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-tax th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-tax td {
	padding-top: 0;
	border-top: none;
	font-size: 15px;
}

.woocommerce-checkout .checkbox-legal {
	margin: 0 0 16px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
}

/* Bestellschritte über Warenkorb, Kasse und Bestätigung (cge_checkout_steps()).
   Dezent (22.10.2026, Wunsch des Betreibers): über dem Seitentitel, mittig,
   eine schmale Zeile – Kreis und Beschriftung nebeneinander; bis 768 Pixel
   die Beschriftung unter dem Kreis. Erledigt: Haken, aktuell: gefüllt,
   offen: grau mit gepunkteter Linie davor. */
.cge-steps {
	display: flex;
	justify-content: center;
	margin: 0 0 20px;
}

.cge-steps__liste {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cge-steps__schritt {
	display: flex;
	align-items: center;
}

/* Verbindungslinie zum vorigen Schritt. */
.cge-steps__schritt + .cge-steps__schritt::before {
	content: "";
	width: 40px;
	margin: 0 12px;
	border-top: 1px solid var(--green-deep);
}

.cge-steps__schritt + .cge-steps__schritt--offen::before {
	border-top: 1px dotted var(--taupe);
}

.cge-steps__ziel {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}

.cge-steps__kreis {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--green-deep);
	border-radius: 50%;
	background: var(--white);
	color: var(--green-deep);
	font-size: 14px;
}

.cge-steps__kreis svg {
	width: 13px;
	height: 13px;
}

.cge-steps__schritt--aktuell .cge-steps__kreis {
	border-color: var(--green-deep);
	background: var(--green-deep);
	color: #fff;
}

.cge-steps__schritt--aktuell .cge-steps__titel {
	color: var(--green-deep);
	font-weight: 500;
}

.cge-steps__schritt--offen .cge-steps__kreis {
	border-color: var(--taupe-light);
	background: transparent;
	color: var(--text-muted);
}

.cge-steps__schritt--offen .cge-steps__titel {
	color: var(--text-muted);
}

a.cge-steps__ziel:hover .cge-steps__titel,
a.cge-steps__ziel:focus-visible .cge-steps__titel {
	text-decoration: underline;
}

/* Weniger Luft über dem Titel auf diesen drei Seiten; der Inhalt steht
   unter Titel und Schritten. */
.woocommerce-cart .cge-content-area,
.woocommerce-checkout .cge-content-area {
	padding-top: 24px;
}

@media (max-width: 1024px) {
	.cge-steps__schritt + .cge-steps__schritt::before {
		width: 24px;
		margin: 0 8px;
	}
}

@media (max-width: 768px) {
	.cge-steps {
		display: block;
		margin: 0 0 16px;
	}

	.cge-steps__liste {
		align-items: flex-start;
		justify-content: center;
	}

	.cge-steps__schritt {
		flex: 1;
		position: relative;
		justify-content: center;
	}

	.cge-steps__schritt + .cge-steps__schritt::before {
		position: absolute;
		top: 12px;
		right: calc(50% + 18px);
		left: calc(-50% + 18px);
		width: auto;
		margin: 0;
	}

	.cge-steps__ziel {
		flex-direction: column;
		gap: 6px;
		font-size: 14px;
		text-align: center;
		white-space: normal;
	}
}

/* Kasse aufgeräumt (22.10.2026, nach Baymard und web.dev): Kundendaten als
   Karte wie die Zahlung rechts, nummerierte Abschnitte („1 Kontakt“, „2
   Adresse“, rechts „3“ vor „Zahlungsart auswählen“), eine Spalte mit PLZ und
   Ort nebeneinander, höhere Felder mit sichtbarem Fokus und Prüfung direkt
   am Feld. Reihenfolge und Breite der Felder stehen im Checkout Field
   Editor, die Abschnittsüberschriften setzt cge_checkout_section_headings(). */
.woocommerce-checkout #customer_details {
	padding: 32px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

/* „Rechnungsdaten“ entfällt – die Abschnitte sagen, was folgt. */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

.woocommerce-checkout h3.cge-abschnitt,
.woocommerce-checkout #order_payment_heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .cge-abschnitt-zeile {
	margin: 0;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .cge-abschnitt-zeile ~ .cge-abschnitt-zeile {
	margin-top: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--taupe-light);
}

.cge-abschnitt__nr,
.woocommerce-checkout #order_payment_heading::before {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
}

.woocommerce-checkout #order_payment_heading::before {
	content: "3";
}

/* Raster mit sechs Spalten: E-Mail und Telefon, Vor- und Nachname je zur
   Hälfte, PLZ und Ort im Verhältnis 1 : 2, alles andere über die volle
   Breite (Wunsch des Betreibers, 22.10.2026). */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-flow: row dense;
	column-gap: 16px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	float: none;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #shipping_first_name_field {
	grid-column: 1 / span 3;
}

.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #shipping_last_name_field {
	grid-column: 4 / span 3;
}

.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field {
	grid-column: 1 / span 2;
}

.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field {
	grid-column: 3 / span 4;
}

/* Eingeklapptes Feld: nur der Link „+ …“ (theme.js). */
.woocommerce-checkout .form-row.cge-feld-zu > :not(.cge-feld-auf) {
	display: none !important;
}

/* Felder: 50 Pixel hoch, Fokus als grüner Rahmen mit Schein. */
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row .select2-container .select2-selection--single {
	min-height: 50px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
	background-color: var(--white);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-checkout form .form-row textarea.input-text {
	min-height: 96px;
	padding-top: 12px;
}

.woocommerce-checkout form .form-row .input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row .select2-container--focus .select2-selection--single,
.woocommerce-checkout form .form-row .select2-container--open .select2-selection--single {
	border-color: var(--green-mid);
	outline: none;
	box-shadow: 0 0 0 3px rgb(74 107 70 / 18%);
}

/* Prüfung direkt am Feld: WooCommerce setzt die Klassen beim Verlassen. */
.woocommerce-checkout form .form-row.woocommerce-validated .input-text {
	border-color: var(--green-mid);
	padding-right: 40px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%234a6b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}

.woocommerce-checkout form .form-row.woocommerce-validated textarea.input-text {
	background-image: none;
}

.woocommerce-checkout form .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--sale);
}

.woocommerce-checkout form .form-row.woocommerce-invalid label {
	color: var(--sale);
}

.woocommerce-checkout .checkout-inline-error-message {
	margin: 6px 0 0;
	color: var(--sale);
	font-family: var(--sans);
	font-size: 14px;
}

/* Beschreibung unter dem Feld („Nur für Rückfragen zur Lieferung.“) –
   WooCommerce zeigt sie sonst erst beim Fokus als Sprechblase. */
.woocommerce-checkout .woocommerce form .form-row .description {
	display: block !important;
	position: static;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

.woocommerce-checkout .woocommerce form .form-row .description::before {
	display: none;
}

/* „+ Firma angeben“, „+ Hinweis zur Lieferung hinzufügen“ (theme.js). */
.cge-feld-auf {
	justify-self: start;
	margin: -4px 0 0;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* „Lieferung an eine andere Adresse?“ ist ein Kästchen, keine Überschrift. */
.woocommerce-checkout #ship-to-different-address {
	margin: 8px 0 16px;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.4;
}

.woocommerce-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

/* Vertrauenszeile unter „Jetzt kaufen“ (cge_checkout_trust()). */
.woocommerce-checkout #order_review .cge-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin: 14px 0 16px;
	padding: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	list-style: none;
}

.woocommerce-checkout #order_review .cge-checkout-trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.3;
}

.cge-checkout-trust .cge-icon {
	flex: none;
	color: var(--bronze);
}

.cge-checkout-trust a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.cge-checkout-trust a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.woocommerce-checkout #customer_details {
		padding: 20px;
	}

	/* E-Mail und Telefon untereinander; Namen bleiben nebeneinander. */
	.woocommerce-checkout #billing_email_field,
	.woocommerce-checkout #billing_phone_field {
		grid-column: 1 / -1;
	}

	.woocommerce-checkout h3.cge-abschnitt,
	.woocommerce-checkout #order_payment_heading {
		font-size: 23px;
	}
}

/* Rechtshinweis unter „Jetzt kaufen“, ohne Kästchen (22.10.2026, Wunsch
   des Betreibers – wie bei Zalando und Amazon). Germanized gibt ihn vor der
   Bestellübersicht aus (Einstellung „Kästchen ausblenden“ am Rechtshinweis
   „Allgemein“); die Karte ordnet ihn per `order` ans Ende. Unmittelbar über
   dem Knopf bleibt die Zusammenfassung (§ 312j BGB). Nur, solange der
   Platzhalter kein Kästchen enthält – eine Einwilligung mit Kästchen bliebe
   über dem Knopf. */
.woocommerce-checkout #order_review {
	display: flex;
	flex-direction: column;
}

.woocommerce-checkout #order_review > .wc-gzd-checkbox-placeholder-legal:not(:has(input[type="checkbox"])) {
	order: 1;
	margin-top: 4px;
}

.woocommerce-checkout #order_review > .wc-gzd-checkbox-placeholder-legal:not(:has(input[type="checkbox"])) .checkbox-legal {
	margin: 0;
	padding: 0;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.55;
}

.woocommerce-checkout #order_review > .wc-gzd-checkbox-placeholder-legal .checkbox-legal label,
.woocommerce-checkout #order_review > .wc-gzd-checkbox-placeholder-legal .checkbox-legal span {
	color: inherit;
	font-size: inherit;
	line-height: 1.55;
}

.woocommerce-checkout #order_review .checkbox-legal a {
	color: var(--green-deep);
	text-decoration: underline;
}

/* Grundschrift der Feldzeilen in der Kasse. Sichtbar ändert sich nichts –
   Beschriftungen und Felder haben eigene Regeln –, aber das Stripe-Plugin
   liest Schrift und Grundgröße für seinen Rahmen (Karte, Klarna …) von der
   ersten `.woocommerce-checkout .form-row` ab – das ist die erste Zeile des
   eingeklappten Anmeldeformulars, nicht der Kundendaten. Als Absatz stand sie
   in EB Garamond 19 Pixel, im Rahmen erschien eine Serifenschrift. */
.woocommerce-checkout .form-row {
	font-family: var(--sans);
	font-size: 16px;
}

/* Gewährleistungshinweis als Link (Germanized, Darstellung „Link“): steht im
   selben Platzhalter vor dem Rechtshinweis und erbte sonst die Fließtextschrift
   (EB Garamond 19, Zeilenhöhe 1,9). Jetzt wie der Rechtshinweis darunter. */
.woocommerce-checkout #order_review .wc-gzd-legal-guarantee-checkout {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
}

.woocommerce-checkout #order_review .wc-gzd-legal-guarantee-checkout .wc-gzd-popover-trigger {
	color: var(--green-deep);
	text-decoration: underline;
}

/* Auswahllisten in Formularen (selectWoo): Der Checkout Field Editor gibt
   Anrede und Adresstyp beim Laden eine feste Pixelbreite mit – wurde das
   Layout danach schmaler, ragte das Feld aus dem Bildschirm (22.10.2026). */
.woocommerce form .form-row .select2-container {
	width: 100% !important; /* überschreibt das style-Attribut von selectWoo */
	max-width: 100%;
}

/* Bestellübersicht: Betragsspalte so schmal wie ihr Inhalt, damit der Name
   neben dem Bild Platz hat. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total {
	width: 1%;
	white-space: nowrap;
}

/* Kurze Bestellübersicht oben in der Kasse (cge_checkout_summary()), nur
   solange die Karte mit der vollständigen Übersicht unter dem Formular
   steht. */
.cge-checkout-summary {
	display: none;
}

@media (max-width: 1024px) {
	.cge-checkout-summary {
		display: block;
		margin: 0 0 32px;
		border: 1px solid var(--taupe-light);
		background: var(--white);
		font-family: var(--sans);
		font-size: 17px;
	}

	.cge-checkout-summary summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 56px;
		padding: 12px 20px;
		cursor: pointer;
		list-style: none;
	}

	.cge-checkout-summary summary::-webkit-details-marker {
		display: none;
	}

	.cge-checkout-summary__titel {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: var(--green-deep);
	}

	.cge-checkout-summary__titel::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}

	.cge-checkout-summary[open] .cge-checkout-summary__titel::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	.cge-checkout-summary__summe {
		color: var(--green-deep);
		font-size: 19px;
		font-weight: 500;
		white-space: nowrap;
	}

	.cge-checkout-summary__inhalt {
		padding: 0 20px 12px;
		border-top: 1px solid var(--taupe-light);
	}

	.cge-checkout-summary__liste {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cge-checkout-summary__liste li,
	.cge-checkout-summary__zeile {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		margin: 0;
		padding: 10px 0;
		border-bottom: 1px solid var(--taupe-light);
	}

	.cge-checkout-summary__menge {
		color: var(--text-muted);
		white-space: nowrap;
	}

	.cge-checkout-summary__preis,
	.cge-checkout-summary__zeile span:last-child {
		font-weight: 500;
		white-space: nowrap;
	}

	.cge-checkout-summary__zeile--gesamt {
		border-bottom: none;
		color: var(--green-deep);
		font-size: 19px;
	}
}

@media (max-width: 768px) {
	/* Felder untereinander über die volle Breite – nebeneinander blieben für
	   die E-Mail-Adresse rund 120 Pixel. Seit 29.10.2026 auch in „Mein Konto“
	   (Adressen, Kontodaten): Dort ragte „Handynummer (optional)“ aus der
	   halben Spalte. */
	.woocommerce-checkout form .form-row-first,
	.woocommerce-checkout form .form-row-last,
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		float: none;
		width: 100%;
	}

	/* „Lieferung an eine andere Adresse?“ ist ein Kästchen, keine
	   Überschrift: in der Größe der Beschriftungen, einzeilig. */
	.woocommerce-checkout #ship-to-different-address {
		margin: 24px 0 16px;
		font-family: var(--sans);
		font-size: 17px;
		line-height: 1.4;
	}

	/* Spaltenköpfe der Übersicht entfallen: „Zwischensumme“ machte die
	   Betragsspalte so breit, dass der Name unter das Bild rutschte. */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
		display: none;
	}

	.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:first-child td {
		border-top: none;
	}
}

/* Warenkorb schon unter 1280 Pixeln einspaltig: Die Tabelle braucht rund
   710 Pixel, neben der 400 Pixel breiten Summe reichte der Platz erst ab
   etwa 1260 – darunter lief sie unter die Summe (gemessen 22.10.2026). */
@media (max-width: 1280px) {
	.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}
}

@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout form.checkout {
		grid-template-rows: none;
	}

	/* Mit IDs, weil die Plätze oben per ID vergeben sind. */
	.woocommerce-checkout form.checkout > *,
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
	.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator,
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review,
	.woocommerce-checkout form.checkout:has(> #order_review_heading) > #order_review {
		grid-row: auto;
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	.woocommerce-cart table.cart img {
		width: 72px;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: 100%;
	}

	/* WooCommerce stellt die Zeilen hier als Karten mit Beschriftung dar. */
	.woocommerce-cart table.cart td {
		padding: 12px 16px;
	}

	/* Position als Karte (29.10.2026, Wunsch des Betreibers): Bild links,
	   daneben Name und Lieferzeit, darunter Einzelpreis, Menge und Summe,
	   Entfernen oben rechts. WooCommerce zerlegte die Zeile in fünf
	   beschriftete Streifen („Produkt:“, „Preis:“ …), blendete das Bild aus und
	   setzte den Namen rechtsbündig. Die Regeln von WooCommerce
	   (`woocommerce-smallscreen.css`) setzen `text-align` mit `!important`,
	   deshalb hier ebenso. */
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
		display: grid;
		/* Vier Spalten, damit der Name auch die Breite über der Summe nutzt –
		   mit dreien richtete sich die rechte Spalte nach der Summe (76 Pixel)
		   statt nach dem schmalen Entfernen, und dem Namen blieben 126. */
		grid-template-columns: 72px minmax(0, 1fr) auto 32px;
		grid-template-areas:
			"bild name name entf"
			"bild preis preis preis"
			"bild menge summe summe";
		column-gap: 14px;
		row-gap: 10px;
		align-items: center;
		padding: 16px;
		border-top: 1px solid var(--taupe-light);
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item:first-child {
		border-top: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		text-align: left !important;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
		content: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-area: bild;
		align-self: start;
		width: auto;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name {
		grid-area: name;
		align-self: start;
	}

	/* Beide Namen gleich groß: Der eine steht im Link, der andere (Farbzuschlag
	   ohne Produktseite) direkt in der Zelle – vorher sichtbar verschieden. */
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name,
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name > a {
		font-size: 19px;
		line-height: 1.25;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove {
		grid-area: entf;
		align-self: start;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-price {
		grid-area: preis;
		color: var(--text-muted);
		font-size: 15px;
	}

	/* Der Einzelpreis braucht seine Beschriftung, sonst stünde er wie ein
	   zweiter Gesamtbetrag da. */
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-price::before {
		content: attr(data-title) " ";
		float: none;
		font-weight: 400;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-quantity {
		grid-area: menge;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-subtotal {
		grid-area: summe;
		font-size: 18px;
		text-align: right !important;
	}

	.woocommerce-checkout #order_review {
		padding: 20px;
	}
}


/* 16.5 Ein Schriftbild für Konto, Warenkorb und Kasse
   --------------------------------------------------------------
   Wie im übrigen Theme: Jost für Bedienung und Daten (Menü, Knöpfe,
   Beschriftungen, Tabellen, Hinweise), EB Garamond für Fließtext, Cormorant
   für Überschriften und Produktnamen. WooCommerce setzt dazwischen eigene
   Werte – fette Knöpfe (700), fette Tabellenköpfe, Tabellen auf 85 % der
   Schrift verkleinert, Arial im Passwort-Umschalter – die hier
   zurückgenommen werden. */

/* Knöpfe: wie die globalen Knöpfe des Themes, nicht fett. `.alt` ist bei
   WooCommerce lila. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	padding: 14px 28px;
	border: 1px solid var(--green-deep);
	border-radius: 1px;
	background: var(--green-deep);
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	border-color: var(--green-mid);
	background: var(--green-mid);
	color: #fff;
}

/* Hinweise: WooCommerce stellt ein Symbol aus seiner Symbolschrift vor den
   Text. Es fehlte und erschien als blau umrandetes Kästchen über den ersten
   Buchstaben; die Markierung trägt hier die Linie links. Ein Knopf im
   Hinweis („E-Mail-Adresse bestätigen") steht rechts daneben statt
   gefloatet über dem Text, umrandet statt gefüllt. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	line-height: 1.6;
}

.woocommerce-message:has(> .button),
.woocommerce-info:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.woocommerce .woocommerce-message > .button,
.woocommerce .woocommerce-info > .button {
	order: 2;
	float: none;
	padding: 10px 20px;
	background: none;
	color: var(--green-deep);
	font-size: 15px;
}

.woocommerce .woocommerce-message > .button:hover,
.woocommerce .woocommerce-info > .button:hover {
	background: var(--green-deep);
	color: #fff;
}

/* Tabellen: Daten in Jost, Spaltenköpfe klein, gesperrt, nicht fett. */
.woocommerce-account table.shop_table,
.woocommerce-account table.my_account_orders {
	border: 1px solid var(--taupe-light);
	border-radius: 0;
	background: var(--white);
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
}

/* WooCommerce setzt `tbody th`, `tfoot th` und `tfoot td` eigens fett
   (`.woocommerce table.shop_table tbody th`), deshalb die längeren Selektoren. */
.woocommerce-account table.shop_table th,
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th,
.woocommerce-page .woocommerce table.shop_table tbody th,
.woocommerce-page .woocommerce table.shop_table tfoot th,
.woocommerce-page .woocommerce table.shop_table tfoot td {
	font-weight: 400;
}

.woocommerce-account table.shop_table thead th {
	padding: 14px 16px;
	color: var(--text-muted);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-account table.shop_table td,
.woocommerce-account table.shop_table tbody th,
.woocommerce-account table.shop_table tfoot th {
	padding: 14px 16px;
	border-top: 1px solid var(--taupe-light);
	vertical-align: middle;
}

.woocommerce-account table.shop_table tfoot th {
	color: var(--text-muted);
}

.woocommerce-account table.shop_table .woocommerce-Price-amount,
.woocommerce-cart table.shop_table .woocommerce-Price-amount,
.woocommerce-checkout table.shop_table .woocommerce-Price-amount {
	font-weight: 500;
}

/* Versandzeile, Mengenangabe, Lieferzeit in Warenkorb und Kasse: WooCommerce
   setzt den Versandbetrag in der Beschriftung fett und größer, die Menge
   („× 2") fett. */
.woocommerce #shipping_method label,
.woocommerce ul#shipping_method .amount,
.woocommerce .woocommerce-shipping-totals td {
	font-size: inherit;
	font-weight: 400;
}

.woocommerce ul#shipping_method .amount {
	font-weight: 500;
}

.woocommerce-page table.shop_table .product-quantity {
	font-weight: 400;
}

.woocommerce-checkout table.shop_table .woocommerce-Price-amount {
	font-size: inherit;
}

.woocommerce-checkout table.shop_table .delivery-time-info,
.woocommerce-checkout table.shop_table .delivery-time-inner {
	color: var(--text-muted);
	font-size: 15px;
}

/* Bestelldetails im Konto (Bestellung ansehen) */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 32px 0 16px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
}

.woocommerce-account .woocommerce-customer-details address {
	padding: 24px;
	border: 1px solid var(--taupe-light);
	border-radius: 0;
	background: var(--white);
	font-style: normal;
	line-height: 1.7;
}

/* Formulare: Beschriftungen in Jost wie in der Kasse, Pflichtsternchen
   ohne Fettung. */
.woocommerce form .form-row label,
.woocommerce-form-row label,
.woocommerce-MyAccount-content legend,
.woocommerce form .form-row .woocommerce-input-wrapper + span,
.woocommerce-account .woocommerce-MyAccount-content em {
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 16px;
	font-style: normal;
}

.woocommerce-MyAccount-content legend {
	font-family: var(--serif);
	font-size: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content #account_display_name_description em {
	color: var(--text-muted);
	font-size: 15px;
}

.woocommerce form .form-row .required {
	color: var(--sale);
	font-weight: 400;
	text-decoration: none;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	font-family: var(--sans);
}

/* Eingabefelder wie überall im Theme (Suchfeld, Abschnitt 5) in Jost –
   auch die Auswahllisten, die WooCommerce durch selectWoo ersetzt. */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-results__option,
.select2-container .select2-search__field {
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
}

.woocommerce form .form-row .input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/* Adressen im Konto: Überschrift und „bearbeiten" untereinander. WooCommerce
   floatet beides und setzt Clearfix-Pseudoelemente; im Flex-Layout wurden
   die zu eigenen Elementen, und die Überschrift rutschte nach rechts. */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
	display: none;
}

.woocommerce-account .woocommerce-Address-title {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title .edit {
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	margin: 0;
}

.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Adressen sind Daten, kein Fließtext: Jost wie die Eingabefelder (27.10.2026,
   vorher EB Garamond 19 Pixel). Ebenso unter „Bestellung ansehen“ und auf der
   Bestellbestätigung. */
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-customer-details address {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
}

/* Zahlungsarten im Konto: „Zahlungsart hinzufügen" umrandet. */
.woocommerce-MyAccount-content > .button,
.woocommerce-MyAccount-content .woocommerce-pagination .button {
	background: none;
	color: var(--green-deep);
}

.woocommerce-MyAccount-content > .button:hover,
.woocommerce-MyAccount-content .woocommerce-pagination .button:hover {
	background: var(--green-deep);
	color: #fff;
}


/* 16.6 Bestellbestätigung (inc/bestellbestaetigung.php)
   --------------------------------------------------------------
   Von oben: Dank mit Haken, Übersicht (Nummer, Datum, Betrag, Zahlart) als
   Leiste, darunter links die Bestellung, rechts die Adressen und der
   Ansprechpartner – alles in den Karten von Konto und Kasse (weiß, feine
   Linie), Daten in Jost. WooCommerce brachte graue Tabellen, Adressen mit
   Schlagschatten-Rahmen und die Übersicht in Großbuchstaben der
   Fließtextschrift. Tabelle, Menge und Merkmale gelten auch für „Bestellung
   ansehen" im Konto. */
.woocommerce-order-received .woocommerce-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: 32px 48px;
	align-items: start;
}

.woocommerce-order-received .woocommerce-order > * {
	grid-column: 1 / -1;
	margin: 0;
}

.woocommerce-order-received .woocommerce-order > .woocommerce-order-details {
	grid-column: 1;
	grid-row: span 2;
}

/* Kundenkonto nach dem Kauf (cge_order_received_account()). */
.cge-order-account {
	background: var(--cream);
}

.cge-order-account__form .form-row,
.cge-order-account__form .checkbox-legal {
	margin: 0 0 16px;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
}

.cge-order-account__form .cge-order-account__knopf {
	width: 100%;
}

.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order > .cge-order-help {
	grid-column: 2;
}

/* Kontoangebot links unter den Bestelldetails, wo sonst Platz frei bliebe:
   Die Bestelldetails belegen dann nur eine Reihe, `dense` setzt das Angebot
   in die Lücke darunter. */
.woocommerce-order-received .woocommerce-order:has(> .cge-order-account) {
	grid-auto-flow: row dense;
}

.woocommerce-order-received .woocommerce-order:has(> .cge-order-account) > .woocommerce-order-details {
	grid-row: span 1;
}

.woocommerce-order-received .woocommerce-order > .cge-order-account {
	grid-column: 1;
}

.woocommerce-order-received .woocommerce-order > script {
	display: none;
}

/* Dank: Haken links, Überschrift in Cormorant, Satz darunter. */
.woocommerce-order .woocommerce-thankyou-order-received {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 48px;
	padding: 0 0 0 68px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%232a3d28'/%3E%3Cpath d='M14 24.5l6.5 6.5L34 17.5' fill='none' stroke='%23fffdf9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cge-thanks__title {
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.2;
}

/* Übersicht: WooCommerce floatet die Einträge mit gestrichelten Trennern und
   setzt sie in Großbuchstaben auf 71 % der Schrift. */
.woocommerce .woocommerce-order ul.order_details {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	list-style: none;
}

.woocommerce .woocommerce-order ul.order_details::before,
.woocommerce .woocommerce-order ul.order_details::after {
	display: none;
}

.woocommerce .woocommerce-order ul.order_details li {
	float: none;
	margin: 0;
	padding: 18px 24px;
	border-right: none;
	border-left: 1px solid var(--taupe-light);
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce .woocommerce-order ul.order_details li:first-child {
	border-left: none;
}

.woocommerce .woocommerce-order ul.order_details li strong {
	display: block;
	margin-top: 6px;
	color: var(--text-main);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

/* Karten: Bestellung, Adressen, Ansprechpartner, Bankdaten bei Vorkasse. */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column,
.woocommerce-order-received .woocommerce-customer-details > address,
.cge-order-help,
.cge-order-account,
.woocommerce-order-received .woocommerce-bacs-bank-details {
	padding: 28px 32px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-order-received .wc-bacs-bank-details-heading,
.cge-order-help__title {
	margin: 0 0 16px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
}

.woocommerce-order-received .woocommerce-column__title,
.woocommerce-order .cge-order-help__title {
	font-size: 24px;
}

/* Tabelle der Bestellung: Linien statt grauer Flächen, Beträge rechts. */
.woocommerce-order-details table.order_details,
.woocommerce-order-details table.order_details tbody,
.woocommerce-order-details table.order_details tfoot,
.woocommerce-order-details table.order_details tr {
	background: none;
}

.woocommerce-order-received .woocommerce-order-details table.order_details {
	margin: 0;
	border: none;
	border-radius: 0;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
}

.woocommerce-order-received .woocommerce-order-details table.order_details th,
.woocommerce-order-received .woocommerce-order-details table.order_details td {
	padding: 12px 0;
	border-top: 1px solid var(--taupe-light);
	background: none;
	vertical-align: top;
}

.woocommerce-order-received .woocommerce-order-details table.order_details thead th {
	border-top: none;
	color: var(--text-muted);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Nur die Beträge brechen nicht um, nicht die ganze Spalte (29.10.2026): In
   alten Bestellungen steht hier „Frachtfreie Lieferung*“ als Versand, mit
   `nowrap` an der Zelle war die Tabelle auf dem Telefon bis zu 61 Pixel
   breiter als der Bildschirm. */
.woocommerce-order-details table.order_details th:last-child,
.woocommerce-order-details table.order_details td:last-child {
	padding-left: 16px;
	text-align: right;
}

.woocommerce-order-details table.order_details td:last-child .amount {
	white-space: nowrap;
}

/* Telefon: 16 Pixel Innenabstand links und rechts in jeder Zelle machten die
   Tabelle bei 320 Pixeln 303 Pixel breit, Platz waren 280. Innen 8, außen 0. */
@media (max-width: 480px) {
	.woocommerce-order-details table.order_details th,
	.woocommerce-order-details table.order_details td {
		padding-right: 8px;
		padding-left: 8px;
	}

	.woocommerce-order-details table.order_details th:first-child,
	.woocommerce-order-details table.order_details td:first-child {
		padding-left: 0;
	}

	.woocommerce-order-details table.order_details th:last-child,
	.woocommerce-order-details table.order_details td:last-child {
		padding-right: 0;
		padding-left: 8px;
	}
}

.woocommerce-order-details table.order_details td.product-name a {
	color: var(--green-deep);
	text-decoration: none;
}

.woocommerce-order-details table.order_details td.product-name a:hover {
	text-decoration: underline;
}

.woocommerce-order-details table.order_details .product-quantity {
	color: var(--text-muted);
	font-weight: 400;
	white-space: nowrap;
}

.woocommerce-order-details table.order_details .delivery-time-info {
	margin: 4px 0 0;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* Merkmale („Farbe: …"): wie in Warenkorb und Kasse – eine Zeile, eine
   Größe, ohne Einzug. WooCommerce rückt die Liste ein und setzt die
   Beschriftung fett. */
.woocommerce-order-details ul.wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-order-details ul.wc-item-meta li,
.woocommerce-order-details ul.wc-item-meta p {
	display: inline;
	margin: 0;
}

.woocommerce-order-details ul.wc-item-meta li::after {
	content: "";
	display: block;
}

.woocommerce-order-details ul.wc-item-meta .wc-item-meta-label {
	float: none;
	margin: 0 4px 0 0;
	font-weight: 400;
}

.woocommerce-order-received .woocommerce-order-details table.order_details tfoot th {
	color: var(--text-muted);
	font-size: 16px;
	text-align: left;
}

.woocommerce-order-details table.order_details tr:has(.cge-order-total) th,
.woocommerce-order-details table.order_details tr:has(.cge-order-total) td {
	color: var(--green-deep);
	font-size: 22px;
}

.woocommerce-order-details table.order_details tr:has(.cge-order-total) + tr th,
.woocommerce-order-details table.order_details tr:has(.cge-order-total) + tr td {
	padding-top: 0;
	border-top: none;
	font-size: 15px;
}

/* „Bestellung ansehen“ im Konto wie die Bestellbestätigung (29.10.2026,
   vom Betreiber bemängelt): Bestellung und Adressen als weiße Karten mit der
   Überschrift darin, Linien statt grauer Flächen. Vorher stand die Tabelle
   grau hinterlegt mit Rahmen und ohne Innenabstand – die Texte lagen am
   Rahmen an –, die Adressen darunter in eigenen Karten, die Überschrift
   „Lieferadresse“ klebte an der Karte davor. Eigene Selektoren mit
   `.woocommerce-MyAccount-content`, weil die allgemeinen Kontoregeln für
   Überschriften und Adressen (Abschnitt 16.2) sonst stärker sind. */
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column {
	margin: 0 0 24px;
	padding: 28px 32px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-column__title {
	margin: 0 0 16px;
	line-height: 1.2;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-column__title {
	font-size: 24px;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details {
	margin: 0;
	border: none;
	border-radius: 0;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details th,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details td {
	padding-top: 12px;
	padding-bottom: 12px;
	border-top: 1px solid var(--taupe-light);
	background: none;
	vertical-align: top;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details th:first-child,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details td:first-child {
	padding-left: 0;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details th:last-child,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details td:last-child {
	padding-right: 0;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details thead th {
	border-top: none;
	color: var(--text-muted);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::before,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::after {
	display: none;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set .col-1,
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column {
	margin: 0;
}

.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details address {
	padding: 0;
	border: none;
	background: none;
}

@media (max-width: 768px) {
	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column {
		padding: 20px;
	}

	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details {
		font-size: 16px;
	}
}

/* Sehr schmale Telefone: Der Spaltenkopf „GESAMTSUMME“ (gesperrte
   Großbuchstaben) bestimmte die Mindestbreite, bei 320 Pixeln lag die
   Tabelle 31 Pixel über der Karte. Kopf nur optisch ausgeblendet –
   Vorlesegeräte lesen ihn weiter –, Innenabstand 16. */
@media (max-width: 400px) {
	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column {
		padding: 16px;
	}

	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details table.order_details tbody tr:first-child > * {
		border-top: none;
	}
}

/* Adressen untereinander in der rechten Spalte. */
.woocommerce-order-received .woocommerce-customer-details .col2-set {
	display: grid;
	gap: 24px;
}

.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
.woocommerce-order-received .woocommerce-customer-details .col2-set::after {
	display: none;
}

.woocommerce-order-received .woocommerce-customer-details .col2-set .col-1,
.woocommerce-order-received .woocommerce-customer-details .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce-order-received .woocommerce-customer-details address {
	padding: 0;
	border: none;
	border-radius: 0;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
	font-style: normal;
	line-height: 1.6;
}

/* Telefon und E-Mail: WooCommerce stellt ein Symbol aus seiner Symbolschrift
   davor, das als leeres Kästchen erschien. */
/* WooCommerce rückt sie mit `.woocommerce .woocommerce-customer-details …` ein. */
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 10px 0 0;
	padding-left: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	overflow-wrap: anywhere;
}

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email {
	margin-top: 2px;
}

.woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-customer-details .woocommerce-customer-details--email::before {
	display: none;
}

/* Ansprechpartner */
.woocommerce-order .cge-order-help__text {
	margin: 0 0 16px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
}

.cge-order-help__links {
	display: grid;
	gap: 10px;
	margin: 0;
}

.cge-order-help__links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 17px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cge-order-help__links a:hover {
	text-decoration: underline;
}

.cge-order-help__links .cge-icon {
	flex: none;
	color: var(--bronze);
}

/* Empfehlungen unter der Bestellung: Cross-Sells, sonst Bestseller, im
   Produktraster des Themes (cge_order_received_recommendations()). */
.cge-order-upsell {
	margin-top: 24px !important; /* `.woocommerce-order > *` setzt 0 */
}

.woocommerce-order .cge-order-upsell__title {
	margin: 0 0 24px;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
}

/* Bankdaten bei Vorkasse */
.woocommerce-order-received .woocommerce-bacs-bank-details ul.bacs_details {
	margin: 0 0 12px;
	border: none;
}

/* Gastbestellung ohne Sitzung: WooCommerce fragt vor der Anzeige die
   E-Mail-Adresse ab. */
.woocommerce-order-received .woocommerce-verify-email {
	max-width: 560px;
	padding: 28px 32px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
}

.woocommerce-order-received .woocommerce-verify-email > p:first-of-type {
	margin-top: 0;
}

@media (max-width: 1024px) {
	.woocommerce-order-received .woocommerce-order {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.woocommerce-order-received .woocommerce-order > .woocommerce-order-details,
	.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details,
	.woocommerce-order-received .woocommerce-order > .cge-order-help,
	.woocommerce-order-received .woocommerce-order > .cge-order-account {
		grid-column: 1;
		grid-row: auto;
	}

	/* Zwei Adressen nebeneinander, solange die Breite reicht. */
	.woocommerce-order-received .woocommerce-customer-details .col2-set {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 768px) {
	.woocommerce .woocommerce-order ul.order_details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce .woocommerce-order ul.order_details li {
		padding: 14px 16px;
		border-left: none;
	}

	.woocommerce .woocommerce-order ul.order_details li:nth-child(even) {
		border-left: 1px solid var(--taupe-light);
	}

	.woocommerce .woocommerce-order ul.order_details li:nth-child(n + 3) {
		border-top: 1px solid var(--taupe-light);
	}

	.woocommerce .woocommerce-order ul.order_details li strong {
		font-size: 17px;
	}

	.woocommerce-order .woocommerce-thankyou-order-received {
		padding-left: 56px;
		font-size: 18px;
	}

	.woocommerce-order .woocommerce-thankyou-order-received::before {
		width: 40px;
		height: 40px;
	}

	.cge-thanks__title {
		font-size: 26px;
	}

	.woocommerce-order-received .woocommerce-order-details,
	.woocommerce-order-received .woocommerce-customer-details .woocommerce-column,
	.cge-order-help,
	.woocommerce-order-received .woocommerce-bacs-bank-details,
	.woocommerce-order-received .woocommerce-verify-email {
		padding: 20px;
	}

	.woocommerce-order-received .woocommerce-order-details table.order_details {
		font-size: 16px;
	}
}


/* 16.7 Nach oben (22.10.2026)
   -------------------------------------------------------------- */

/* Rechts unten, im Dunkelgrün des Fußbereichs, mit den Ecken der übrigen
   Knöpfe. Unsichtbar per `visibility`, damit er auch nicht fokussierbar
   ist, solange man ihn nicht sieht. Unter der Menü- und der Filterfläche
   (Ebenen 80 und 1000). */
.cge-nach-oben {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 1px;
	background: var(--green-deep);
	box-shadow: 0 4px 14px rgb(26 38 24 / 25%);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s, background 0.3s;
}

.cge-nach-oben.is-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s, transform 0.25s, visibility 0s, background 0.3s;
}

.cge-nach-oben:hover,
.cge-nach-oben:focus-visible {
	background: var(--green-mid);
}

/* Das Symbol ist die Spitze nach unten. */
.cge-nach-oben .cge-icon {
	transform: rotate(180deg);
}

/* Ziele von Sprungmarken bekommen den Fokus (theme.js), damit Tastatur und
   Vorlesegerät dort weitermachen – ein Rahmen um den ganzen Abschnitt wäre
   dabei nur störend. */
[tabindex="-1"]:focus {
	outline: none;
}

@media (max-width: 768px) {
	.cge-nach-oben {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cge-nach-oben,
	.cge-nach-oben.is-sichtbar {
		transform: none;
		transition: none;
	}
}

@media print {
	.cge-nach-oben {
		display: none;
	}
}


/* 16.8 Effekte beim Rollen (Startseite, seit 22.10.2026)
   -------------------------------------------------------------- */

/* Auf der Startseite und seit 23.10.2026 auf statischen Seiten
   (`body.cge-effekte`, cge_sn_effekte_body_class(), cge_page_has_effects()),
   nur Überschriften und Bilder. Ausgangslage setzt erst das Skript per
   `data-effekt`, freigegeben wird mit `ist-da` – ohne Skript bleibt alles
   sichtbar. Bewegt werden nur `opacity` und `transform`. */
.cge-effekte [data-effekt] {
	transition: opacity 0.8s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.8s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.cge-effekte [data-effekt]:not(.ist-da) {
	opacity: 0;
}

/* Überschriften: ein kurzer Weg von unten. */
.cge-effekte [data-effekt="ueberschrift"]:not(.ist-da) {
	transform: translateY(18px);
}

/* Bilder: nur einblenden, etwas langsamer, ohne Bewegung. */
.cge-effekte [data-effekt="bild"] {
	transition-duration: 1.1s;
}


/* 16.9 Formulare: ein System (27.10.2026)
   --------------------------------------------------------------
   Vorgabe des Betreibers: alle Formulare „wie aus einem Guss“. Vorbild ist die
   Kasse (16.4). Bis dahin hatte nur sie eigene Felder; Konto, Adressen,
   Anmeldung und Passwort standen im Standard von WooCommerce (fast schwarzer
   Rahmen, 4 Pixel Ecken, reines Weiß, 48 Pixel), der Newsletter hatte 48, der
   Gutschein 44 Pixel, die Auswahl der Länder stand außerhalb der Kasse in
   EB Garamond 19.

   Feld: 50 Pixel, Jost 17, Rahmen Taupe-hell, Ecken 2 Pixel, Cremeweiß.
   Fokus: grüner Rahmen mit Schein. Beschriftung: Jost 16 über dem Feld.
   Hinweis unter dem Feld: Jost 15, gedämpft. Kästchen: 18 Pixel, Dunkelgrün.
   Bewusst eigene, kompaktere Maße behalten: Suchfeld im Kopf, Preisfilter
   und Sortierung in Filterspalte und -leiste – Bedienleisten, keine
   Formulare zum Ausfüllen. */

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.mc4wp-form-fields input[type="text"],
.mc4wp-form-fields input[type="email"] {
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--taupe-light);
	border-radius: 2px;
	background-color: var(--white);
	box-shadow: none;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row textarea {
	min-height: 96px;
	padding: 12px 14px;
}

.woocommerce form .form-row .select2-container .select2-selection--single {
	padding: 0;
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 48px;
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 48px;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container--focus .select2-selection--single,
.woocommerce form .form-row .select2-container--open .select2-selection--single,
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.mc4wp-form-fields input[type="text"]:focus,
.mc4wp-form-fields input[type="email"]:focus {
	border-color: var(--green-mid);
	outline: none;
	box-shadow: 0 0 0 3px rgb(74 107 70 / 18%);
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--sale);
}

/* Beschriftung über dem Feld (Zeilenhöhe bleibt bei WooCommerce, 2). */
.woocommerce form .form-row label,
.mc4wp-form-fields label {
	color: var(--text-main);
	font-family: var(--sans);
	font-size: 16px;
}

/* Kästchen und Optionsfelder: ein Maß, eine Farbe. */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"],
.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"],
.mc4wp-form-fields input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--green-deep);
}

/* Hinweise unter einem Feld („Nur für Rückfragen …“, „So wird Ihr Name …“). */
.woocommerce form .form-row .description,
.woocommerce form .form-row em,
.woocommerce-EditAccountForm .form-row em {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
}

/* „Passwort anzeigen“: das Auge in Dunkelgrün statt Schwarz. */
/* Tippfläche 38 statt 22 Pixel; der negative Außenabstand hält das Auge an
   seinem Platz im Feld (29.10.2026). */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	margin: -8px;
	padding: 8px;
	color: var(--green-deep);
}

/* Gutschein im Warenkorb: Feld und Button auf einer Höhe. */
.woocommerce-cart table.cart td.actions .button {
	min-height: 50px;
}


/* 17.0 Barrierefreiheit
   -------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	background: var(--white);
	border: 2px solid var(--green-deep);
	clip-path: none;
	color: var(--green-deep);
	text-decoration: none;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* 18.0 Responsive
   -------------------------------------------------------------- */

/* Topbar: stufenweise Platz freigeben, statt umzubrechen – ein Umbruch
   machte die Leiste höher.

   | Stufe | ab Fensterbreite | sichtbar |
   |-------|------------------|----------|
   | 1     | über 1660        | alles |
   | 2     | bis 1660         | ohne Besichtigungszeit |
   | 3     | bis 1240         | Telefon und E-Mail nur als Symbol |
   | 4     | bis 768          | ohne Menü, Sprachauswahl bleibt |

   Die Grenzen sind gemessen, nicht geschätzt (Einträge in Pixeln): Telefon
   199, E-Mail 281, Besichtigung 364, links zusammen 950; rechts Menü samt
   Sprachauswahl 540. Alles zusammen braucht mit Seitenrändern und Rollbalken
   rund 1620 Pixel, ohne Besichtigung rund 1200, mit Symbolen statt Text
   links passt das Menü bis unter 700 Pixel. Die Stufen liegen jeweils etwa
   40 Pixel darüber – GTranslate übersetzt die Menüpunkte im Browser, und
   andere Sprachen sind länger.

   Stufe 4 fällt deshalb mit der Telefonansicht zusammen: Darüber hat das Menü
   neben den beiden Symbolen Platz. Besichtigungszeit, Nummer und Adresse
   stehen weiterhin im Fußbereich. */

@media (max-width: 1660px) {
	.topbar-hours,
	.topbar-divider--hours {
		display: none;
	}
}

@media (max-width: 1240px) {
	/* Unsichtbar, nicht entfernt: Der Text ist der Name des Links. */
	.topbar-contact__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 1024px) {
	:root {
		--gutter: 24px;
	}

	/* Vier Spalten: die große Kachel über zwei, daneben zwei kleine je Reihe,
	   darunter die übrigen zu viert. */
	.cat-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: max(300px, min(calc((100vw - 2 * var(--gutter) - 6px) / 4 * 1.5), calc((100svh - var(--cge-kopf, 90px) - var(--wp-admin--admin-bar--height, 0px) - 150px) / 2)));
	}

	.cat-label {
		padding: 48px 14px 14px;
	}

	.cat-label-title {
		font-size: 18px;
	}

	.home-band {
		padding: 60px var(--gutter);
	}

	.topbar-right {
		gap: 16px;
	}

	.nav-link-btn {
		padding: 14px 14px;
		font-size: 15px;
	}

	.section {
		padding: 60px var(--gutter);
	}

	/* Vier hochformatige Kacheln nebeneinander werden auf dem Tablet zu
	   schmal. Zwei statt drei, damit eine Reihe von vier Produkten dort
	   zwei plus zwei ergibt. */
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.prod-layout {
		gap: 40px;
	}
}

@media (max-width: 768px) {
	:root {
		--gutter: 20px;
		--header-h: 0px;
	}

	.topbar {
		min-height: 40px;
		padding: 7px 20px;
		font-size: 15px;
	}

	/* Topbar Stufe 4: Telefon- und E-Mail-Symbol links, rechts nur Flaggen
	   und Sprachauswahl. Ihre Trenner entfallen mit den Einträgen davor. */
	.topbar-right li:not(.menu-item-gtranslate):not(.menu-item-laender) {
		display: none;
	}

	.topbar-right li.menu-item-gtranslate::before,
	.topbar-right li.menu-item-laender::before {
		content: none;
	}

	/* Flaggen zum Antippen: Die Fläche war 28 × 20 Pixel bei 8 Pixeln
	   Abstand – unter den 24 Pixeln von WCAG 2.5.8. Jetzt 36 × 36 ohne
	   Lücke, die Flaggen stehen sichtbar weiter 12 Pixel auseinander. Der
	   negative Außenabstand hält die Leiste bei 40 Pixeln. */
	.topbar .menu-item-laender {
		gap: 0;
		margin-left: -2px;
	}

	.topbar .cge-land {
		padding: 10px 6px;
		margin: -8px 0;
	}

	/* Telefon und E-Mail stehen hier nur als Symbol, 16 × 21 Pixel. Die
	   Tippfläche wächst auf 36 × 41, der negative Außenabstand lässt Leiste und
	   Abstände unverändert; bis zum Trenner bleiben 14 Pixel (29.10.2026). */
	.topbar-left .topbar-contact {
		padding: 10px;
		margin: -10px;
	}

	.site-header {
		position: relative;
	}

	/* Zwei Zeilen: oben Schriftzug und Symbole, darunter Suchfeld und Menü.
	   Das Suchfeld steht auf dem Telefon dauerhaft offen – ein zusätzlicher
	   Klick auf eine Lupe wäre hier nur ein Umweg. */
	/* minmax(0, …) statt blossem fr: Sonst bestimmt der breiteste Inhalt der
	   Spalte ihre Mindestbreite – hier das Suchfeld mit seinem Knopf. Es drückte
	   die Spalte auf 299 Pixel und schob die Symbole aus dem Bild. */
	.header-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
	}

	.cge-search-form__field {
		min-width: 0;
	}

	/* Größen-Container für den Schriftzug, siehe `.logo-main`. Hier geht das,
	   anders als bei den Symbolen: Die Spalte ist `minmax(0, 1fr)`, ihre Breite
	   hängt nicht am Inhalt. */
	.logo-block {
		grid-column: 1;
		grid-row: 1;
		padding: 12px 0;
		text-align: left;
		container-type: inline-size;
	}

	/* Kein Größen-Container hier: Die Spalte ist `auto`, also so breit wie ihr
	   Inhalt – ein Container zählt seinen Inhalt aber nicht mit und fiele auf
	   null Pixel zusammen. */
	.header-right {
		grid-column: 2;
		grid-row: 1;
		gap: 4px;
		container-type: normal;
	}

	/* Das Suchfeld reicht bis an den Menüknopf. In der ersten Spalte endete es
	   dort, wo oben der Schriftzug endet – die zweite Spalte ist so breit wie
	   die drei Symbole, der Menüknopf aber schmaler, und dazwischen blieb eine
	   Lücke von 64 Pixeln. Es spannt deshalb über beide Spalten und hält rechts
	   Platz für den Knopf frei (40 Pixel Knopf + 12 Pixel Spaltenabstand). */
	.header-search {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-right: 52px;
		container-type: normal;
	}

	/* Außen- statt Innenabstand: Die Lupe liegt absolut im Formular und
	   reichte sonst 12 Pixel unter das Feld. */
	.header-search form {
		max-width: none;
		margin-bottom: 12px;
	}

	/* Etwas flacher als auf großen Bildschirmen: 40 statt 46 Pixel. Die Schrift
	   bleibt bei 17 Pixeln – unter 16 vergrößert iOS die Seite beim Antippen. */
	.header-search input[type="search"] {
		padding-block: 7px;
	}

	.hamburger {
		grid-column: 2;
		grid-row: 2;
		display: flex;
		justify-self: end;
		align-self: center;
		margin-bottom: 12px;
	}

	/* Der Schriftzug bleibt in einer Zeile, die Unterzeile entfällt: Auf 375
	   Pixeln brach „Historische Gartenelemente seit 1985" über drei Zeilen um
	   und schob alles Übrige nach unten.

	   Der Schriftgrad richtet sich nach der Breite, die neben den Symbolen
	   bleibt (`cqi` = 1 % des Logo-Blocks), nicht nach der Fensterbreite. Mit
	   `5.4vw` passte er im Browser mit 18 Pixeln Luft – auf iPhone und
	   Android setzen die Geräte die Schrift aber breiter, und der Schriftzug
	   lief in das Kontosymbol.

	   Schriftzug samt Zapfen braucht rund das 12-Fache seines Schriftgrads.
	   8cqi füllt damit knapp 97 % des Blocks. Eine erste Fassung mit 7,2cqi
	   (87 %) war auf den Geräten sichtbar zu klein, die Luft zum Kontosymbol
	   reichte für ein Fünftel mehr. Die Obergrenze liegt bei 21 Pixeln: Mit
	   22 lief der Schriftzug auf dem iPhone 17 Pro Max ins Symbol.
	   Rechnerisch: 21 Pixel bei 440 Pixeln Fensterbreite, 20,5 bei 412,
	   18,7 bei 390, 16,3 bei 360. */
	.logo-main {
		font-size: clamp(15px, 8cqi, 21px);
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	/* Der Zapfen wächst mit dem Schriftgrad statt fest 28 Pixel zu bleiben –
	   sonst frässe er bei kleinerer Schrift die Reserve wieder auf. */
	.logo-main::before {
		width: 1.27em;
		height: 1.27em;
		margin-right: 0.45em;
		vertical-align: -0.23em;
	}

	.logo-sub {
		display: none;
	}

	/* Nur die Symbole. Die Beschriftung bleibt als Name des Links für
	   Vorlesegeräte erhalten – mit `display: none` waren die drei Links zuvor
	   namenlos. */
	.header-icon .label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.header-icon {
		padding: 5px;
	}

	/* Der Suchknopf trägt auf dem Telefon nur noch das Nötigste – sonst bliebe
	   dem Eingabefeld daneben kaum Platz. */
	/* Nur die Lupe – die Beschriftung nähme dem Eingabefeld die halbe Breite. */
	.cge-search-form__submit {
		padding-inline: 14px;
	}

	.cge-search-form__submit-label {
		display: none;
	}

	.main-nav {
		display: none;
	}

	.mega-panel,
	.drop-panel {
		display: none !important;
	}

	.btn-primary,
	.btn-outline {
		padding: 14px 24px;
		font-size: 16px;
	}

	.section {
		padding: 48px var(--gutter);
	}

	.section-title {
		font-size: 34px;
	}

	.section-title-md {
		font-size: 28px;
	}

	/* Zwei Spalten: die große Kachel über die volle Breite, die kleinen zu
	   zweit darunter. Halbe Smartphone-Breite: kleinere Überschrift, schmaler
	   Rand. Die Reihen richten sich wieder nach dem Inhalt, das Format kommt
	   von der Kachel: klein 2 : 3, die große 4 : 5 (2 : 3 wäre dort 525 Pixel
	   hoch). */
	.cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.cat-card {
		min-height: 0;
		aspect-ratio: 2 / 3;
	}

	.cat-card--lead {
		grid-row: span 1;
		aspect-ratio: 4 / 5;
	}

	.cat-label {
		padding: 44px 12px 14px;
	}

	.cat-card--lead .cat-label {
		padding: 56px 20px 20px;
	}

	.cat-label-title {
		font-size: 17px;
	}

	.cat-card--lead .cat-label-title {
		font-size: 24px;
	}

	.cat-label-sub {
		font-size: 14px;
		letter-spacing: 0.08em;
	}

	.home-band {
		padding: 48px var(--gutter);
	}

	/* Die Kollektionen reichen auf dem Telefon bis an den Rand. */
	.home-collections {
		padding-inline: 0;
	}

	.home-collections .section-header {
		padding-inline: var(--gutter);
	}

	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.footer-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 40px var(--gutter) 24px;
	}

	/* Mittig untereinander; unten frei für „Nach oben“ (unten 16 + 44 Pixel),
	   weil die Zeilen dort über die ganze Breite laufen. */
	.footer-bottom {
		flex-direction: column;
		gap: 8px;
		padding: 20px var(--gutter) calc(76px + env(safe-area-inset-bottom, 0px));
		text-align: center;
	}

	.cat-hero {
		min-height: 260px;
	}

	.cat-hero-content {
		padding: 24px;
	}

	/* Lange Wörter („Gartenarchitektur“ bei den Statuen) passen bei 320
	   Pixeln knapp, mit Bildlaufleiste nicht mehr – dann wird getrennt. */
	.cat-hero-title {
		font-size: 38px;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.cat-hero-sub {
		font-size: 18px;
	}

	.filter-bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 14px var(--gutter);
	}

	.filter-right {
		width: 100%;
		justify-content: space-between;
	}

	/* minmax(0, …) statt 1fr: Sonst wächst die Spalte auf die Mindestbreite
	   ihres Inhalts – auf der Shop-Seite die Blätterleiste mit 19 Seiten,
	   360 Pixel. Bei 320 Pixeln Fenster wurden die Kacheln rechts
	   abgeschnitten (23.10.2026). */
	.cat-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Leiste: klebt, nur „Filter" und „Sortieren", je halbe Breite – oder
	   die ganze, wenn es nichts zu filtern gibt (der Knopf trägt dann
	   `hidden`). Auswahllisten der Zusatzfilter, „Filter:" und der
	   Rücksetzer entfallen hier; Fläche und Chips übernehmen sie. */
	.filter-bar--shop {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.filter-bar--shop .filter-bar-inner {
		padding: 10px var(--gutter);
	}

	.filter-bar--shop .filter-left {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 10px;
		width: 100%;
	}

	.filter-bar--shop .filter-label,
	.filter-bar--shop .cge-tag-filter,
	.filter-bar--shop .filter-reset,
	.filter-bar--shop .filter-right {
		display: none;
	}

	.filter-toggle {
		display: inline-flex;
		order: 1;
	}

	/* „Sortieren": Die Auswahlliste von WooCommerce liegt unsichtbar über der
	   Beschriftung. Antippen öffnet die Auswahl des Systems; WooCommerce
	   schickt das Formular bei der Wahl selbst ab. */
	.filter-bar--shop .filter-sort {
		position: relative;
		order: 2;
		align-items: center;
		justify-content: center;
		height: 48px;
		border: 1px solid var(--taupe-light);
		border-radius: 2px;
		background: var(--white);
	}

	.filter-bar--shop .filter-sort:focus-within {
		outline: 2px solid var(--green-mid);
		outline-offset: 2px;
	}

	.filter-sort__label {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: var(--green-deep);
		font-family: var(--sans);
		font-size: 16px;
		letter-spacing: 0.04em;
	}

	.filter-sort__label::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.filter-bar--shop .filter-sort .woocommerce-ordering {
		position: absolute;
		inset: 0;
	}

	.filter-bar--shop .filter-sort select {
		width: 100%;
		max-width: none;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}

	/* Zeile darunter: Zahl, Seitengröße, gesetzte Filter. Läuft mit. */
	.filter-summary {
		display: block;
		padding: 14px var(--gutter) 0;
	}

	.filter-summary-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 12px;
	}

	.filter-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	.filter-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 40px;
		padding: 0 14px;
		border: 1px solid var(--green-mid);
		border-radius: 20px;
		background: var(--cream);
		color: var(--green-deep);
		font-family: var(--sans);
		font-size: 15px;
		line-height: 1.3;
		text-decoration: none;
	}

	.filter-chip__x {
		font-size: 20px;
		line-height: 1;
	}

	.filter-chip--alle {
		border-color: transparent;
		background: none;
		color: var(--sale);
		text-decoration: underline;
	}

	/* Die Filterspalte als Fläche über der ganzen Seite: Kopf mit „Filter"
	   und Schließen, Inhalt rollt, Fuß mit „Alle zurücksetzen" und
	   „44 Produkte anzeigen" (schließt; Auswahl und Höhe wirken schon beim
	   Antippen, der Preis mit seinem Knopf). Ohne Skript bleibt sie
	   verborgen wie zuvor. */
	.cat-sidebar {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1000;
		flex-direction: column;
		padding: 0;
		border: 0;
		background: var(--white);
	}

	.cat-sidebar.is-open {
		display: flex;
	}

	.sidebar-panel-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		padding: 8px 8px 8px var(--gutter);
		border-bottom: 1px solid var(--taupe-light);
	}

	.sidebar-panel-title {
		color: var(--green-deep);
		font-family: var(--serif);
		font-size: 28px;
		line-height: 1.2;
	}

	.sidebar-panel-close {
		width: 48px;
		height: 48px;
		border: 0;
		background: none;
		color: var(--text-main);
		font-family: var(--sans);
		font-size: 34px;
		line-height: 1;
		cursor: pointer;
	}

	.sidebar-panel-body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 24px var(--gutter) 32px;
	}

	.sidebar-tagfilters {
		display: block;
		margin-bottom: 32px;
	}

	/* Einträge als Zeilen zum Antippen, mindestens 48 Pixel hoch. */
	.sidebar-panel-body .sidebar-list li {
		margin: 0;
		border-top: 1px solid var(--taupe-light);
	}

	.sidebar-panel-body .sidebar-list li:last-child {
		border-bottom: 1px solid var(--taupe-light);
	}

	.cat-sidebar .sidebar-panel-body .sidebar-list li a {
		align-items: center;
		min-height: 48px;
		padding: 8px 0;
	}

	.sidebar-panel-foot {
		display: flex;
		flex: none;
		align-items: center;
		gap: 16px;
		padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--taupe-light);
		background: var(--white);
	}

	.sidebar-panel-reset {
		color: var(--sale);
		font-family: var(--sans);
		font-size: 16px;
		white-space: nowrap;
	}

	.sidebar-panel-apply {
		flex: 1;
		height: 50px;
		padding: 0 16px;
		border: 1px solid var(--green-deep);
		border-radius: 1px;
		background: var(--green-deep);
		color: #fff;
		font-family: var(--sans);
		font-size: 16px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	html.cge-filter-offen,
	html.cge-filter-offen body {
		overflow: hidden;
	}

	.cat-text {
		padding: 40px var(--gutter);
	}

	.cat-text-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.cat-text h2 {
		font-size: 26px;
	}

	.cat-text p {
		font-size: 18px;
	}

	.prod-page {
		padding: 24px var(--gutter);
	}

	/* minmax(0, …) statt 1fr, wie bei .cat-layout: Mit 1fr wuchs die Spalte
	   auf die Mindestbreite ihres Inhalts – bei den Weihnachtsgutscheinen 416
	   Pixel, die Seite wurde rechts abgeschnitten (23.10.2026). Ebenso bei
	   den übrigen einspaltigen Rastern auf dem Telefon. */
	.prod-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-bottom: 40px;
	}

	/* Werte im Datenblatt: „Wintergartenbeschreibung“ als Linktext ragte bei
	   320 Pixeln aus der Spalte. */
	.cge-variant-specs__value {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.prod-gallery {
		position: static;
	}


	.prod-title {
		font-size: 36px;
	}

	.prod-price-block,
	.single-product .summary > .price {
		font-size: 30px;
	}

	.prod-short-desc {
		font-size: 19px;
	}

	.atc-row {
		flex-wrap: wrap;
	}

	/* Nach dem Umbruch steht die Menge allein in ihrer Zeile und war nur so
	   hoch wie ihr Inhalt (29 Pixel) – − und + waren schmale Streifen. Jetzt so
	   hoch wie „In den Warenkorb“ (29.10.2026). */
	.atc-row .cge-qty {
		min-height: 54px;
	}

	.prod-trust {
		gap: 8px;
	}

	.prod-trust-text {
		font-size: 14px;
	}

	.tab-btn,
	.woocommerce-tabs ul.tabs li a {
		padding: 12px 16px;
		font-size: 15px;
	}

	.tab-content p {
		font-size: 19px;
	}

	.cge-content-area {
		padding: 32px var(--gutter);
	}
}

@media (max-width: 480px) {
	.product-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 400px) {
	.prod-trust {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Übersichtslink des Hauptpunktes am Fuß der ersten Spalte. Nötig, weil der
   Hauptpunkt als Schaltfläche ausgeführt ist und sein Ziel sonst nicht
   erreichbar wäre. */
.mega-overview {
	align-self: flex-start;

	/* Schiebt den Link an den Fuß der Spalte; der Mindestabstand hält ihn auch
	   in kurzen Menüs von der Gruppe darüber frei. */
	margin-top: auto;
	padding-top: 32px;
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.mega-overview:hover,
.mega-overview:focus {
	color: var(--bronze);
}

/* --------------------------------------------------------------
   19.0 Produktseite: Feinschliff gegen das WooCommerce-CSS

   WooCommerce bringt für Reiter, Preise und Formulare eigene Regeln mit,
   deren Selektoren spezifischer sind als einfache Klassen. Die Regeln hier
   sind deshalb bewusst gleich tief verschachtelt.
   -------------------------------------------------------------- */

.single-product .prod-page {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 40px var(--gutter) 0;
}

/* Reiter */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 40px;
	padding: 0;
	border-bottom: 1px solid var(--taupe-light);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: -1px;
	padding: 16px 28px;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--green-deep);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--bronze);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: none;
	margin: 0;
	padding: 0 0 48px;
}

/* Preis und Titel im Entwurfsmaß */
.woocommerce div.product .prod-info-col .product_title {
	margin-bottom: 8px;
	padding: 0;
	font-family: var(--serif);
	font-size: 48px;
	font-weight: 300;
	color: var(--green-deep);
	line-height: 1.15;
}

.woocommerce div.product .prod-info-col p.price,
.woocommerce div.product .prod-info-col span.price {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	color: var(--green-deep);
	font-family: var(--serif);
	font-size: 38px;
	font-weight: 400;
}

/* Rechte Spalte der Produktseite: Rhythmus und Schriftgrade des Entwurfs */

.prod-info-col .woocommerce-product-details__short-description {
	margin: 24px 0 28px;
	color: var(--text-main);
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.8;
}

.prod-info-col .woocommerce-product-details__short-description p {
	margin-bottom: 12px;
}

/* Leere Pflichtfeld-Platzhalter von Germanized nehmen sonst Raum ein. */
.prod-info-col .wc-gzd-additional-info-placeholder:empty,
.prod-info-col .wc-gzd-additional-info:empty {
	display: none;
}

.cge-variants {
	margin-bottom: 28px;
}

.cge-variant {
	padding-top: 4px;
}

/* Innerhalb einer Ausführung sitzt der Preis ohne obere Linie, die trennende
   Linie steht bereits über der Ausführungswahl. */
/* Der Preis der gewählten Ausführung steht ohne eigene Linien: Über ihm trennt
   bereits die Ausführungswahl, unter ihm bringt das Datenblatt seine obere
   Linie mit. Mit der Linie des Preisblocks lägen dort zwei übereinander. */
.cge-variant .prod-price-block {
	margin-bottom: 16px;
	padding: 0 0 16px;
	border: 0;
}

/* Mit Skript steht der Preis der gewählten Ausführung oben unter dem
   Produktnamen (syncTopPrice in theme.js); der Preis über dem Knopf entfällt.
   Ohne Skript bleibt er stehen, dann zeigt oben der „ab"-Preis. */
.cge-variants.is-price-synced .cge-variant > .prod-price-block {
	display: none;
}

.prod-info-col > .prod-price-block > .price-surcharge {
	margin: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
}

/* Lieferzeit unter dem Warenkorb-Knopf. Die Zeile von Germanized über der
   Ausführungswahl sagt dasselbe und entfällt dann. */
.atc-delivery {
	margin: -12px 0 24px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
}

.prod-info-col:has(.atc-delivery) > .delivery-time-info {
	display: none;
}

.cge-variant .price-main {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
	color: var(--green-deep);
}

.prod-info-col .product_meta {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--taupe-light);
}

/* Bewertung klein neben dem Produktnamen (seit 24.09.2026, wie in den
   Best-Practice-Leitfäden). Bei langen Namen rutscht sie unter die letzte
   Titelzeile. */
.prod-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	margin-bottom: 8px;
}

.woocommerce div.product .prod-info-col .prod-title-row .product_title {
	margin: 0;
	/* Flex-Element: ohne das schrumpft es nie unter sein längstes Wort. */
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Produktname auf dem Telefon 36 statt 48 Pixel, wie die Seitentitel:
   „Großer Versailler Pflanzkübel aus Stahl“ lief sonst über vier Zeilen,
   „Weihnachtsgutscheine“ war allein 416 Pixel breit (23.10.2026). Hier und
   nicht im Abschnitt Responsive, weil die Regel mit derselben Spezifität
   weiter oben im Stilblatt stünde und verlöre. */
@media (max-width: 768px) {
	.woocommerce div.product .prod-info-col .product_title {
		font-size: 36px;
	}
}

.woocommerce div.product .prod-info-col .woocommerce-product-rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 15px;
}

.woocommerce div.product .prod-info-col .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
	color: var(--bronze);
	font-size: 14px;
}

.woocommerce div.product .prod-info-col .woocommerce-review-link {
	order: 2;
	color: var(--green-mid);
	text-decoration: none;
}

.woocommerce div.product .prod-info-col .woocommerce-review-link:hover,
.woocommerce div.product .prod-info-col .woocommerce-review-link:focus-visible {
	color: var(--green-deep);
	text-decoration: underline;
}

/* Hinweis von Germanized zur Echtheit der Bewertungen (§ 5b Abs. 3 UWG) –
   Pflichtangabe, deshalb nur klein ans Ende gestellt, nicht entfernt. */
.woocommerce div.product .prod-info-col .wc-gzd-rating-authenticity-status {
	order: 3;
	display: inline;
	width: auto;
	margin: 0;
	font-size: 14px;
}

/* Die Regel für Germanized-Angaben weiter unten gibt jedem Hinweis die volle
   Breite – hier soll er in der Zeile der Sterne bleiben, abgesetzt durch einen
   Punkt. */
.woocommerce div.product .prod-info-col .wc-gzd-rating-authenticity-status::before {
	content: "·";
	margin-right: 8px;
}


/* Hinweiskachel auf weitere Produktbilder */
.thumb-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--cream-dark);
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 17px;
	letter-spacing: 0.05em;
}

.thumb-more:hover,
.thumb-more:focus-visible {
	background: var(--green-pale);
	border-color: var(--green-mid);
}

/* Farbauswahl auf der Produktseite: Farbfläche mit RAL-Nummer darunter, der
   ausgeschriebene Name steht in der Zustandszeile und im Titelattribut. */
.cge-colors .finish-options {
	flex-wrap: wrap;
	gap: 10px;
}

.finish-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Quadratisch wie im Entwurf. `flex: none` verhindert, dass die Fläche im
   senkrechten Knopf zusammengedrückt wird. */
.finish-swatch__dot {
	display: block;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
	background: var(--cream);
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* Wie im Entwurf: Der Rahmen ist immer da, nur unsichtbar. Die gewählte Farbe
   bekommt ihn in Dunkelgrün, der Mauszeiger deutet ihn hell an. Dadurch springt
   nichts in der Größe, wenn sich die Auswahl ändert. */
.finish-swatch.active .finish-swatch__dot {
	border-color: var(--green-deep);
}

.finish-swatch:hover .finish-swatch__dot,
.finish-swatch:focus-visible .finish-swatch__dot {
	border-color: var(--green-light);
}

.finish-swatch.active:hover .finish-swatch__dot {
	border-color: var(--green-deep);
}

.finish-swatch__code {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.finish-swatch.active .finish-swatch__code {
	color: var(--green-deep);
}

/* Ohne hinterlegten Farbwert – Handelsnamen ohne RAL-Nummer – bleibt die
   Fläche leer und die Bezeichnung trägt die Erkennung. */
.finish-swatch.has-no-hex .finish-swatch__dot {
	background: repeating-linear-gradient(45deg, var(--cream) 0 6px, var(--cream-dark) 6px 12px);
}

.finish-swatch.has-no-hex .finish-swatch__code {
	max-width: 72px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

/* Gewählte Farbe, ⓘ mit dem Hinweis zur Farbtreue und der Link zum
   Farbkatalog in einer Zeile (seit 24.09.2026, vorher drei Zeilen). Wird es
   zu schmal, bricht der Link in die nächste Zeile. */
.cge-colors__line {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 6px;
	margin: 10px 0 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

/* Kein eigener Bezugsrahmen: Das Hinweisfeld richtet sich an der ganzen
   Zeile aus und ragt so auch auf dem Telefon nicht über den Rand, wenn das ⓘ
   weit rechts steht. */
.cge-colors__info {
	display: inline-flex;
}

/* Innenabstand 4 statt 2 Pixel, der negative Außenabstand gleicht ihn aus:
   Die Tippfläche wächst von 22 auf 26 Pixel, sichtbar bleibt alles gleich. */
.cge-colors__info-btn {
	display: inline-flex;
	padding: 4px;
	margin: -2px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bronze);
	cursor: help;
}

.cge-colors__info-btn:hover,
.cge-colors__info-btn:focus-visible,
.cge-colors__info.is-open .cge-colors__info-btn {
	color: var(--green-deep);
}

/* Das Hinweisfeld liegt über dem Inhalt darunter, statt ihn zu verschieben.
   Unsichtbar per visibility, nicht per display: So bleibt es die
   Beschreibung des Knopfes (aria-describedby). */
.cge-colors__hint {
	position: absolute;
	z-index: 20;
	/* Nach unten: Nach oben deckte es die Farbflächen ab, zwischen denen
	   gerade gewählt wird. */
	top: calc(100% + 8px);
	left: 0;
	width: max-content;
	max-width: min(100%, 360px);
	padding: 10px 14px;
	border: 1px solid var(--taupe-light);
	background: var(--white);
	box-shadow: 0 4px 16px rgb(30 26 20 / 12%);
	color: var(--text-main);
	font-size: 14px;
	line-height: 1.45;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
}

.cge-colors__info:hover .cge-colors__hint,
.cge-colors__info:focus-within .cge-colors__hint,
.cge-colors__info.is-open .cge-colors__hint {
	opacity: 1;
	visibility: visible;
}

.cge-colors__all {
	color: var(--green-mid);
}

.cge-colors__all::before {
	content: "·";
	margin-right: 6px;
	color: var(--text-muted);
	display: inline-block;
	text-decoration: none;
}

/* Auf dem Telefon bricht „Alle Farben ansehen“ fast immer in die nächste
   Zeile um – die begann dann mit dem Trennpunkt. Dort eigene Zeile, ohne
   Punkt (23.10.2026). */
@media (max-width: 768px) {
	.cge-colors__all {
		display: table;
		margin-top: 2px;
	}

	.cge-colors__all::before {
		content: none;
	}
}

/* WooCommerce legt die Produktseite zweispaltig per float an:
   div.summary bekommt width:48%, div.images ebenso. Im Rasterlayout des
   Entwurfs fuehrt das dazu, dass beide Spalten nur die halbe Zellenbreite
   nutzen. Die Regeln sind gleich tief verschachtelt wie die von WooCommerce,
   damit sie greifen. */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product .prod-gallery,
.woocommerce-page div.product .prod-gallery {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	clear: none;
}

/* --------------------------------------------------------------
   20.0 Produktseite: Korrekturen

   Abgrenzung gegen fremde Stylesheets erfolgt hier bewusst über den
   eigenen Container und nicht über Nachbau der WooCommerce-Selektoren.
   Damit bleibt die Wirkung erhalten, auch wenn WooCommerce seine
   Selektoren in einer künftigen Fassung ändert.
   -------------------------------------------------------------- */

/* Das hidden-Attribut muss die Klassenregel schlagen, sonst zeigt die
   Miniaturenreihe alle Bilder statt der ersten fünf. */
.thumb[hidden] {
	display: none;
}

/* Datenblatt mit mehreren Ausführungen.

   `.specs-table` begrenzt die Breite auf 600 Pixel – richtig für die schmale
   Merkmalsliste eines einfachen Produkts, falsch hier: Bei drei Ausführungen
   blieben je 157 Pixel je Spalte, die Überschriften brachen mitten im Namen um.
   Die Regel steht deshalb hier, nach der allgemeinen.

   `table-layout: fixed` verteilt den Platz nach den Vorgaben statt nach dem
   Inhalt; ohne das reißt eine einzelne lange Angabe – etwa die Liste der
   Lieferländer – die ganze Spalte auseinander. */
.cge-variant-table {
	/* Breite der Beschriftungsspalte: 13rem, oder so breit wie das längste
	   Wort der Beschriftungen (`--cge-label-word`, Zeichen, gesetzt in
	   cge_render_variation_table()) samt Innenabstand. Jost 500 in 18 Pixeln
	   braucht gemessen knapp 0,5em je Zeichen, gerechnet ist mit 0,56em
	   Reserve. Vorher brach „Wintergartenbeschreibung" (213 Pixel in 188)
	   ohne Trennstrich mitten im Wort um. Höchstens 17rem, damit die Werte
	   daneben nicht verdrängt werden. */
	--cge-label-col: clamp(13rem, calc(var(--cge-label-word, 0) * 0.63rem + 20px), 17rem);

	/* Bis drei Ausführungen füllt die Tabelle den Platz. Darüber wächst sie mit
	   jeder Spalte, statt die vorhandenen zu stauchen – bei acht Ausführungen
	   blieben sonst gut 120 Pixel je Spalte. Der Rahmen darum rollt dann
	   waagerecht, die Beschriftungsspalte bleibt dabei stehen. */
	width: max(100%, calc(var(--cge-label-col) + var(--cge-cols, 3) * 12rem));
	max-width: none;
	table-layout: fixed;
}

/* Bei `table-layout: fixed` bestimmt die erste Zeile die Spaltenbreiten – das
   ist der Kopf. Die Vorgabe muss deshalb auch an dessen leerer Ecke stehen,
   nicht nur an den Beschriftungen der Datenzeilen. */
/* Feste Breite statt Prozent: Die Tabelle wächst bei vielen Ausführungen über
   den Rahmen hinaus, und ein Prozentwert wüchse mit – die Beschriftungsspalte
   nähme dann fast die Hälfte des sichtbaren Ausschnitts ein. */
.cge-variant-table thead td:first-child,
.cge-variant-table th[scope="row"] {
	width: var(--cge-label-col);
}

/* Auf dem Telefon bleibt die Spalte bei 13rem – sie steht beim Rollen fest
   und nähme sonst den halben Bildschirm. Ein zu langes Wort wird dort nach
   Silben mit Trennstrich getrennt statt ohne mitten im Wort – in der
   Beschriftung wie im Wert daneben, der als Linktext oft dasselbe Wort
   trägt. */
@media (max-width: 768px) {
	.cge-variant-table {
		--cge-label-col: 13rem;
	}

	.cge-variant-table th,
	.cge-variant-table td {
		hyphens: auto;
	}
}

/* Ein Innenabstand für alle Zellen.

   Zuvor bekamen die Zeilenbeschriftungen nur den Standardabstand des Browsers
   von einem Pixel, die Werte daneben aber 14 – die Beschriftung saß dadurch
   dreizehn Pixel höher als ihr Wert und wirkte in hohen Zeilen gegenüber dem
   Wertblock verrutscht. Auch die Spaltenüberschriften standen um zwölf Pixel
   eingerückt gegenüber den Werten darunter. */
.cge-variant-table th,
.cge-variant-table td,
.cge-variant-table th[scope="col"],
.cge-variant-table th[scope="row"] {
	padding: 14px 20px 14px 0;
	vertical-align: top;
	overflow-wrap: anywhere;
}

/* Beschriftungen linksbündig wie die Werte daneben. Der Browser zentriert
   Kopfzellen von Haus aus; neben den linksbündigen Werten sah die Spalte
   dadurch aus, als wanderten die Beschriftungen von Zeile zu Zeile. */
.cge-variant-table th[scope="row"] {
	text-align: left;
}

.cge-variant-table th[scope="col"] {
	line-height: 1.3;
}

/* Preisblock: genau zwei Linien, eine über dem Preis und eine unter den
   Pflichtangaben. Alles dazwischen bleibt linienfrei, gleich wie viele
   Angaben Germanized beisteuert. */
.prod-info-col > .prod-price-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	margin: 0 0 28px;
	padding: 20px 0;
	border-top: 1px solid var(--taupe-light);
	border-bottom: 1px solid var(--taupe-light);
}

.prod-info-col .legal-price-info,
.prod-info-col .wc-gzd-additional-info {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

/* „inkl. MwSt." und „zzgl. Versandkosten" stehen neben dem Preis, zwei Zeilen
   hoch wie der Preis selbst (seit 24.09.2026, spart eine Zeile bis zum
   Warenkorb). Weitere Angaben von Germanized – Grundpreis, Pfand – brechen
   in eine eigene Zeile darunter um; wird es zu schmal, rutschen auch die
   Pflichtangaben unter den Preis. */
.woocommerce div.product .prod-info-col > .prod-price-block > p.price {
	margin: 0;
}

.prod-info-col > .prod-price-block > .legal-price-info {
	flex: 0 1 auto;
	width: auto;
	line-height: 1.4;
}

.prod-info-col > .prod-price-block > :not(.price):not(.legal-price-info) {
	flex-basis: 100%;
}

.prod-info-col .legal-price-info + .wc-gzd-additional-info:not(:empty),
.prod-info-col .wc-gzd-additional-info + .legal-price-info {
	margin-top: 4px;
}

/* Der aktive Reiter trägt bei WooCommerce einen weißen Grund und einen
   Rahmen – im Entwurf sitzt er auf der Fläche und wird nur durch die
   bronzene Linie markiert. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	display: none;
	content: none;
	box-shadow: none;
}

/* Weicher Übergang beim Wechsel des Reiters. */
.woocommerce div.product .woocommerce-tabs .panel {
	animation: cgeFadeIn 0.28s ease both;
}

@keyframes cgeFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Warenkorbzeile im Maß des Entwurfs */
.atc-row {
	align-items: stretch;
	gap: 12px;
	margin-bottom: 24px;
}

.atc-row .btn-atc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 54px;
	padding: 0 28px;
}

.cge-qty {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--taupe-light);
	background: var(--white);
}

.cge-qty__btn {
	width: 44px;
	border: 0;
	background: none;
	color: var(--brown-mid);
	/* Knöpfe erben die Schrift nicht – ohne Angabe stünden − und + in Arial. */
	font-family: var(--sans);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* Mit Elternklasse: Die allgemeine Regel für Eingabefelder
   (`input[type="number"]`) wiegt mehr als eine Klasse allein und setzte
   Rahmen rundum, Rundung, Innenabstand und 17 Pixel durch – oben und unten lag
   ihr Rahmen doppelt auf dem des Mengenfelds. */
.cge-qty .cge-qty__input {
	width: 54px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--taupe-light);
	border-right: 1px solid var(--taupe-light);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 19px;
	text-align: center;
	-moz-appearance: textfield;
}

.cge-qty__input::-webkit-outer-spin-button,
.cge-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Symbol per Flex mittig: Als Inline-Inhalt schob das Leerzeichen hinter dem
   SVG das Herz um 6,5 Pixel nach links, und die Zeile stauchte den Knopf
   auf 48 Pixel. */
.cge-wishlist {
	display: inline-flex;
	flex: 0 0 54px;
	align-items: center;
	justify-content: center;
	width: 54px;
	min-height: 54px;
	padding: 0;
	border: 1px solid var(--taupe-light);
	background: none;
	color: var(--text-muted);
	font-size: 20px;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.cge-wishlist:hover {
	border-color: var(--bronze);
	color: var(--bronze);
}

/* Ähnliche Produkte: Hintergrund über die volle Fensterbreite, Inhalt genau
   so breit wie der übrige Seiteninhalt.

   Der Innenabstand holt zurück, was das negative Außenmaß nach außen geht.
   Bis zum 21.09.2026 stand dort zusätzlich `+ var(--gutter)`: Der Rand des
   Elternelements kam damit ein zweites Mal hinzu, das Raster begann 48 Pixel
   weiter innen als Galerie und Reiter darüber, und seine Kacheln waren
   schmaler als die der Angebotsseite. */
.single-product .related.products,
.single-product .upsells.products {
	margin-inline: calc(50% - 50vw);
	padding: 64px calc(50vw - 50%);
	background: var(--cream);
}

.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 300;
	text-align: center;
}

.cge-related-label {
	display: block;
	margin-bottom: 12px;
	color: var(--bronze);
	font-family: var(--sans);
	font-size: 15px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-align: center;
}

/* Nur der Abstand: Die Spaltenzahl kommt seit dem 21.09.2026 aus der
   allgemeinen Raster-Regel, damit ähnliche Produkte genauso stehen wie
   Bestseller, Kategorieraster und Angebotsseite. Eine eigene Vorgabe hier
   wäre tiefer verschachtelt und hätte auch die Umbrüche für schmale
   Bildschirme ausgehebelt – dafür standen früher zwei weitere
   Medienabfragen an dieser Stelle. */
.single-product .related.products ul.products {
	margin-top: 40px;
}

/* --------------------------------------------------------------
   21.0 Abgrenzung gegen fremde Layout-Stylesheets

   WooCommerce legt die Produktseite per float zweispaltig an und gibt
   .summary und .images je 48 Prozent Breite. Diese Regeln stehen in
   woocommerce-layout.css, einer Plugin-Datei, die bei jedem Update
   ersetzt wird. Überschrieben wird dabei nichts von uns – wir ändern
   diese Datei nicht. Was ein Update aber ändern kann, sind die
   Selektoren: Dann liefen nachgebildete Gegenregeln ins Leere.

   Deshalb greift die Abgrenzung hier am eigenen Container statt an
   fremden Selektoren. Sie gilt unabhängig davon, wie WooCommerce seine
   Regeln künftig benennt. Das !important ist an dieser Stelle bewusst
   gesetzt: Es markiert eine Grenze zu Fremdcode, nicht eine Abkürzung
   innerhalb des eigenen Stylesheets.
   -------------------------------------------------------------- */

.prod-layout > *,
.cat-layout > * {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	clear: none !important;
}

/* Miniaturen der Galerie. `thumbnails` ist auch der Klassenname der alten
   Galerie von WooCommerce; deren Regel
   `.woocommerce div.product div.thumbnails a { float: left; width: 30.75% }`
   führt drei Klassen und drei Elemente und schlägt damit jede Regel auf `.thumb`
   allein. Die Miniatur wurde dadurch 140 statt 80 Pixel breit, das Bild also
   quer beschnitten.

   Die Quadrate stehen hier, nicht in der Grundregel, damit klar bleibt, dass
   sie eine fremde Vorgabe abwehren. `object-fit: cover` am Bild sorgt dann für
   den Beschnitt: Die kürzere Seite füllt die 80 Pixel, die längere wird
   mittig abgeschnitten. */
/* Dazu setzt WooCommerce ::before und ::after als `display: table` ein, um die
   Floats aufzuräumen. In einem Flex-Container werden daraus zwei leere
   Kästchen: Das erste schob die Reihe um einen Abstand nach rechts und damit
   aus der Flucht des Hauptbildes, das zweite belegte am Ende einen Platz und
   ließ die Reihe zu früh umbrechen. */
.prod-gallery-inner .thumbnails::before,
.prod-gallery-inner .thumbnails::after {
	content: none !important;
	display: none !important;
}

.prod-gallery-inner .thumbnails .thumb {
	float: none !important;
	width: 80px !important;
	height: 80px !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.prod-gallery-inner .thumbnails .thumb {
		width: 64px !important;
		height: 64px !important;
	}
}

/* Produktkacheln liegen im eigenen Raster. WooCommerce gibt ihnen je nach
   Spaltenzahl feste Prozentbreiten – `.woocommerce ul.products.columns-3
   li.product` mit 30,75 Prozent führt eine Klasse mehr als eine Regel ohne
   Spaltenangabe und gewinnt deshalb. In einer Rasterzelle sind 30,75 Prozent
   der Zellenbreite: Die Kachel schrumpft auf ein Drittel ihrer Spalte.

   Auch hier greift die Regel am eigenen Container statt an fremden Selektoren,
   damit sie unabhängig von der Spaltenzahl und künftigen Umbenennungen gilt. */
.woocommerce ul.products > li.product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
}


/* --------------------------------------------------------------
   22.0 Farbkatalog des Zuschlagsprodukts

   Das Produkt „FARBZUSCHLÄGE" führt 185 Varianten in drei Preisgruppen.
   Statt einer Liste steht je Gruppe ein Abschnitt mit ihrem Text und
   ihren Farben als Flächen; ein Suchfeld filtert alle Gruppen zugleich.
   -------------------------------------------------------------- */

.cge-catalog {
	clear: both;
	margin-inline: calc(var(--gutter) * -1);
	padding: 56px var(--gutter);
	background: var(--cream);
}

.cge-catalog__search {
	display: block;
	max-width: 420px;
	margin: 0 auto 40px;
}

.cge-catalog__search input {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--taupe-light);
	background: #fff;
	font-family: var(--sans);
	font-size: 17px;
}

.cge-catalog__empty {
	margin: 0 0 32px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 17px;
	text-align: center;
}

.cge-group + .cge-group {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--taupe-light);
}

.cge-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.cge-group__title {
	margin: 0;
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 300;
	color: var(--green-deep);
}

.cge-group__code {
	margin-left: 10px;
	padding: 3px 10px;
	background: var(--green-pale);
	color: var(--green-deep);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.12em;
	vertical-align: middle;
}

.cge-group__price {
	margin: 0;
	font-family: var(--serif);
	font-size: 26px;
	color: var(--green-deep);
}

.cge-group__price span {
	margin-left: 8px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

/* Geltungsbereich und Hinweis zur Farbtreue */
.cge-group__meta {
	display: grid;
	gap: 4px 24px;
	margin: 0 0 28px;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
}

@media (min-width: 40rem) {
	.cge-group__meta {
		grid-template-columns: 7rem minmax(0, 1fr);
	}
}

.cge-group__meta dt {
	color: var(--brown-mid);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 14px;
	padding-top: 3px;
}

.cge-group__meta dd {
	margin: 0;
}

.cge-group__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 16px 10px;
	margin-bottom: 28px;
}

.cge-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.cge-tile[hidden] {
	display: none;
}

.cge-tile__dot {
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid transparent;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
	background-color: #fff;
	background-position: center;
	background-size: cover;
	transition: border-color 0.2s;
}

.cge-tile:hover .cge-tile__dot,
.cge-tile:focus-visible .cge-tile__dot {
	border-color: var(--green-light);
}

.cge-tile.active .cge-tile__dot {
	border-color: var(--green-deep);
}

.cge-tile__code {
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
	line-height: 1.3;
}

.cge-tile.active .cge-tile__code {
	color: var(--green-deep);
}

.cge-group__choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.cge-group__state {
	margin: 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 16px;
}

.cge-group__choice .btn-atc {
	flex: none;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.cge-group__choice .btn-atc.is-disabled {
	background: var(--taupe-light);
	color: var(--text-muted);
	cursor: not-allowed;
}

.cge-group[hidden] {
	display: none;
}

@media (max-width: 768px) {
	.cge-group__grid {
		grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
	}

	.cge-tile__dot {
		width: 48px;
		height: 48px;
	}
}

/* Hinweiskachel statt Lieferzeit auf der Seite des Zuschlagsprodukts */
.prod-trust--single {
	grid-template-columns: minmax(0, 1fr);
}

/* Sprung zum Farbkatalog: Symbol, Text und Pfeilspitze auf einer Linie,
   gefüllt wie „In den Warenkorb" – vorher stand das Symbol oben links, der
   Text mittig darunter, und nichts zeigte, dass die Fläche ein Link ist. Die
   Seite des Zuschlagsprodukts hat keinen Warenkorb-Knopf; der Sprung ist dort
   die Hauptaktion. Beim Überfahren hellt das Grün auf, die Spitze rückt nach
   unten. */
.prod-trust--single .prod-trust-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid var(--green-deep);
	border-radius: 1px;
	background: var(--green-deep);
	color: #fff;
	text-align: left;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.prod-trust--single .prod-trust-item:hover,
.prod-trust--single .prod-trust-item:focus-visible {
	border-color: var(--green-mid);
	background: var(--green-mid);
	color: #fff;
}

.prod-trust--single .prod-trust-icon {
	margin: 0;
	color: inherit;
}

.prod-trust--single .prod-trust-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	color: inherit;
}

.prod-trust--single .prod-trust-title {
	font-family: var(--sans);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prod-trust--single .prod-trust-sub {
	font-size: 15px;
	opacity: 0.8;
}

.prod-trust--single .prod-trust-arrow {
	display: flex;
	transition: transform 0.2s;
}

.prod-trust--single .prod-trust-item:hover .prod-trust-arrow,
.prod-trust--single .prod-trust-item:focus-visible .prod-trust-arrow {
	transform: translateY(3px);
}

/* Vollflächige Bänder – ähnliche Produkte, Farbkatalog – rechnen mit
   `calc(50% - 50vw)`. `vw` schließt die Bildlaufleiste ein, die Prozentangabe
   nicht; daraus entstehen ein paar Pixel Überstand und eine waagerechte
   Bildlaufleiste. `clip` schneidet sie ab, ohne wie `hidden` einen eigenen
   Scroll-Container zu erzeugen – klebende Elemente bleiben dadurch kleben. */
html,
body {
	overflow-x: clip;
}

/* Sprungmarken (#cge-farbkatalog, #reviews …) landen unter dem klebenden
   Kopfbereich statt dahinter. `--cge-kopf` misst theme.js an `.site-header`
   und hält es bei jeder Größenänderung nach – der Kopf ist auf dem Telefon
   höher als auf dem Desktop, und `--header-h` ist dort bewusst 0. Ohne
   Skript gilt die Desktop-Höhe. Dazu die Leiste von WordPress für
   angemeldete Redakteure und 16 Pixel Luft. */
html {
	scroll-padding-top: calc(var(--cge-kopf, 90px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

/* Hinweis unter dem Preis der Ausführung, sobald eine Sonderfarbe gewählt ist */
.price-surcharge {
	margin: 4px 0 0;
	color: var(--text-muted);
	font-family: var(--sans);
	font-size: 14px;
}

.price-surcharge[hidden] {
	display: none;
}

/* Eingebettete Videos in redaktionellen Bereichen.

   Der Einbettungscode bringt `width="100%"` und eine feste Höhe mit – eine
   Kombination, die nur bei einer bestimmten Breite aufgeht. Über das
   Seitenverhältnis wächst die Höhe mit der Breite, das Bild bleibt unverzerrt.

   Bewusst auf die Inhaltsbereiche begrenzt: Zahlungsdienste und Skripte legen
   ebenfalls Rahmen in die Seite, die unsichtbar bleiben müssen. */
.woocommerce-tabs .panel iframe,
.cge-entry-content iframe,
.cat-text iframe,
.woocommerce-product-details__short-description iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Beschriftungsspalte bleibt beim waagerechten Rollen stehen – sonst weiß man
   bei acht Ausführungen nach zwei Spalten nicht mehr, welche Zeile man liest.
   Der Hintergrund ist nötig, weil die Werte sonst darunter durchscheinen; er
   nimmt die Farbe der Seite auf, damit die Spalte nicht als heller Streifen
   erscheint. */
.cge-table-scroll {
	overscroll-behavior-x: contain;
}

.cge-variant-table thead td:first-child,
.cge-variant-table th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--page);
}

/* Auswahl mit vielen Ausführungen: gleich breite Kacheln statt einer Reihe
   unterschiedlich langer Knöpfe. Darunter steht jeweils der Preis, damit die
   Wahl ohne Durchklicken möglich ist. */
.variant-options--many {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 8px;
}

.variant-options--many .variant-btn {
	padding: 10px 14px;
	text-align: left;
}

.variant-btn__name {
	display: block;
}

.variant-btn__price {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	opacity: 0.75;
}

/* In der schmalen Reihe – bis vier Ausführungen – steht der Preis daneben. */
.variant-options:not(.variant-options--many) .variant-btn {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

/* Warenkorb-Knopf im Datenblatt wie der über der Tabelle. `.btn-atc` bringt aus
   der Warenkorbzeile nur waagerechten Innenabstand mit – seine Höhe stammt dort
   aus der Flex-Zeile neben der Mengenauswahl. In der Tabellenzelle fehlt dieser
   Bezug, deshalb hier die Mindesthöhe. */
.cge-variant-table .btn-atc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
}

/* Der Zähler verschwindet, solange der Warenkorb leer ist. Das hidden-Attribut
   muss dafür die Anzeigeregel schlagen. */
.cart-count[hidden] {
	display: none;
}

/* Symbole in Kacheln und Hinweisen: mittig gesetzt, in der Farbe des Umfelds. */
.prod-trust-icon {
	display: flex;
	justify-content: center;
	color: var(--green-mid);
}



.inquiry-text .cge-icon {
	display: inline-block;
	vertical-align: -4px;
	margin-right: 6px;
	color: var(--green-mid);
}

/* Pfeil im Aufklappmenü und in der Übersichtszeile des Mega-Menüs. */
.nav-toggle-icon {
	display: inline-flex;
	margin-left: 2px;
}

.mega-overview .cge-icon {
	display: inline-block;
	vertical-align: -4px;
	margin-left: 4px;
}

/* Symbole in der Topbar stehen auf der Zeile. */
.topbar .cge-icon {
	display: inline-block;
	vertical-align: -3px;
}

.topbar-contact__text {
	margin-left: 8px;
}