/*
 * Eigener Stil dieses Aussehens.
 *
 * Hier steht NUR, was dieses Theme zusaetzlich braucht. Das Raster und die gemeinsamen Regeln
 * liegen unter theme/basis/ und theme/assets/ und gelten fuer jedes Aussehen. Farben stehen
 * nicht hier, sondern entstehen aus den Werten des Themes (farben.php).
 *
 * Ein zweites Aussehen bringt seine eigene stil.css mit und laesst diese unangetastet.
 */

/* --- Menue ----------------------------------------------------------------------------------
 *
 * HIER STEHT ABSICHTLICH NICHTS ZUR HAUPTNAVIGATION.
 *
 * Bis 17.09.2026 stand hier ein eigener Block mit
 *     .ipv-navigation .ipv-menuepunkt > a { padding: 15px 18px }
 * und genau der hat den Balken doppelt so dick gemacht: 15px oben und unten kommen zur
 * Schrifthoehe hinzu. Der Stil des Aussehens regelt die Navigation bereits vollstaendig -
 *     .ipv-navigation ul li      { display:inline-block }
 *     .ipv-navigation>ul>li>a    { line-height:50px; padding:0 15px }
 * - und meine Regel hat das ueberschrieben, weil sie spaeter geladen wird.
 *
 * Wer hier etwas zur Navigation ergaenzt, prueft vorher, ob der Hauptstil es schon regelt.
 */

/* --- Fussspalten ---------------------------------------------------------------------------- */

