/* =============================================================================
   POS-cashservice — Mobile-Überarbeitung
   Basis: Design-Projekt „EC-Terminals mobil“ (templates/ec-terminals-mobil),
   übernommen aus v1.0.8 ohne die Checkout-Regeln.

   Alle Regeln greifen nur bis 767 px. Der Desktop bleibt unangetastet.

   Aufbau:
     Seitenspezifisch  — unter .has-produktuebersicht (Hero, Filter, Sticky-CTA)
     Geteilt           — Produktkarte, Footer-Akkordeon, mobiles Menü, Slider

   Die Inhalte kommen unverändert aus denselben ACF-Feldern wie auf dem Desktop.
   ========================================================================== */

/* Reine Mobil-Bedienelemente — auf dem Desktop haben sie keine Funktion und
   dürfen dort auch nicht im Layout auftauchen. */
.header-text-toggle,
.header-text-toggle[hidden],
.product-viewbar,
.mobile-cta-bar,
.product-data-toggle,
.checkout-nav-sum,
.bontext-toggle,
.checkout-table tr.zero-toggle {
	display: none;
}

/* Slick setzt die Punkte per Inline-Style sichtbar — daher !important. */
.product-slides .slick-dots {
	display: none !important;
}

/* Anzahl der Geräte je Filter — auf beiden Breiten sichtbar, aber dem Label
   klar untergeordnet. */
.product-filters .filter-count {
	margin-left: 8px;
	font-size: .8em;
	font-weight: 400;
	opacity: .55;
}

@media screen and (max-width: 767px) {

:root {
	/* Von main.js aus der echten Kopfzeilenhöhe gesetzt. */
	--pos-header-h: 88px;
}

/* --- 0 · Sticky-Kontext freimachen -------------------------------------------
   .site kappt mit overflow:hidden den horizontalen Überhang der Deko-Formen —
   macht damit aber auch jedes position:sticky darin wirkungslos. `clip` kappt
   genauso, erzeugt aber keinen Scroll-Container. */
.has-produktuebersicht .site {
	overflow: clip;
}

/* --- 1 · Hero (alle Seitenköpfe): keine 100vh-Falle, CTA über der Falz --------
   Vorher: height:calc(100vh - 88px) — der CTA landet unter dem ersten Bild. */
.page-header.main-slider {
	height: auto;
	border-radius: 0 0 26px 26px;
}

.page-header.main-slider > .inner {
	padding: 28px 15px 0;
}

.page-header h1 {
	font-size: 30px;
	line-height: 1.08;
	margin-bottom: 10px;
}

.page-header p {
	font-size: 16px;
	line-height: 1.55;
}

/* Der lange SEO-Text bleibt im DOM — er wird nur auf fünf Zeilen gekürzt.
   Über eine feste Höhe statt line-clamp: line-clamp versagt (v. a. in iOS
   Safari), sobald der Text in eigenen <p>/<strong> steckt — dann lugte eine
   sechste Zeile unter dem „…“ hervor. Die letzte Zeile blendet sanft aus. */
.header-text p {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
}

.header-text p + p {
	margin-top: .8em;
}

.header-text.is-collapsed {
	max-height: calc(16px * 1.55 * 5);
	overflow: hidden;
}

/* Ausblenden nur, wenn wirklich Text abgeschnitten ist (Klasse setzt main.js). */
.header-text.is-collapsed.has-more {
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
	mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Seitenkopf ohne Bild: Abstand zur abgerundeten Unterkante. */
.page-header.main-slider:not(:has(.main-inner-image)) > .inner {
	padding-bottom: 30px;
}

.header-text-toggle {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #f8bb5a;
	cursor: pointer;
}

.page-header-buttons.slider-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.page-header-buttons.slider-buttons a,
.page-header-buttons.slider-buttons a:last-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 0;
	font-size: 17px;
	border-radius: 14px;
}

/* Motiv als Abschlussband des Hero statt als eingeklappte Desktop-Spalte.
   Die Desktop-Gestaltung (Kreis mit 10–40 px Ring, nach rechts/unten
   verschoben) wird komplett zurückgesetzt — sonst entsteht ein angeschnittenes
   Oval mit leerer Fläche davor. */
.page-header .main-inner-image {
	position: static;
	top: auto;
	right: auto;
	width: auto;
	max-width: none;
	height: 190px;
	margin: 22px 15px 24px;
	border: 0;
	border-radius: 18px;
	overflow: hidden;
}

.page-header .main-inner-image img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	/* Fokuspunkt pro Bild aus der Mediathek (pos_focus_style()), sonst Standard. */
	object-position: var(--pos-focus, 58% 42%);
}

.breadcrumbs-section.section {
	padding: 14px 0 0 !important;
}

/* --- 2 · Filter: Chip-Leiste statt gestapelter Linkblock ---------------------
   Vorher: display:inline-block — fünf Links untereinander im blauen Kasten. */
.has-produktuebersicht .product-filters {
	display: flex;
	position: sticky;
	top: var(--pos-header-h);
	z-index: 5;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -15px 4px;
	padding: 11px 15px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid #eef0f4;
	border-radius: 0;
}

.has-produktuebersicht .product-filters::-webkit-scrollbar {
	display: none;
}

.has-produktuebersicht .product-filters a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: #4b5563;
	background: #fff;
	border: 1.5px solid #dfe3ea;
	border-radius: 999px;
}

