/* ===========================================================================
 * layout.css -- seitenweite Regeln: Footer, Schaltflaechen, Grundtypo.
 * (Eugen, Phase 3, 14.09.2026). Werte nur aus tokens.css.
 *
 * FOOTER ist ein UX-Block "Footer Shop" (post_type blocks), im Customizer
 * als footer_block zugewiesen; Flatsome haengt darunter seine untere Leiste
 * (footer-absolute: Rechtslinks aus Menue "Footer", Copyright). Angelegt
 * von scripts/startseite-anlegen.php -- HTML dort, Stil hier.
 *
 *   section.ams-footer
 *     .row.ams-footer-kopf    > .ams-footer-marke (Logo, Leitsatz)
 *     .row.ams-footer-spalten > .col x4 (.ux-menu) + .col (.ams-footer-kontakt)
 *   footer .absolute-footer   (Flatsome)
 * ======================================================================== */

/* -- Sanftes Scrollen, seitenweit (Eugen, 08.10.2026) ------------------------------
 * Ankersprünge (z. B. #anfrage auf den Präsente-Seiten, "nach oben") gleiten statt zu
 * springen. scroll-padding-top = Höhe des klebenden Kopfes (gemessen 08.10.2026: 126 px
 * im Zustand .stuck) plus Luft, damit ein Ankerziel nicht darunter verschwindet.
 * Wer im System reduzierte Bewegung eingestellt hat, bekommt den Sprung. */
html {
	scroll-padding-top: calc(126px + var(--ams-s-5));
}

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

/* -- Seitenrand ------------------------------------------------------------------
 * Flatsome gibt .container und den Zeilen in Sektionen nur 15 px Rand; die
 * Breite (site_width 1920) kommt aus dem Customizer. Der Rand waechst mit dem
 * Fenster (Token), damit 1440 und 1920 beide Luft zum Rand haben und
 * Ultrawide nicht auseinanderlaeuft. Verschachtelte Zeilen bleiben
 * unberuehrt (nur direkte Kinder von .section-content).
 */
.container {
	padding-left: var(--ams-container-pad);
	padding-right: var(--ams-container-pad);
}

/* Zeilen tragen 15 px Spaltenpolster; 15 px weniger, damit der Inhalt mit
   dem Logo im Kopf fluchtet (gemessen 14.09.2026: 111 px bei 1920).
   .product-main > .row: die Produktseite (Galerie, Infos, Seitenleiste)
   liegt bei Flatsome ebenfalls ohne Container (Eugen, 15.09.2026). */
.section-content > .row,
.product-main > .row.content-row {
	padding-left: calc(var(--ams-container-pad) - 15px);
	padding-right: calc(var(--ams-container-pad) - 15px);
}

/* -- Seitenhoehe: der Footer bleibt unter der Falte -----------------------------
 * #main allein fuellt das Fenster, der Kopf kommt obendrauf (Eugen,
 * 18.09.2026: "vh + Header"). So beginnt der Footer auf jeder Seite erst
 * nach dem ersten Bildschirm, auch auf kurzen Seiten wie Kontakt. Eine
 * Flex-Spalte auf #wrapper reichte nicht: Sie fuellt das Fenster MIT dem
 * Footer, der dann auf dem Handy oben hereinragte (gemessen 18.09.2026).
 * Der Admin-Balken wird abgezogen, WordPress setzt die Variable nur mit ihm. */
#main {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

/* -- Schaltflaechen: Pillenform aus dem CI -------------------------------------
 * Den Radius besitzt Flatsome (Customizer button_radius = 99px, 14.09.2026 -- mit Einheit, sonst
 * gibt Flatsome "border-radius: 99" aus und nichts passiert);
 * hier nur, was der Customizer nicht kennt: Schatten der Primaer-CTA.
 */
/* Knopftext kleiner, seitenweit (Eugen, 16.09.2026): Flatsome setzt .97em
   (15,5 px), hier .875em (14 px); line-height haelt die Hoehe (39 px).
   Symbolknoepfe (Suche, nach oben) bleiben, sonst schrumpft das Symbol. */
