/*
Theme Name: store of luxus
Description: Schlankes Theme im Look des bisherigen Baukastens, ohne Page-Builder. Shop über das Ecwid-Plugin unter /shop/.
Version: 0.1.7
Author: HTC Hanseatic Tech Company
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sol
*/

/* Schriften lokal, keine Anfrage an Google */
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-latin_latin-ext-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("schriften/Roboto-latin_latin-ext-700italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "RobotoCondensed"; src: url("schriften/RobotoCondensed-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("schriften/Manrope-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("schriften/Manrope-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--sol-grau: #c7c3c4;
	--sol-text: #414141;
	--sol-weiss: #fff;
	--sol-text-gross: 18px;    /* Fließtext Desktop, im Baukasten 18px */
	--sol-seitenrand: 24px;
}
@media (max-width: 767px) {
	/* Der Baukasten verkleinert Fließtext und Überschriften auf dem Telefon auf 0,766 */
	:root { --sol-text-gross: 13.78px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--sol-weiss);
	color: var(--sol-text);
	font-family: Roboto, Arial, sans-serif;
	font-size: var(--sol-text-gross);
	line-height: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sol-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sol-sprung { position: absolute; left: 0; top: -60px; z-index: 100; background: var(--sol-weiss); padding: 12px 16px; font-weight: 700; }
.sol-sprung:focus { top: 0; }

/* ---------- Kopf ---------- */
.sol-kopf { background: var(--sol-grau); position: relative; }
.sol-kopf__innen { max-width: 1090px; margin: 0 auto; height: 275px; position: relative; }
.sol-logo { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); width: 150px; height: 150px; }
.sol-logo img { width: 100%; height: 100%; }
.sol-menue { position: absolute; left: 0; top: 197px; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sol-menue a {
	display: block; position: relative; padding: 10px 12px; height: 44px;
	font-family: RobotoCondensed, "Roboto Condensed", Arial, sans-serif; font-size: 20px;
	color: var(--sol-text); text-decoration: none;
}
.sol-menue a:hover, .sol-menue .aktiv a { color: var(--sol-weiss); }
.sol-menue .aktiv a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sol-weiss); }
.sol-werkzeuge { position: absolute; right: 0; top: 197px; height: 60px; display: flex; align-items: center; gap: 0; }
.sol-icon { width: 24px; height: 24px; fill: var(--sol-text); display: block; }
.sol-warenkorb { display: flex; align-items: center; gap: 4px; padding: 0 10px; color: var(--sol-text); text-decoration: none; font-size: 16px; margin-top: -6px; }
.sol-warenkorb__zahl { font-size: 16px; position: relative; top: -6px; }
.sol-suche { position: relative; width: 260px; margin: 0 16px 0 10px; }
.sol-suche input {
	width: 100%; height: 60px; padding: 16px 40px 14px 18px; border: 0; border-bottom: 2px solid var(--sol-text);
	background: transparent; color: var(--sol-text); font: 20px Roboto, Arial, sans-serif; border-radius: 0; outline: none;
}
.sol-suche input::placeholder { color: var(--sol-text); opacity: 1; }
.sol-suche button { position: absolute; right: 8px; top: 18px; background: none; border: 0; padding: 0; cursor: pointer; }
.sol-konto { padding: 0 0 0 4px; }
.sol-burger, .sol-suche-knopf { display: none; background: none; border: 0; padding: 0; cursor: pointer; }