.has-produktuebersicht .product-filters a.active-filter {
	color: #fff;
	background: #164194;
	border-color: #164194;
}

.has-produktuebersicht .product-filters .filter-count {
	margin-left: 7px;
	font-size: 14px;
}

/* --- 3 · Trefferzahl und Ansichtswechsel ---------------------------------- */
.has-produktuebersicht .product-viewbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0 10px;
}

.product-viewbar-count {
	font-size: 14px;
	color: #6b7280;
}

.product-viewbar-count strong {
	font-family: var(--heading-font, inherit);
	font-size: 15px;
	font-weight: 400;
	color: #164194;
}

.product-viewswitch {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: #eef0f4;
	border-radius: 12px;
}

.product-viewswitch button {
	min-width: 66px;
	min-height: 40px;
	padding: 0 12px;
	background: transparent;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #6b7280;
	cursor: pointer;
}

.product-viewswitch button.is-active {
	background: #fff;
	color: #164194;
	box-shadow: 0 1px 3px rgba(10, 30, 68, .14);
}

/* --- 4 · Produktkarte: kompakter, Motiv vollständig sichtbar --------------- */
.product-grid .col4 {
	padding-top: 0;
	padding-bottom: 14px;
}

.product-card {
	background: #fff;
	border: 1px solid #e4e7ee;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(10, 30, 68, .05);
}

.product-card .product-image {
	height: 202px;
	border-radius: 0;
}

.product-card .pmain-image {
	height: 100%;
	padding: 14px 14px 10px;
}

.product-card .pmain-image img {
	width: 100%;
	height: 100%;
	/* Gerät ganz zeigen statt am Kasten abschneiden. */
	object-fit: contain;
}

/* Desktop verteilt Titel und Text mit space-between über die volle Kartenhöhe —
   mobil reißt das eine Lücke zwischen beide. */
.product-card .product-details {
	display: block;
	padding: 16px;
}

.product-card h2,
.product-card h3 {
	font-size: 21px;
	line-height: 1.2;
	padding: 0 0 8px;
}

.product-card p {
	font-size: 15px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 5 · Preis: Pille im Bild statt überstehender Kreis ----------------------
   Vorher: 140×140-Kreis mit right:-35px — ragt über den Kartenrand hinaus. */
.product-price {
	right: 12px;
	bottom: 12px;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 999px;
	overflow: visible;
	box-shadow: 0 3px 10px rgba(10, 30, 68, .14);
}

.pcircle {
	display: block;
	padding: 8px 14px;
}

.pcircle::before {
	display: none;
}

.ptext {
	position: static;
	transform: none;
	font-size: 14px;
	font-weight: 700;
	color: #164194;
}

/* Der Hover-Zustand hat auf dem Touchscreen keine Funktion. */
.pcircle-hover {
	display: none;
}

/* --- 6 · Badges: ruhiger, ohne Dauer-Animation ---------------------------- */
.product-card .product-tags.sale,
.product-card .product-tags.normal {
	top: 12px;
	left: 12px;
	padding: 7px 14px;
	font-size: 12.5px;
	border-radius: 999px;
	animation: none;
}

.product-card .product-tags.sale {
	/* Markennahes Rot statt #e60023. */
	background-color: #d23b3b;
	box-shadow: 0 3px 10px rgba(210, 59, 59, .3);
}

/* --- 7 · Listenansicht: Geräte schnell überfliegen ------------------------- */
.product-grid.is-list .col4 {
	padding-bottom: 0;
}

.product-grid.is-list .product-card {
	border: 0;
	border-bottom: 1px solid #eef0f4;
	border-radius: 0;
	box-shadow: none;
}

.product-grid.is-list .product-card > a {
	display: grid;
	grid-template-columns: 76px 1fr;
	grid-template-areas:
		"img details"
		"img price";
	align-items: center;
	column-gap: 13px;
	padding: 13px 0;
}

/* Bild und Preis werden zu direkten Rasterfeldern. */
.product-grid.is-list .product-image-wrap {
	display: contents;
}

.product-grid.is-list .product-image {
	grid-area: img;
	height: 76px;
	border-radius: 16px;
}

.product-grid.is-list .pmain-image {
	padding: 6px;
}

.product-grid.is-list .product-details {
	grid-area: details;
	padding: 0;
}

.product-grid.is-list .product-card h2 {
	font-size: 17px;
	line-height: 1.25;
	padding: 0;
}

.product-grid.is-list .product-card p,
.product-grid.is-list .product-tags {
	display: none;
}

.product-grid.is-list .product-price {
	grid-area: price;
	position: static;
	justify-self: start;
	background: none;
	box-shadow: none;
}

.product-grid.is-list .pcircle {
	padding: 4px 0 0;
}

.product-grid.is-list .ptext {
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
}

/* --- 8 · Abschnittsrhythmus -------------------------------------------------
   Die globale Regel `.section { padding: 40px 0 !important }` ergibt zwischen
   zwei Abschnitten 80 px. Hier lagen vorher nur zwei Abschnitte auf 24 px —
   das erzeugte den ungleichmäßigen Rhythmus. Jetzt ein Wert für alle. */
.has-produktuebersicht .site-content .section,
.single-product .product-info-container .section {
	padding: 28px 0 !important;
}

.has-produktuebersicht .produktubersicht.section {
	padding: 24px 0 8px !important;
}

/* --- 9 · Mobiles Menü: größere Ziele -------------------------------------- */
.mobile-menu ul li a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 17px 15px;
	font-size: 20px;
}