.button:not(.ux-search-submit):not(.back-to-top) {
	font-size: .875em;
	line-height: 2.8em;
}

.button.primary,
.button.ams-btn {
	box-shadow: var(--ams-shadow-cta);
	transition: box-shadow var(--ams-t-base) var(--ams-ease-out),
	            background var(--ams-t-base) var(--ams-ease-out);
}

.button.primary:hover,
.button.ams-btn:hover {
	box-shadow: var(--ams-shadow-cta-hover);
}

/* -- Footer ---------------------------------------------------------------------
 * Umgebaut 08.10.2026 (Eugen) nach dem Footer der Praesente-Entwuerfe
 * (output/praesente/praesente-entwuerfe.html): eine Zeile mit Marke, vier
 * Linkspalten und Kontakt, darunter Flatsomes untere Leiste als Copyright |
 * Rechtslinks | Ortszeile. Markup in einem [ux_html] des Blocks "Footer Shop":
 *
 *   section.ams-footer > .row > .col > div.ams-footer-raster
 *     div.ams-footer-marke  (Logo, Leitsatz)
 *     nav.ams-footer-spalte x4 (strong + a)
 *     div.ams-footer-kontakt
 *   div.absolute-footer.dark > .container > .footer-primary (.copyright-footer, .footer-nav)
 *                                          + .footer-secondary (footer_right_text)
 * Zahlungssymbole sind aus (Customizer payment_icons_placement leer, Eugen 08.10.2026).
 */

.ams-footer {
	background: var(--ams-ink);
	color: var(--ams-white);
}

.ams-footer > .section-content {
	padding-top: var(--ams-s-8);
	padding-bottom: var(--ams-s-7);
}

.ams-footer-raster {
	display: grid;
	grid-template-columns: 300px repeat(4, minmax(0, 1fr)) 260px;
	gap: var(--ams-s-6) var(--ams-s-7);
}

.ams-footer-marke {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ams-s-4);
}

.ams-footer-marke img {
	height: 40px;
	width: auto;
}

.ams-footer-leitsatz {
	margin: 0;
	font: var(--ams-t-small);
	color: rgba(255, 255, 255, .7);
}

.ams-footer-spalte {
	display: flex;
	flex-direction: column;
	gap: var(--ams-s-3);
	font-size: 14px;
}

.ams-footer-spalte strong,
.ams-footer-kontakt strong {
	display: block;
	margin-bottom: var(--ams-s-1);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.ams-footer-spalte a {
	color: var(--ams-white);
	opacity: .85;
}

.ams-footer-spalte a:hover {
	opacity: 1;
	color: var(--ams-white);
}

.ams-footer-kontakt {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .85);
}

/* Rot auf Dunkel ist im CI ausdruecklich das reine Markenrot -- nicht
   "reparieren" (ci-neu/01-design-tokens.md, --brand-red-ondark). */
.ams-footer-kontakt a {
	color: var(--ams-primary);
}

.ams-footer-kontakt a:hover {
	color: var(--ams-white);
}

/* Flatsomes untere Leiste in derselben Flaeche: Copyright links, Rechtslinks
   daneben, Ortszeile rechts (Flatsome floatet .pull-left/.pull-right, hier Flex). */
.absolute-footer.dark {
	background: var(--ams-ink);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: var(--ams-s-5) 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
}

.absolute-footer .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ams-s-3) var(--ams-s-6);
}

/* .clearfix::before/::after (display: table) wuerden im Flex-Fluss zu leeren
   Elementen samt Luecke -- Copyright stand 32 px zu weit rechts (gemessen 08.10.2026). */
.absolute-footer .container::before,
.absolute-footer .container::after {
	content: none;
}

.absolute-footer .footer-primary,
.absolute-footer .footer-secondary {
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ams-s-3) var(--ams-s-6);
	padding: 0;
}

