@charset "UTF-8";

/* ==========================================================
   NeubauGrundrisse.de — Gestaltung ueber Blocksy
   Uebertragen aus der Vorschau-Website (_Web/assets/stil.css).
   Farben und Rundung stehen ganz oben: dort aendern, wirkt ueberall.

   Hinweis zur Schreibweise: Die Farbwerte stehen bewusst mit
   "html:root" davor. Blocksy schreibt seine eigenen Werte spaeter
   im Quelltext als ":root" hinein — die staerkere Schreibweise
   gewinnt unabhaengig von der Reihenfolge.
   ========================================================== */

html:root {
	--sand:          #F7F2EA;   /* Seitenhintergrund */
	--papier:        #FFFBF5;   /* Karten */
	--creme:         #EDE2D2;   /* Bildflaechen */
	--rand:          #E4D7C4;   /* Linien */
	--dunkel:        #241F19;   /* Text, Ueberschriften */
	--lesetext:      #453D34;   /* Fliesstext, etwas weicher */
	--grau:          #6E6458;   /* Nebentext */
	--akzent:        #A7C7E7;   /* helles Blau, nur noch als Flaeche */
	--akzent-hover:  #8FB3D9;
	--akzent-dunkel: #2C5A7C;   /* Primaerfarbe: Knoepfe, Links, Rahmen */
	--rd:            16px;      /* alter Wert, wird unten abgeloest */

	/* ---- Ueberarbeitung 21.08.2026 ----
	   Textfarben kraeftiger, genau zwei Rundungen, feste Abstaende.
	   Die alten Werte darueber bleiben stehen, damit nichts bricht —
	   massgeblich sind die hier. */

	--text:        #33302B;   /* Fliesstext, warmes Anthrazit  11,5:1 auf Sand */
	--text-leise:  #5A5249;   /* Nebentext                      6,6:1 auf Sand */
	--blau:        #2C5A7C;   /* Primaer                        6,4:1 auf Sand */
	--blau-tief:   #1F4560;   /* Primaer gedrueckt */
	--blau-hauch:  #EAF3FA;   /* zarte Blauflaeche fuer Auswahl */

	/* Genau zwei Rundungen: eine fuer Flaechen, eine fuer Knoepfe */
	--rd-flaeche:  12px;
	--rd-knopf:     8px;

	/* Abstandsskala — nur diese Werte verwenden */
	--ab-1:  8px;
	--ab-2: 16px;
	--ab-3: 24px;
	--ab-4: 48px;
	--ab-5: 96px;

	/* Abstand zwischen zwei Abschnitten mit Ueberschrift.
	   Steht bewusst getrennt: Das ist der Wert, an dem man beim
	   Feinjustieren zuerst dreht. */
	--ab-abschnitt: 32px;

	/* ---- Blocksy-Farbpalette umbelegen ---- */
	--theme-palette-color-1: #2C5A7C;   /* Akzent kraeftig  */
	--theme-palette-color-2: #1F4560;   /* Akzent, dunkler  */
	--theme-palette-color-3: #241F19;   /* Ueberschriften   */
	--theme-palette-color-4: #453D34;   /* Fliesstext       */
	--theme-palette-color-5: #E4D7C4;   /* Linien           */
	--theme-palette-color-6: #EDE2D2;   /* Flaechen         */
	--theme-palette-color-7: #FFFBF5;   /* Karten           */
	--theme-palette-color-8: #F7F2EA;   /* Seitengrund      */

	/* ---- Blocksy-Grundwerte ---- */
	--theme-font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--theme-font-weight: 400;
	--theme-font-size: 17px;
	--theme-line-height: 1.6;

	--theme-text-color: #453D34;
	--theme-headings-color: #241F19;
	--theme-link-initial-color: #2C5A7C;
	--theme-link-hover-color: #241F19;
	--theme-border-color: #E4D7C4;

	--theme-button-background-initial-color: #A7C7E7;
	--theme-button-background-hover-color: #8FB3D9;
	--theme-button-text-initial-color: #241F19;
	--theme-button-text-hover-color: #241F19;
	--theme-button-border-radius: 999px;
	--theme-button-padding: 13px 24px;
	--theme-button-min-height: 46px;

	--theme-border-radius: 16px;
	--theme-normal-container-max-width: 1200px;
	--theme-content-spacing: 1.5em;
}

/* ---------------- Grundgeruest ---------------- */

body {
	background-color: var(--sand);
	color: var(--lesetext);
	font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	color: var(--dunkel);
	letter-spacing: -.02em;
	text-wrap: balance;
}

a { color: var(--akzent-dunkel); }
a:hover { color: var(--dunkel); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--akzent-dunkel);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Zahlen in Preisen, Flaechen und Maßen gleich breit setzen —
   dadurch stehen Betraege in Listen sauber untereinander. */
.price, .amount, .woocommerce-Price-amount,
.shop_attributes td, .quantity input {
	font-variant-numeric: tabular-nums;
}

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

.ct-header [data-row] {
	background-color: var(--sand);
}

.site-title,
.site-title a {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--dunkel);
}

.header-menu-1 > li > a,
.menu-item > a {
	color: #5C5348;
	font-size: 15px;
}

.menu-item > a:hover,
.current-menu-item > a {
	color: var(--dunkel);
}

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

.ct-button,
.ct-button-ghost,
.wp-element-button,
.wp-block-button__link,
button:not(.ct-media-container):not([class*="ct-toggle"]):not(.components-button),
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--akzent);
	color: var(--dunkel);
	border: 1px solid var(--akzent);
	border-radius: 999px;
	font-family: 'Karla', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	padding: 13px 24px;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ct-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--akzent-hover);
	border-color: var(--akzent-hover);
	color: var(--dunkel);
}

/* Der grosse Kaufknopf auf der Produktseite */
.woocommerce div.product form.cart .button,
.woocommerce .single_add_to_cart_button {
	width: 100%;
	padding: 16px 22px;
	font-size: 17px;
	min-height: 56px;
}

/* Zweitrangige Knoepfe (z. B. "Warenkorb ansehen") heller halten,
   damit der eigentliche Kaufknopf der auffaelligste bleibt. */
.woocommerce .added_to_cart,
.woocommerce a.button.wc-forward:not(.checkout-button) {
	background-color: var(--papier);
	border-color: var(--rand);
	color: var(--dunkel);
	font-weight: 600;
}

.woocommerce .added_to_cart:hover,
.woocommerce a.button.wc-forward:not(.checkout-button):hover {
	background-color: var(--creme);
	border-color: var(--rand);
}

/* ---------------- Karten im Katalog ---------------- */

.woocommerce ul.products li.product,
.entry-card,
.ct-image-container + .entry-meta,
[data-products] .product {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	overflow: hidden;
}

.woocommerce ul.products li.product:hover,
.entry-card:hover {
	border-color: #CFBFA6;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dunkel);
	padding: 0 18px;
	margin-bottom: 2px;
}

.woocommerce ul.products li.product .price {
	color: var(--dunkel);
	font-size: 16px;
	font-weight: 700;
	padding: 0 18px;
}

.woocommerce ul.products li.product .price del {
	color: var(--grau);
	font-weight: 400;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .ct-woo-card-actions {
	margin: 12px 18px 18px;
}

/* Bildflaeche der Karte in der ruhigen Cremefarbe */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product img {
	background-color: var(--creme);
}

/* Haeuser sind breiter als hoch. Blocksy stellt die Kartenbilder von
   Haus aus hochkant (3:4) — dabei verschwinden die Seiten des Hauses
   und von einem Grundriss bliebe nur ein Ausschnitt. */
.woocommerce ul.products li.product .ct-media-container {
	aspect-ratio: 3 / 2;
}

.woocommerce ul.products li.product .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

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

.woocommerce div.product .product_title {
	font-size: clamp(27px, 4.4vw, 34px);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 4px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dunkel);
	font-size: 26px;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--lesetext);
	font-size: 16.5px;
}

/* Grosse Bildflaeche wie im Entwurf */
.woocommerce div.product div.images img,
.woocommerce div.product .flex-viewport {
	background-color: var(--creme);
	border-radius: calc(var(--rd) + 4px);
}

/* Auswahl der Kaufstufe ("Umfang") */
.woocommerce div.product form.cart .variations {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 16px 18px;
	margin-bottom: 16px;
	width: 100%;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations label {
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--grau);
}

.woocommerce div.product form.cart .variations select {
	background-color: var(--sand);
	border: 1.5px solid var(--rand);
	border-radius: calc(var(--rd) * .75);
	color: var(--dunkel);
	font-size: 16px;
	font-weight: 600;
	padding: 12px 14px;
	min-height: 52px;
	width: 100%;
}

.woocommerce div.product form.cart .variations select:hover {
	border-color: #CFBFA6;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-bottom: 12px;
}

/* Steckbrief — die Tabelle unter "Zusaetzliche Informationen" */
.woocommerce div.product .shop_attributes,
.woocommerce-Tabs-panel--additional_information table {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--rand);
	padding: 12px 20px;
	font-size: 15px;
}

.woocommerce div.product .shop_attributes tr:last-child th,
.woocommerce div.product .shop_attributes tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .shop_attributes th {
	color: var(--grau);
	font-weight: 400;
	text-align: left;
	width: 45%;
}

.woocommerce div.product .shop_attributes td {
	color: var(--dunkel);
	font-weight: 700;
	text-align: right;
}

.woocommerce div.product .shop_attributes td p { margin: 0; }

/* Reiter oberhalb des Steckbriefs */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 999px;
	margin: 0 8px 8px 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: #4A4238;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 17px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--dunkel);
	border-color: var(--dunkel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sand);
	font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

/* ---------------- Hinweise, Warenkorb, Kasse ---------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-top-width: 1px;
	border-radius: var(--rd);
	color: var(--lesetext);
	padding: 16px 20px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--akzent-dunkel);
}

.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table,
.woocommerce-cart .cart_totals table {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--rand);
	padding: 14px 18px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	background-color: var(--papier);
	border: 1.5px solid var(--rand);
	border-radius: calc(var(--rd) * .55);
	color: var(--dunkel);
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 16px;
	padding: 12px 14px;
	min-height: 50px;
}

.woocommerce form .form-row label {
	color: var(--grau);
	font-size: 14px;
	font-weight: 600;
}

/* Die Pflicht-Kaestchen an der Kasse (AGB, Widerruf bei Downloads)
   deutlich sichtbar halten — sie sind rechtlich der wichtigste Teil
   des Bestellvorgangs. */
.woocommerce-terms-and-conditions-wrapper .form-row,
.wc-gzd-checkbox-placeholder {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: calc(var(--rd) * .75);
	padding: 14px 16px;
	margin-bottom: 10px;
}

.wc-gzd-checkbox-placeholder label,
.woocommerce-terms-and-conditions-wrapper label {
	color: var(--lesetext);
	font-size: 14.5px;
	font-weight: 400;
}

/* Kleingedrucktes von Germanized (Preisangaben, Lieferzeit, Steuer) */
.wc-gzd-additional-info,
.woocommerce-de_price_taxrate,
.wc-gzd-tax-info,
small.includes_tax {
	color: var(--grau);
	font-size: 13px;
	font-weight: 400;
}

/* ---------------- Fuss ---------------- */

.ct-footer [data-row] {
	background-color: var(--dunkel);
	color: #B7ADA0;
	font-size: 14px;
}

.ct-footer a,
.ct-footer .menu-item > a {
	color: #B7ADA0;
}

.ct-footer a:hover,
.ct-footer .menu-item > a:hover {
	color: var(--sand);
}