/* --- 10 · Footer: Linkwand als Akkordeon ------------------------------------
   Greift nur auf Widgets mit Menü-Liste. Anschrift und E-Mail bleiben offen. */
.site-footer .footer-widget.is-collapsible ul {
	display: none;
}

.site-footer .footer-widget.is-collapsible.is-open ul {
	display: block;
}

.site-footer .footer-widget.is-collapsible h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid #e2e2e2;
	cursor: pointer;
}

.site-footer .footer-widget.is-collapsible h4::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: #e6eaf2;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	color: #164194;
}

.site-footer .footer-widget.is-collapsible.is-open h4::after {
	content: "–";
}

.site-footer .footer-widget.is-collapsible ul li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 0;
	font-size: 15px;
}

/* --- 10b · Footer: Kontakt- und Rechtslinks als echte Tap-Ziele -------------
   Die Menülisten löst bereits das Akkordeon. Offen bleiben Anschrift/E-Mail
   und die Zeile mit Impressum, AGB und Datenschutz — dort sind die Ziele
   bisher 14 bis 23 px hoch. */
.site-footer .footer-widget:not(.is-collapsible) a,
.site-footer .footer-block a,
.site-bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Social-Icons liegen bei 40 px — die vier fehlenden Pixel kosten nichts. */
.site-footer .footer-social a {
	min-width: 44px;
	min-height: 44px;
}

/* --- 11 · Sticky-Bestellleiste -------------------------------------------- */
.mobile-cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid #e4e7ee;
	transform: translateY(110%);
	transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}

.is-scrolled .mobile-cta-bar {
	transform: none;
}

/* Bei offenem Menü hat die Leiste nichts zu suchen — sie läge darüber. */
.site.menu-opened .mobile-cta-bar {
	display: none;
}

.mobile-cta-bar .button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	font-size: 17px;
	border-radius: 14px;
}

.mobile-cta-bar .call {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: #164194;
	border: 1.5px solid #dfe3ea;
	border-radius: 14px;
}

.mobile-cta-bar .whatsapp img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Platz, damit die Leiste den Seitenfuß nicht verdeckt. */
.has-mobile-cta-bar .site-footer-note {
	padding-bottom: 96px !important;
}

/* --- 12 · Kundenstimmen ------------------------------------------------------
   Hier stand eine Scroll-Snap-Reihe. Der Slider läuft aber über Slick mit
   `fade: true` — die Flex-Regeln haben dessen Track auf 7.452 px aufgezogen,
   sodass das Zitat rechts aus dem Bild lief. Slick bleibt jetzt unangetastet;
   das Theme bringt für ≤767 px eigene Regeln mit (style.css ab L8750).
   Ergänzt wird nur der fehlende Innenabstand links. */
.zitat-slider .review-content {
	padding-left: 15px;
}

/* =============================================================================
   PRODUKTSEITE (single-product) — ab hier nur die Detailseite
   ========================================================================== */

/* --- P1 · Galerie: Motiv kompakter, Umschalter aufs Bild -------------------
   Vorher: 437 px hohes Bild, darüber eine volle Chip-Zeile — der erste
   Bestell-Button lag dadurch rund 1.270 px tief. */
/* Positionierungskontext für die überlagerten Umschalter. `top` muss mit
   zurückgesetzt werden: das Theme parkt hier ein `top:180px` aus der
   Desktop-Sticky-Regel, das `position:relative` sonst wieder scharf schaltet. */
.single-product .gallery-tab {
	position: relative;
	top: auto;
}

.single-product .gallery-head {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	gap: 4px;
	width: auto;
	margin: 0;
	padding: 3px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid #e4e7ee;
	border-radius: 12px;
}

.single-product .gallery-head a {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0 14px;
	font-size: 13px;
	border-radius: 9px;
}

.single-product .gallery-block,
.single-product .gallery-content {
	background: #f7f8fa;
	border: 1px solid #eef0f4;
	border-radius: 20px;
	overflow: hidden;
	transform: translateZ(0);
}

/* Oben Platz für die überlagerten Umschalter, damit sie nicht auf dem Gerät liegen.
   display:block, sonst greift margin:auto nicht und das Gerät klebt links.
   Größer als zuvor (290 px): das Gerät ist das wichtigste Motiv der Seite. */
.single-product .gallery-block img {
	display: block;
	max-height: 400px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	padding: 58px 12px 10px;
	object-fit: contain;
}

/* Abstände straffen: die globale 40-px-Regel für .section lässt zwischen
   Brotkrume und Galerie sonst rund 120 px leer stehen. */
.single-product .product-breadcrumbs.section {
	padding: 10px 0 0 !important;
}

.single-product .product-main.section {
	padding-top: 16px !important;
}

/* --- P2 · Reihenfolge: Preis und Bestellweg über die Falz ------------------- */
.single-product .product-info {
	display: flex;
	flex-direction: column;
}

.single-product .product-info p.product-tags { order: 1; }
.single-product .product-info h1           { order: 2; margin-bottom: 12px; }
.single-product .offer-badge-wrap          { order: 3; }
.single-product .plans-head                { order: 5; }
.single-product .product-actions           { order: 6; }
.single-product .product-desc              { order: 7; padding-top: 20px; }
.single-product .product-oos               { order: 8; }
.single-product .product-features          { order: 9; }