.ipv-fuss .ipv-menue {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ipv-fuss .ipv-menuepunkt a {
	text-decoration: none;
}

/* --- Nur fuer Vorleseprogramme --------------------------------------------------------------- */

.ipv-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ipv-nur-vorlesen:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* --- Menueschublade auf schmalen Bildschirmen ------------------------------------------------ */

.mobile-navigation {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	max-width: 85%;
	z-index: 1000;
	transform: translateX(-100%);
	transition: transform .3s ease;
	overflow-y: auto;
}

body.menu-toggle-active .mobile-navigation {
	transform: translateX(0);
}

.mobile-navigation-mask {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

body.menu-toggle-active .mobile-navigation-mask {
	opacity: 1;
	visibility: visible;
}

/* In der Schublade stehen die Punkte untereinander, Untermenues immer offen. */
.mobile-navigation .ipv-menue {
	display: block;
}

/* --- Knopf nach oben ------------------------------------------------------------------------- */

.ipv-backtotop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border-radius: 2px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.ipv-backtotop.ipv-sichtbar {
	opacity: 1;
	visibility: visible;
}

/* Ohne Javascript tut der Knopf nichts - dann steht er auch nicht da. */
body.ipv-ohne-js .ipv-backtotop {
	display: none;
}

/* --- Pfad ueber dem Inhalt -------------------------------------------------------------------- */

.ipv-pfad-schlicht {
	padding: 18px 0;
}

.ipv-pfad-hier {
	opacity: .8;
}

/* Auf der Startseite gibt es keinen Kopfbalken - dort ist der Auftritt selbst der Kopf. */
body.ipv-startseite .ipv-pfad-balken,
body.ipv-startseite .ipv-pfad-schlicht {
	display: none;
}

/* --- Fussbereich: Anpassungen, die im Muster als eigener Stilblock stehen -------------------- */
/*
 * Diese Regeln standen im Muster NICHT im Theme, sondern als Zusatz-Stil des Auftritts
 * (wp-custom-css und ein eigener Block ipv-footer-menu). Deshalb fehlten sie hier komplett -
 * das war die Ursache fuer die Kontaktzeile untereinander und fuer Trennlinien, die es im
 * Muster gar nicht gibt (17.09.2026).
 */

/* Fusslisten: KEINE Trennlinien, kein Innenabstand, groessere Zeilenhoehe. */
.footer .ipv-baustein-menue ul li {
	border-bottom: none !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.8 !important;
}

.footer .ipv-baustein-menue ul li:before {
	content: none !important;
}

/* Kontaktzeile: eine Zeile ueber die volle Breite, nicht untereinander. */
.ipv-fuss-kontakt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	background-color: #222;
	font-size: 16px;
	color: #b7b3b3;
	width: 100%;
}

.ipv-fuss-feld {
	display: flex;
	align-items: center;
	flex: 1;
	text-align: center;
}

.ipv-fuss-feld i {
	margin-right: 8px;
	color: #b7b3b3;
	font-size: 30px;
}

.ipv-fuss-feld a {
	color: #b7b3b3;
	text-decoration: none;
}

.ipv-fuss-feld a:hover {
	text-decoration: underline;
}

/* --- Kopfbereich: Abstand zwischen Logo und Menuebalken ---------------------------------------
 *
 * Nutzervorgabe 17.09.2026: 20px oben und unten. Die Basisregel des Aussehens setzt dort 30px
 * (.header-style-1 .ipv-kopf-mitte) - genau wie im Muster; der gewuenschte Abstand liess sich
 * daraus also nicht ableiten, er ist eine Entscheidung.
 *
 * Der Selektor traegt denselben Praefix wie die Basisregel. Ohne .header-style-1 waere meine
 * Regel weniger spezifisch und wuerde nicht greifen - derselbe Fehler wie zuvor beim Rahmen
 * um Suchfeld und Warenkorb.
 */
.header-style-1 .ipv-kopf-mitte {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* --- Warenkorb und Kasse (Stufe 8, 17.09.2026) ------------------------------------------------
 *
 * HIER STEHEN KEINE FARBEN. Knoepfe sind <button>-Elemente und werden bereits von farben.php
 * eingefaerbt (Regel fuer button, input[type='submit'] und .ipv-shop button.button). Eine Farbe
 * hier wuerde die zentrale Pflege in der Suite aushebeln - wer die Farbe aendert, aendert den
 * Wert dort, nicht diese Datei.
 *
 * Geregelt werden nur Anordnung, Abstaende und Rahmen.
 */

/* Knopf: dieselbe Hoehe und Form wie die uebrigen Knoepfe des Auftritts. */
.ipv-knopf {
	display: inline-block;
	padding: 10px 18px;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.ipv-knopf-gross {
	padding: 14px 26px;
	font-size: 16px;
}

/* Grauer Verweis statt Knopf - fuer Nebenwege wie "Weiter einkaufen" und "Entfernen". */
.ipv-link-grau {
	background: none;
	border: 0;
	padding: 0;
	color: #666;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.ipv-link-grau:hover {
	color: #222;
}

/* Die Korbtabelle: eine Zeile je Artikel, Zahlen rechts, nichts umbrechend. */
.ipv-korb-tabelle {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
}

.ipv-korb-tabelle th,
.ipv-korb-tabelle td {
	padding: 10px 12px;
	border-bottom: 1px solid #e2e2e2;
	text-align: left;
	vertical-align: middle;
}

.ipv-korb-tabelle th {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* Preise und Mengen: rechtsbuendig und mit gleichbreiten Ziffern, damit die Spalte steht. */
.ipv-korb-tabelle td:not(:first-child),
.ipv-korb-tabelle th:not(:first-child) {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Auf schmalen Bildschirmen darf die Tabelle scrollen - aber die Seite nicht. */
.ipv-korb-formular {
	overflow-x: auto;
}

.ipv-korb-summe {
	margin: 0 0 20px;
	font-variant-numeric: tabular-nums;
}

.ipv-korb-summe p {
	margin: 0 0 6px;
}

.ipv-korb-gesamt td,
.ipv-korb-gesamt {
	font-size: 18px;
}

/*
 * Hinweise kommen vollstaendig aus dem Theme (assets/dist/css/main-style.css): Kasten #eaeaea,
 * Kante links 3px #01a1b9, Innenabstand 12px 40px, Symbol aus boxicons senkrecht mittig bei
 * left:15px. Hier steht keine eigene Gestaltung mehr.
 *
 * Warum: die frueher hier stehende Regel setzte padding:10px 14px. Diese Datei laedt zuletzt und
 * hat dieselbe Spezifitaet, also gewann sie - dem Symbol blieb kein Platz und es lag auf dem
 * ersten Wort des Hinweises.
 *
 * Fuer Fehler und Erfolg fuehrt das Theme eigene Namen (ipv-shop-error, ipv-shop-message).
 * Solange das Markup die beiden Zusatzklassen benutzt, tragen sie hier deren Werte - aus dem
 * Bestand uebernommen, nicht neu gewaehlt.
 */
.ipv-hinweis-fehler {
	border-color: #de3f44;
}

.ipv-hinweis-fehler::before {
	content: "";
}

.ipv-hinweis-gut {
	border-color: #1ca345;
}

.ipv-hinweis-gut::before {
	content: "\ebd6";
	color: #1ca345;
}

/* Das Mengenfeld im Korb und am Artikel. */
.ipv-menge {
	width: 70px;
	padding: 9px 8px;
	margin-right: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
}

/* "In den Warenkorb": Menge und Knopf in einer Zeile, nicht untereinander. */
.ipv-korb-knopf {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

.ipv-korb-knopf-kachel {
	margin: 10px 0 0;
}

/* Die Kassenmaske: Beschriftung ueber dem Feld, ein Feld je Zeile, lesbare Breite. */
.ipv-kasse-formular {
	max-width: 520px;
}

/* Die beiden Bestaetigungen: Kaestchen und Text auf einer Linie, Text darf umbrechen. */
.ipv-kasse-formular input[type='checkbox'] {
	margin-right: 8px;
}

/* Grundpreis und Lieferzeit (Nachtrag: standen seit Stufe 6 und 7 im Markup, aber in keiner
   Regel - sie erbten die Groesse der Preisangabe und standen fett daneben). */
.ipv-grundpreis,
.ipv-lieferzeit {
	margin: 4px 0 12px;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.8;
}

.ipv-lieferzeit span {
	display: block;
}

/* =============================================================================================
 * GLEICHE GROESSEN - Kachelraster und Artikelbild (17.09.2026)
 *
 * Der Mangel, der das noetig machte: Es gab hier KEINE einzige Bildbegrenzung. Jede Kachel war
 * so hoch wie ihr Bild, also jede anders - Titel, Preis und Knopf standen in jeder Kachel auf
 * einer anderen Hoehe, und das Raster sah zerrissen aus. Auf der Artikelseite wuchs dasselbe
 * Bild auf die volle Breite; die Angaben zum Artikel (Preis, Menge, "In den Warenkorb") lagen
 * dadurch unterhalb des Bildschirms und waren erst nach langem Scrollen zu sehen.
 *
 * Grundsatz: Das Bild bekommt eine FESTE FLAECHE, nicht seine natuerliche Groesse. Was nicht
 * passt, wird eingepasst (object-fit: contain) - nie beschnitten, denn ein halber Trichter ist
 * kein Produktbild.
 * ============================================================================================= */

/* --- Kachelraster: alle Kacheln gleich hoch, Knopf immer unten ------------------------------- */

/*
 * Die Spaltenzahl wird GERECHNET, nicht aufgezaehlt (18.09.2026).
 *
 * Vorher standen hier feste Regeln fuer 1, 2, 4 und 5 Spalten. Die Einstellung in der Suite
 * laesst aber 1 bis 6 zu: Bei 6 gab es keine Regel, und es blieben stillschweigend 3 uebrig -
 * ein Feld, das nichts bewirkt (Nutzerbefund 18.09.2026).
 *
 * Jetzt bringt die Vorlage die Zahl als Wert mit (--ipv-kacheln). Jede Zahl wirkt, auch eine,
 * die es heute noch nicht gibt. Der Rueckfall 3 gilt nur, falls der Wert einmal fehlt.
 *
 * minmax(0, 1fr) statt 1fr: Ohne die Null als Untergrenze weigert sich eine Spalte, schmaler zu
 * werden als ihr laengstes Wort - bei langen Artikelnamen sprengt das sonst die Zeile.
 */
ul.products {
	--ipv-kachel-luft: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ipv-kachel-luft);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

/*
 * Die Breite einer Kachel wird GERECHNET (18.09.2026, zweiter Anlauf).
 *
 * ERSTER VERSUCH UND WARUM ER FALSCH WAR: grid-template-columns: repeat(var(--ipv-kacheln), ...).
 * In repeat() braucht der Browser eine echte ganze Zahl; ein var() ist dort nicht zuverlaessig,
 * und min() ist ausdruecklich unzulaessig. Ergebnis: Die Regel fiel aus, und statt drei Kacheln
 * standen zwei nebeneinander (Nutzerbild 18.09.2026).
 *
 * JETZT: Flex mit gerechneter Breite je Kachel. In calc() ist var() uneingeschraenkt erlaubt.
 * Die Rechnung zieht die Luft zwischen den Kacheln ab, damit sie in der Zeile aufgehen:
 * (100% - (Anzahl-1) * Luft) / Anzahl.
 */
/*
 * WARUM DIESE SELEKTOREN SO LANG SIND (18.09.2026).
 *
 * Um dieselbe Kachel streiten DREI fremde Dateien, alle ohne Media-Query:
 *   main-style.css    .ipv-shop ul.products li.product   padding: 0 15px   (+30px je Kachel!)
 *   raster-aufbau.css .ipv-shop ul.products li.product   float:left; width:22.05%; margin:0 3.8% ...
 *   raster-schmal.css .ipv-shop ul.products[class*=columns-] li.product   width:48%; float:left
 *
 * Das padding war der gesuchte Fehler: Meine Rechnung teilt 100 % exakt auf, die 30 Punkte kamen
 * obendrauf, die Zeile lief ueber - und GENAU EINE Kachel rutschte heraus. Bei 3 blieben 2, bei 4
 * blieben 3 (Nutzerbefund 18.09.2026). Der zu grosse Abstand war das margin-right: 3.8% zusaetzlich
 * zu meinem gap.
 *
 * Deshalb: gleiche Spezifitaet wie die Fremdregeln, alles Fremde an der Kachel zuruecksetzen, und
 * der Abstand kommt AUSSCHLIESSLICH aus gap. box-sizing: border-box, damit Innenabstand die
 * Rechnung nie wieder sprengt.
 */
.ipv-shop ul.products li.product,
.ipv-seitenart ul.products li.product,
ul.products > li.product {
	box-sizing: border-box;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	width: auto;
	flex: 0 0 calc((100% - (var(--ipv-kacheln, 3) - 1) * var(--ipv-kachel-luft, 24px)) / var(--ipv-kacheln, 3));
	max-width: calc((100% - (var(--ipv-kacheln, 3) - 1) * var(--ipv-kachel-luft, 24px)) / var(--ipv-kacheln, 3));
}

/* Auch die Liste selbst darf nichts Fremdes mitbringen. */
.ipv-shop ul.products,
.ipv-seitenart ul.products,
ul.products {
	box-sizing: border-box;
}

/* Die Regel mit [class*=columns-] aus raster-schmal.css trifft jede Kachel - hier ausgehebelt. */
.ipv-shop ul.products[class*="columns-"] li.product,
.ipv-seitenart ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	flex: 0 0 calc((100% - (var(--ipv-kacheln, 3) - 1) * var(--ipv-kachel-luft, 24px)) / var(--ipv-kacheln, 3));
	max-width: calc((100% - (var(--ipv-kacheln, 3) - 1) * var(--ipv-kachel-luft, 24px)) / var(--ipv-kacheln, 3));
}

/* Die Kachel selbst ist eine Spalte: Bild oben, Angaben darunter, Knopf am Fuss. */
ul.products > li.product {
	display: flex;
	margin: 0;
	float: none;
}

ul.products > li.product > .product-main-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	padding: 16px;
}

/* Die Bildflaeche ist quadratisch und in JEDER Kachel gleich gross. */
ul.products > li.product .product-thumb-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

ul.products > li.product .product-thumb-wrap a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

ul.products > li.product .product-thumb-wrap img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Die Angaben wachsen, damit der Knopf in jeder Kachel auf derselben Hoehe unten sitzt. */
ul.products > li.product .product-info-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
	text-align: center;
	padding-top: 12px;
}

ul.products > li.product .ipv-kachel-artikeltitel {
	font-size: 15px;
	line-height: 1.35;
	margin: 0;
}

/* Der Knopf ganz unten - "margin-top:auto" schiebt ihn an den Fuss der Kachel. */
ul.products > li.product .ipv-korb-knopf-kachel {
	margin-top: auto;
	padding-top: 10px;
}

/*
 * Schmale Bildschirme: Hier zaehlt nicht die gewuenschte Zahl, sondern was lesbar bleibt.
 * Nie MEHR Spalten als eingestellt - min() sorgt dafuer, dass eine Einstellung von 1 auch auf
 * dem Tablet eine Spalte bleibt.
 */
/*
 * Schmale Bildschirme: Hier zaehlt nicht die gewuenschte Zahl, sondern was lesbar bleibt.
 * Steht die Einstellung ohnehin auf 1 oder 2, bleibt sie - mehr wird nie daraus.
 */
@media (max-width: 900px) {
	.ipv-shop ul.products li.product,
	.ipv-shop ul.products[class*="columns-"] li.product,
	.ipv-seitenart ul.products li.product,
	ul.products > li.product {
		flex-basis: calc((100% - var(--ipv-kachel-luft, 24px)) / 2);
		max-width: calc((100% - var(--ipv-kachel-luft, 24px)) / 2);
	}
	.ipv-shop ul.products.columns-1 li.product,
	ul.products.columns-1 > li.product {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	ul.products { --ipv-kachel-luft: 16px; }
	.ipv-shop ul.products li.product,
	.ipv-shop ul.products[class*="columns-"] li.product,
	.ipv-seitenart ul.products li.product,
	ul.products > li.product {
		flex-basis: calc((100% - (var(--ipv-kacheln-mobil, 1) - 1) * 16px) / var(--ipv-kacheln-mobil, 1));
		max-width: calc((100% - (var(--ipv-kacheln-mobil, 1) - 1) * 16px) / var(--ipv-kacheln-mobil, 1));
	}
}

/* --- Artikelseite: Bild links, Angaben rechts ------------------------------------------------ */
/*
 * HIER STAND EIN EIGENBAU (bis 18.09.2026): display:grid mit zwei Spalten, dazu eine begrenzte
 * Bildflaeche (aspect-ratio 1/1, max-height 460px, display:flex, overflow:hidden) und
 * grid-column fuer den Reiterrahmen.
 *
 * Er hat drei sichtbare Fehler verursacht:
 *   - Das Grid hebelte die Regelbasis aus (raster-aufbau.css: div.images float:left width:48%,
 *     div.summary float:right width:48%). Die Galerie war rund 240 Punkte breit statt knapp
 *     der halben Seite.
 *   - display:flex am Bildfeld ueberschrieb [hidden]. Die vom Skript ausgeblendeten Bilder
 *     blieben sichtbar - es standen zwei Thumbnailreihen untereinander.
 *   - grid-column zeigte auf den alten Reiternamen ipv-reiter-rahmen; die Reiter heissen jetzt
 *     ipv-shop-tabs, also lief die Regel ins Leere und die Beschreibung sass in der Spalte.
 *
 * Die Regelbasis kann das alles selbst - Breiten, Bildgroesse, Thumbnailbreite und die
 * Umstellung auf eine Spalte bis 768 Punkte (raster-schmal.css, per media-Attribut).
 * Deshalb steht hier nur noch, was dort wirklich fehlt.
 */

/* Beide Spalten floaten - ohne clear stuenden Reiter und "Aehnliche Produkte" daneben. */
.ipv-inhalt-shop > .product::after {
	content: "";
	display: table;
	clear: both;
}

/*
 * HIER STAND EINE EIGENE BILDREGEL (bis 18.09.2026): max-height:70vh und object-fit:contain am
 * Bild im Galerierahmen. Sie hat dem Hauptbild die Breite genommen: Die Regelbasis streckt es
 * mit "div.images img{width:100%}" auf die Spalte, meine spaetere Regel liess es auf seine
 * Eigenbreite zurueckfallen - die Galeriespalte blieb schmal und rechts klaffte eine Luecke.
 *
 * Die Referenz hat fuer das Bild GENAU EINE Regel, dieselbe wie die Regelbasis, und begrenzt
 * die Hoehe nicht: Das Bild fuellt die Spaltenbreite, die Hoehe folgt aus dem Seitenverhaeltnis.
 * Deshalb steht hier jetzt nichts mehr.
 */

/* --- Symbole duerfen nie das einzige Erkennungsmerkmal sein ---------------------------------- */
/*
 * Auf den Bildern des Nutzers standen ueberall leere Kaestchen statt Symbolen - im Footer, am
 * Suchknopf, am Warenkorb. Die Symbolschrift wird ausgeliefert, die Glyphe erschien trotzdem
 * nicht. Deshalb steht neben jedem Symbol jetzt Text: Faellt das Symbol aus, bleibt der Shop
 * bedienbar. Ein Kaestchen ist kein Bedienelement.
 */
.ipv-korb-text {
	font-size: 14px;
	white-space: nowrap;
}

.ipv-suche-knopftext {
	font-size: 14px;
	white-space: nowrap;
}

/* =============================================================================================
 * KUNDENKONTO (18.09.2026)
 *
 * Jede Klasse hier kommt im Markup von konto.php, anmelden.php, registrieren.php und
 * passwort.php wirklich vor - und umgekehrt hat jede Klasse dort eine Regel. Am Kachelraster
 * hatte ich genau das versaeumt: Klassen im Markup, keine Regel im Stil, und das Ergebnis sah
 * aus wie ein Fehler im Browser.
 * ============================================================================================= */

/* --- Rahmen: links die Navigation des Kontos, rechts der Bereich ----------------------------- */

.ipv-konto-rahmen {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.ipv-konto-navigation {
	background: #fff;
	padding: 18px;
}

.ipv-konto-wer {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 15px;
	/* Eine lange E-Mail-Adresse darf die Spalte nicht auseinanderziehen. */
	overflow-wrap: anywhere;
}

.ipv-konto-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ipv-konto-navigation li {
	margin: 0;
	border-top: 1px solid #eee;
}

.ipv-konto-navigation li a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	text-decoration: none;
}

.ipv-konto-navigation li.ipv-konto-offen a {
	font-weight: 600;
}

.ipv-konto-inhalt {
	min-width: 0;
	background: #fff;
	padding: 24px;
}

.ipv-konto-inhalt h2 {
	margin-top: 0;
}

.ipv-konto-inhalt h3 {
	margin: 24px 0 10px;
	font-size: 16px;
}

/* --- Zwei Blöcke nebeneinander: Anmelden/Registrieren, Rechnungs-/Lieferadresse -------------- */

.ipv-konto-spalten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}

.ipv-konto-block {
	background: #fff;
	padding: 24px;
	min-width: 0;
}

.ipv-konto-block h2 {
	margin-top: 0;
}

/* --- Eine gespeicherte Adresse --------------------------------------------------------------- */

.ipv-konto-adresse {
	border: 1px solid #e5e5e5;
	padding: 14px 16px;
	margin: 0 0 12px;
}

.ipv-konto-adresse p {
	margin: 0 0 8px;
}

.ipv-konto-adresse p:last-child {
	margin-bottom: 0;
}

.ipv-konto-vorgabe {
	font-weight: 600;
}

/*
 * "Bearbeiten" ist ein Verweis, "Entfernen" ein Formular - beide sollen in einer Zeile stehen.
 * Ein Formular ist von sich aus ein Block und wuerde den Knopf sonst darunter schieben.
 */
.ipv-konto-inline {
	display: inline;
	margin-left: 14px;
}

/* --- Formularfelder, die bisher keine Regel hatten ------------------------------------------- */
/*
 * Passwortfelder und Auswahlfelder standen im Markup der Kontoseiten, waren aber in keiner
 * Regel - sie waeren in Browservorgabe erschienen, schmaler und anders als die Textfelder
 * daneben. Dasselbe Muster wie bei Grundpreis und Lieferzeit (siehe weiter oben).
 */
.ipv-kasse-formular input[type='password'],
.ipv-kasse-formular input[type='tel'],
.ipv-kasse-formular select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 15px;
	background: #fff;
}

/* --- Der Konto-Bereich im Kopf --------------------------------------------------------------- */

.ipv-kopf-konto {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	white-space: nowrap;
}

.ipv-kopf-konto a {
	text-decoration: none;
}

@media (max-width: 860px) {
	.ipv-konto-rahmen { grid-template-columns: 1fr; }
	.ipv-konto-spalten { grid-template-columns: 1fr; }
}

/* =============================================================================================
 * KASSE - die neuen Teile (18.09.2026)
 *
 * Jede Klasse hier kommt im Markup von kasse.php wirklich vor. Beim Kachelraster hatte ich
 * genau das versaeumt, und das Ergebnis sah aus wie ein Fehler im Browser.
 * ============================================================================================= */

/* Der Block der Lieferadresse steht abgesetzt, damit er nicht mit der Rechnungsadresse
   verschwimmt - beide haben dieselben Feldnamen und waeren sonst kaum zu unterscheiden. */
.ipv-kasse-lieferblock {
	border-left: 3px solid #e5e5e5;
	padding-left: 16px;
	margin: 0 0 18px;
}

/* Die Steuerausweisung: schmaler als die Positionstabelle, rechts ausgerichtete Betraege. */
.ipv-steuertabelle {
	margin-top: -8px;
	margin-bottom: 20px;
}

.ipv-steuertabelle td {
	border-top: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
}

/*
 * Abschluss: Knopf und Summe auf einer Linie.
 *
 * Die Summe steht NEBEN dem Knopf, nicht darueber - wer klickt, soll den Betrag im Blick haben,
 * ohne zu scrollen.
 */
.ipv-kasse-abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 24px 0 12px;
}

.ipv-kasse-summe {
	font-size: 15px;
}

/* =============================================================================================
 * ERGEBNISZAHL UND SORTIERUNG UEBER DER LISTE (18.09.2026,
 * auf den Stand der Referenz zurueckgebaut 19.09.2026)
 *
 * Beides gab es vorher nicht. Der Haken "vor_kachelliste" wurde in liste.php ausgeloest, war
 * aber nie gesetzt - ein Aufruf ins Leere. Die Ergebniszahl hing bisher ausschliesslich im
 * Fremd-CSS (5 Regeln in main-style.css); sie bekommt hier eigene Regeln, damit die Zeile beim
 * Abloesen des Fremd-CSS nicht auseinanderfaellt.
 *
 * ZURUECKGEBAUT: Hier standen Regeln fuer eine Leiste (.ipv-listenkopf) mit zwei Bloecken an
 * den Enden, fuer einen Preisfilter (.ipv-preisfilter, .ipv-preisfeld, .ipv-filter-aufheben),
 * fuer ein sichtbares Label am Sortierfeld und fuer einen kleinen Absendeknopf. Alle diese
 * Elemente hat die Referenz an dieser Stelle nicht; das Markup dazu ist entfernt, die Regeln
 * gehen mit. Uebrig bleibt, was die Referenz zeigt: die Zahl und darunter das Auswahlfeld.
 * ============================================================================================= */

/* Zahl zuerst, Sortierung darunter - die Reihenfolge der Referenz. */
.ipv-ergebniszahl {
	margin: 0 0 12px;
	font-size: 14px;
}

.ipv-sortierung {
	margin: 0 0 18px;
}

.ipv-sortierung select {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 14px;
	background: #fff;
}

/* --- Seitennavigation ------------------------------------------------------------------------ */

.ipv-seitennavigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 28px 0 0;
}