.ct-footer .site-title,
.ct-footer strong,
.ct-footer b {
	color: var(--sand);
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ---------------- Kleinigkeiten ---------------- */

.woocommerce-breadcrumb,
.ct-breadcrumbs {
	color: var(--grau);
	font-size: 13.5px;
}

.woocommerce .quantity input.qty {
	background-color: var(--papier);
	border: 1.5px solid var(--rand);
	border-radius: calc(var(--rd) * .55);
	color: var(--dunkel);
	min-height: 50px;
}

hr, .ct-divider {
	border-color: var(--rand);
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ==========================================================
   Startseite
   Die Bausteine tragen eigene Klassen (ng-...), damit sie sich
   im Baukasten bearbeiten lassen und trotzdem hier gestaltet
   werden koennen.
   ========================================================== */

/* ---------------- Aufmacher ---------------- */

.ng-hero { padding: 8px 0 40px; }

.ng-hero-raster { gap: 44px; }

.ng-hero-titel {
	font-size: clamp(34px, 5.4vw, 50px);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 18px;
	max-width: 16ch;
}

.ng-hero-titel em {
	font-style: normal;
	color: var(--akzent-dunkel);
}

.ng-hero-text {
	font-size: 18px;
	color: #5C5348;
	max-width: 46ch;
	margin: 0 0 26px;
}

.ng-hero-knoepfe { gap: 12px; }

/* Der erste Knopf im Aufmacher ("Grundrisse ansehen") ist die
   wichtigste Handlung der ganzen Seite — volles Blau wie der
   Kaufknopf, nicht der Umriss-Ton der zweiten Knopfstufe weiter
   unten. Eigens fuer den Aufmacher, damit die allgemeine Stufung
   an anderer Stelle (Warenkorb, Filter) unangetastet bleibt. */
.ng-hero-knoepfe .wp-block-button:not(.ng-knopf-hell):not(.ng-knopf-creme) .wp-block-button__link {
	background-color: var(--blau);
	border: 1px solid var(--blau);
	color: #FFFFFF;
}

.ng-hero-knoepfe .wp-block-button:not(.ng-knopf-hell):not(.ng-knopf-creme) .wp-block-button__link:hover {
	background-color: var(--blau-tief);
	border-color: var(--blau-tief);
	color: #FFFFFF;
}

/* Zweiter Knopf, sichtbar aber zurueckhaltender: gefuellt wie die
   "Alle ansehen"-Kachel (.ng-typ-alle), nicht der reine Textlink
   von .ng-knopf-hell. */
.ng-knopf-creme .wp-block-button__link {
	background-color: var(--creme);
	border: 1px solid var(--rand);
	color: var(--dunkel);
	font-weight: 700;
}

.ng-knopf-creme .wp-block-button__link:hover {
	background-color: var(--rand);
	border-color: var(--rand);
	color: var(--dunkel);
}

.ng-hero-bild {
	background-color: var(--creme);
	border-radius: calc(var(--rd) + 4px);
	padding: 24px;
}

.ng-hero-bild svg { width: 100%; height: auto; display: block; }

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

.ng-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 48px;
}

@media (max-width: 860px) {
	.ng-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ng-band > div {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 16px 18px;
}

.ng-band b {
	display: block;
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
}

.ng-band span { font-size: 13.5px; color: var(--grau); }

/* ---------------- Abschnitts-Ueberschriften ---------------- */

.ng-abschnitt-titel {
	font-size: clamp(24px, 3.4vw, 28px);
	font-weight: 700;
	margin: 0 0 4px;
}

.ng-abschnitt-unter {
	font-size: 15px;
	color: var(--grau);
	margin: 0 0 22px;
}

/* ---------------- Haustypen-Kacheln ---------------- */

.ng-typen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 48px;
}

@media (max-width: 980px) {
	.ng-typen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.ng-typen { grid-template-columns: 1fr; }
}

.ng-typ {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	text-decoration: none;
	color: var(--dunkel);
}

.ng-typ:hover {
	border-color: var(--akzent-dunkel);
	color: var(--dunkel);
}

.ng-typ svg {
	width: 46px;
	height: 36px;
	flex: none;
	color: var(--akzent-dunkel);
}

.ng-typ b { font-size: 16px; font-weight: 700; }

.ng-typ-alle {
	background-color: var(--creme);
	border-style: dashed;
}

/* ---------------- Flat-Banner ---------------- */

.ng-flat {
	background-color: var(--dunkel);
	color: var(--sand);
	border-radius: calc(var(--rd) + 4px);
	padding: 34px 38px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 30px;
	align-items: center;
	margin: 8px 0 40px;
}

@media (max-width: 860px) {
	.ng-flat { grid-template-columns: 1fr; padding: 28px 24px; }
}

.ng-flat h2 {
	font-size: clamp(24px, 4vw, 29px);
	font-weight: 700;
	color: var(--sand);
	margin: 0 0 10px;
}

.ng-flat p {
	margin: 0 0 12px;
	font-size: 16px;
	color: #C9BFB2;
	max-width: 48ch;
}

.ng-flat-umfang b { color: var(--sand); }

.ng-flat-preise { display: grid; gap: 12px; }

.ng-flat-karte {
	background-color: #302A22;
	border: 1px solid #4A4238;
	border-radius: var(--rd);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ng-flat-karte-hervor {
	background-color: var(--akzent);
	border-color: var(--akzent);
	color: var(--dunkel);
}

.ng-flat-etikett {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #B7ADA0;
}

.ng-flat-karte-hervor .ng-flat-etikett { color: var(--akzent-dunkel); }

.ng-flat-preis {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sand);
	font-variant-numeric: tabular-nums;
}

.ng-flat-karte-hervor .ng-flat-preis { color: var(--dunkel); }

.ng-flat-klein { font-size: 13px; color: #B7ADA0; }

.ng-flat-karte-hervor .ng-flat-klein { color: #2F4A5E; }

/* Kaufknoepfe in den Flat-Karten */
.ng-flat-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 12px 22px;
	min-height: 46px;
	border-radius: 999px;
	background-color: var(--sand);
	border: 1px solid var(--sand);
	color: var(--dunkel);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
}

.ng-flat-knopf:hover {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--dunkel);
}

/* In der dunklen Karte der zurueckhaltendere Knopf */
.ng-flat-karte:not(.ng-flat-karte-hervor) .ng-flat-knopf-hell {
	background-color: transparent;
	border-color: #6E6458;
	color: var(--sand);
}

.ng-flat-karte:not(.ng-flat-karte-hervor) .ng-flat-knopf-hell:hover {
	background-color: #3A322A;
	border-color: #8A7F71;
	color: var(--sand);
}

.ng-flat-etikett em {
	font-style: normal;
	font-weight: 700;
}

.ng-flat-steuer {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: #B7ADA0;
	text-align: right;
}

/* ==========================================================
   Nachbesserungen gegen Blocksys eigene Vorgaben
   Blocksy schreibt einige Werte spaeter im Quelltext und mit
   staerkeren Schreibweisen. Die Regeln hier ziehen bewusst
   nach — jeweils mit einer Begruendung, was ueberstimmt wird.
   ========================================================== */

/* Blocksy setzt "body { background: var(--theme-palette-color-7) }"
   spaeter im Quelltext. "html body" ist staerker und gewinnt. */
html body {
	background-color: var(--sand);
}

/* Kopfbereich auf denselben Grund wie die Seite */
html body .ct-header,
html body .ct-header [data-row] {
	background-color: var(--sand);
}

/* Auf der Startseite steht sonst gross "Startseite" ueber dem
   Aufmacher — dort ist der Aufmacher selbst die Ueberschrift. */
body.home .hero-section,
body.home .page-title {
	display: none;
}

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

/* Blocksys Fuss wird durch unseren ersetzt (siehe functions.php).
   Er traegt eine ID, deshalb hier ebenfalls mit ID ausschalten. */
#footer.ct-footer {
	display: none;
}

.ng-fuss {
	background-color: var(--dunkel);
	color: #B7ADA0;
	font-size: 14px;
	margin-top: 40px;
}

.ng-fuss-inhalt {
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 24px;
	display: flex;
	align-items: center;
	gap: 18px 26px;
	flex-wrap: wrap;
}

.ng-fuss-marke {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	color: var(--sand);
}

.ng-fuss-links { margin-left: auto; }

@media (max-width: 640px) {
	.ng-fuss-links { margin-left: 0; width: 100%; }
}

.ng-fuss-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.ng-fuss-liste a {
	color: #B7ADA0;
	text-decoration: none;
}

.ng-fuss-liste a:hover {
	color: var(--sand);
}

/* ---------------- Katalogkarte: Feinschliff ---------------- */

/* Der Titel ist ein Link und wuerde sonst blau erscheinen. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product h2 a {
	color: var(--dunkel);
}

.woocommerce ul.products li.product h2 a:hover {
	color: var(--akzent-dunkel);
}

/* Kategorie-Zeile und das Kleingedruckte von Germanized standen
   bisher ohne Innenabstand am Kartenrand. */
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .wc-gzd-additional-info {
	padding-left: 18px;
	padding-right: 18px;
	margin-top: 0;
	margin-bottom: 6px;
}

.woocommerce ul.products li.product .entry-meta {
	font-size: 13px;
	color: var(--grau);
}

.woocommerce ul.products li.product .wc-gzd-additional-info:last-child {
	padding-bottom: 16px;
}

/* Bildflaeche in der ruhigen Cremefarbe, auch wenn noch kein
   Produktbild hinterlegt ist. */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container {
	background-color: var(--creme);
	margin: 0;
}

/* "ab" vor dem Einstiegspreis kleiner und zurueckhaltender */
.ng-ab {
	font-weight: 400;
	font-size: .8em;
	color: var(--grau);
}

/* ---------------- Seitenkopf (Titelbereich) ---------------- */

/* Blocksy stellt den Seitentitel gross und mittig mit viel Luft.
   Der Entwurf setzt ihn links und kompakter. */
.hero-section {
	padding: 20px 0 14px !important;
	min-height: 0 !important;
	text-align: left;
}

.hero-section .page-title,
.hero-section .entry-title {
	font-size: clamp(28px, 4.4vw, 34px);
	font-weight: 700;
	margin: 0;
	text-align: left;
}

.hero-section .entry-header-meta,
.hero-section .ct-breadcrumbs {
	justify-content: flex-start;
}

/* Sortierauswahl und Ergebniszahl im Entwurfsstil */
.woocommerce .woocommerce-result-count {
	color: var(--grau);
	font-size: 15px;
}

.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 999px;
	color: #4A4238;
	font-size: 14px;
	padding: 9px 17px;
	min-height: 40px;
}

/* Blocksy gibt dem Titelblock eine Mindesthoehe von 250 px, 50 px
   Innenabstand und zentriert ihn in einem schmalen Container. Das
   erzeugt die grosse Leere ueber dem Inhalt. Hier zurueckgenommen
   und auf dieselbe Breite wie der Inhalt gebracht. */
.hero-section .entry-header,
.hero-section header {
	min-height: 0 !important;
	padding: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--theme-normal-container-max-width, 1200px);
	width: 100%;
	display: block;
}

/* ==========================================================
   Produktseite nach dem Entwurf
   Aufbau siehe inc/produktseite.php
   ========================================================== */

/* Bild links, Kaufbox rechts — im Entwurf etwas breiter als bei
   Blocksy voreingestellt. */
.woocommerce div.product .ct-container,
.single-product .product .woocommerce-product-gallery {
	--ng-lueckenmass: 34px;
}

.woocommerce div.product div.images {
	margin-bottom: 0;
}

.woocommerce div.product div.images img {
	background-color: var(--creme);
	border-radius: calc(var(--rd) + 4px);
}

/* Artikelnummer unter dem Titel */
.ng-artikelnummer {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9A8E7E;
	margin: 0 0 16px;
}

/* ---------------- Steckbrief ---------------- */

.ng-steck {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.ng-steck dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
	font-size: 15px;
}

.ng-steck dt { color: var(--grau); }

.ng-steck dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
}

/* ---------------- Kaufstufen ---------------- */

/* Die Auswahlliste bleibt im Formular, damit WooCommerce weiter
   damit rechnet — sichtbar sind nur die Karten. */
.ng-versteckt {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ng-stufen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

/* Doppelte Angaben in der Kaufbox ausblenden.
   Blocksy setzt eigene Bausteine ein, die sich nicht ueber die
   ueblichen WooCommerce-Haken entfernen lassen. Jede dieser Angaben
   steht auf derselben Seite weiterhin sichtbar an der richtigen
   Stelle: Preis in den Kaufstufen und auf dem Knopf, Steuerhinweis
   darunter, Beschreibungstext im Abschnitt "Fuer wen dieser Entwurf
   gedacht ist", Artikelnummer direkt unter dem Titel. */
.single-product .summary > .price,
.single-product .entry-summary > .price,
.single-product .summary .legal-price-info,
.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary > .product_meta,
.single-product .summary > .ct-product-divider {
	display: none;
}

/* Leere Huellen von Germanized nehmen sonst Platz weg */
.single-product .summary .wc-gzd-additional-info:empty {
	display: none;
	margin: 0;
}

.ng-stufe {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: var(--papier);
	border: 1.5px solid var(--rand);
	border-radius: calc(var(--rd) * .88);
	padding: 15px 16px;
	cursor: pointer;
	min-height: 62px;
	margin: 0;
}

.ng-stufe:hover { border-color: #CFBFA6; }

.ng-stufe.ist-gewaehlt {
	border-color: var(--akzent-dunkel);
	background-color: #EAF3FA;
}

.ng-stufe-box {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.ng-radio {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 2px solid #CBBDA9;
	flex: none;
	position: relative;
}

.ng-stufe.ist-gewaehlt .ng-radio { border-color: var(--akzent-dunkel); }

.ng-stufe.ist-gewaehlt .ng-radio::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 999px;
	background-color: var(--akzent-dunkel);
}

.ng-stufe-box:focus-visible + .ng-radio {
	outline: 3px solid var(--akzent-dunkel);
	outline-offset: 3px;
}

.ng-stufe-text b {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--dunkel);
}

.ng-stufe-text > span {
	font-size: 13px;
	color: var(--grau);
}

.ng-stufe-preis {
	margin-left: auto;
	font-weight: 700;
	font-size: 16px;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ng-stufe-preis .woocommerce-Price-amount { font-weight: 700; }

.ng-knopf-preis { font-variant-numeric: tabular-nums; }

/* ---------------- Steuerhinweis, Flat-Zeile, Rechtshinweis ---------------- */

.ng-steuerhinweis {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--grau);
	text-align: center;
}

.ng-flat-zeile {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--grau);
	text-align: center;
}