/* Menü als Vollbild auf dem Telefon */
.sol-mobilmenue { display: none; }
.sol-mobilmenue[open], .sol-mobilmenue.offen {
	display: block; position: fixed; inset: 0; z-index: 50; background: var(--sol-grau); padding: 90px 24px 24px; overflow-y: auto;
}
.sol-mobilmenue ul { list-style: none; margin: 0 0 24px; padding: 0; }
/* Die Menülisten sind unter 992px im Kopf und Fuß ausgeblendet, im Vollbild-Menü müssen sie stehen (mittig wie im Baukasten) */
.sol-mobilmenue .sol-menue, .sol-mobilmenue .sol-fussmenue { display: block; position: static; text-align: center; }
.sol-mobilmenue .sol-menue a { height: auto; }
.sol-mobilmenue .aktiv a::after { display: none; }
.sol-mobilmenue a { display: block; padding: 12px 0; font-family: RobotoCondensed, Arial, sans-serif; font-size: 20px; color: var(--sol-text); text-decoration: none; }
.sol-mobilmenue .aktiv a { color: var(--sol-weiss); }
.sol-mobilmenue__zu { position: absolute; right: 24px; top: 28px; background: none; border: 0; padding: 0; cursor: pointer; }

@media (max-width: 1100px) {
	.sol-kopf__innen { padding: 0 16px; }
	.sol-menue { left: 16px; }
	.sol-werkzeuge { right: 16px; }
	.sol-suche { width: 200px; }
}
@media (max-width: 991px) {
	.sol-kopf__innen { height: 183px; }
	.sol-logo { width: 93px; height: 93px; }
	.sol-menue { display: none; }
	.sol-werkzeuge { top: 129px; height: 48px; left: 0; right: 0; justify-content: center; gap: 16px; }
	.sol-warenkorb { padding: 0; margin-top: 0; }
	.sol-warenkorb__zahl { top: -4px; }
	.sol-suche { display: none; }
	.sol-suche.offen { display: block; position: absolute; left: 16px; right: 16px; top: 48px; width: auto; margin: 0; background: var(--sol-grau); z-index: 5; }
	.sol-suche-knopf { display: block; }
	.sol-konto { padding: 0; }
	/* scrollt mit dem Kopf weg wie im Baukasten, fixiert läge er über dem Text */
	.sol-burger { display: block; position: absolute; right: 26px; top: 26px; z-index: 40; }
	.sol-burger .sol-icon { width: 30px; height: 30px; }
}

/* ---------- Inhalt ---------- */
.sol-inhalt { padding: 48px var(--sol-seitenrand) 48px; }
/* Lange Adressen im Text (AGB, Datenschutz) umbrechen, sonst scrollen kleine Telefone (320 bis 384px) seitlich */
.sol-inhalt { overflow-wrap: break-word; }
.sol-inhalt > * { max-width: 912px; margin-left: auto; margin-right: auto; }
/* Bilder direkt im Inhalt (Impressum) nie breiter als das Telefon, die Regel darüber hebt img { max-width: 100% } auf */
.sol-inhalt > img { max-width: min(912px, 100%); }
.sol-inhalt > .alignwide, .sol-inhalt > .sol-breit { max-width: 1232px; }
.sol-inhalt > .alignfull, .sol-inhalt > .sol-band { max-width: none; margin-left: calc(-1 * var(--sol-seitenrand)); margin-right: calc(-1 * var(--sol-seitenrand)); }
.sol-inhalt p { margin-top: 1em; margin-bottom: 1em; }
.sol-inhalt p:empty::before { content: "\00a0"; }
.sol-inhalt ul, .sol-inhalt ol { margin: 1em auto; padding-left: 40px; }
.sol-inhalt h1, .sol-inhalt h2, .sol-inhalt h3, .sol-inhalt h4, .sol-inhalt h5, .sol-inhalt h6 { font-family: Arial, Helvetica, sans-serif; font-weight: 400; color: var(--sol-text); line-height: normal; }
.sol-inhalt h2 { font-size: calc(var(--sol-text-gross) * 2.0556); margin: .83em auto; }   /* 37px */
.sol-inhalt h3 { font-size: calc(var(--sol-text-gross) * 1.7222); margin: 1em auto; }     /* 31px */
.sol-inhalt h4 { font-size: calc(var(--sol-text-gross) * 1.3333); margin: 1.33em auto; }
.sol-inhalt h5 { font-size: 21px; margin: 1.67em auto; }
/* Überschriften im Shop: Schrift kommt von Ecwid (Roboto wie im Baukasten), nicht Arial aus der Regel oben */
.sol-inhalt .ec-size h1, .sol-inhalt .ec-size h2, .sol-inhalt .ec-size h3, .sol-inhalt .ec-size h4, .sol-inhalt .ec-size h5, .sol-inhalt .ec-size h6 { font-family: inherit; }
.sol-inhalt strong { font-weight: 700; }
.sol-inhalt .sol-klein { font-size: 14px; line-height: calc(var(--sol-text-gross) * 1.17); margin-top: var(--sol-text-gross); margin-bottom: var(--sol-text-gross); }
.sol-inhalt .sol-hinweis { margin-top: 64px; padding-left: 8px; }
.sol-inhalt a { color: var(--sol-text); }
.sol-inhalt .wp-block-image { margin: 0 auto; }
.sol-inhalt .wp-block-columns { display: flex; gap: 16px; margin: 0 auto; }
.sol-inhalt .wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
	.sol-inhalt { padding-top: 46px; }
	.sol-inhalt .wp-block-columns { flex-direction: column; gap: 0; }
}