.ipv-seitennavigation a,
.ipv-seitennavigation .ipv-seite-hier {
	display: inline-block;
	min-width: 38px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
}

/* Die Seite, auf der man steht, ist KEIN Verweis - und muss auch so aussehen. */
.ipv-seitennavigation .ipv-seite-hier {
	font-weight: 600;
	border-color: #999;
	background: #f4f4f4;
}

@media (max-width: 560px) {
	/* Auf schmalen Schirmen nimmt das Auswahlfeld die ganze Breite - sonst steht es verloren
	   in der Zeile. Die Regeln fuer die entfallene Leiste sind mit ihr weggefallen. */
	.ipv-sortierung select { width: 100%; }
}

/* =============================================================================================
 * WARENKORB IM KOPF (18.09.2026)
 *
 * Das Aussehen formt den Ausloeser des Warenkorbs ueber ".mini-cart button" - einen 35x35 grossen
 * runden Knopf. Mein Ausloeser ist aber ein <a> und wurde davon NICHT getroffen: Es blieb ein
 * nacktes Symbol ohne Kreis, und der Zaehler klebte im Nichts.
 *
 * Ein <button> waere falsch: Der Warenkorb ist ein Weg zu einer Seite, kein Schalter. Also
 * bekommt der Verweis hier dieselbe Form, die der Knopf dort haette.
 * ============================================================================================= */