/* Flatsome gibt .footer-secondary VOR .footer-primary aus (Floats); im Flex-Fluss
   deshalb per order: Copyright und Links nach links, Ortszeile nach rechts. */
.absolute-footer .footer-primary {
	order: 1;
}

.absolute-footer .footer-secondary {
	order: 2;
	margin-left: auto;
}

.absolute-footer .copyright-footer {
	order: -1;
	padding: 0;
}

.absolute-footer .footer-nav.uppercase {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
}

.absolute-footer .footer-nav > li > a {
	padding: 0 var(--ams-s-3);
	color: rgba(255, 255, 255, .85);
}

.absolute-footer .footer-nav > li > a:hover {
	color: var(--ams-white);
}

/* "Made with ♥ in Elz" wie auf der Firmenseite (dort Font-Awesome-Herz); hier Inline-SVG
   im Customizer-Text footer_right_text, rot wie das Markenrot (Eugen, 08.10.2026). */
.absolute-footer .ams-herz {
	width: 13px;
	height: 13px;
	margin: 0 1px;
	vertical-align: -1px;
	fill: var(--ams-primary);
}

@media (max-width: 1024px) {
	.ams-footer-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ams-footer-marke {
		grid-column: 1 / -1;
	}
}

@media (max-width: 849px) {
	.ams-footer > .section-content {
		padding-top: var(--ams-s-7);
	}

	.ams-footer-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ams-footer-kontakt {
		grid-column: 1 / -1;
	}

	.absolute-footer .container,
	.absolute-footer .footer-primary {
		justify-content: center;
	}

	.absolute-footer .footer-secondary {
		margin-left: 0;
	}
}

/* -- Katalog: Kategorie- und Shop-Seite -------------------------------------------
 * Flatsomes Archiv liegt weder in .container noch in einer Sektion:
 *   div.shop-page-title > div.page-title-inner.container   <- Brotkrumen, Titel
 *   div.row.category-page-row                              <- Seitenleiste + Raster
 *     div.col.large-3 > div#shop-sidebar.sidebar-inner
 *     div.col.large-9 > div.shop-container > div.products.row
 * Die Zeile bekommt den Seitenrand wie die Sektionszeilen (15 px weniger,
 * die Spalten tragen das Polster).
 */
.category-page-row {
	padding-left: calc(var(--ams-container-pad) - 15px);
	padding-right: calc(var(--ams-container-pad) - 15px);
	padding-top: var(--ams-s-5);
}

/* Seitenleiste schmaler (Eugen, 15.09.2026): Flatsome gibt ihr ein Viertel
   der Breite (large-3), der Sortimentbaum braucht ein Fuenftel nicht. Feste
   Breite, das Raster nimmt den Rest. Unter 850 px liegt die Leiste im
   Off-Canvas, dort gilt Flatsome. */
@media (min-width: 850px) {
	.category-page-row > .col.large-3 {
		flex: 0 0 240px;
		max-width: 240px;
	}

	/* flex-basis 0, nicht auto: mit auto behielte die Spalte Flatsomes
	   Grundbreite und rutschte unter die Leiste (gemessen 15.09.2026). */
	.category-page-row > .col.large-9 {
		flex: 1 1 0%;
		min-width: 0;
		max-width: none;
	}
}

/* Titelzeile: Brotkrumen klein, Titel gross, Beschreibung als Lead. */
.shop-page-title .page-title-inner {
	padding-top: var(--ams-s-6);
	padding-bottom: var(--ams-s-2);
}

/* Kein Titel ueber den Brotkrumen (category_show_title = 0, Eugen,
   15.09.2026) -- die Brotkrumen sind die Ueberschrift, entsprechend groesser,
   die aktuelle Kategorie in Textfarbe. .ams-brot: dieselben Brotkrumen auf
   Builder-Seiten (Kontakt), Markup wie Flatsome (16.09.2026). */
.shop-page-title .breadcrumbs,
.ams-brot {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--ams-ink);
}