.ng-flat-zeile a { color: var(--akzent-dunkel); }

.ng-recht {
	margin-top: 16px;
	background-color: #F2EADD;
	border-radius: calc(var(--rd) * .75);
	padding: 14px 16px;
	font-size: 13.5px;
	color: #5C5348;
	line-height: 1.5;
}

/* ---------------- Text und haeufige Fragen ---------------- */

.ng-text-zwei {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 34px;
	padding: 34px 0 44px;
}

@media (max-width: 900px) {
	.ng-text-zwei { grid-template-columns: 1fr; gap: 28px; }
}

.ng-text-zwei h2 {
	font-size: 23px;
	font-weight: 700;
	margin: 0 0 12px;
}

.ng-text-zwei p {
	font-size: 16px;
	color: var(--lesetext);
	margin: 0 0 14px;
	max-width: 62ch;
}

.ng-faq {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 4px 20px;
}

.ng-faq details { border-bottom: 1px solid var(--rand); }
.ng-faq details:last-child { border-bottom: 0; }

.ng-faq summary {
	padding: 15px 0;
	font-size: 15.5px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--dunkel);
}

.ng-faq summary::-webkit-details-marker { display: none; }

.ng-faq summary svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--akzent-dunkel);
	transition: transform .2s;
}

.ng-faq details[open] summary svg { transform: rotate(180deg); }

.ng-faq p {
	margin: 0 0 15px;
	font-size: 15px;
	color: var(--lesetext);
}

/* ==========================================================
   Katalog- und Kategorieseiten
   Aufbau siehe inc/katalog.php
   ========================================================== */

/* ---------------- Schnellwahl der Haustypen ---------------- */

.ng-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 22px;
}

.ng-chip {
	font-size: 14px;
	padding: 9px 16px;
	border-radius: 999px;
	background-color: var(--papier);
	border: 1px solid var(--rand);
	color: #4A4238;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ng-chip:hover {
	border-color: var(--akzent-dunkel);
	color: var(--dunkel);
}

.ng-chip.ist-an {
	background-color: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--sand);
	font-weight: 700;
}

/* ---------------- Zweispalter ---------------- */

.ng-katalog {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding-bottom: 52px;
}

@media (max-width: 900px) {
	.ng-katalog { grid-template-columns: 1fr; }
}

.ng-katalog-inhalt { min-width: 0; }

/* ---------------- Filterspalte ---------------- */

.ng-filter-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.ng-f-block {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 16px 18px;
}

.ng-f-block h2 {
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--grau);
	margin: 0 0 12px;
}

.ng-f-zeile {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15px;
	color: #3B342C;
	padding: 7px 0;
	cursor: pointer;
	min-height: 40px;
	position: relative;
	margin: 0;
}

.ng-f-box {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.ng-kasten {
	width: 20px;
	height: 20px;
	border-radius: calc(var(--rd) * .38);
	border: 1.5px solid #CBBDA9;
	background-color: var(--sand);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-kasten svg {
	width: 12px;
	height: 12px;
	color: var(--dunkel);
	opacity: 0;
}

.ng-f-box:checked + .ng-kasten {
	background-color: var(--akzent);
	border-color: var(--akzent);
}

.ng-f-box:checked + .ng-kasten svg { opacity: 1; }

.ng-f-box:focus-visible + .ng-kasten {
	outline: 3px solid var(--akzent-dunkel);
	outline-offset: 3px;
}

.ng-f-zeile:hover .ng-kasten { border-color: var(--akzent-dunkel); }

.ng-f-name { flex: 1; }

.ng-f-anz {
	margin-left: auto;
	font-size: 12.5px;
	color: #9A8E7E;
	font-variant-numeric: tabular-nums;
}

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

.ng-filter-anwenden {
	background-color: var(--akzent);
	color: var(--dunkel);
	border: 1px solid var(--akzent);
	border-radius: 999px;
	font-family: 'Karla', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	min-height: 46px;
	cursor: pointer;
	flex: 1;
}

.ng-filter-anwenden:hover {
	background-color: var(--akzent-hover);
	border-color: var(--akzent-hover);
}

.ng-filter-zuruecksetzen {
	font-size: 14px;
	color: var(--grau);
	text-decoration: underline;
}

.ng-f-fussnote {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #8A7F71;
	border-top: 1px solid var(--rand);
	padding-top: 10px;
}

/* ---------------- Kein Treffer ---------------- */

.ng-keine-treffer {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 24px 26px;
}

.ng-keine-treffer p { margin: 0 0 8px; }
.ng-keine-treffer p:last-child { margin-bottom: 0; }

/* ---------------- Aehnliche Grundrisse ---------------- */

.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
	font-size: clamp(24px, 3.4vw, 28px);
	font-weight: 700;
	margin: 0 0 22px;
}

/* ---------------- Brotkrumen ---------------- */

.woocommerce-breadcrumb,
.ct-breadcrumbs {
	font-size: 13.5px;
	color: var(--grau);
	margin-bottom: 8px;
}

.woocommerce-breadcrumb a,
.ct-breadcrumbs a { color: var(--grau); }

.woocommerce-breadcrumb a:hover,
.ct-breadcrumbs a:hover { color: var(--dunkel); }

/* ==========================================================
   Handy und schmale Bildschirme
   Geprueft bei 375 Pixel Breite.
   ========================================================== */

/* ---------------- Filter hinter einer Schaltflaeche ---------------- */

/* Das Ankreuzfeld steuert nur das Auf- und Zuklappen und wird
   nie angezeigt — sichtbar ist die Beschriftung daneben. */
.ng-filter-schalter-box {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* Am Rechner steht die Filterspalte ohnehin offen daneben */
.ng-filter-schalter { display: none; }

@media (max-width: 900px) {
	.ng-filter-schalter {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: var(--papier);
		border: 1px solid var(--rand);
		border-radius: var(--rd);
		padding: 14px 18px;
		margin-bottom: 14px;
		font-weight: 700;
		font-size: 16px;
		color: var(--dunkel);
		min-height: 52px;
		cursor: pointer;
	}

	.ng-filter-schalter svg {
		width: 20px;
		height: 20px;
		flex: none;
		color: var(--akzent-dunkel);
	}

	.ng-filter-marke {
		margin-left: auto;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--dunkel);
		background-color: var(--akzent);
		border-radius: 999px;
		padding: 3px 11px;
	}

	.ng-filter-schalter-box:focus-visible + .ng-filter-schalter {
		outline: 3px solid var(--akzent-dunkel);
		outline-offset: 3px;
	}

	/* Zugeklappt: Filter ausblenden, damit die Grundrisse gleich
	   sichtbar sind und nicht erst nach langem Scrollen kommen. */
	.ng-filter-schalter-box:not(:checked) ~ .ng-filter-form {
		display: none;
	}
}

/* ---------------- Haustypen als Streifen ---------------- */

@media (max-width: 900px) {
	/* Acht Kacheln brauchen umgebrochen fuenf Zeilen und schieben den
	   Katalog nach unten. Als seitlich schiebbarer Streifen bleiben
	   sie erreichbar, ohne Platz zu kosten. */
	.ng-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 16px;
		-webkit-overflow-scrolling: touch;
	}

	.ng-chips::-webkit-scrollbar { display: none; }

	.ng-chip { flex: none; }
}

/* ---------------- Groessere Tippflaechen ---------------- */

@media (max-width: 900px) {
	/* Fingerbreite statt Mauszeiger: Blocksys Menuezeichen ist von
	   Haus aus nur rund 18 Pixel hoch. */
	.ct-header-trigger,
	.ct-toggle-close {
		min-width: 44px;
		min-height: 44px;
	}

	/* Rechtslinks im Fuss standen zu eng untereinander */
	.ng-fuss-liste {
		gap: 0 20px;
		width: 100%;
	}

	.ng-fuss-liste a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Produkttitel und Haustyp in der Karte gross genug zum Antippen */
	.woocommerce ul.products li.product .woocommerce-loop-product__title a {
		display: inline-block;
		padding: 4px 0;
	}

	.woocommerce ul.products li.product .entry-meta a {
		display: inline-block;
		padding: 8px 0;
	}

	/* ---------------- Kasse ---------------- */

	/* Der Zahlungsbereich ragte um wenige Pixel ueber den Rand
	   hinaus und wurde dadurch am Rahmen beschnitten. */
	.woocommerce-checkout-payment,
	.woocommerce-checkout #payment,
	.wc_payment_methods {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Der wichtigste Knopf der ganzen Seite war nur 138 Pixel breit */
	.woocommerce-checkout #place_order {
		width: 100%;
		min-height: 56px;
		font-size: 17px;
	}
}

/* ==========================================================
   ÜBERARBEITUNG 21.08.2026
   Kontrast, Knopfhierarchie, weniger Rahmen.
   Dieser Abschnitt steht bewusst am Ende und hat damit
   Vorrang vor den Regeln darueber.
   ========================================================== */

/* ---------------- 3. Textfarben kraeftiger ---------------- */

html body {
	color: var(--text);
}

html body p,
html body li,
html body dd,
.ng-hero-text,
.ng-text-zwei p,
.ng-faq p,
.entry-content p {
	color: var(--text);
}

/* Nebentext bleibt leiser, aber nicht mehr blass */
.ng-abschnitt-unter,
.ng-band span,
.ng-artikelnummer,
.ng-steck dt,
.ng-flat-zeile,
.woocommerce .woocommerce-result-count,
.ng-f-fussnote,
.ng-f-anz,
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .wc-gzd-additional-info {
	color: var(--text-leise);
}

/* Hinweisbox stand mit sehr hellem Braun da */
.ng-recht {
	color: var(--text-leise);
}

/* ---------------- 1. + 2. Knopfhierarchie ---------------- */

/* --- Primaer: nur Kauf und Warenkorb. Volles Dunkelblau. --- */
.woocommerce .single_add_to_cart_button,
.woocommerce div.product form.cart .button,
.woocommerce-checkout #place_order,
.woocommerce .checkout-button,
.woocommerce a.button.checkout,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--blau);
	border: 1px solid var(--blau);
	border-radius: var(--rd-knopf);
	color: #FFFFFF;
	font-weight: 700;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.button.checkout:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--blau-tief);
	border-color: var(--blau-tief);
	color: #FFFFFF;
}

/* --- Sekundaer: Umriss, blauer Rand und Text ---
   Der Aufmacher ist hier bewusst ausgenommen — dort gilt die eigene
   Stufung weiter oben (.ng-hero-knoepfe), seit der zweite Knopf im
   Aufmacher ("Grundrisse ansehen") zum Primaerknopf wurde. */
.woocommerce ul.products li.product a.button,
.ng-filter-anwenden,
.woocommerce .added_to_cart,
.woocommerce a.button.wc-forward:not(.checkout-button) {
	background-color: transparent;
	border: 1.5px solid var(--blau);
	border-radius: var(--rd-knopf);
	color: var(--blau);
	font-weight: 700;
}

.woocommerce ul.products li.product a.button:hover,
.ng-filter-anwenden:hover,
.woocommerce .added_to_cart:hover,
.woocommerce a.button.wc-forward:not(.checkout-button):hover {
	background-color: var(--blau);
	border-color: var(--blau);
	color: #FFFFFF;
}

/* --- Tertiaer: schlichter Textlink --- */
.ng-knopf-hell .wp-block-button__link {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 13px 4px;
	color: var(--blau);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	min-height: 0;
}

.ng-knopf-hell .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--blau-tief);
	text-decoration-thickness: 2px;
}

/* Alle uebrigen Knoepfe auf die neue Rundung bringen */
.ct-button,
.wp-element-button,
.wp-block-button__link,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ng-flat-knopf {
	border-radius: var(--rd-knopf);
}

/* ---------------- 6. Nur noch zwei Rundungen ---------------- */

.woocommerce ul.products li.product,
.ng-typ,
.ng-steck,
.ng-recht,
.ng-faq,
.ng-f-block,
.ng-stufe,
.ng-flat,
.ng-flat-karte,
.ng-hero-bild,
.woocommerce table.shop_table,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.ng-keine-treffer,
.woocommerce div.product div.images img,
.woocommerce div.product form.cart .variations select,
.woocommerce ul.products li.product .ct-media-container {
	border-radius: var(--rd-flaeche);
}

.ng-chip,
.ng-flat-knopf {
	border-radius: var(--rd-knopf);
}

/* ---------------- 4. Zahlenreihe ohne Rahmen ---------------- */

.ng-band {
	gap: 0;
	margin-bottom: var(--ab-abschnitt);
}

.ng-band > div {
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--rand);
	border-radius: 0;
	padding: var(--ab-1) var(--ab-3);
}

.ng-band > div:first-child {
	border-left: 0;
	padding-left: 0;
}

@media (max-width: 860px) {
	/* Beim Umbruch auf zwei Spalten stuende sonst mitten in der
	   zweiten Reihe eine Linie ohne Bezug. */
	.ng-band > div:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
	.ng-band > div:nth-child(n+3) {
		margin-top: var(--ab-3);
	}
}

.ng-band b {
	font-size: 34px;
	color: var(--dunkel);
}