.ipv-kopfbereich .mini-cart .trigger-mini-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	/* Farbe und Schriftfarbe kommen aus der Farbpflege (farben.php), nicht von hier. */
	text-decoration: none;
	flex: 0 0 35px;
}

/* Der Betrag steht daneben und bricht nicht um - sonst wird der Balken zweizeilig. */
.ipv-kopfbereich .mini-cart .cart-amount {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}

/* Das SVG sitzt mittig im Kreis - ohne das haengt es auf der Grundlinie des Textes. */
.ipv-symbol {
	display: block;
	flex: 0 0 auto;
}

/* Symbole, die in einer Textzeile stehen (Footer-Angaben), sitzen auf Zeilenmitte. */
.ipv-fuss-feld .ipv-symbol,
.ipv-suchformular .ipv-symbol {
	display: inline-block;
	vertical-align: middle;
}

/* Der Zaehler am Warenkorb.
 *
 * Das Aussehen gibt ihm 25x25 Punkte und haengt ihn mit top:-10px, right:-8px an den Ausloeser.
 * Dort war der Ausloeser aber ein 35x35 grosser Knopf MIT Rand - bei mir deckte der Zaehler das
 * Symbol fast vollstaendig ab (Nutzerbild 18.09.2026: dunkler Klecks, kein Einkaufswagen).
 *
 * Kleiner und enger an die Ecke: Das Symbol bleibt sichtbar, die Zahl bleibt lesbar.
 */