/* --- P3 · Umschalter technische Daten --------------------------------------- */
.single-product .product-data-toggle {
	display: flex;
}

/* --- P4 · Vertragsoptionen als wischbare Chip-Zeile ------------------------- */
/* `wrap` ist hier zwingend: die Überschrift belegt mit flex-basis:100% eine
   ganze Zeile. Mit `nowrap` landeten die Chips dahinter bei x=383 und waren
   außerhalb des Viewports — die Vertragsoption war nicht mehr wählbar. */
.single-product .plans-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 4px;
	margin: 16px 0 0;
}

.single-product .plans-head::-webkit-scrollbar {
	display: none;
}

/* Die Überschrift bricht die Zeile um und bleibt oberhalb der Chips. */
.single-product .plans-head h2 {
	flex: 0 0 100%;
	margin-bottom: 10px;
}

.single-product .plans-head a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	margin: 0 !important;
	padding: 0 18px;
	border-radius: 12px;
	white-space: nowrap;
}

/* --- P5 · CTA-Hierarchie: der Haupt-CTA gewinnt -----------------------------
   Vorher: „Offline-Bestellformular“ war mit 310 px breiter als der orange
   Haupt-Button mit 209 px. */
.single-product .product-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 18px;
}

.single-product .product-actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 0 !important;
	font-size: 17px;
	border-radius: 14px;
}

/* Zweitweg entdramatisieren: Textlink statt zweiter Vollflächen-Button. */
.single-product .product-actions .button.style1 {
	min-height: 44px;
	background: none;
	border: 0;
	font-size: 14.5px;
	color: #164194;
}

.single-product .product-actions .button.style1 .button-hover {
	display: none;
}

/* --- P6 · Slider: Wischen mit Punkten statt Pfeil-Kreisen -------------------
   Vorher: zwei orange Pfeil-Kreise liegen mitten auf dem Motiv. */
.single-product .product-slider .swiper-buttons {
	display: none;
}

.single-product .product-slides .slick-dots {
	display: flex !important;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 14px 16px;
	list-style: none;
}

.single-product .product-slides .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
}

.single-product .product-slides .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(22, 65, 148, .28);
	font-size: 0;
}

.single-product .product-slides .slick-dots li.slick-active button {
	width: 28px;
	background: #f39200;
}

/* --- P7 · Technische Daten: zwölf Karten werden Label-Wert-Zeilen ----------- */
.single-product .product-data-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	margin-top: 14px;
	padding: 16px;
	background: #f7f8fa;
	border: 1px solid #e4e7ee;
	border-radius: 16px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	text-align: left;
	color: #164194;
	cursor: pointer;
}

.single-product .product-data-toggle::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: #eef2fa;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
}

.single-product .product-data-toggle[aria-expanded="true"] {
	border-radius: 16px 16px 0 0;
}

.single-product .product-data-toggle[aria-expanded="true"]::after {
	content: "–";
}

.single-product .product-data-list {
	display: none;
	padding: 4px 16px 8px;
	border: 1px solid #e4e7ee;
	border-top: 0;
	border-radius: 0 0 16px 16px;
}

.single-product .product-data-list.is-open {
	display: block;
}

.single-product .product-data-list .col4 {
	padding: 0 !important;
	flex: 1 1 100%;
	max-width: 100%;
}

.single-product .product-data .data-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: auto;
	padding: 12px 0;
	background: none;
	border-top: 1px solid #f2f4f8;
	border-radius: 0;
}

.single-product .product-data .data-card h3 {
	flex: 0 0 40%;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: #164194;
}

.single-product .product-data .data-card p {
	flex: 1;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: #4b5563;
}

/* --- P8 · Bestehende Bestell-Leiste straffen -------------------------------
   Die Produktseite bringt mit .product-popup bereits eine fixierte Leiste mit.
   Sie belegt mobil 186 px — Name, Vertragsoption und zwei gleich schwere
   Buttons. Hier bleibt der Haupt-CTA, der Rest tritt zurück. */
.single-product .product-popup .popup-name,
.single-product .product-popup .popup-option {
	display: none;
}

.single-product .product-popup {
	padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
}

.single-product .product-popup .product-actions {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding-top: 0;
}

.single-product .product-popup .product-actions .button {
	flex: 1;
	min-height: 52px;
	font-size: 16.5px;
}

/* Der Download-Weg gehört nicht in die Bestell-Leiste — er steht oben im
   Seiteninhalt bereits als Textlink. In der Leiste trägt er keine eigene
   Klasse, daher über :last-child. */
.single-product .product-popup .product-actions .button:last-child:not(:first-child) {
	display: none;
}

/* Platz, damit die Leiste den Seitenabschluss nicht verdeckt. */
.single-product .site-footer-note {
	padding-bottom: 96px !important;
}

/* --- 14 · „Zahlen und Fakten": Bildzeile + Highlight + kompakte Zeilen -------
   Vorher: fünf gleich breite Blöcke untereinander (Karte, Bild, Karte, Karte,
   Bild), rund 1.080 px. Jetzt ordnet ein Grid die vorhandenen Elemente neu —
   die .col3-Hüllen werden per display:contents aufgelöst, das Markup bleibt.
     Zeile 1: beide Fotos nebeneinander
     Zeile 2: erste Zahl als blaue Highlight-Karte
     Zeile 3+4: weitere Zahlen als Zeile (Zahl links, Text rechts) */