/* ---------------- 5. Rahmen nur bei Klickbarem ---------------- */

/* Informative Flaechen: Grund ohne Rahmen */
.ng-steck,
.ng-recht,
.ng-faq {
	border: 0;
}

.ng-steck,
.ng-faq {
	background-color: var(--papier);
}

/* Klickbares behaelt Rahmen und bekommt einen klaren Hover */
.ng-typ:hover,
.woocommerce ul.products li.product:hover {
	border-color: var(--blau);
	box-shadow: 0 2px 10px rgba(36, 31, 25, .07);
}

.ng-stufe:hover {
	border-color: var(--blau);
}

/* ---------------- 7. bis 11. Produktkarten ---------------- */

/* Gleiche Hoehe, Knopf unten buendig, und die Reihenfolge:
   Bild, Haustyp, Name, Preis, Steuerhinweis, Knopf */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product > figure,
.woocommerce ul.products li.product > .ct-media-container { order: 1; }
.woocommerce ul.products li.product > .entry-meta { order: 2; }
.woocommerce ul.products li.product > .woocommerce-loop-product__title { order: 3; }
.woocommerce ul.products li.product > .price { order: 4; }
.woocommerce ul.products li.product > .wc-gzd-additional-info { order: 5; }
.woocommerce ul.products li.product > .ct-woo-card-actions,
.woocommerce ul.products li.product > a.button { order: 6; margin-top: auto; }

.woocommerce ul.products {
	align-items: stretch;
}

/* Bildflaeche in derselben Farbe wie die Karte */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product img {
	background-color: var(--papier);
	border-radius: 0;
}

/* Haustyp als Label ueber dem Namen */
.woocommerce ul.products li.product .entry-meta {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: var(--ab-2) 0 var(--ab-1);
	padding: 0 18px;
	list-style: none;
}

.woocommerce ul.products li.product .entry-meta a {
	color: var(--text-leise);
	text-decoration: none;
}

.woocommerce ul.products li.product .entry-meta a:hover {
	color: var(--blau);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-bottom: var(--ab-1);
}

/* Das Praefix so gross und farbig wie der Preis, nur leichter */
.ng-ab {
	font-size: inherit;
	color: inherit;
	font-weight: 400;
}

/* Steuerhinweis direkt unter den Preis */
.woocommerce ul.products li.product .price {
	margin-bottom: 2px;
}

.woocommerce ul.products li.product .wc-gzd-additional-info {
	font-size: 12.5px;
	margin: 0 0 var(--ab-2);
	padding: 0 18px;
}

.woocommerce ul.products li.product .wc-gzd-additional-info:last-child {
	padding-bottom: 0;
}

/* margin-top bleibt auto, sonst steht der Knopf nicht mehr buendig
   am unteren Kartenrand — das war der Zweck der Flexbox. */
.woocommerce ul.products li.product .ct-woo-card-actions {
	margin: auto 18px var(--ab-2);
}

/* ---------------- 13. + 14. Abstaende ---------------- */

.ng-abschnitt-titel {
	margin-top: var(--ab-abschnitt);
}

.ng-abschnitt-unter {
	margin-bottom: var(--ab-3);
}

.ng-typen,
.ng-flat {
	margin-bottom: var(--ab-abschnitt);
}

.ng-hero {
	padding-bottom: var(--ab-4);
}

/* ---------------- 15. bis 18. Detailseite ---------------- */

/* Die freistehende Preiszeile ist die dritte Nennung desselben
   Betrags — Kaufstufe und Knopf zeigen ihn bereits. */
.woocommerce div.product .woocommerce-variation-price {
	display: none;
}

/* Grundrissabbildung ohne Kasten, auf Layoutgrund */
.woocommerce div.product div.images img,
.woocommerce div.product .flexy,
.woocommerce div.product .flexy-container {
	background-color: transparent;
	border: 0;
}

/* Datentabelle: Zeilen mit feinen Linien statt Kasten */
.ng-steck {
	padding: var(--ab-1) var(--ab-3);
}

.ng-steck dl {
	gap: 0;
}

.ng-steck dt,
.ng-steck dd {
	padding: 11px 0;
	border-bottom: 1px solid var(--rand);
}

.ng-steck dl > dt:nth-last-of-type(1),
.ng-steck dl > dd:nth-last-of-type(1) {
	border-bottom: 0;
}

.ng-steck dd {
	color: var(--text);
}

/* Aktives Vorschaubild klar kennzeichnen */
.flexy-pills ol li {
	border: 2px solid transparent;
	border-radius: var(--rd-knopf);
	overflow: hidden;
	opacity: .6;
	transition: opacity .15s ease;
}

.flexy-pills ol li:hover {
	opacity: 1;
}

.flexy-pills ol li.active,
.flexy-pills ol li.ct-active,
.flexy-pills ol li[aria-current="true"] {
	border-color: var(--blau);
	opacity: 1;
}

/* Gewaehlte Kaufstufe deutlicher */
.ng-stufe.ist-gewaehlt {
	border-color: var(--blau);
	border-width: 2px;
	background-color: var(--blau-hauch);
}

.ng-stufe.ist-gewaehlt .ng-radio { border-color: var(--blau); }
.ng-stufe.ist-gewaehlt .ng-radio::after { background-color: var(--blau); }

/* Kacheln, Chips und Ankreuzfelder auf die Primaerfarbe */
.ng-typ svg { color: var(--blau); }
.ng-chip:hover { border-color: var(--blau); }

.ng-f-box:checked + .ng-kasten {
	background-color: var(--blau);
	border-color: var(--blau);
}

.ng-f-box:checked + .ng-kasten svg { color: #FFFFFF; }

/* ---------------- Feinschliff fuer die Serife ----------------
   Source Serif 4 seit 21.08.2026 in den Ueberschriften.
   Die Werte darueber waren auf eine Grotesk abgestimmt:
   negative Laufweite und Strichstaerke 700 bis 800 lassen eine
   Serife gedrungen und schwer wirken. */

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.ng-hero-titel,
.ng-abschnitt-titel,
.ng-band b,
.ng-flat-preis,
.ng-fuss-marke {
	letter-spacing: normal;
}

/* Source Serif 4 reicht bis 700 — 800 gaebe es nicht und wuerde
   vom Browser kuenstlich fett gerechnet. */
.site-title,
.site-title a {
	font-weight: 600;
}

.ng-hero-titel,
.woocommerce div.product .product_title,
.ng-flat h2 {
	font-weight: 600;
}

/* In kleinen Graden traegt die Serife mehr als eine Grotesk —
   600 statt 700 haelt die Karten ruhig. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.ng-abschnitt-titel,
.ng-text-zwei h2,
.woocommerce .related > h2 {
	font-weight: 600;
}

/* Der Aufmacher darf etwas luftiger stehen */
.ng-hero-titel {
	line-height: 1.12;
	max-width: 17ch;
}

/* Zahlen im Band und der Flat-Preis sind Schaustuecke, keine Daten —
   die bleiben in der Serife, brauchen aber etwas mehr Luft. */
.ng-band b,
.ng-flat-preis {
	font-weight: 600;
	line-height: 1.2;
}

/* ==========================================================
   Bewegung — Einblenden beim Scrollen
   Zugabe von augusta-pfalz.de, hier auf die Shop-Farben gebracht.
   Schaltet sich bei "weniger Bewegung" von selbst ab.
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Doppelt geschrieben, damit die Regel staerker ist als die
	   Uebergaenge auf Karten und Knoepfen — sonst wuerde das
	   Einblenden auf deren kurze Dauer gekuerzt. */
	[data-einblenden][data-einblenden] {
		transition: opacity .75s cubic-bezier(.16, .84, .44, 1),
					transform .75s cubic-bezier(.16, .84, .44, 1),
					border-color .15s ease,
					box-shadow .15s ease;
		will-change: opacity, transform;
	}

	[data-einblenden="versteckt"] { opacity: 0; }
	[data-einblenden="versteckt"][data-einblenden-richtung="hoch"]   { transform: translate3d(0, 44px, 0); }
	[data-einblenden="versteckt"][data-einblenden-richtung="links"]  { transform: translate3d(-56px, 0, 0); }
	[data-einblenden="versteckt"][data-einblenden-richtung="rechts"] { transform: translate3d(56px, 0, 0); }
	[data-einblenden="sichtbar"] { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
	/* seitlicher Versatz faellt auf schmalen Bildschirmen kleiner aus */
	[data-einblenden="versteckt"][data-einblenden-richtung="links"]  { transform: translate3d(-26px, 0, 0); }
	[data-einblenden="versteckt"][data-einblenden-richtung="rechts"] { transform: translate3d(26px, 0, 0); }
}

/* ==========================================================
   Galerie auf der Produktseite: nichts mehr abschneiden
   ==========================================================
   Blocksy zwingt das Hauptbild in ein Hochformat 3:4 und schneidet
   mit object-fit: cover zu. Bei einem Rendering im Verhaeltnis 1,40
   blieben davon 54 Prozent der Bildbreite uebrig — beim Grundriss
   waere der halbe Plan weg.

   Deshalb: Buehne im Verhaeltnis 4:3 (passt zu Renderings 1,40 und
   Plaenen 1,33) und "contain" statt "cover". Was nicht genau passt,
   bekommt einen schmalen Rand statt eines Beschnitts. Die feste
   Buehnenhoehe bleibt, sonst wuerde der Schieber bei Bildern
   unterschiedlicher Hoehe springen. */

/* Die Hoehe entsteht in Blocksys Bildbehaelter — er steht auf 3:4.
   Dort muss die Aenderung ansetzen, die Eltern folgen von selbst. */
.woocommerce div.product .ct-media-container,
.woocommerce div.product .flexy,
.woocommerce div.product .flexy-view,
.woocommerce div.product .flexy-items,
.woocommerce div.product .flexy-item,
.woocommerce div.product .woocommerce-product-gallery__image {
	aspect-ratio: 4 / 3;
	height: auto;
	min-height: 0;
}

.woocommerce div.product .flexy img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
}

/* Die Lupe legt ein zweites Bild darueber — das muss denselben
   Ausschnitt zeigen, sonst springt es beim Ueberfahren. */
.woocommerce div.product .zoomImg {
	object-fit: contain;
}

/* ==========================================================
   Lupe an der Galerie und Vollbildansicht
   Nachgebaut nach der Lichtbox auf augusta-pfalz.de.
   ========================================================== */

/* ---------------- Lupe oben rechts ---------------- */

.woocommerce div.product .flexy {
	position: relative;
}

/* Doppelt geschrieben, damit die Regel staerker ist als die
   allgemeine Knopfregel weiter oben — die setzt sonst ihr
   Innenpolster durch und macht die Lupe breiter als hoch. */
.woocommerce div.product .flexy button.ng-lupe {
	position: absolute;
	box-sizing: border-box;
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rand);
	border-radius: var(--rd-knopf);
	background-color: rgba(255, 251, 245, .92);
	color: var(--blau);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.woocommerce div.product .flexy button.ng-lupe svg { width: 22px; height: 22px; }

.woocommerce div.product .flexy button.ng-lupe:hover {
	background-color: var(--blau);
	border-color: var(--blau);
	color: #FFFFFF;
}

.woocommerce div.product .flexy button.ng-lupe:focus-visible {
	outline: 3px solid var(--blau);
	outline-offset: 3px;
}

/* ---------------- Vollbild ---------------- */

body.ng-vollbild-offen { overflow: hidden; }

.ng-vollbild {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background-color: rgba(24, 20, 16, .95);
	display: flex;
	flex-direction: column;
}

.ng-vollbild[hidden] { display: none; }

.ng-vollbild-kopf {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ab-2) var(--ab-3);
}

.ng-vollbild-zaehler {
	color: rgba(247, 242, 234, .78);
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}

.ng-vollbild-schliessen {
	background: none;
	border: none;
	color: #FFFFFF;
	font-size: 38px;
	line-height: 1;
	padding: 0 var(--ab-1);
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	opacity: .8;
}

.ng-vollbild-schliessen:hover { opacity: 1; }

.ng-vollbild-buehne {
	flex: 1;
	min-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 72px;
}

.ng-vollbild-buehne img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	/* Grundrisse liegen auf hellem Grund — auf dem dunklen
	   Hintergrund wirkt sonst der Rand des Blattes hart. */
	background-color: #FFFFFF;
}

.ng-vollbild-pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background-color: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	min-height: 0;
}

.ng-vollbild-pfeil:hover { background-color: rgba(255, 255, 255, .24); }
.ng-vollbild-pfeil[hidden] { display: none; }
.ng-vollbild-pfeil.links { left: 12px; }
.ng-vollbild-pfeil.rechts { right: 12px; }

.ng-vollbild-titel {
	flex: none;
	text-align: center;
	color: rgba(247, 242, 234, .82);
	font-size: 15px;
	padding: var(--ab-2) var(--ab-3) var(--ab-3);
	margin: 0;
}