/* Grauer Streifen vor dem Fuß, wie im Baukasten */
.sol-band { background: var(--sol-grau); height: 200px; margin-top: 48px !important; margin-bottom: -48px !important; }
.sol-band--klein { height: 161px; }

/* Blasse Hintergrundillustration (Kontakt, Shop) */
.sol-hintergrund { background-size: cover; background-position: center; background-repeat: no-repeat; }
.sol-hintergrund--sofa { background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url("bilder/sofa-ganz.webp"); }
.sol-hintergrund--tisch { background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url("bilder/tisch-ganz.webp"); }

/* ---------- Startseite ---------- */
.sol-start { font-family: Manrope, Arial, sans-serif; font-size: 20px; }
.sol-start p { margin: 18px 0; }
.sol-start .sol-titel { font-family: Manrope, Arial, sans-serif; font-weight: 700; font-size: 32px; margin: 36px 0; }
.sol-start .sol-untertitel { font-weight: 700; font-size: 30px; }
.sol-start .sol-link { font-family: Roboto, Arial, sans-serif; font-size: var(--sol-text-gross); font-weight: 700; }
.sol-start__oben { display: grid; grid-template-columns: 432px 448px; gap: 40px; justify-content: center; align-items: start; }
.sol-start__oben > div { padding-top: 96px; }
/* Wunsch Katja 03.11.: zwischen oberem und unterem Text nur gut 70px. Sofa, Text und Laptop beginnen darum auf einer Linie (vierspaltig steht der Laptop direkt unter dem oberen Text), nur das Paket bleibt versetzt */
.sol-start__unten { display: grid; grid-template-columns: repeat(4, 296px); gap: 16px; justify-content: center; align-items: start; padding: 40px 0 54px; }
.sol-start__unten .sol-start__bild-paket { margin-top: 64px; }
@media (max-width: 1279px) {
	.sol-start__unten { grid-template-columns: repeat(2, minmax(0, 296px)); }
}
@media (max-width: 991px) {
	/* Tablet hochkant (768 bis 967px): beide Spalten schrumpfen statt über den Rand zu laufen, wie im Baukasten bleibt es zweispaltig */
	.sol-start__oben { grid-template-columns: minmax(0, 432px) minmax(0, 448px); }
}
@media (max-width: 767px) {
	.sol-start p { margin: 13.78px 0; }
	.sol-start__oben { grid-template-columns: 1fr; gap: 0; }
	.sol-start__oben > div { padding-top: 57px; }
	.sol-start__oben img { width: 326px; margin-left: -8px; }
	.sol-start .sol-titel { margin: 28px 0; }
	.sol-start .sol-untertitel { font-size: 20px; }
	/* Kein Abstand oben: das Sofa-Bild bringt rund 95px Weißraum über der Zeichnung selbst mit */
	.sol-start__unten { grid-template-columns: 1fr 1fr; padding: 0 0 61px; gap: 0 16px; }
	.sol-start__unten .sol-start__bild-sofa, .sol-start__unten .sol-start__text { grid-column: 1 / -1; }
	.sol-start__unten .sol-start__bild-sofa { margin-bottom: 40px; }
	.sol-start__unten .sol-start__bild-laptop { margin-top: 45px; }
	.sol-start__unten .sol-start__bild-paket { margin-top: 121px; }
	.sol-start .sol-link { font-size: 13.78px; }
}