.ipv-kopfbereich .mini-cart .trigger-mini-cart > .item-count {
	width: 18px;
	height: 18px;
	line-height: 18px;
	font-size: 10px;
	top: -5px;
	right: -5px;
	text-align: center;
}

/* Liegt nichts im Korb, braucht es auch keine Null am Symbol. */
.ipv-kopfbereich .mini-cart .trigger-mini-cart > .item-count.ipv-korb-leer {
	display: none;
}

/* =============================================================================================
 * WARENKORB - nur die Luecken des vorhandenen Aussehens (18.09.2026)
 *
 * Der Aufbau entspricht jetzt dem des bestehenden Shops, also greifen dessen Regeln:
 * shop_table (19), cart-collaterals (29), cart_totals (20), table.cart td.actions (4),
 * ipv-zur-kasse (4), .quantity .qty (26). Hier steht AUSSCHLIESSLICH, was dort fehlt -
 * nachgezaehlt, nicht vermutet: product-subtotal, product-thumbnail (im Korb), remove.
 * ============================================================================================= */

/* Das Bild bekommt eine feste Groesse wie in der Referenz; die Spaltenbreite ergibt sich
   daraus und aus dem padding von shop_table td - keine eigene Spaltenbreite. */
.ipv-shop-cart table.cart td.product-thumbnail img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/* Betraege rechtsbuendig und mit gleichmaessigen Ziffern - Spalten sollen untereinander stehen. */
.ipv-shop-cart table.cart td.product-price,
.ipv-shop-cart table.cart td.product-subtotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Das Kreuz zum Entfernen ist ein Knopf (kein Verweis), braucht also die Knopfform zurueck. */
/*
 * Das Entfernen-Zeichen: ein rotes x, sonst nichts.
 *
 * Das !important ist hier noetig und keine Bequemlichkeit: Die Konfiguration der Suite legt
 * einen Block in die Seite, der JEDEN button auf die dunkle Hausfarbe setzt - mit !important.
 * Ohne Gegenwehr steht das x auf dunklem Grund. Geerbte Knopfform (Flaeche, Rahmen, Rundung,
 * Innenabstand, feste Groesse) wird vollstaendig zurueckgenommen.
 */
.ipv-shop-cart table.cart td.product-remove .ipv-entfernen {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	width: auto;
	height: auto;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: var(--ipv-rot, #a00) !important;
	cursor: pointer;
	display: inline-block;
	transition: none;
}

.ipv-shop-cart table.cart td.product-remove .ipv-entfernen:hover {
	background: none !important;
	background-color: transparent !important;
	color: #700 !important;
}

/* Ist der Abschluss gesperrt, sieht der Knopf auch so aus - und ist keiner. */
.ipv-shop-cart .ipv-zur-kasse .ipv-knopf-gesperrt {
	display: block;
	text-align: center;
	background: #c9ccd2;
	color: #fff;
	cursor: not-allowed;
}

@media (max-width: 760px) {
	.ipv-shop-cart table.cart td.product-thumbnail { width: 70px; }
}


/* =============================================================================================
 * FORMULARE VON ANMELDUNG, REGISTRIERUNG, PASSWORT UND KONTO
 *
 * Diese Regeln standen unter dem Namen der Kasse, tragen aber VIER andere Seiten:
 * anmelden.php, registrieren.php, passwort.php und konto.php benutzen dieselbe Klasse.
 * Beim Kassenumbau am 18.09.2026 hatte ich sie entfernt, weil sie der Regelbasis der
 * Kasse widersprachen - damit waeren die vier Seiten gleich mit kaputtgegangen.
 *
 * Die Kasse benutzt jetzt die vorhandene Regelbasis (form-row, col2-set, shop_table)
 * und traegt diese Klasse nicht mehr. Hier stehen sie also nur noch fuer die vier Seiten.
 * ============================================================================================= */

.ipv-kasse-formular p {
	margin: 0 0 14px;
}

.ipv-kasse-formular label {
	font-size: 14px;
}

.ipv-kasse-formular input[type='text'],
.ipv-kasse-formular input[type='email'] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 15px;
}

.ipv-kasse-formular input[disabled] {
	background: #f4f4f4;
	color: #777;
}

.ipv-kasse-formular h2,
.ipv-kasse-formular h3 {
	margin: 22px 0 12px;
}