@media (max-width: 640px) {
	.ng-vollbild-buehne { padding: 0 8px; }
	.ng-vollbild-pfeil { width: 44px; height: 44px; font-size: 26px; }
	.ng-vollbild-pfeil.links { left: 4px; }
	.ng-vollbild-pfeil.rechts { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.ng-lupe { transition: none; }
}

/* ==========================================================
   Kartenbilder: ganzes Haus statt Ausschnitt
   ==========================================================
   Bisher wurde das Bild formatfuellend beschnitten. Bei einem
   Rendering, das ohnehin schon Rand hat, blieb davon zu wenig
   uebrig — man sah einen Ausschnitt statt des Hauses.

   Jetzt wird eingepasst statt beschnitten. Die Bildflaeche hat
   dieselbe Farbe wie die Karte, der schmale Rand faellt daher
   nicht auf, und alle Karten bleiben gleich hoch. */

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure {
	aspect-ratio: 3 / 2;
	background-color: var(--papier);
	padding: var(--ab-1) var(--ab-1) 0;
	box-sizing: border-box;
}

.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product figure img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	background-color: transparent;
}

/* ==========================================================
   Luft zwischen Kopfbereich und Seiteninhalt
   ==========================================================
   Blocksy setzt ueber den Inhalt 60 Pixel Innenabstand. Zusammen
   mit dem Polster des Kopfbereichs standen zwischen Logo und
   Aufmacher-Ueberschrift 109 Pixel — die Seite begann dadurch
   erst weit unten. */

.site-main > .ct-container-full,
.site-main > .ct-container,
.site-main > .ct-container-narrow {
	padding-top: var(--ab-3);
}

/* Der Aufmacher braucht darueber hinaus keinen eigenen Vorlauf */
.ng-hero {
	padding-top: 0;
}

/* Der Kopfbereich war 120 Pixel hoch fuer ein 38 Pixel hohes Logo —
   also je 41 Pixel Luft darueber und darunter. 88 laesst dem Logo
   noch Raum und holt die Seite deutlich nach oben. Geprueft: An der
   Kopfhoehe haengt keine weitere Berechnung (keine Variable, kein
   Sprungmarken-Versatz). */
#header [data-row] {
	--height: 88px;
}
/* ==========================================================
   Aufmacher auf dem Handy verschlanken
   ==========================================================
   Die Grenze liegt bei 782 Pixeln, weil der Aufmacher genau dort
   umbricht: Ab da rutscht die Hausgrafik unter den Text und kostet
   eine volle Bildschirmhoehe, bevor der erste Grundriss kommt.
   Dasselbe gilt fuer das Zahlenband, das umgebrochen zwei Reihen
   braucht.

   Ueberschrift, Einleitung und Knoepfe bleiben stehen — sie sagen,
   worum es geht, und fuehren weiter. */

@media (max-width: 782px) {
	.ng-band { display: none; }

	.ng-hero-bild { display: none; }

	/* Die leere Spalte soll keinen Platz mehr beanspruchen */
	.ng-hero-raster > .wp-block-column:last-child:not(:only-child) {
		display: none;
	}

	/* Ohne Bild darf der Aufmacher enger an den Rest ruecken */
	.ng-hero { padding-bottom: var(--ab-3); }
}
/* ==========================================================
   Aufmacherbild auf der Startseite
   ==========================================================
   Vorher stand hier eine gezeichnete Skizze auf cremefarbenem
   Grund. Das Foto bringt seinen eigenen weissen Hintergrund mit —
   auf der Cremeflaeche wuerde es als weisses Rechteck darin
   schwimmen. Deshalb weisser Grund und kein Innenabstand: Das Bild
   ist die Flaeche. */

.ng-hero-bild {
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--rd-flaeche);
}

.ng-hero-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}
/* ==========================================================
   Zahlenleiste ueber dem Fussbereich
   ==========================================================
   Steht jetzt auf jeder Seite ganz unten statt im Aufmacher der
   Startseite. Deutlich flacher als vorher: Sie soll den Abschluss
   bilden, nicht selbst ein Abschnitt sein. Die Ausblendung auf dem
   Handy entfaellt — unten kostet sie keinen Einstieg mehr. */

.ng-band-leiste {
	border-top: 1px solid var(--rand);
	margin-top: var(--ab-4);
}

.ng-band-leiste .ng-band {
	max-width: var(--theme-normal-container-max-width, 1200px);
	margin: 0 auto;
	padding: var(--ab-1) var(--ab-3);
	gap: 0;
	align-items: center;
}

.ng-band-leiste .ng-band > div {
	padding: 0 var(--ab-3);
}

.ng-band-leiste .ng-band b {
	font-size: 20px;
	line-height: 1.2;
}

.ng-band-leiste .ng-band span {
	font-size: 12.5px;
	line-height: 1.35;
	display: block;
}

/* Unten stoert sie den Einstieg nicht mehr, also auch am Handy zeigen */
@media (max-width: 782px) {
	.ng-band-leiste .ng-band { display: grid; }
}

@media (max-width: 860px) {
	.ng-band-leiste .ng-band > div:nth-child(n+3) { margin-top: var(--ab-2); }
}

@media (max-width: 480px) {
	.ng-band-leiste .ng-band {
		grid-template-columns: 1fr 1fr;
		padding: var(--ab-2);
	}
	.ng-band-leiste .ng-band b { font-size: 20px; }
}
/* ==========================================================
   Rueckmeldung nach dem Hinzufuegen
   ==========================================================
   Kleiner Kasten unter der Kaufbox: Zwischensumme, dann der Weg
   zum Warenkorb als Umriss und der Weg zur Kasse gefuellt. Der
   gefuellte steht unten, weil dort der Blick endet. */

.ng-korbhinweis {
	display: grid;
	gap: var(--ab-1);
	margin-top: var(--ab-2);
	padding: var(--ab-2);
	background: var(--blau-hauch);
	border: 1px solid var(--rand);
	border-radius: var(--rd-flaeche);
}

.ng-korbhinweis-kopf {
	margin: 0 0 var(--ab-1);
	padding-bottom: var(--ab-1);
	border-bottom: 1px solid var(--rand);
	font-size: 15px;
	color: var(--text-leise);
}

.ng-korbhinweis-kopf b {
	color: var(--text);
	font-weight: 700;
}

.ng-korbhinweis a.button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px var(--ab-2);
	border-radius: var(--rd-knopf);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	background: #FFF;
	border: 1px solid var(--blau);
	color: var(--blau);
}

.ng-korbhinweis a.ng-zur-kasse {
	background: var(--blau);
	border-color: var(--blau);
	color: #FFF;
}

.ng-korbhinweis a.button:hover {
	background: #FFF;
	border-color: var(--blau-tief);
	color: var(--blau-tief);
}

.ng-korbhinweis a.ng-zur-kasse:hover {
	background: var(--blau-tief);
	border-color: var(--blau-tief);
	color: #FFF;
}

/* Im Katalog haengt der Kasten unter der Karte und darf schmaler sein */
.woocommerce ul.products li.product .ng-korbhinweis {
	padding: var(--ab-1);
}

.woocommerce ul.products li.product .ng-korbhinweis a.button {
	padding: 9px var(--ab-1);
	font-size: 14px;
}
/* ==========================================================
   Der Kaufknopf tritt zurueck, sobald etwas im Korb liegt
   ==========================================================
   Blocksy setzt dem Knopf dann die Klasse "added" und schiebt
   daneben einen zweiten Verweis zum Warenkorb. Der faellt weg —
   im Hinweiskasten darunter steht er schon.

   Der Knopf selbst bleibt stehen, weil man ja noch einen weiteren
   Umfang dazulegen kann. Er gibt aber die Farbe ab: Der naechste
   Schritt ist jetzt die Kasse, nicht noch ein Kauf. */

.woocommerce div.product form.cart .ct-cart-actions .added_to_cart,
.woocommerce div.product form.cart a.added_to_cart {
	display: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button.added {
	width: auto;
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
	transition-duration: .2s;
	padding: 8px var(--ab-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	background: transparent;
	border: 1px solid var(--rand);
	color: var(--text-leise);
	box-shadow: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button.added:hover {
	background: #FFF;
	border-color: var(--blau);
	color: var(--blau);
}

/* Der Preis im Knopf ist dann nur noch Beiwerk */
.woocommerce div.product form.cart button.single_add_to_cart_button.added .ng-knopfpreis {
	font-size: 13px;
	font-weight: 600;
	opacity: .75;
}

/* Ohne den zweiten Verweis darf der Knopf links stehen bleiben */
.woocommerce div.product form.cart .ct-cart-actions:has(button.added) {
	justify-content: flex-start;
}

/* ==========================================================
   Meldungen am Kaufknopf
   ==========================================================
   Der Meldungsbereich haengt jetzt unmittelbar ueber dem Knopf.
   Er darf deshalb ruhiger und schmaler ausfallen als eine Meldung
   am Seitenanfang — man liest sie ohnehin genau dort, wo man
   gerade hingesehen hat. */

.ng-meldungen-am-knopf {
	margin-bottom: var(--ab-2);
}

.ng-meldungen-am-knopf:empty {
	display: none;
	margin: 0;
}

.ng-meldungen-am-knopf .woocommerce-error,
.ng-meldungen-am-knopf .woocommerce-message,
.ng-meldungen-am-knopf .woocommerce-info {
	margin: 0;
	padding: var(--ab-2);
	list-style: none;
	border-radius: var(--rd-flaeche);
	font-size: 14.5px;
	line-height: 1.5;
}

.ng-meldungen-am-knopf .woocommerce-error {
	background: #FBF0EC;
	border: 1px solid #E2BCAE;
	border-left: 3px solid #B4553A;
	color: #7A3925;
}

.ng-meldungen-am-knopf .woocommerce-error li,
.ng-meldungen-am-knopf .woocommerce-message li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Der Knopf davor ist der eigentliche Hinweis — kein zweiter Rahmen */
.ng-meldungen-am-knopf .woocommerce-error::before,
.ng-meldungen-am-knopf .woocommerce-message::before,
.ng-meldungen-am-knopf .woocommerce-info::before {
	display: none;
}

/* ==========================================================
   Warenkorb: ein Hauptweg, alles andere leise
   ==========================================================
   "Weiter zur Kasse" war ein Umriss, waehrend Gutschein und
   Aktualisieren in Akzentfarbe standen — die Nebensachen waren
   lauter als der Weg nach vorn. Jetzt umgekehrt. */

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button.button {
	display: block;
	width: 100%;
	padding: 15px var(--ab-3);
	background: var(--blau);
	border: 1px solid var(--blau);
	border-radius: var(--rd-knopf);
	color: #FFF;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button.button:hover {
	background: var(--blau-tief);
	border-color: var(--blau-tief);
	color: #FFF;
}

/* Gutschein und Aktualisieren: Werkzeuge, keine Angebote */
.woocommerce .cart button[name="apply_coupon"],
.woocommerce .cart button[name="update_cart"],
.woocommerce .cart input[name="update_cart"] {
	min-height: 0;
	padding: 7px var(--ab-2);
	background: transparent;
	border: 1px solid var(--rand);
	border-radius: var(--rd-knopf);
	color: var(--text-leise);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
}

.woocommerce .cart button[name="apply_coupon"]:hover,
.woocommerce .cart button[name="update_cart"]:hover,
.woocommerce .cart input[name="update_cart"]:hover {
	background: #FFF;
	border-color: var(--blau);
	color: var(--blau);
}

.woocommerce .cart .coupon {
	display: flex;
	align-items: center;
	gap: var(--ab-1);
}

.woocommerce .cart .coupon input#coupon_code {
	width: 150px;
	min-height: 0;
	padding: 7px var(--ab-1);
	border: 1px solid var(--rand);
	border-radius: var(--rd-knopf);
	font-size: 13px;
	background: #FFF;
}

@media (max-width: 480px) {
	.woocommerce .cart .coupon {
		flex-wrap: wrap;
	}
	.woocommerce .cart .coupon input#coupon_code {
		width: auto;
		flex: 1 1 120px;
	}
}

/* Das Eingabefeld auf dieselbe Hoehe wie der Gutschein-Knopf */
.woocommerce .cart .coupon input#coupon_code,
.woocommerce-cart .coupon input.input-text#coupon_code {
	height: auto;
	min-height: 0;
	padding: 7px var(--ab-1);
	line-height: 1.3;
}

/* ==========================================================
   Warenkorb oben rechts
   ==========================================================
   Steht neben Menue und Suche. Solange nichts im Korb liegt,
   verschwindet er ganz — ein leerer Warenkorb ist keine
   Information, sondern nur ein Fleck im Kopfbereich. */

.ng-kopfkorb {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: var(--ab-2);
	padding: 7px 13px;
	border: 1px solid var(--blau);
	border-radius: 999px;
	background: var(--blau);
	color: #FFF;
	font-family: Karla, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.ng-kopfkorb:hover {
	background: var(--blau-tief);
	border-color: var(--blau-tief);
	color: #FFF;
}

.ng-kopfkorb-leer {
	display: none;
}

.ng-kopfkorb-zeichen {
	flex: 0 0 auto;
}

/* Steht er noch unten im Fussbereich, weil die Kopfzeile anders
   aufgebaut ist als erwartet, faellt er lieber ganz weg. */
body > .ng-kopfkorb {
	display: none;
}

@media (max-width: 500px) {
	.ng-kopfkorb {
		margin-left: var(--ab-1);
		padding: 6px 10px;
		font-size: 13px;
	}
}

/* ==========================================================
   Der Kopfbereich bleibt oben stehen
   ==========================================================
   Auf langen Katalogseiten ist der Weg zurueck sonst weit. Der
   Hintergrund muss dafuer decken, sonst scheint der Inhalt durch. */

#header.ct-header,
header.ct-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--papier);
	box-shadow: 0 1px 0 var(--rand);
}