.facts-figures .cwrap:last-child {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	position: static;
	left: auto;
	width: auto;
	height: auto;
	margin: 24px 0 0;
	overflow: visible;
}

.facts-figures .cwrap:last-child .col3 {
	display: contents;
}

.facts-figures .cwrap:last-child .fact-card,
.facts-figures .cwrap:last-child .fact-image {
	flex: none !important;
	max-width: none !important;
	width: auto;
	margin: 0 !important;
}

/* Fotos */
.facts-figures .col3:nth-child(2) .fact-image,
.facts-figures .col3:nth-child(3) .fact-image {
	grid-row: 1;
	height: 150px;
	border-radius: 18px;
}

.facts-figures .col3:nth-child(2) .fact-image { grid-column: 1; }
.facts-figures .col3:nth-child(3) .fact-image { grid-column: 2; }

/* Alle Zahlen-Karten: volle Breite, Text links */
.facts-figures .cwrap:last-child .fact-card {
	grid-column: 1 / -1;
	height: auto !important;
	padding: 18px 20px;
	border-radius: 18px;
	text-align: left;
}

.facts-figures .cwrap:last-child .fact-content {
	position: static;
	transform: none;
	width: auto;
	padding: 0;
}

.facts-figures .fact-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: 600;
}

/* Highlight: erste Zahl groß auf Blau, mit dem Ring aus dem Logo */
.facts-figures .col3:nth-child(1) .fact-card {
	grid-row: 2;
	overflow: hidden;
	padding: 26px 22px 24px;
	background: #164194;
	color: #fff;
}

.facts-figures .col3:nth-child(1) .fact-card::after {
	content: "";
	position: absolute;
	top: -66px;
	right: -50px;
	width: 150px;
	height: 150px;
	border: 16px solid #f39200;
	border-radius: 50%;
	pointer-events: none;
}

.facts-figures .col3:nth-child(1) .fact-card h3 {
	position: relative;
	z-index: 1;
	margin-bottom: 8px;
	font-size: 58px;
	line-height: 1;
	color: #fff;
}

.facts-figures .col3:nth-child(1) .fact-card p {
	position: relative;
	z-index: 1;
	max-width: 88%;
	font-size: 16px;
	color: #fff;
}

/* Weitere Zahlen: Zahl links, Text rechts */
.facts-figures .col3:nth-child(2) .fact-card { grid-row: 3; }
.facts-figures .col3:nth-child(3) .fact-card { grid-row: 4; }

.facts-figures .col3:nth-child(2) .fact-content,
.facts-figures .col3:nth-child(3) .fact-content {
	display: grid;
	grid-template-columns: 92px 1fr;
	align-items: center;
	gap: 14px;
}

.facts-figures .col3:nth-child(2) .fact-card h3,
.facts-figures .col3:nth-child(3) .fact-card h3 {
	margin: 0;
	font-size: 38px;
	line-height: 1;
}

/* --- 13 · Safari: gerundete Bildrahmen sauber beschneiden --------------------
   border-radius + overflow:hidden über einem Bild wird in Safari erst dann
   korrekt beschnitten, wenn der Container einen eigenen Stacking-Kontext hat. */
.product-card .product-image,
.bild-akkordeon .akkordeon-image {
	transform: translateZ(0);
}


/* =============================================================================
   CHECKOUT — der Bestellprozess auf der Produktseite (.product-checkout)
   Dieselben Klassen nutzt die interne Bestellansicht (pos-order.php), die Regeln
   greifen dort mit.
   ========================================================================== */

/* --- C1 · Fortschritt: alle vier Schritte statt eines einzelnen Kreises -----
   Vorher: drei der vier .checkout-process sind ausgeblendet, übrig bleibt ein
   96 px hoher Kreis ohne Aussage darüber, wo man steht und wie viel folgt. */
/* Wie bei der Übersichtsseite: .site kappt mit overflow:hidden den seitlichen
   Überhang und macht damit jedes position:sticky darin wirkungslos. `clip`
   kappt genauso, erzeugt aber keinen Scroll-Container. */
.single-product .site {
	overflow: clip;
}

.product-checkout.section {
	padding: 0 0 8px !important;
}

.product-checkout > .inner {
	padding-top: 0;
}

/* Die durchgehende Verbindungslinie stammt aus dem Desktop-Layout: absolut
   positioniert auf halber Höhe der Kreise. Über den Spaltenbalken liegt sie
   quer im Bild. */
.checkout-header::before,
.checkout-header::after {
	display: none !important;
}

.checkout-header {
	position: sticky;
	top: var(--pos-header-h); /* echte Kopfzeilenhöhe (main.js), sonst liegt sie darunter */
	z-index: 30;
	margin: 0 -15px 18px;
	padding: 10px 15px 12px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid #EEF0F4;
}