.ipv-kasse-formular h2:first-child {
	margin-top: 0;
}

/* Ein gesperrter Abschluss muss als gesperrt erkennbar sein - sonst klickt man ins Leere. */
.ipv-kasse-formular button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Auswahlfelder für Versand- und Zahlungsart: Kästchen und Text auf einer Linie. */
.ipv-kasse-formular input[type='radio'] {
	margin-right: 8px;
}

/* =============================================================================================
 * KASSE - Angleichung an die Referenz (18.09.2026)
 *
 * Die Referenz ist die Vorgabe, nicht die vorhandene Regelbasis. Wo die Basis etwas anderes tut
 * als die Referenz zeigt, wird sie hier korrigiert - nachgemessen am Bildvergleich, nicht geraten.
 * ============================================================================================= */

/* 1. Der Pflichtstern ist in der Referenz SICHTBAR und rot. Die Regelbasis setzt
      visibility:hidden (dort blendet ihn ein Skript ein) - bei uns muss er einfach stehen. */
.ipv-shop form .form-row .required,
.ipv-seitenart form .form-row .required {
	visibility: visible;
	color: #c0392b;
	font-weight: 700;
}

/* Die Kennzeichnung "(optional)" ist in der Referenz Teil der Beschriftung, unauffaellig. */
.ipv-shop form .form-row .optional,
.ipv-seitenart form .form-row .optional {
	color: #767676;
	font-weight: 400;
}

/* 2. Die Lieferadresse ist im Ausgangszustand NICHT sichtbar - nur der Haken steht da.
      Erst wenn er gesetzt ist, klappt der Block auf. Ohne Javascript bleibt er sichtbar,
      damit die Felder in jedem Fall ausfuellbar sind (sonst waere es ein Feld ohne Zugang). */
.ipv-mit-js .ipv-shop-shipping-fields .shipping_address {
	display: none;
}

.ipv-mit-js .ipv-shop-shipping-fields.ipv-liefern-aktiv .shipping_address {
	display: block;
}

/* 3. Die beiden Bloecke rechts stehen als eigene Kaesten untereinander - wie in der Referenz. */
.ipv-shop-checkout .ipv-shop-shipping-fields,
.ipv-shop-checkout .ipv-shop-additional-fields {
	background: #fff;
	border: 1px solid #eef1fd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	padding: 24px 30px;
	margin-bottom: 30px;
}

/* Die Ueberschrift mit dem Haken traegt in der Basis float:left - im Kasten stoert das. */
.ipv-shop-checkout .ipv-shop-shipping-fields h3#ship-to-different-address {
	float: none;
	clear: both;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #eef1fd;
}

.ipv-shop-checkout .ipv-shop-shipping-fields.ipv-liefern-aktiv h3#ship-to-different-address {
	margin-bottom: 18px;
}

/* Die Rechnungsdaten stehen ebenfalls in einem Kasten. */
.ipv-shop-checkout .ipv-shop-billing-fields {
	background: #fff;
	border: 1px solid #eef1fd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	padding: 24px 30px;
	margin-bottom: 30px;
}

.ipv-shop-checkout .ipv-shop-billing-fields h3 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eef1fd;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Die Bestellhinweise: Textfeld ueber die volle Kastenbreite. */
.ipv-shop-checkout .ipv-shop-additional-fields textarea.input-text {
	width: 100%;
	box-sizing: border-box;
	min-height: 60px;
}

/* Der Erklaerkasten der Zahlungsart ist in der Referenz DUNKEL, nicht blau.
   main-style.css faerbt ihn mit #0286e7 - das ist die eingebaute Standardfarbe des Musters,
   nicht unsere. Hier steht die Farbe der Referenz. */
.ipv-shop-checkout #payment div.payment_box,
.ipv-shop-cart #payment div.payment_box {
	background: #2f3943;
	color: #fff;
}

.ipv-shop-checkout #payment div.payment_box p,
.ipv-shop-cart #payment div.payment_box p {
	color: #fff;
	margin: 0;
}

/* Das Dreieck ueber dem Kasten zeigt auf die gewaehlte Zahlart - dieselbe Farbe. */
.ipv-shop-checkout #payment div.payment_box:before,
.ipv-shop-cart #payment div.payment_box:before {
	border-bottom-color: #2f3943;
}

/* Der Zahlungsbereich selbst ist in der Referenz ein hellgrauer Kasten. */
.ipv-shop-checkout #payment {
	background: #f3f4f8;
	border-radius: 5px;
	padding: 30px;
}

/* Die Uebersichtstabelle teilt in der Referenz etwa 35/65 - die Bezeichnungsspalte ist schmaler. */
.ipv-shop-checkout table.ipv-shop-checkout-review-order-table th,
.ipv-shop-checkout table.ipv-shop-checkout-review-order-table td:first-child {
	width: 35%;
}

/* Die Bestelluebersicht steht in der Referenz in einem weissen Kasten ueber die volle Breite. */
.ipv-shop-checkout #order_review {
	background: #fff;
	border: 1px solid #eef1fd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	padding: 30px;
}

.ipv-shop-checkout h3#order_review_heading {
	margin: 10px 0 20px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Die Uebersichtstabelle teilt in der Referenz 35/65. Die Fusszeilen nutzen <th>, nicht <td> -
   meine erste Regel griff deshalb nur in der Kopfzeile. */
.ipv-shop-checkout table.ipv-shop-checkout-review-order-table th,
.ipv-shop-checkout table.ipv-shop-checkout-review-order-table tfoot th,
.ipv-shop-checkout table.ipv-shop-checkout-review-order-table td.product-name {
	width: 35%;
}

/* Der Pflichtstern hinter dem Bestaetigungstext ist ein <abbr> - ohne Regel steht er
   unterstrichen und in Serifenschrift da. */
.ipv-shop-checkout abbr.required,
.ipv-shop-cart abbr.required {
	border: 0;
	text-decoration: none;
	color: #c0392b;
	font-weight: 700;
}

/* Die Symbole im Fuss brauchen Abstand zum Text - in der Referenz stehen sie deutlich
   getrennt, bei uns klebten sie am Wort. */
.ipv-fuss-feld .ipv-symbol {
	margin-right: 8px;
}

.ipv-fuss-feld {
	display: inline-flex;
	align-items: center;
}

/* =============================================================================================
 * WARENKORB - Angleichung an die Referenz (18.09.2026, Bildvergleich)
 *
 * Der Summenkasten steht in der Referenz ueber die VOLLE Breite unter der Tabelle, nicht schmal
 * rechts daneben. Der Knopf "Weiter zur Kasse" fuellt den Kasten.
 * ============================================================================================= */

/* Die Korbtabelle steht ebenfalls in einem weissen Kasten. */
.ipv-shop-cart .ipv-shop-cart-form {
	background: #fff;
	border: 1px solid #eef1fd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	margin-bottom: 30px;
}

/* Gutschein links, Aktualisieren rechts - eine Zeile. */
.ipv-shop-cart .cart_totals tr.cart-discount .ipv-link-grau {
	font-size: 12px;
}