/* ---------- Shop ---------- */
/* Die vorgerenderte Ecwid-Fassung kennt die Baukasten-Einstellung „kein Kaufknopf in Listen“ nicht */
#static-ec-store-container .grid-product__buy-now { display: none; }
.sol-inhalt .ecwid-shopping-cart, .sol-inhalt .ec-size, .sol-inhalt > .wp-block-ecwid-store-block { max-width: 892px; }

/* ---------- Formulare (Kontakt, Vertrag widerrufen) ---------- */
.sol-formular { font-size: var(--sol-text-gross); }
.sol-formular label { display: block; margin: 0 0 8px; }
.sol-formular input[type=text], .sol-formular input[type=email], .sol-formular textarea {
	display: block; width: 100%; border: 0; border-bottom: 2px solid var(--sol-text); background: transparent;
	font: inherit; color: var(--sol-text); padding: 12px 0; border-radius: 0; margin: 0 0 34px; outline: none;
}
.sol-formular input { height: 58px; }
.sol-formular textarea { height: 238px; resize: vertical; }
.sol-formular__hinweis { margin: 0 0 12px; }
.sol-formular button {
	width: 100%; height: 40px; border: 2px solid var(--sol-text); border-radius: 20px; background: transparent;
	color: #757575; font: inherit; cursor: pointer;
}
.sol-formular button:hover { background: var(--sol-text); color: var(--sol-weiss); }
.sol-formular__falle { position: absolute; left: -9999px; }
.sol-formular__meldung { padding: 12px 0; font-weight: 700; }
.sol-knopf { display: inline-block; background: var(--sol-grau); border-radius: 6px; padding: 9px 9px; text-decoration: none; color: var(--sol-text); }
.sol-widerruf { max-width: 400px !important; margin-left: max(0px, calc((100% - 912px) / 2 + 24px)) !important; }
@media (max-width: 767px) {
	.sol-widerruf { margin-left: 0 !important; }
	.sol-formular input { height: 50px; }
	.sol-formular textarea { height: 180px; }
}