.checkout-header .cwrap {
	display: flex;
	align-items: stretch;   /* sonst enden die Balken auf vier verschiedenen Höhen */
	gap: 6px;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* Jeder Schritt wird zu einer eigenen Spalte: Beschriftung oben, Balken unten. */
.checkout-header .checkout-process,
.checkout-header .checkout-process.active-process {
	display: flex !important;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	text-align: left;
}

.checkout-header .checkout-process h3 {
	margin: 0;
	padding: 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: #9AA2B1;
	hyphens: auto;          /* trennt an erlaubten Stellen statt mitten im Wort */
}

.checkout-header .checkout-process.active-process h3,
.checkout-header .checkout-process.completed-process h3 {
	color: #164194;
}

/* Der Nummernkreis wird zum Fortschrittsbalken. */
.checkout-header .checkout-head-svg {
	order: 2;
	width: auto !important;
	height: 4px !important;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: #E4E7EE;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

/* Das Icon steckt als <img> mit dem orangen Kreis darin — es überlagert sonst
   den Balken und ergibt eine gestauchte Ellipse. */
.checkout-header .checkout-head-svg > * {
	display: none !important;
}

/* Den Kreis zeichnet der Desktop zusätzlich über zwei absolut positionierte
   Pseudo-Elemente mit border-radius:50%. Auf dem flachen Balken bleiben davon
   blaue Ellipsen übrig. */
.checkout-header .checkout-head-svg::before,
.checkout-header .checkout-head-svg::after {
	display: none !important;
}

.checkout-header .active-process .checkout-head-svg,
.checkout-header .completed-process .checkout-head-svg {
	background: #F39200;
}

/* --- C2 · Auswahl: antippbare Karten statt 22-px-Zeilen ---------------------
   Vorher: Zeilenhöhe 22 px, Klickfläche praktisch nur der Punkt selbst. */
.checkout-inner .radio-buttons,
.checkout-inner .input-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.checkout-inner .radio-buttons label,
.checkout-inner .input-checkboxes label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	margin: 0;
	padding: 13px 14px 13px 44px;
	border: 1.5px solid #E4D3B4;
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
}

.checkout-inner .radio-buttons label input,
.checkout-inner .input-checkboxes label input {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	margin: 0;
}

/* Der ℹ-Marker sitzt im Desktop-Layout 11 px über seiner Zeile. In der Karte
   ragt er damit über den oberen Rand. Mittig in der Zeile bleibt er innerhalb. */
.checkout-inner .radio-buttons label .tooltip,
.checkout-inner .input-checkboxes label .tooltip {
	top: 50%;
	transform: translateY(-50%);
}

/* Abstand nach Kartengruppen: Bei den Zahlverfahren folgt direkt ein Logo
   bzw. die Kartenleiste — ohne Abstand klebten sie an der Karte. */
.checkout-inner .radio-buttons + *,
.checkout-inner .input-checkboxes + * {
	margin-top: 14px;
}

/* „Zu einem späteren Zeitpunkt“ steht außerhalb der Lieferungs-Gruppe —
   gleiche Karte wie die übrigen Lieferoptionen. */
.checkout-inner .date-field {
	margin-top: 8px;
}

.checkout-inner .date-field label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	margin: 0;
	padding: 13px 14px 13px 44px;
	border: 1.5px solid #E4D3B4;
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
}

.checkout-inner .date-field label input {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	margin: 0;
}

.checkout-inner .date-field label:has(input:checked) {
	border-color: #164194;
	background: #EEF2FA;
}

/* Getroffene Wahl sichtbar machen, nicht nur am Punkt. */
.checkout-inner .radio-buttons label:has(input:checked),
.checkout-inner .input-checkboxes label:has(input:checked) {
	border-color: #164194;
	background: #EEF2FA;
}

/* --- C3 · Eingabefelder und Abschnitte -------------------------------------
   Die Schriftgröße liegt bereits bei 16 px, der iOS-Zoom greift also nicht.
   Hier geht es um Höhe, Rhythmus und ruhigere Überschriften. */
.checkout-inner {
	padding: 18px 16px;
}

.checkout-inner h4 {
	font-size: 20px;
	line-height: 1.2;
	margin-bottom: 14px;
}

.checkout-inner input[type="text"],
.checkout-inner input[type="email"],
.checkout-inner input[type="tel"],
.checkout-inner input[type="url"],
.checkout-inner input[type="date"],
.checkout-inner input[type="number"],
.checkout-inner select {
	min-height: 52px;
	font-size: 16px;
}

.checkout-inner textarea {
	min-height: 110px;
	font-size: 16px;
	line-height: 1.5;
}

.checkout-inner label {
	font-size: 14.5px;
	line-height: 1.35;
}

.checkout-note {
	font-size: 13.5px;
	line-height: 1.55;
}

/* --- C4 · Navigation: feste Leiste statt mitscrollendem Block ---------------
   Vorher: 160 px hoher statischer Block am Seitenende — auf dem Weg dorthin
   ist der nächste Schritt nicht erreichbar. */
.checkout-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid #E4E7EE;
}

/* Zurück: nur das Symbol, der Text hat mobil keinen Platz. */
.checkout-nav .checkout-back {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
}

.checkout-nav .checkout-back span {
	display: none;
}

.checkout-nav .checkout-back svg {
	width: 40px;
	height: 40px;
}

.checkout-nav .checkout-next {
	flex: 1;
	margin: 0;
}

.checkout-nav .checkout-next .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	font-size: 16px;
	border-radius: 14px;
}

/* Platz, damit die Leiste den letzten Abschnitt nicht verdeckt. */
.checkout-content {
	padding-bottom: 96px;
}

/* --- C5 · Übersicht in Schritt 4 ------------------------------------------ */
.checkout-table table tr {
	padding: 12px 16px;
}

.order-info-block .pricing-row {
	display: flex;
	gap: 12px;
	padding: 9px 0;
	font-size: 13.5px;
	line-height: 1.45;
}