/* --- Vollbildansicht der Bildgalerie (18.09.2026) --- */
.ipv-vollbild {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	padding: 60px 70px;
}

.ipv-vollbild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Die Seite darunter steht still, solange die Ansicht offen ist. */
body.ipv-vollbild-offen {
	overflow: hidden;
}

.ipv-vollbild button {
	position: absolute;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 26px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: background .2s ease;
}

.ipv-vollbild button:hover,
.ipv-vollbild button:focus-visible {
	background: rgba(255, 255, 255, .28);
}

/*
 * Leiste oben: Zaehler links, Schliessen rechts - wie die Referenz-Leiste (pswp__top-bar).
 * margin-inline-end:auto am Zaehler schiebt den Rest nach rechts, eine zweite
 * Positionierung braucht es dafuer nicht.
 */
.ipv-vollbild-leiste {
	position: absolute;
	left: 0;
	top: 0;
	height: 44px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: rgba(0, 0, 0, .5);
}

.ipv-vollbild-zaehler {
	height: 44px;
	line-height: 44px;
	font-size: 13px;
	color: #fff;
	opacity: .75;
	padding: 0 10px;
	margin-inline-end: auto;
	user-select: none;
}

/* In der Leiste steht das Kreuz im Fluss - absolut wuerde es ueber dem Zaehler liegen. */
.ipv-vollbild .ipv-vollbild-zu {
	position: relative;
	top: auto;
	right: auto;
}

/* Ein einziges Bild: keine Pfeile, kein Zaehler - genau wie pswp__ui--one-slide. */
.ipv-vollbild--ein-bild .ipv-vollbild-zurueck,
.ipv-vollbild--ein-bild .ipv-vollbild-weiter,
.ipv-vollbild--ein-bild .ipv-vollbild-zaehler {
	display: none;
}
.ipv-vollbild-zu { top: 12px; right: 12px; }
.ipv-vollbild-zurueck { left: 12px; top: 50%; transform: translateY(-50%); }
.ipv-vollbild-weiter { right: 12px; top: 50%; transform: translateY(-50%); }

/* Auf schmalen Bildschirmen sitzen Vor und Zurueck unten, sonst liegen sie auf dem Bild. */
@media (max-width: 600px) {
	.ipv-vollbild { padding: 60px 12px 80px; }
	.ipv-vollbild-zurueck,
	.ipv-vollbild-weiter { top: auto; bottom: 16px; transform: none; }
	.ipv-vollbild-zurueck { left: 24px; }
	.ipv-vollbild-weiter { right: 24px; }
}

/*
 * Das Hauptbild der Galerie fuellt seine Spalte, die Thumbnails darunter stehen in einer Reihe.
 * Die Breite der Thumbnails (25 %) und ihre Deckkraft stehen in der Regelbasis
 * (.flex-control-thumbs li) - hier kommt nur der Abstand darunter dazu, damit die Leiste nicht
 * am Bild klebt, und der Hinweis, dass das Hauptbild anklickbar ist.
 */
.ipv-shop .ipv-bildgalerie .flex-control-thumbs {
	margin-top: 10px;
}

.ipv-shop .ipv-bildgalerie.ipv-galerie-bereit .ipv-bildgalerie-rahmen a {
	cursor: zoom-in;
}

/*
 * Das gezeigte Bild nutzt die ganze Galeriefläche (18.09.2026).
 *
 * DER FEHLER (Nutzerbild): Das Hauptbild stand winzig oben links in der Galerie.
 *
 * URSACHE - und sie liegt NICHT an einer zu kleinen Bildgroesse: Die Regelbasis kennt fuer
 * das Galeriebild nur den Zustand OHNE Skript. Dort ist das erste Bild gross und die
 * uebrigen stehen als Reihe daneben:
 *
 *     .ipv-bildgalerie-bild:nth-child(n+2) { width: 25%; display: inline-block }
 *
 * In der Referenz uebernimmt danach flexslider und setzt die Slides per Skript auf die
 * Breite des Sichtfensters - deshalb steht in ihrer Regelbasis KEINE Groessenangabe fuer das
 * Bild (nur .flex-viewport{touch-action}). Dieser Shop hat kein flexslider: bedienung.js
 * zeigt und verbirgt die Bilder selbst und setzt dabei nur display. Die 25 % aus der
 * Fallback-Regel blieben also stehen, sobald ein Bild ab Platz 2 gezeigt wurde.
 *
 * Deshalb hier die Flaeche, die flexslider sonst rechnet - gebunden an ipv-galerie-bereit,
 * die Klasse, die bedienung.js beim Uebernehmen setzt. Ohne Skript bleibt der Fallback damit
 * unveraendert wie in der Referenz.
 *
 * KEINE eigene Skalierung: Groesse und Seitenverhaeltnis kommen weiter allein aus
 * "div.images img{width:100%;height:auto}" der Regelbasis - genau wie in der Referenz, die
 * dort ebenfalls kein object-fit und kein max-height setzt. Ein Bild wird dadurch nie
 * verzerrt und nie beschnitten, unabhaengig von seinem Format.
 */
.ipv-shop .ipv-bildgalerie.ipv-galerie-bereit .ipv-bildgalerie-rahmen .ipv-bildgalerie-bild,
.ipv-shop .ipv-bildgalerie.ipv-galerie-bereit .ipv-bildgalerie-rahmen .ipv-bildgalerie-bild:nth-child(n+2) {
	width: 100%;
	display: block;
}

/* --- Lieferzeitleiste der Artikelseite (18.09.2026) --- */
.ipv-delivery-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.ipv-delivery-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .92em;
	line-height: 1.35;
	color: inherit;
}

.ipv-delivery-item svg {
	flex: 0 0 auto;
	color: #e8850c;
}