.admin-bar #header.ct-header,
.admin-bar header.ct-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #header.ct-header,
	.admin-bar header.ct-header {
		top: 46px;
	}
}

/* ==========================================================
   Der Text rueckt unter das Bild
   ==========================================================
   Die Kaufspalte ist deutlich hoeher als das Bild — darunter blieben
   ueber 600 Pixel leer, waehrend der Text erst unterhalb der ganzen
   Seite anfing. Jetzt teilen sich beide die Hoehe: links Bild und
   Text, rechts die Kaufbox ueber beide Zeilen. */

body.single-product div.product .product-entry-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--ab-4);
	align-items: start;
}

body.single-product div.product .product-entry-wrapper > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	width: auto;
}

body.single-product div.product .product-entry-wrapper > .ng-text-zwei {
	grid-column: 1;
	grid-row: 2;
}

body.single-product div.product .product-entry-wrapper > .summary {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: auto;
}

/* In der schmalen Spalte stehen Text und Fragen untereinander */
.product-entry-wrapper .ng-text-zwei {
	grid-template-columns: 1fr;
	gap: var(--ab-3);
	padding: var(--ab-3) 0 0;
}
/* Bis 1000 px untereinander: Bild, kaufen, dann lesen.
   Die Grenze liegt bewusst ueber der Breite eines iPads im
   Hochformat (820 px). Bei 800 px bekam es zwei Spalten mit je
   345 px — ein bemasster Grundriss ist darin nicht mehr lesbar.
   Jetzt nimmt das Bild dort die volle Breite. */

@media (max-width: 1000px) {
	body.single-product div.product .product-entry-wrapper {
		display: flex;
		flex-direction: column;
	}
	body.single-product div.product .product-entry-wrapper > .woocommerce-product-gallery { order: 1; }
	body.single-product div.product .product-entry-wrapper > .summary { order: 2; }
	body.single-product div.product .product-entry-wrapper > .ng-text-zwei { order: 3; }
}

/* Datenschutzhinweis unter dem Registrierformular */
.ng-registrier-hinweis {
	margin: var(--ab-1) 0 var(--ab-2);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-leise);
}

/* ==========================================================
   Bestellbestaetigung
   ==========================================================
   Der Satz nach dem Kauf stand in einem blassen Grau, kaum
   unterscheidbar vom Rest der Seite. Er ist die Antwort auf den
   wichtigsten Klick des ganzen Besuchs und bekommt deshalb die
   Hausfarbe. */

.woocommerce .woocommerce-notice--success,
.woocommerce .woocommerce-thankyou-order-received {
	padding: var(--ab-2) var(--ab-3);
	background: var(--blau);
	border: 1px solid var(--blau);
	border-radius: var(--rd-flaeche);
	color: #FFF;
	font-family: Karla, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: var(--ab-3);
}

/* Das graue Haekchen davor entfaellt — die Farbe sagt es schon */
.woocommerce .woocommerce-notice--success::before,
.woocommerce .woocommerce-thankyou-order-received::before {
	display: none;
}

/* ==========================================================
   Haustyp-Knoepfe im Katalog
   ==========================================================
   Bisher schmale Textpillen. Jetzt dieselben Sinnbilder wie auf der
   Startseite und etwas mehr Groesse — die Auswahl des Haustyps ist
   der erste Schritt im Katalog und darf danach aussehen. */

.ng-chips {
	gap: var(--ab-1);
}

.ng-chip {
	gap: 9px;
	min-height: 56px;
	padding: 10px 18px;
	font-size: 15px;
	border-radius: var(--rd-knopf);
	line-height: 1.25;
}

.ng-chip svg {
	flex: 0 0 auto;
	width: 30px;
	height: 23px;
	color: var(--blau);
	opacity: .85;
}

.ng-chip b {
	font-weight: 600;
}

.ng-chip.ist-an svg,
.ng-chip:hover svg {
	opacity: 1;
	color: currentColor;
}

@media (max-width: 600px) {
	.ng-chip {
		min-height: 48px;
		padding: 8px 13px;
		font-size: 14px;
		gap: 7px;
	}
	.ng-chip svg { width: 25px; height: 19px; }
}

/* ==========================================================
   Aufmacher nur am Rechner
   ==========================================================
   Am Handy stand die Ueberschrift ueber vier Zeilen und schob mit
   Vorspann und Knopf 410 Pixel vor die eigentliche Auswahl. Wer
   mobil kommt, will suchen, nicht lesen — die Seite beginnt dort
   jetzt mit "Wonach suchen Sie?". */

@media (max-width: 782px) {
	.ng-hero { display: none; }
}

/* ==========================================================
   Kopfzeile am Handy: Platz fuer den Warenkorb
   ==========================================================
   Blocksy teilt die Kopfzeile in zwei gleich breite Haelften. Der
   Schriftzug braucht davon mehr als die Haelfte, und sobald der
   Warenkorb dazukam, war die rechte Seite ueberfuellt.

   Jetzt bekommt der Schriftzug den uebrigen Platz und die rechte
   Seite nur, was sie braucht. Damit das aufgeht, wird der Schriftzug
   etwas kleiner und der Warenkorb zeigt auf schmalen Geraeten nur
   noch den Betrag — das Zeichen daneben sagt nichts, was der Betrag
   nicht schon sagt. */

@media (max-width: 782px) {
	#header.ct-header .ct-container {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	#header.ct-header [data-column="start"],
	#header.ct-header [data-column="start"] > div {
		min-width: 0;
	}

	#header.ct-header .site-title {
		font-size: 20px;
		line-height: 1.2;
	}
}

@media (max-width: 480px) {
	#header.ct-header .site-title {
		font-size: 18px;
	}

	.ng-kopfkorb-zeichen {
		display: none;
	}
}

/* ==========================================================
   Abstaende straffen
   ==========================================================
   Vor "Wonach suchen Sie?" standen 80 Pixel Leere, vor der
   Zahlenleiste 108. Die kamen nicht aus einer Regel, sondern aus
   dreien, die sich addierten: der Aufmacher brachte 48 Pixel Polster
   mit, der Abschnittstitel 32 dazu; unten stellte Blocksy 60 Pixel
   unter den Inhalt und die Leiste legte 48 obendrauf.

   Jetzt setzt jeweils nur noch eine Regel den Abstand. */

html:root {
	--ab-abschnitt: 24px;
}

/* Der Aufmacher endet mit seinem Knopf; den Abstand danach setzt
   der folgende Abschnittstitel. */
.ng-hero {
	padding-bottom: 0;
}

.site-main > .ct-container-full,
.site-main > .ct-container,
.site-main > .ct-container-narrow {
	padding-bottom: var(--ab-3);
}

.ng-band-leiste {
	margin-top: var(--ab-2);
}

/* Ohne Aufmacher beginnt die Seite mit dem Titel — der braucht dann
   keinen Vorlauf mehr, der Kasten darueber bringt schon einen mit. */
@media (max-width: 782px) {
	.ng-hero + .ng-abschnitt-titel {
		margin-top: 0;
	}
}


/* ==========================================================
   Logo in der Kopfzeile
   ==========================================================
   Der Schriftzug wird zum Hintergrundbild, der Text selbst rueckt
   aus dem Bild. Er bleibt damit im Quelltext stehen — Vorlese-
   software und Suchmaschinen lesen weiter "NeubauGrundrisse.de",
   nur sehen tut man ihn nicht mehr.

   Zwei Fassungen: breit am Rechner, zweizeilig am Handy. Die Grenze
   ist dieselbe wie bei den uebrigen Handy-Anpassungen. */

#header .site-title,
#header .site-title a {
	display: block;
}

#header .site-title a {
	width: 339px;
	height: 40px;
	background: url(logo.svg) left center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border: none;
}

#header .site-title a:hover {
	opacity: .82;
}

@media (max-width: 782px) {
	#header .site-title a {
		width: 142px;
		height: 44px;
		background-image: url(logo-kompakt.svg);
	}
}

@media (max-width: 400px) {
	#header .site-title a {
		width: 126px;
		height: 39px;
	}
}

/* ==========================================================
   Logo im Fussbereich
   ==========================================================
   Dort steht dunkelbraun (#241F19) im Hintergrund, also die weisse
   Fassung. Gleiche Machart wie oben: Der Name wird zum Hintergrund-
   bild, der Text bleibt im Quelltext stehen und wird vorgelesen. */

.ng-fuss-marke {
	display: block;
	width: 220px;
	height: 26px;
	background: url(logo-weiss.svg) left center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.ng-fuss-marke {
		width: 116px;
		height: 36px;
		background-image: url(logo-kompakt-weiss.svg);
	}
}

/* ==========================================================
   Kasse: Postleitzahl und Ort in einer Zeile
   ==========================================================
   Angesprochen ueber die Feld-Kennungen, nicht ueber die Klassen:
   Germanized baut die deutschen Adressfelder nach und setzt dabei
   jede Klasse zurueck, die wir von PHP aus vergeben. Die Kennungen
   bleiben. */

#billing_postcode_field,
#billing_city_field {
	display: inline-block;
	vertical-align: top;
	float: none;
	clear: none;
}

#billing_postcode_field {
	width: 32%;
}

#billing_city_field {
	width: calc(68% - var(--ab-2));
	margin-left: var(--ab-2);
}

@media (max-width: 520px) {
	#billing_postcode_field,
	#billing_city_field {
		display: block;
		width: 100%;
		margin-left: 0;
	}
}
/* ==========================================================
   Kaufstufen: was drinsteckt
   ==========================================================
   Bisher stand unter dem Titel nur ein Halbsatz. Wer 149 Euro
   ausgibt, will die Dateiformate lesen — "IFC und DWG" sagt einem
   Planer mehr als "3D-Modell".

   Die Liste erscheint bei allen Karten, nicht nur bei der gewaehlten:
   Vergleichen kann man nur, was nebeneinander steht. */

.ng-stufe {
	flex-direction: column;
	align-items: stretch;
	position: relative;
}

.ng-stufe-kopf {
	display: flex;
	align-items: center;
	gap: var(--ab-2);
	width: 100%;
}

.ng-stufe-inhalt {
	list-style: none;
	margin: var(--ab-2) 0 0;
	padding: var(--ab-2) 0 0 34px;
	border-top: 1px solid var(--rand);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-leise);
}

.ng-stufe-inhalt li {
	position: relative;
	padding-left: 18px;
	margin: 0 0 5px;
}

.ng-stufe-inhalt li:last-child {
	margin-bottom: 0;
}

/* Haken statt Punkt — hier wird aufgezaehlt, was man bekommt */
.ng-stufe-inhalt li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--blau);
	border-bottom: 2px solid var(--blau);
	transform: rotate(-45deg);
	opacity: .75;
}

.ng-stufe.ist-gewaehlt .ng-stufe-inhalt {
	color: var(--text);
}

/* Die Empfehlung des Hauses */
.ng-stufe-fahne {
	position: absolute;
	top: -10px;
	right: var(--ab-2);
	background: var(--blau);
	color: #FFF;
	font-family: Karla, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
}

.ng-stufe.ist-empfohlen {
	border-color: var(--blau);
}

@media (max-width: 600px) {
	.ng-stufe-inhalt {
		padding-left: 0;
		font-size: 13px;
	}
}

/* ==========================================================
   Ein Entwurf — drei Pakete
   ==========================================================
   Der Ueberblick unten auf Startseite, Katalog und Produktseite.
   Drei gleich hohe Spalten mit farbigem Kopf, darunter Preis und
   Inhalt. Die empfohlene Spalte steht etwas hoeher und traegt eine
   Fahne — sonst unterscheiden sich die drei nur in Zahlen. */

.ng-pakete-leiste {
	border-top: 1px solid var(--rand);
	margin-top: var(--ab-4);
	padding: var(--ab-4) 0 var(--ab-3);
}

.ng-pakete {
	max-width: var(--theme-normal-container-max-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--ab-3);
}

/* Die Ueberschrift ist entfallen — die Pakete erklaeren sich selbst.
   Dafuer bekommt die Reihe oben Luft, damit der Empfohlen-Reiter
   Platz hat, der ueber die Kartenkante ragt. */

.ng-pakete-reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ab-2);
	align-items: start;
	padding-top: 14px;
}

.ng-paket {
	position: relative;
	background: #FFF;
	border: 1px solid var(--rand);
	border-radius: var(--rd-flaeche);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ng-paket.ist-empfohlen {
	border-color: var(--blau);
	box-shadow: 0 6px 20px -10px rgba(31, 69, 96, .45);
}

.ng-paket-kopf {
	background: var(--blau);
	color: #FFF;
	padding: var(--ab-2) var(--ab-3);
	text-align: center;
}

.ng-paket.ist-empfohlen .ng-paket-kopf {
	background: var(--blau-tief);
}

.ng-paket-kopf h3 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	color: #FFF;
	line-height: 1.25;
}