.shop-page-title .page-title-inner {
	padding-top: var(--ams-s-6);
	padding-bottom: var(--ams-s-4);
}

.shop-page-title .breadcrumbs a,
.ams-brot a {
	color: var(--ams-ink-3);
	font-weight: 500;
}

.shop-page-title .breadcrumbs a:hover,
.ams-brot a:hover {
	color: var(--ams-primary);
}

.shop-page-title .breadcrumbs .divider,
.ams-brot .divider {
	opacity: .5;
}

.shop-page-title .shop-page-title-text,
.shop-page-title h1.shop-page-title {
	margin: var(--ams-s-2) 0 0;
	font: var(--ams-t-h2);
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ams-ink);
}

.shop-page-title .taxonomy-description,
.shop-page-title .category-page-description {
	max-width: 720px;
	margin-top: var(--ams-s-2);
	font: var(--ams-t-body);
	color: var(--ams-ink-2);
}

.shop-page-title .woocommerce-result-count {
	font: var(--ams-t-small);
	color: var(--ams-ink-3);
}

.shop-page-title .woocommerce-ordering select {
	border-radius: var(--ams-r-image);
	border-color: var(--ams-line);
	box-shadow: none;
}

/* Seitenleiste: Sortimentbaum, Anlass (ams-shop, anlass-filter.php) und
   Ausrichtung (WooCommerce "Nach Attribut filtern"), alle als schlichte
   Listen (Eugen, 18.09.2026). Titel als Bildunterschrift-Stil, Flatsomes
   Trennstrich weg, aktive Rubrik bzw. gewaehlter Filter in Rot. */
#shop-sidebar .widget-title {
	font: var(--ams-t-caption);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ams-ink-3);
}

#shop-sidebar .is-divider {
	display: none;
}

#shop-sidebar .widget li > a {
	display: block;
	padding: 6px 0;
	font-size: 15px;
	color: var(--ams-ink);
	border: 0;
}

#shop-sidebar .widget li > a:hover,
#shop-sidebar .widget li.current-cat > a,
#shop-sidebar .widget li.chosen > a {
	color: var(--ams-primary);
}

#shop-sidebar .widget li.current-cat > a,
#shop-sidebar .widget li.chosen > a {
	font-weight: 600;
}

/* Attributfilter ohne Flatsomes Trennstriche je Zeile -- wie die
   Unterrubriken des Sortimentbaums. */
#shop-sidebar .widget_layered_nav li {
	border: 0;
	padding: 0;
}

/* Gewaehlter Filter: Flatsomes Kreuz vor dem Eintrag bleibt, in Rot. */
#shop-sidebar .widget_layered_nav li.chosen a::before {
	color: var(--ams-primary);
}

/* Anlass als Aufklappliste (Eugen, 18.09.2026), gestaltet wie die Sortierung. */
#shop-sidebar select.ams-anlass-filter {
	width: 100%;
	margin: 0;
	border-radius: var(--ams-r-image);
	border-color: var(--ams-line);
	box-shadow: none;
	font-size: 15px;
	color: var(--ams-ink);
}

#shop-sidebar .widget_layered_nav .count {
	display: none;
}

#shop-sidebar .widget_product_categories li.cat-parent > .children {
	margin-left: var(--ams-s-3);
	border-left: 2px solid var(--ams-line);
	padding-left: var(--ams-s-3);
}

#shop-sidebar .widget_product_categories .count {
	display: none;
}

/* Kategoriebeschreibung steht im Raster-Container ueber den Kacheln (div.shop-container >
   div.term-description); Luft zur ersten Reihe (Eugen, 08.10.2026: 21 px waren zu wenig). */
.shop-container > .term-description {
	padding-bottom: var(--ams-s-5);   /* padding, nicht margin: der Absatz darin traegt schon ~21 px Rand, Raender verschmelzen (gemessen 08.10.2026) */
}

@media (max-width: 849px) {
	.category-page-row {
		padding-top: var(--ams-s-3);
	}
}