/* ---------- Fuß ---------- */
.sol-fuss { text-align: center; padding: 32px 24px 70px; }
.sol-fussmenue { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sol-fussmenue a { display: block; padding: 10px 12px; font-size: 18px; color: var(--sol-text); text-decoration: none; }
.sol-fussmenue a { position: relative; }
.sol-fussmenue a:hover { text-decoration: underline; }
.sol-fussmenue .aktiv a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sol-text); }
.sol-copyright { font-size: 14px; margin: 14px 0 22px; }
.sol-sozial { display: flex; justify-content: center; gap: 16px; }
.sol-sozial a { display: block; }
.sol-sozial .sol-icon { width: 36px; height: 36px; fill: #777; }
@media (max-width: 991px) {
	.sol-fussmenue { display: none; }
	.sol-copyright { margin-top: 0; }
	.sol-sozial .sol-icon { width: 27px; height: 27px; }
}

/* ---------- Abstände je Seite wie im Baukasten ---------- */
.sol-seite-kontakt .sol-inhalt { padding-top: 91px; padding-bottom: 106px; }
.sol-seite-kontakt .sol-band { margin-top: 106px !important; margin-bottom: -106px !important; }
.sol-seite-vertrag-widerrufen .sol-inhalt { padding-top: 32px; }
@media (max-width: 767px) {
	.sol-seite-kontakt .sol-inhalt { padding-top: 60px; }
}

/* ---------- Einwilligung ---------- */
/* Cookie-Banner aus js/einwilligung.js, fest unten, die Seite bleibt darüber lesbar. Knopftext 19px fett: Weiß auf
   #7e7577 hat 4,47:1, das reicht nach WCAG AA erst für großen Text (ab 18,66px fett, Grenze 3:1). */
.sol-einwilligung[hidden], .sol-einwilligung [hidden] { display: none !important; }
.sol-einwilligung {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
	max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
	background: var(--sol-weiss); color: var(--sol-text); border-top: 1px solid var(--sol-grau); box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
	font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.45; text-align: left;
}
.sol-einwilligung:focus { outline: none; }
:where(.sol-einwilligung) p { margin: 0; }
.sol-einwilligung__innen {
	max-width: 1090px; margin: 0 auto; padding: 20px var(--sol-seitenrand);
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
}
.sol-einwilligung__titel { margin: 0 0 4px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; color: inherit; }
.sol-einwilligung__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.sol-einwilligung__links a { display: inline-block; padding: 6px 0; }
.sol-einwilligung a { color: var(--sol-text); text-decoration: underline; text-underline-offset: 2px; }
/* Knöpfe nebeneinander und gleich breit, so breit wie der längste Text: Akzeptieren und Ablehnen sind immer gleich groß */
.sol-einwilligung__knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; justify-self: end; }
/* Mit offenen Schaltern stehen Kopf, Schalter und Knöpfe untereinander */
.sol-einwilligung--auswahl .sol-einwilligung__innen { grid-template-columns: minmax(0, 1fr); }
.sol-einwilligung__knopf {
	min-width: 160px; min-height: 48px; margin: 0; padding: 10px 20px; border: 2px solid #7e7577; border-radius: 3px;
	background: #7e7577; color: var(--sol-weiss); font: 700 19px/1.2 Roboto, Arial, sans-serif; cursor: pointer;
}
.sol-einwilligung__knopf:hover { background: var(--sol-text); border-color: var(--sol-text); }
/* „Einstellungen“ öffnet nur die Schalter und ist darum zurückhaltender, Akzeptieren und Ablehnen sind gleich */
.sol-einwilligung__knopf[data-sol-aktion="einstellungen"] { background: var(--sol-weiss); color: var(--sol-text); }
.sol-einwilligung__knopf[data-sol-aktion="einstellungen"]:hover { background: var(--sol-grau); border-color: #7e7577; }
.sol-einwilligung a:focus-visible, .sol-einwilligung__knopf:focus-visible, .sol-einwilligung-fusslink:focus-visible,
.sol-einwilligung__schalter input:focus-visible + .sol-einwilligung__regler { outline: 3px solid var(--sol-text); outline-offset: 2px; }

.sol-einwilligung__auswahl { border-top: 1px solid var(--sol-grau); }
.sol-einwilligung__kategorie { padding: 12px 0; border-bottom: 1px solid var(--sol-grau); }
.sol-einwilligung__schalter { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; }
.sol-einwilligung__schalter input { position: absolute; left: 0; top: 50%; width: 48px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.sol-einwilligung__regler { position: relative; flex: none; width: 48px; height: 28px; border: 2px solid #7e7577; border-radius: 14px; background: var(--sol-weiss); }
.sol-einwilligung__regler::after {
	content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #7e7577; transition: transform .15s;
}
.sol-einwilligung__schalter input:checked + .sol-einwilligung__regler { background: #7e7577; }
.sol-einwilligung__schalter input:checked + .sol-einwilligung__regler::after { transform: translateX(20px); background: var(--sol-weiss); }
.sol-einwilligung__schalter input:disabled, .sol-einwilligung__schalter input:disabled ~ * { cursor: default; }
.sol-einwilligung__fest { font-weight: 400; }
.sol-einwilligung__beschreibung { margin-left: 60px; font-size: 15px; }

/* Fußlink „Cookie-Einstellungen“, auf allen Breiten sichtbar (das Fußmenü ist unter 992px ausgeblendet) */
.sol-fuss__einwilligung { margin: 0; }
.sol-einwilligung-fusslink {
	min-height: 44px; margin: 0; padding: 10px 12px; border: 0; background: none;
	font: 18px Roboto, Arial, sans-serif; color: var(--sol-text); cursor: pointer;
}
.sol-einwilligung-fusslink:hover { text-decoration: underline; }

@media (max-width: 991px) {
	.sol-einwilligung-fusslink { font-size: 14px; }
	/* Tablet hochkant: Knöpfe unter den Text, sonst bliebe dem Text eine schmale Spalte von 200px */
	.sol-einwilligung__innen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.sol-einwilligung { font-size: 15px; }
	.sol-einwilligung__innen { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
	.sol-einwilligung__titel { font-size: 17px; }
	.sol-einwilligung__knoepfe { grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 8px; justify-self: stretch; }
	.sol-einwilligung__knopf { min-width: 0; padding: 10px 8px; }
	.sol-einwilligung__knopf[data-sol-aktion="einstellungen"], .sol-einwilligung__knopf[data-sol-aktion="speichern"] { grid-column: 1 / -1; }
	.sol-einwilligung__beschreibung { margin-left: 0; font-size: 14px; }
}
/* Niedrige Fenster (Telefon quer, starker Zoom): einspaltig und enger, von der Seite bleibt mehr als ein Drittel
   sichtbar. Knopftext bleibt 19px fett wegen des Kontrasts. */
@media (max-height: 500px) {
	.sol-einwilligung { max-height: 60vh; max-height: 60dvh; font-size: 14px; line-height: 1.4; }
	.sol-einwilligung__innen { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px var(--sol-seitenrand); }
	.sol-einwilligung__titel { font-size: 16px; margin-bottom: 2px; }
	.sol-einwilligung__links { margin-top: 0; }
	.sol-einwilligung__links a { padding: 4px 0; }
	.sol-einwilligung__knopf { min-height: 44px; padding: 6px 8px; }
	.sol-einwilligung__kategorie { padding: 6px 0; }
	.sol-einwilligung__beschreibung { font-size: 14px; }
}
/* Breit genug: alle Knöpfe in einer Reihe. Schmaler (400 % Zoom, 320px Breite) gilt das Raster mit zwei Spalten von
   oben, sonst würden die Knopftexte abgeschnitten (WCAG 1.4.10). */
@media (max-height: 500px) and (min-width: 600px) {
	.sol-einwilligung__knoepfe { display: flex; gap: 8px; justify-self: stretch; }
	.sol-einwilligung__knopf { flex: 1 1 0; min-width: 0; }
}
/* Hoher Kontrast (Windows): Der Browser würde alle Flächen der Schalter einfärben, dann sähen „an“ und „aus“ gleich
   aus. Systemfarben halten den Zustand sichtbar. */
@media (forced-colors: active) {
	.sol-einwilligung__regler, .sol-einwilligung__regler::after { forced-color-adjust: none; }
	.sol-einwilligung__regler { border-color: CanvasText; background: Canvas; }
	.sol-einwilligung__regler::after { background: CanvasText; }
	.sol-einwilligung__schalter input:checked + .sol-einwilligung__regler { border-color: Highlight; background: Highlight; }
	.sol-einwilligung__schalter input:checked + .sol-einwilligung__regler::after { background: HighlightText; }
	.sol-einwilligung__schalter input:disabled + .sol-einwilligung__regler { border-color: GrayText; background: GrayText; }
	.sol-einwilligung__schalter input:disabled + .sol-einwilligung__regler::after { background: Canvas; }
	.sol-einwilligung__schalter input:focus-visible + .sol-einwilligung__regler { outline-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
	.sol-einwilligung__regler::after { transition: none; }
}
@media print {
	.sol-einwilligung { display: none !important; }
}