.ng-paket-kopf p {
	margin: 5px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #CFE0EC;
}

/* Der Reiter sitzt mittig auf der Oberkante der empfohlenen Karte
   und ragt zur Haelfte darueber hinaus — dadurch gehoert er sichtbar
   zu dieser einen Karte und nicht zur Reihe. */
.ng-paket-fahne {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	background: var(--blau-tief);
	color: #FFF;
	font-family: Karla, system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 5px 16px;
	border-radius: 999px;
	line-height: 1.3;
	box-shadow: 0 3px 10px -3px rgba(31, 69, 96, .6);
}

/* Die Karte darf nicht beschneiden, sonst waere der Reiter halb weg */
.ng-paket.ist-empfohlen {
	overflow: visible;
}

.ng-paket.ist-empfohlen .ng-paket-kopf {
	border-radius: var(--rd-flaeche) var(--rd-flaeche) 0 0;
}

.ng-paket-preis {
	text-align: center;
	margin: 0;
	padding: var(--ab-3) var(--ab-2) var(--ab-2);
	line-height: 1.1;
}

.ng-paket-ab {
	font-size: 15px;
	color: var(--text-leise);
	margin-right: 4px;
	vertical-align: 0.5em;
}

.ng-paket-preis b {
	font-family: Karla, system-ui, sans-serif;
	font-size: 34px;
	font-weight: 700;
	color: var(--text);
}

.ng-paket-steuer {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--text-leise);
}

.ng-paket-inhalt {
	list-style: none;
	margin: 0;
	padding: 0 var(--ab-3) var(--ab-3);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}

.ng-paket-inhalt li {
	position: relative;
	padding: var(--ab-2) 0 var(--ab-2) 26px;
	border-top: 1px solid var(--rand);
}

.ng-paket-inhalt li:first-child {
	border-top: none;
}

.ng-paket-inhalt li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 22px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--blau);
	border-bottom: 2px solid var(--blau);
	transform: rotate(-45deg);
}

.ng-pakete-weiter {
	text-align: center;
	margin: var(--ab-3) 0 0;
	font-size: 15px;
}

.ng-pakete-weiter a {
	color: var(--blau);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ng-pakete-weiter a:hover {
	border-bottom-color: var(--blau);
}

@media (max-width: 860px) {
	.ng-pakete-reihe {
		grid-template-columns: 1fr;
		gap: var(--ab-2);
	}
	.ng-pakete-leiste {
		margin-top: var(--ab-3);
		padding: var(--ab-3) 0 var(--ab-2);
	}
	.ng-paket-preis b { font-size: 30px; }
}

/* ==========================================================
   Kaufstufen enger stellen
   ==========================================================
   Drei Karten mit je drei untereinander stehenden Zeilen brauchten
   fast die ganze Bildschirmhoehe — der Kaufknopf rutschte darunter
   aus dem Blick. Die Inhalte stehen jetzt nebeneinander und
   umbrechen erst, wenn die Zeile voll ist. Dadurch wird aus drei
   Zeilen meist eine oder zwei. */

.ng-stufen {
	gap: 8px;
	margin-bottom: 12px;
}

.ng-stufe {
	padding: 11px 14px;
	min-height: 0;
	gap: 0;
}

.ng-stufe-kopf {
	gap: 12px;
}

.ng-stufe-inhalt {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 15px;
	margin: 9px 0 0;
	padding: 9px 0 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.ng-stufe-inhalt li {
	margin: 0;
	padding-left: 17px;
}

.ng-stufe-inhalt li::before {
	top: 5px;
}

/* Der Reiter sitzt sonst auf dem Rand der Karte darueber */
.ng-stufe-fahne {
	top: -9px;
}

@media (max-width: 600px) {
	.ng-stufe-inhalt {
		gap: 2px 12px;
		font-size: 12.5px;
	}
}

/* ==========================================================
   Text direkt unter das Bild
   ==========================================================
   Zwischen Bild und Text klafften 99 Pixel — nicht aus einem
   Abstand, sondern aus dem Raster: Die Kaufspalte laeuft ueber
   beide Zeilen, und CSS verteilte ihre Hoehe gleichmaessig auf
   beide. Zeile eins wurde dadurch hoeher als das Bild.

   Mit festen Zeilenhoehen haelt sich Zeile eins an das Bild, und
   alles Weitere faellt in Zeile zwei. */

/* Bild und Text stehen jetzt in einer echten Spalte (ng-linke-spalte),
   nicht mehr in zwei Rasterzellen. Damit gibt es nichts mehr zu
   verteilen, und der Text folgt unmittelbar auf das Bild. */

body.single-product div.product .product-entry-wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ab-4);
}

body.single-product div.product .ng-linke-spalte {
	flex: 1 1 0;
	min-width: 0;
}

body.single-product div.product .product-entry-wrapper > .summary {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

body.single-product div.product .ng-linke-spalte > .woocommerce-product-gallery {
	width: auto;
	max-width: none;
	margin: 0;
}

.product-entry-wrapper .ng-text-zwei {
	padding-top: var(--ab-2);
}

@media (max-width: 1000px) {
	body.single-product div.product .product-entry-wrapper {
		flex-direction: column;
		gap: var(--ab-2);
	}
	/* Am Handy zuerst das Bild, dann kaufen, dann lesen */
	body.single-product div.product .ng-linke-spalte { display: contents; }
	body.single-product div.product .woocommerce-product-gallery { order: 1; }
	body.single-product div.product .product-entry-wrapper > .summary { order: 2; }
	body.single-product div.product .ng-text-zwei { order: 3; }
}

/* Am Handy loest sich die linke Spalte auf (display: contents), damit
   Bild, Kaufbox und Text in der richtigen Reihenfolge untereinander
   stehen. Dabei verliert die Galerie ihre Breite — sie wird zum
   Flex-Kind und schrumpft auf ihren Inhalt. Deshalb hier zurueckgesetzt. */
@media (max-width: 1000px) {
	body.single-product div.product .ng-linke-spalte > .woocommerce-product-gallery,
	body.single-product div.product .woocommerce-product-gallery,
	body.single-product div.product .product-entry-wrapper > .summary,
	body.single-product div.product .ng-linke-spalte > .ng-text-zwei,
	body.single-product div.product .ng-text-zwei {
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}
}

/* ==========================================================
   Hinweis auf die App
   ==========================================================
   Eine Leiste unten, die sagt, dass es die Seite auch als App gibt.
   Bewusst schmal und wegklickbar — sie soll erinnern, nicht
   im Weg stehen. Wer sie schliesst, hat zwei Monate Ruhe. */

.ng-app-hinweis {
	position: fixed;
	left: 50%;
	bottom: 14px;
	z-index: 60;
	width: calc(100% - 28px);
	max-width: 560px;
	display: flex;
	align-items: center;
	gap: var(--ab-2);
	background: var(--dunkel);
	color: #EDE7DF;
	border-radius: var(--rd-flaeche);
	padding: 12px 14px 12px 18px;
	font-family: Karla, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);

	/* Faehrt von unten herein, sobald sie eingehaengt ist */
	transform: translate(-50%, 130%);
	opacity: 0;
	transition: transform .4s cubic-bezier(.22, .8, .3, 1), opacity .3s ease;
}

.ng-app-hinweis.ist-da {
	transform: translate(-50%, 0);
	opacity: 1;
}

.ng-app-hinweis-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--ab-2);
	flex-wrap: wrap;
}

.ng-app-hinweis-text > div {
	display: contents;
}

.ng-app-hinweis b {
	color: #FFF;
	font-weight: 700;
	white-space: nowrap;
}