.order-info-block .pricing-row > *:first-child {
	flex: 0 0 44%;
}

.order-info-block .pricing-row > *:last-child {
	flex: 1;
	font-weight: 700;
}

/* --- C6 · Laufende Preiszeile in der festen Leiste --------------------------
   Monatlich/Einmalig aus derselben Berechnung wie die Übersicht (checkout.js). */
.checkout-nav .checkout-nav-sum:not([hidden]) {
	display: flex;
	flex: 1 1 100%;
	justify-content: space-between;
	gap: 12px;
	order: -1;
	font-size: 13.5px;
	line-height: 1.3;
	color: #4b5563;
}

.checkout-nav .checkout-nav-sum strong {
	margin-left: 4px;
	color: #164194;
	font-size: 15px;
}

/* Die Preiszeile macht die Leiste höher — Inhalt entsprechend freihalten. */
.checkout-content {
	padding-bottom: 124px;
}

/* --- C7 · Letzter Schritt: Leiste zurück in den Fluss ------------------------
   In Schritt 4 sitzt „Bestellung abschließen“ im Inhalt, „Weiter“ ist
   ausgeblendet — fest unten bliebe nur ein Zurück-Pfeil. */
.product-checkout.is-final-step .checkout-nav {
	position: static;
	padding: 16px 0 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-top: 0;
}

.product-checkout.is-final-step .checkout-nav .checkout-next,
.product-checkout.is-final-step .checkout-nav .checkout-nav-sum {
	display: none;
}

.product-checkout.is-final-step .checkout-content {
	padding-bottom: 0;
}

.product-checkout .place-order.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	font-size: 17px;
	border-radius: 14px;
}

/* Pflicht-Checkboxen (AGB, Rechtstexte): größeres Ziel, lesbare Schrift. */
#process4 input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 10px 0 0;
}

#process4 label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.45;
}

/* --- C8 · Bontext: Vorschau statt fünf Felder --------------------------------
   Die Felder befüllt checkout.js aus den Firmenangaben. Eingeklappt zeigt die
   Vorschau, was gedruckt wird; „Bontext anpassen“ öffnet die Felder. */
.bontext-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #164194;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bontext-fields {
	display: none;
	margin-top: 14px;
}

.bontext-fields.is-open {
	display: block;
}

/* --- C9 · Übersicht: Summen oben, Positionen kompakt -------------------------
   Vorher: jede Position als Block mit fünf beschrifteten Zeilen, die Summen
   erst nach vielen Bildschirmen. Jetzt: Summen zuerst, je Position eine Zeile
   „Name … Betrag“ und darunter klein „monatlich · 1 × 3,00 €“. */
.checkout-table table tbody {
	display: flex;
	flex-direction: column;
}

.checkout-table table tr.total-row {
	order: -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 0;
}

.checkout-table table tr.total-row + tr.total-row {
	margin-bottom: 12px;
}

/* Blau auf Orange war kaum lesbar — Summen in Textfarbe und fett. */
.checkout-table table tr.total-row th,
.checkout-table table tr.total-row td,
.checkout-table table tr.total-row td span {
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--body-font-color);
}

.checkout-table table tr:not(:first-child):not(.total-row):not(.zero-toggle) {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	column-gap: 6px;
	row-gap: 2px;
	align-items: baseline;
	padding: 12px 16px;
}

.checkout-table table tr:not(:first-child):not(.total-row) > th,
.checkout-table table tr:not(:first-child):not(.total-row) > td {
	padding: 0;
	font-size: 14.5px;
}

/* Die per JS vorangestellten Beschriftungen („Beschreibung:“ …) braucht die
   kompakte Zeile nicht. */
.checkout-table .cell-label {
	display: none;
}

.checkout-table table tr:not(.total-row) > th {
	grid-column: 1 / 4;
	grid-row: 1;
	font-weight: 700;
}

.checkout-table table tr:not(.total-row) > td:last-child {
	grid-column: 4;
	grid-row: 1 / 3;
	align-self: center;
	font-weight: 700;
	white-space: nowrap;
	text-align: right !important;
}

.checkout-table table tr:not(.total-row) > td:nth-child(2),
.checkout-table table tr:not(.total-row) > td:nth-child(3),
.checkout-table table tr:not(.total-row) > td:nth-child(4) {
	grid-row: 2;
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
}

.checkout-table table tr:not(.total-row) > td:nth-child(2) { grid-column: 1; }
.checkout-table table tr:not(.total-row) > td:nth-child(3) { grid-column: 2; }
.checkout-table table tr:not(.total-row) > td:nth-child(4) { grid-column: 3; }

.checkout-table table tr:not(.total-row) > td:nth-child(3)::before {
	content: "· ";
}

.checkout-table table tr:not(.total-row) > td:nth-child(3)::after {
	content: " ×";
}

/* !important: die Grid-Regel oben ist über ihre :not()-Kette spezifischer. */
.checkout-table table tr.is-empty,
.checkout-table:not(.show-zero) table tr.is-zero {
	display: none !important;
}

.checkout-table table tr.zero-toggle {
	display: block;
	padding: 0;
}

.checkout-table table tr.zero-toggle td {
	padding: 0;
}

.checkout-table table tr.zero-toggle button {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #164194;
	text-align: left;
	cursor: pointer;
}