/* --- Widerruf im Kundenkonto (19.09.2026) -----------------------------------------------------
 *
 * Die Widerrufsaktion ist eine SEKUNDAERE Aktion der Bestellung, keine primaere Aufforderung.
 * Sie sitzt im Bestelldetails-Block, im vorhandenen Aktionsbereich `.order-again` der
 * Regelbasis (dort `margin-top:30px`, in Shop und Referenz zahlengleich).
 *
 * WARUM DER KNOPF NICHT `class="button"` TRAEGT: Die zentrale Farbpflege setzt
 * `.ipv-shop a.button, .ipv-shop button.button, .ipv-shop input.button` auf die Hauptfarbe mit
 * `!important` - im ausgelieferten Block nachweisbar als `background-color: #2f3943 !important`
 * (Werte der Pflege: haupt #2f3943, zweit #b2b2b2, grund #bababa). Jeder Knopf mit dieser Klasse
 * ist dadurch zwangslaeufig primaer. Ein sekundaerer Knopf kann sie deshalb nicht tragen.
 *
 * WOHER DIE WERTE KOMMEN - keiner ist erfunden:
 *   #444        Das dunkle Grau des Auftritts. Es ist die Textfarbe der ganzen Seite
 *               (`body{color:#444}`, `a{color:#444}`) und Flaechenfarbe von `.ipv-pfad-balken`
 *               und `.cta-style-2 .box-holder` in der Regelbasis. Deutlich vom blauschwarzen
 *               #2f3943 der Hauptfarbe unterscheidbar - und keine neue Farbe.
 *               Die Zweitfarbe der Pflege (#b2b2b2) taugt hier NICHT: sie ist hellgrau, mit
 *               weisser Schrift unlesbar, und bereits als Hover-Farbe belegt.
 *   5px 30px    Die vorhandene KOMPAKTE Knopfpolsterung des Kontobereichs
 *               (`.ipv-seitenart .ipv-shop-MyAccount-content .ipv-shop-message a.button`).
 *               Der primaere Knopf hat 16px 20px - daher deutlich niedriger.
 *   2px         Der Knopfradius der Regelbasis (in der Referenz derselbe Wert).
 *   line-height:1, display:inline-block, transition  ebenfalls aus der Knopfregel der Regelbasis.
 *   30px        Abstand des geoeffneten Bereichs - derselbe Wert wie `.order-again`.
 *   40px        Der Abstand, mit dem sich JEDER Block der Bestellansicht absetzt
 *               (`order-details`, `customer-details`, `ul.order_details`). Damit ist der
 *               Widerruf abgeschlossen, bevor die Adressen beginnen.
 *   10px        Abstand zwischen zwei Knoepfen (`form.checkout_coupon p .button`).
 */
.ipv-shop .ipv-widerruf-knopf,
.ipv-shop .ipv-knopf-sekundaer {
	display: inline-block;
	background-color: #444;
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 5px 30px;
	line-height: 1;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

/* Rueckmeldung beim Zeigen ohne eine weitere Farbe einzufuehren. */
.ipv-shop .ipv-widerruf-knopf:hover,
.ipv-shop .ipv-widerruf-knopf:focus,
.ipv-shop .ipv-knopf-sekundaer:hover,
.ipv-shop .ipv-knopf-sekundaer:focus {
	opacity: .85;
}

/* Der Aktionsbereich am Fuss der Bestelldetails. `.order-again` bringt den Abstand nach oben
 * schon mit; hier bleibt nur, den Absatz nicht zusaetzlich unten abstehen zu lassen. */
.ipv-shop .ipv-shop-order-details .ipv-widerruf-aktion {
	margin-bottom: 0;
}

/* Der geoeffnete Bereich. Er steht zwischen Bestelldetails und Adressen und schliesst mit dem
 * Abstand ab, mit dem sich jeder Block der Bestellansicht absetzt. */
.ipv-shop .ipv-shop-order-widerruf {
	margin-bottom: 40px;
}

.ipv-shop .ipv-shop-order-widerruf .ipv-widerruf-bereich {
	margin-top: 30px;
}

.ipv-shop .ipv-shop-order-widerruf .ipv-widerruf-abschluss {
	margin-top: 30px;
}

.ipv-shop .ipv-shop-order-widerruf .ipv-widerruf-abschluss button + button {
	margin-left: 10px;
}

/* =============================================================================
   Kontaktformular (20.09.2026)

   Uebernommen aus dem bestehenden Formular der WordPress-Shops, wo der Stil in der
   Formulardatei selbst stand. Hier gehoert er in die Stildatei des Themes - eine Vorlage,
   die ihr eigenes <style> mitbringt, laesst sich nicht ueber die Farben der Suite steuern.

   DIE KOEDERZEILE MUSS UNSICHTBAR SEIN: Sie ist die Falle fuer Formular-Bots. Ohne diese
   Regel stand "Bitte leer lassen" samt Eingabefeld sichtbar auf der Seite - ein Besucher
   haette es ausgefuellt und waere vom Bot-Riegel mit 418 ausgesperrt worden.
   ============================================================================= */
.ipv-kontaktformular { max-width: 640px; }
.ipv-kontakt-koeder {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ipv-kontakt-zeile { margin-bottom: 20px; }
.ipv-kontakt-zeile label { display: block; font-weight: 600; margin-bottom: 6px; }
.ipv-kontakt-zeile input[type=text],
.ipv-kontakt-zeile input[type=email],
.ipv-kontakt-zeile select,
.ipv-kontakt-zeile textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
}
.ipv-kontakt-zeile textarea { min-height: 110px; resize: vertical; }
.ipv-kontaktformular ul { margin: 0; padding-left: 18px; }

/*
 * Die gewaehlte Ausfuehrung in der Warenkorbzeile (20.09.2026).
 *
 * WARUM DAS HIER STEHEN MUSS: Diese vier Regeln bringt die Regelbasis (main-style.css) NICHT
 * mit - nachgesehen, 0 Treffer. In der Referenz kommen sie aus woocommerce.css, einer Stildatei
 * des Plugins, die dieser Shop nicht hat und auch nicht bekommt. Sie sind 1:1 uebernommen, nur
 * der Traeger heisst hier .ipv-shop statt .woocommerce - dieselbe Umbenennung, die die
 * Regelbasis durchgaengig vorgenommen hat.
 *
 * Wirkung: Die Beschriftung ("Volumen:") steht LINKS neben ihrem Wert, jedes Paar in einer
 * eigenen Zeile (clear:both), und der Abstand nach unten faellt beim letzten Paar weg.
 */
.ipv-shop td.product-name dl.variation {
	list-style: none outside;
}

.ipv-shop td.product-name dl.variation dt {
	float: left;
	clear: both;
	margin-right: .25em;
	display: inline-block;
	list-style: none outside;
}

.ipv-shop td.product-name dl.variation dd {
	margin: 0;
}

.ipv-shop td.product-name dl.variation p,
.ipv-shop td.product-name dl.variation:last-child {
	margin-bottom: 0;
}
/*
 * Sprachumschalter (20.09.2026).
 *
 * 1:1 aus der Referenz uebernommen (Theme ipv-store, inc/ipv-language-switcher.php, dort als
 * Inline-Stil im wp_head). Nichts davon ist erfunden - auch nicht die Werte: Abstand 10px,
 * Schrift 13px, Hintergrund #f5f5f5 mit unterer Linie #e2e2e2, Deckkraft .6 fuer die nicht
 * gewaehlten Sprachen, 1 und fett fuer die aktive.
 *
 * Die Regelbasis bringt dafuer nichts mit - nachgesehen, 0 Treffer in main-style.css. Deshalb
 * steht es hier und nicht dort.
 */
.ipv-lang-switcher {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 6px 20px;
	font-size: 13px;
	background: #f5f5f5;
	border-bottom: 1px solid #e2e2e2;
}

.ipv-lang-switcher-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: #666;
	opacity: .6;
}

.ipv-lang-switcher-item:hover {
	opacity: .85;
}

.ipv-lang-switcher-item.is-active {
	opacity: 1;
	font-weight: 600;
	color: #333;
}

.ipv-lang-flag {
	font-size: 15px;
	line-height: 1;
}