.ng-app-hinweis-knopf {
	flex: 0 0 auto;
	background: var(--blau);
	color: #FFF;
	border: none;
	border-radius: var(--rd-knopf);
	padding: 9px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.ng-app-hinweis-knopf:hover {
	background: #3D77A0;
}

.ng-app-hinweis-zu {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	color: #9C948A;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
}

.ng-app-hinweis-zu:hover {
	background: rgba(255, 255, 255, .1);
	color: #FFF;
}

@media (max-width: 480px) {
	.ng-app-hinweis {
		font-size: 13.5px;
		padding: 11px 10px 11px 14px;
		gap: 10px;
	}
	.ng-app-hinweis-knopf { padding: 8px 14px; font-size: 13.5px; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt sie ohne Fahrt */
@media (prefers-reduced-motion: reduce) {
	.ng-app-hinweis { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ==========================================================
   App-Hinweis: Tippflächen und Anleitung
   ==========================================================
   Zwei Fehler der ersten Fassung behoben:

   1. Der Schliessknopf war 32 Punkt gross. Apple nennt 44 als
      Mindestmass fuer alles, was mit dem Finger getroffen werden
      soll — darunter tippt man daneben.

   2. Auf iPhone und iPad stand dort nur ein Satz. Wer "tippen"
      liest, tippt auf die Leiste, und nichts passiert. Jetzt
      klappt ein Knopf die zwei Schritte auf.

   Dazu der Sicherheitsabstand unten: Auf dem iPhone liegt Safaris
   eigene Leiste ueber dem unteren Rand. env(safe-area-inset-bottom)
   haelt die Leiste darueber. */

.ng-app-hinweis {
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	flex-wrap: wrap;
	align-items: center;
}

.ng-app-hinweis-zu {
	width: 44px;
	height: 44px;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-app-hinweis-knopf {
	min-height: 44px;
}

/* Die aufklappbare Anleitung nimmt die volle Breite unter der Zeile */
.ng-app-schritte {
	flex: 1 0 100%;
	margin: 4px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 14px;
	line-height: 1.5;
}

.ng-app-schritte p {
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.ng-app-schritte p:last-child {
	margin-bottom: 0;
}

.ng-app-nr {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--blau);
	color: #FFF;
	font-size: 12.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ng-app-teilen {
	width: 22px;
	height: 22px;
	color: #FFF;
	vertical-align: middle;
}

.ng-app-hinweis.ist-offen {
	padding-bottom: 16px;
}

/* ==========================================================
   Wohnflächen-Schieber in der Filterspalte
   ==========================================================
   Zwei Bereichsregler liegen übereinander. Beide sind für Zeiger
   durchlässig gemacht — nur die Griffe nehmen Klicks an, sonst
   würde der obere Regler den unteren blockieren. Die sichtbare
   Spur ist ein eigenes Element darunter. */

.ng-schieber-wert {
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
	margin: 0 0 14px;
}

.ng-schieber {
	position: relative;
	height: 26px;
	margin: 0 0 4px;
}

/* Die Spur ist links und rechts um eine halbe Griffbreite eingerückt.
   Genau so weit wandert der Griff auch — sonst läuft der eingefärbte
   Abschnitt über den Griff hinaus, weil Prozentwerte auf der Spur
   und Griffpositionen sonst nicht dieselbe Strecke meinen. */
.ng-schieber-spur {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 999px;
	background-color: var(--rand);
}

.ng-schieber-aktiv {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background-color: var(--akzent);
}

.ng-schieber-regler {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;   /* nur die Griffe reagieren */
}

.ng-schieber-regler:focus { outline: none; }

.ng-schieber-von { z-index: 3; }
.ng-schieber-bis { z-index: 4; }

/* Steht der linke Griff weiter rechts als der rechte vom Rand weg,
   muss er nach oben — sonst deckt der andere ihn zu und man bekommt
   ihn nicht mehr zu fassen. */
.ng-schieber.ng-von-oben .ng-schieber-von { z-index: 5; }

.ng-schieber-regler::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	border: 2px solid var(--akzent-dunkel, #2C5A7C);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	cursor: grab;
}

.ng-schieber-regler::-moz-range-thumb {
	pointer-events: auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	border: 2px solid var(--akzent-dunkel, #2C5A7C);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	cursor: grab;
}

.ng-schieber-regler::-webkit-slider-thumb:active,
.ng-schieber-regler::-moz-range-thumb:active { cursor: grabbing; }

.ng-schieber-regler:focus-visible::-webkit-slider-thumb,
.ng-schieber-regler:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(44, 90, 124, .35);
}

/* Firefox zeichnet sonst seine eigene Spur über unsere. */
.ng-schieber-regler::-moz-range-track {
	background: transparent;
	border: 0;
}

.ng-schieber-enden {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--grau);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/* ==========================================================
   Sofort filtern
   ==========================================================
   Die Kennzeichnung setzt das Skript. Ohne JavaScript bleibt der
   Knopf sichtbar und alles funktioniert wie vorher. */

/* Zweite Sicherung: Das Skript nimmt den Knopf ohnehin aus dem
   Dokument. Sollte es einmal nicht laufen, aber die Kennzeichnung
   doch gesetzt sein, greift diese Regel — mit einer Klasse mehr als
   Blocksys button:not():not():not(), sonst gewinnt die. */
.ng-filter .ng-filter-form.ng-sofort button.ng-filter-anwenden { display: none; }

.ng-filter-form.ng-sofort .ng-filter-zuruecksetzen {
	display: inline-block;
	padding: 4px 0;
}

/* Während die Seite neu lädt, wird die Spalte kurz blass — sonst
   wirkt der Klick folgenlos, bis der Server antwortet. */
.ng-filter-form.ng-filter-laedt {
	opacity: .55;
	pointer-events: none;
	transition: opacity .12s ease;
}

/* ==========================================================
   Titelleiste über dem Katalog
   ==========================================================
   Blocksy setzt über Katalog- und Kategorieseiten ein beiges Band
   mit dem Seitentitel. Darunter stehen ohnehin die Haustyp-Kacheln,
   die dasselbe sagen und dabei anklickbar sind — das Band kostet nur
   Höhe, bevor der erste Entwurf zu sehen ist.

   Nicht display:none: Das Band enthält die einzige <h1> der Seite.
   Ohne sie stünde der Katalog ohne Überschrift da, und genau danach
   sucht eine Suchmaschine zuerst. Deshalb bleibt sie im Dokument und
   verschwindet nur aus dem Blickfeld — Screenreader lesen sie weiter. */

.woocommerce-shop .hero-section,
.tax-product_cat .hero-section {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	/* Weiter oben steht die Polsterung des Bandes mit !important.
	   Ohne dasselbe hier bliebe das Kaestchen 34 Pixel hoch. */
	padding: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Der Film sitzt genau da, wo vorher das Bild sass — gleiche Breite,
   gleiche Ecken. Das Seitenverhaeltnis steht fest im CSS, damit beim
   Laden nichts springt, bevor der Film seine Masse kennt. */

.ng-hero-bild .ng-hero-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1266 / 726;
	object-fit: cover;
	border-radius: 0;
}


/* Der Film in der Galerie sitzt im selben 4:3-Kaestchen wie die
   Bilder und wird genauso eingepasst: ganz zu sehen, notfalls mit
   Rand. Die Renderings haben 1600 x 1304 und bekommen dabei schmale
   Streifen an den Seiten — beim breiteren Film liegen sie eben oben
   und unten. Anschneiden waere die Alternative, aber dann fehlte der
   Garten am Rand. */

.ng-galeriefilm {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Film auf einer Produktkachel: genauso eingepasst wie das Bild, das
   er ersetzt — ganz zu sehen, notfalls mit schmalem Rand. Der
   Kachelkasten ist 1,50:1, der Film 1,74:1, das gibt oben und unten
   ein paar Pixel Luft. */

.ng-kartenfilm {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Instagram-Verweis in der echten Fusszeile (.ng-fuss), nicht in der
   unauffaelligen Standard-Fusszeile von Blocksy, die kaum jemand
   sieht — hier steht auch die Marke und das Fuss-Menue. */

.ng-fuss-instagram {
	display: inline-flex;
	align-items: center;
	color: #B7ADA0;
	text-decoration: none;
}

.ng-fuss-instagram:hover {
	color: var(--sand);
}

.ng-fuss-instagram svg {
	width: 20px;
	height: 20px;
	flex: none;
}

@media (max-width: 640px) {
	.ng-fuss-instagram { margin-left: 0; }
}

/* ==========================================================
   Suchleiste — waagerechte Filterleiste zum Testen
   ==========================================================
   Zweite Bauform derselben Filter (siehe ng_suchleiste_ausgeben() in
   inc/katalog.php), nach dem Vorbild von Seiten wie fertighaus.de.
   Die Reihen in den Klappfeldern nutzen dieselben Klassen wie die
   bisherige Filterspalte (.ng-f-zeile, .ng-kasten, .ng-f-name,
   .ng-f-anz) — nur aufgeklappt wird anders. */

.ng-katalog-voll { grid-template-columns: 1fr; }

.ng-suchleiste {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 16px 18px;
	margin-bottom: 28px;
}

.ng-sl-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ng-sl-dropdown { position: relative; }

.ng-sl-schalter-box {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.ng-sl-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--sand);
	border: 1px solid var(--rand);
	border-radius: 999px;
	padding: 10px 16px;
	min-height: 44px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--dunkel);
	cursor: pointer;
	user-select: none;
}

.ng-sl-dropdown:hover .ng-sl-knopf { border-color: var(--akzent-dunkel); }

.ng-sl-schalter-box:focus-visible + .ng-sl-knopf {
	outline: 3px solid var(--akzent-dunkel);
	outline-offset: 2px;
}

.ng-sl-marke {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--akzent);
	color: var(--dunkel);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.ng-sl-pfeil {
	width: 14px;
	height: 14px;
	flex: none;
	transition: transform .15s ease;
}

.ng-sl-schalter-box:checked ~ .ng-sl-knopf .ng-sl-pfeil { transform: rotate(180deg); }

.ng-sl-schalter-box:checked ~ .ng-sl-knopf {
	background-color: var(--dunkel);
	color: var(--sand);
	border-color: var(--dunkel);
}

/* Schliesst das Feld, wenn man daneben klickt — reines CSS, kein
   Skript noetig. Deckt die ganze Seite ab, liegt aber unter dem
   aufgeklappten Feld selbst. */
.ng-sl-schleier {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 40;
	cursor: default;
}

.ng-sl-schalter-box:checked ~ .ng-sl-schleier { display: block; }

.ng-sl-feld {
	display: none;
	position: absolute;
	z-index: 50;
	top: calc(100% + 8px);
	left: 0;
	min-width: 260px;
	max-width: min(320px, calc(100vw - 32px));
	max-height: 60vh;
	overflow-y: auto;
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
	padding: 10px 16px;
	box-shadow: 0 12px 28px rgba(30, 25, 18, .16);
}

.ng-sl-feld-flaeche { min-width: 300px; padding-top: 18px; }
.ng-sl-feld-flaeche .ng-f-block { border: 0; padding: 0; background: none; }

.ng-sl-schalter-box:checked ~ .ng-sl-feld { display: block; }

.ng-sl-feld .ng-f-zeile { min-height: 36px; }

.ng-sl-zuruecksetzen {
	font-size: 14px;
	color: var(--grau);
	text-decoration: underline;
	margin-left: 4px;
}

.ng-sl-ergebnis {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--rand);
	font-size: 15px;
	color: var(--grau);
}

.ng-sl-ergebnis b {
	color: var(--dunkel);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.ng-sl-feld {
		position: fixed;
		z-index: 50;
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
		min-width: 0;
		max-width: none;
		max-height: 70vh;
	}
}

/* ==========================================================
   Grosse Haustyp-Auswahl (Seite /haustyp-finden/)
   ==========================================================
   Nutzt dieselben Sinnbilder wie die schmalen Kacheln ueber dem
   Katalog (ng_haustyp_zeichen()), hier aber deutlich groesser als
   eigenstaendiger Einstieg — nach dem Vorbild aehnlicher Boxen auf
   Seiten wie fertighaus.de. */

.ng-typwahl {
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 24px 64px;
	text-align: center;
}

.ng-typwahl h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 12px;
}

.ng-typwahl > p {
	color: var(--grau);
	font-size: 17px;
	margin: 0 0 36px;
}

.ng-typwahl-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
}

.ng-typwahl-kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 32px 20px;
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd-flaeche);
	text-decoration: none;
	color: var(--dunkel);
	font-weight: 700;
	font-size: 17px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ng-typwahl-kachel svg {
	width: 64px;
	height: auto;
	color: var(--dunkel);
}

.ng-typwahl-kachel:hover {
	border-color: var(--blau);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(30, 25, 18, .12);
}

.ng-typwahl-alle {
	display: inline-block;
	margin-top: 36px;
	color: var(--grau);
	text-decoration: underline;
	font-size: 15px;
}

.ng-typwahl-alle:hover { color: var(--dunkel); }

@media (max-width: 480px) {
	.ng-typwahl { padding: 40px 18px 48px; }
	.ng-typwahl-kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* Verweis auf die Haustyp-Auswahl, oberhalb der Sortierung im
   Katalog — bewusst zurueckhaltend, die Filterspalte daneben bleibt
   der Hauptweg. */

.ng-katalog-typwahl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 9px 16px;
	border-radius: 999px;
	background-color: var(--sand);
	border: 1px solid var(--rand);
	color: var(--dunkel);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ng-katalog-typwahl:hover {
	border-color: var(--blau);
	color: var(--blau);
}

/* Verweis auf die Schwesterseite Hausbauatlas (beide ATLANTA Pfalz
   GmbH). In der Fusszeile zurueckhaltend wie die Rechtstexte, unter
   dem Katalog als ruhiger Absatz — ein Hinweis, keine Reklame. */

.ng-fuss-partner {
	color: #B7ADA0;
	text-decoration: none;
	font-size: 14px;
}

.ng-fuss-partner:hover {
	color: var(--sand);
	text-decoration: underline;
}

.ng-kostenhinweis {
	max-width: 62ch;
	margin: 0 0 44px;
	padding-top: 22px;
	border-top: 1px solid var(--rand);
	font-size: 15px;
	line-height: 1.6;
	color: var(--grau);
}

/* Derselbe Hinweis auf der Produktseite: schliesst direkt an die
   Beschreibung an, deshalb ohne den grossen Abstand nach unten, den
   die Fassung unter dem Katalog braucht. */

.ng-kostenhinweis-produkt {
	margin-bottom: 0;
}

/* ---------------- Bewertungen ---------------- */

.ng-bewertungen {
	max-width: 640px;
	margin: 0 auto 52px;
	padding: 28px 30px;
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-radius: var(--rd);
}

.ng-bewertungen #reviews { margin: 0; }

.ng-bewertungen .woocommerce-Reviews-title {
	font-size: clamp(22px, 3vw, 26px);
	font-weight: 700;
	margin: 0 0 18px;
}

.ng-bewertungen .commentlist { list-style: none; margin: 0 0 22px; padding: 0; }
.ng-bewertungen .commentlist li { border-bottom: 1px solid var(--rand); padding: 16px 0; }
.ng-bewertungen .commentlist li:first-child { padding-top: 0; }
.ng-bewertungen .commentlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.ng-bewertungen .comment-text p.meta { font-size: 13.5px; color: var(--grau); margin: 0 0 6px; }
.ng-bewertungen .comment-text .description p { margin: 0; }

.ng-bewertungen .woocommerce-noreviews {
	font-size: 15px;
	color: var(--grau);
	margin: 0 0 22px;
}

.ng-bewertungen #review_form_wrapper { border-top: 1px solid var(--rand); padding-top: 22px; }
.ng-bewertungen #review_form_wrapper h3 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }

.ng-bewertungen .comment-form-rating label,
.ng-bewertungen .comment-form-comment label,
.ng-bewertungen .comment-form-author label,
.ng-bewertungen .comment-form-email label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--grau);
	margin-bottom: 6px;
}

.ng-bewertungen textarea,
.ng-bewertungen input[type="text"],
.ng-bewertungen input[type="email"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--rand);
	border-radius: calc(var(--rd) * .5);
	background-color: var(--sand);
	font-family: inherit;
	font-size: 15px;
	color: var(--dunkel);
	margin-bottom: 16px;
}

.ng-bewertungen .form-submit input[type="submit"] {
	width: auto;
}

/* ==========================================================
   Beratungsseiten (Ratgeber)
   ========================================================== */

.ng-ratgeber {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 40px;
}

.ng-ratgeber h2 {
	font-size: clamp(21px, 3vw, 25px);
	font-weight: 700;
	margin: 40px 0 14px;
}

.ng-ratgeber h2:first-of-type { margin-top: 8px; }

.ng-ratgeber p { margin: 0 0 16px; }

.ng-kurzantwort {
	background-color: var(--papier);
	border: 1px solid var(--rand);
	border-left: 3px solid var(--akzent-dunkel);
	border-radius: var(--rd);
	padding: 20px 24px;
	margin: 8px 0 32px;
}

.ng-kurzantwort p:first-child {
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--grau);
	margin: 0 0 10px;
}

.ng-kurzantwort p:last-child { margin-bottom: 0; }

.ng-ratgeber table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 28px;
	font-size: 15px;
}

.ng-ratgeber th, .ng-ratgeber td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--rand);
	vertical-align: top;
}

.ng-ratgeber th {
	font-family: 'Karla', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--grau);
}

.ng-ratgeber-verwandt {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--rand);
	font-size: 15px;
}

.ng-ratgeber-verwandt strong { display: block; margin-bottom: 8px; }

.ng-ratgeber-verwandt ul { margin: 0; padding-left: 20px; }
.ng-ratgeber-verwandt li { margin-bottom: 4px; }

@media (max-width: 640px) {
	.ng-ratgeber table, .ng-ratgeber table thead, .ng-ratgeber table tbody,
	.ng-ratgeber table th, .ng-ratgeber table td, .ng-ratgeber table tr {
		display: block;
	}
	.ng-ratgeber table thead { display: none; }
	.ng-ratgeber table tr { border-bottom: 1px solid var(--rand); padding: 10px 0; }
	.ng-ratgeber table td { border: 0; padding: 3px 0; }
	.ng-ratgeber table td:first-child { font-weight: 700; }
}