/* =============================================================================
   Startseite — alles unter body.home
   Die Blöcke stapeln bereits über die generischen 767-px-Regeln des Themes.
   Hier geht es nur um Schriftgrößen, Tap-Ziele und Slider-Bedienung.
   Farben, Reihenfolge und Aufbau bleiben wie auf dem Desktop.
   ========================================================================== */

/* --- S1 · Hero: Überschrift auf Mobilmaß, CTAs als volle Breite -------------
   Gleiche Typo-Stufe wie der Hero der Produktübersicht (Sektion 1). */
.home .main-slider h1 {
	font-size: 30px;
	line-height: 1.08;
}

.home .main-slider .sub-heading {
	margin-bottom: 10px;
	font-size: 14px;
}

.home .main-slider p {
	font-size: 16px;
	line-height: 1.5;
}

/* Zwei gestapelte Vollbreiten-Buttons statt zweier schmaler nebeneinander. */
.home .main-slider .slider-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.home .main-slider .slider-buttons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	border-radius: 14px;
}

/* Der 20-px-Abstand stammt aus der Desktop-Stapelung — `gap` übernimmt das. */
.home .main-slider .slider-buttons a:first-child {
	margin-bottom: 0;
}

/* Hero-Bild: flaches Band statt 360-px-Kreis — wie bei den übrigen Seitenköpfen.
   Der Kreis samt Deko-Rand (.main-image:before, Safari-Maske) ist Desktop-Gestaltung. */
.home .main-slider:not(.page-header) {
	height: auto;
}

/* Das Theme rückt den Slider nur links um 30 px ein (Kreis-Layout) — hier
   stattdessen dieselben 15 px Rand wie der Text darüber. */
.home .main-slider:not(.page-header) .main-slides {
	margin: 24px 0 32px;
	padding: 0 15px;
}

.home .main-slider:not(.page-header) .main-image {
	aspect-ratio: auto;
	height: 200px;
	border-radius: 20px;
}

.home .main-slider:not(.page-header) .main-image:before {
	display: none;
}

.home .main-slider:not(.page-header) .main-image img {
	border-radius: 0;
	-webkit-mask-image: none;
	mask-image: none;
	/* Fokuspunkt pro Bild aus der Mediathek (pos_focus_style()), sonst Standard. */
	object-position: var(--pos-focus, 50% 30%);
}

/* --- S2 · Produkt-Teaser: ruhigerer Kartenrhythmus ------------------------- */
.home .product-teaser .teaser-card h3 {
	font-size: 19px;
	line-height: 1.25;
}

.home .product-teaser .teaser-card .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	border-radius: 14px;
}

/* --- S3 · Referenz-Logoreihe: schmaler, ohne den Lesefluss zu unterbrechen --
   Nur die Reihe der Startseite. `.logo-card` gibt es auch im Footer-Banner —
   deshalb über `.referenzen-row` eingegrenzt, sonst greift es dort mit. */
.home .referenzen-row {
	padding-top: 28px;
}

.home .referenzen-row .references-header h2 {
	font-size: 17px;
	line-height: 1.3;
}

.home .referenzen-row .logo-banner--refs .logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
}

/* --- S4 · Bild mit Punkten: Punkte als lesbare Liste unter dem Motiv ------- */
.home .image-with-points .points-content {
	padding-top: 24px;
}

.home .image-with-points .point + .point {
	margin-top: 18px;
}

.home .image-with-points .point h3 {
	margin-bottom: 4px;
	font-size: 18px;
	line-height: 1.3;
}

.home .image-with-points .point p {
	font-size: 15px;
	line-height: 1.5;
}

/* --- S5 · Zitat-Slider: Wischen mit Punkten statt Pfeil-Kreisen -------------
   Die Punkt-Optik bringt das Theme bereits mit (style.css: .slick-dots button
   samt :before/:after) — hier wird sie nicht neu gebaut, nur sichtbar gemacht
   und ausgerichtet. style.css blendet unter 767 px alle slick-Punkte per
   `display:none !important` aus, daher das gezielte Gegenstück. */
.home .review-slider-wrap .swiper-buttons {
	display: none;
}

/* main.js setzt bei schmalem Inhalt ein Inline-margin-left auf beide. */
.home .review-content,
.home .review-slider .slick-dots {
	margin-left: 0 !important;
}

.home .review-content {
	padding-right: 0;
	padding-bottom: 24px;
}

.home .review-slider .slick-dots {
	display: flex !important;
	justify-content: center;
	gap: 4px;
	padding: 8px 16px 0;
	list-style: none;
}

/* Der theme-eigene rechte Außenabstand weicht dem `gap`. */
.home .review-slider .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.home .review-slider .slick-dots li button {
	margin-right: 0;
}

/* --- S6 · CTA-Bild: Text unter dem Motiv, Button auf volle Breite ---------- */
.home .cta-bild .cta-content {
	padding: 24px 20px 28px;
}

.home .cta-bild .cta-content h2 {
	font-size: 26px;
	line-height: 1.15;
}

.home .cta-bild .cta-content .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	border-radius: 14px;
}

/* --- S7 · FAQs: Karten als Liste, Abschluss-CTA auf volle Breite ----------- */
.home .faqs .faq-card h3 {
	font-size: 18px;
	line-height: 1.3;
}

.home .faqs .faq-card p {
	font-size: 15px;
	line-height: 1.55;
}

.home .faqs-footer {
	padding-top: 8px;
	text-align: center;
}

.home .faqs-footer .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	border-radius: 14px;
}

}