/* CoupleMinutes - die Produkteinzelseite
 *
 * Loest die Elementor-Vorlage 3551 ab. ALLE Flaechenfarben, Innenabstaende,
 * Schriftgroessen, Spaltenbreiten und Haltepunkte in dieser Datei sind aus
 * deren erzeugtem CSS ABGELESEN:
 *
 *   uploads/elementor/css/post-3551.css      die Vorlage
 *   uploads/elementor/css/post-41.css        das Kit (Farben, Schriftstile)
 *
 * Der erste Anlauf am 27.08.2026 hatte die Werte geschaetzt. Das Ergebnis
 * sah dem Original nur von weitem aehnlich - Schriftgroessen daneben,
 * Spalten falsch verteilt, der Trio-Kasten eine flache Flaeche statt einer
 * Karte, und der Produkttext ohne das Video, das dort hingehoert. Der
 * Vergleich zweier Bildschirmfotos hat es aufgedeckt, keine Pruefung. Wer
 * hier etwas aendert, misst vorher nach; die Elementor-Kennung des
 * jeweiligen Bausteins steht in Klammern an jedem Abschnitt.
 *
 * Die Zuordnung von Elementors Farbnamen auf die Tokens:
 *
 *   text      -> --cm-color-signal              ORANGE, Produkttext
 *   4013b39   -> --cm-color-tint-peach          Pfirsich, Trio-Angebot
 *   4c60362   -> --cm-color-product-heartfelt   Koralle, Fragen
 *   a6a2a78   -> --cm-color-ink-muted           gedaempft, Bewertungen
 *   f34425e   -> --cm-color-tint-sage           Kasten der drei Merkmale
 *   d4fa196   -> --cm-color-signal-strong       Unterzeile auf Orange
 *   04aa75c   -> punkt-gruen.svg                Punkt der Verfuegbarkeit
 *
 * Die Schriftstile stehen NICHT hier, sondern in tokens.css - samt ihrer
 * kleineren Fassung ab 767px. Deshalb kommt diese Datei fast ohne eigene
 * Schriftgroessen aus; wo doch eine steht, hat das Kit dort einen Wert
 * gesetzt, den es als Stil gar nicht gibt (etwa 30px fuer den Preis).
 *
 * Wird nur auf Produktseiten geladen (siehe inc/assets.php).
 */

/* ==========================================================================
   Gemeinsames
   ========================================================================== */

.cm-produkt {
	/* Die Abschnitte liegen ueber die volle Breite; die Bahn steckt
	   jeweils innen. Ohne das entstehen weisse Raender neben den
	   Farbflaechen. */
	display: block;
	overflow-x: hidden;
}

.cm-produkt .cm-p-kopf__innen,
.cm-produkt .cm-p-inhalt__innen,
.cm-produkt .cm-p-trioblock__innen,
.cm-produkt .cm-p-faq__innen,
.cm-produkt .cm-p-bewertungen__liste {
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
}

/* .cm-p-bewertungen__kopf STEHT HIER MIT ABSICHT NICHT.
 *
 * Er traegt die Flaeche UND die Trenngrafik rezensionen-top2.svg, und
 * beide muessen ueber die volle Breite laufen. Bis zum 27.08.2026 stand
 * er in der Liste oben und war damit 1200px breit: die Grafik hoerte an
 * dieser Kante senkrecht auf, links und rechts davon sah man den
 * gedaempft gruenen Grund des Eltern-Abschnitts. Es sah aus wie ein
 * kaputtes Bild und war ein Spezifitaetsfehler - .cm-produkt
 * .cm-p-bewertungen__kopf schlaegt .cm-p-bewertungen__kopf, das
 * max-width: none weiter unten kam nie zum Zug.
 *
 * Die Breite des TEXTES regelt stattdessen die Ueberschrift selbst
 * (max-width: 847px), genau wie im Original. */

/* Die geschwungenen Kanten zwischen den Abschnitten.
 *
 * ---------------------------------------------------------------------
 * WARUM HIER EIN NEGATIVER ABSTAND STEHT UND KEIN position: relative
 *
 * In allen drei Grafiken endet die gezeichnete Form ein HALBES PIXEL vor
 * dem unteren Rand der Datei - nachgemessen:
 *
 *   produkt-faq-top.svg        Rahmen 119    Form bis 118.500
 *   home-dreierpack-top-1.svg  Rahmen 124    Form bis 123.416
 *   rezensionen-top2.svg       Rahmen 366    Form bis 365.587
 *
 * Der Rest ist durchsichtig. Auf einem breiten Bildschirm wird aus dem
 * halben Pixel bis zu zwei - und dort scheint der Grund des Traegers
 * durch. Zwischen Trio-Angebot und Fragen war das ein heller Strich quer
 * ueber die ganze Seite. Elementor kennt das Problem und setzt darum
 * bottom: -1px.
 *
 * Der erste Anlauf hatte hier BEIDES: margin-bottom: -1px UND
 * position: relative. Das hebt sich gegenseitig auf. Ein positioniertes
 * Element wird NACH den unpositionierten gezeichnet - die Trenngrafik lag
 * also oben und hat mit ihrem eigenen Grund ein Pixel des naechsten
 * Abschnitts zugedeckt, statt umgekehrt. Dieselbe Stapelregel wie bei der
 * Fusszeile, nur andersherum.
 *
 * Ohne Positionierung gewinnt der spaetere Abschnitt, und drei Pixel
 * Ueberdeckung reichen bis weit jenseits von 4K. Verloren geht dabei
 * nichts: die Unterkante der Grafik ist auf voller Breite gerade. */
/* .cm-trenner STEHT JETZT IN basis.css.
 *
 * cm_trenner() ist eine gemeinsame Funktion - die Startseite benutzt sie
 * viermal. Ihre Regeln standen hier, und produkt.css wird nur auf
 * Produktseiten geladen: auf der Startseite lagen die Wellen deshalb ohne
 * jede Regel da, in ihrer Eigenbreite von 1201px, linksbuendig und mit
 * einer Grundlinienluecke darunter. Auf einem breiteren Fenster fehlte
 * rechts ein Stueck Welle, und die Farbflaeche darunter setzte hart an.
 * Aufgefallen am 27.08.2026 an der Startseite.
 */
/* ==========================================================================
   1. Kopfbereich  (d0f8494)
   ========================================================================== */

.cm-p-kopf__innen {
	display: flex;
	gap: 20px;
	padding: 40px 20px 10px;
}

/* 47 zu 53, nicht halbe-halbe: die Angaben bekommen etwas mehr als die
   Galerie. Auf dem Tablet dreht es deutlicher auf 40 zu 60. */
.cm-p-kopf__galerie {
	flex: 0 0 47%;
	min-width: 0;
}

.cm-p-kopf__angaben {
	flex: 0 0 53%;
	min-width: 0;
	margin-top: 17px;
}

/* "CoupleMinutes" ueber dem Titel (e295769).
   ClickClack 25/25 - KEINE gesperrte Grossbuchstabenzeile. Genau das
   stand hier bis zum 27.08.2026 und war der auffaelligste Einzelfehler
   des Kopfbereichs. */
.cm-p-marke {
	margin: 0;
	font: var(--cm-text-h4);
	color: var(--cm-color-ink);
}

/* Der Produkttitel (5ee5d59): ClickClack 55/61, auf dem Telefon 36/39.
   Beides kommt aus --cm-text-h1; die Umschaltung steht in tokens.css. */
.cm-p-titel {
	margin: 5px 0 17px;
	font: var(--cm-text-h1);
}

.cm-p-kurz {
	font: var(--cm-text-body);
	color: var(--cm-color-ink);
}

.cm-p-kurz p {
	margin: 0;
}

/* Sterne und "1 review" in einer Zeile (50fd611). */
.cm-p-bewertung {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 15px;
}

.cm-p-bewertung__zahl {
	padding-top: 2px;
	font: var(--cm-text-body);
	color: inherit;
	text-decoration: underline;
}

/* --- Die drei Merkmale (4024c60) ----------------------------------
 *
 * Ein Kasten in tint-sage mit 8px Radius, 23px oben und unten, 15px
 * seitlich. Die Symbole sind KEINE CSS-Haken, sondern drei verschiedene
 * Zeichnungen, die als Inline-SVG in der Elementor-Vorlage lagen und am
 * 27.08.2026 nach assets/images/merkmal-1..3.svg geholt wurden. Sie
 * unterscheiden sich - ein Haken fuer alle drei waere sichtbar aermer. */
.cm-p-merkmale {
	margin: 24px 0 0;
	padding: 23px 15px;
	border-radius: 8px;
	background: var(--cm-color-tint-sage);
	list-style: none;
}

.cm-p-merkmale__punkt {
	display: flex;
	align-items: flex-start;
	gap: 3px;
}

.cm-p-merkmale__punkt + .cm-p-merkmale__punkt {
	margin-top: 13px;
}

.cm-p-merkmale__symbol {
	flex: none;
	width: 21px;
	height: 21px;
	/* Elementors --icon-vertical-offset: -1px */
	margin-top: -1px;
}

.cm-p-merkmale__text {
	font: var(--cm-text-lead);
	color: var(--cm-color-ink);
}

/* Der Preis (bdadd42): 30px fett - eine Groesse, die es als Stil nicht
   gibt, deshalb hier ausgeschrieben. */
.cm-p-preis {
	margin-top: 24px;
	font: var(--cm-weight-bold) 30px/30px var(--cm-font-body);
	color: var(--cm-color-ink);
}

.cm-p-preis p {
	margin: 0;
}

.cm-p-preis del {
	margin-right: 8px;
	font-size: 0.6em;
	font-weight: var(--cm-weight-regular);
	color: var(--cm-color-ink-muted);
}

.cm-p-preis ins {
	text-decoration: none;
}

/* "inc VAT & on Amazon" (3b74b9c).
 *
 * Im Original steht hier margin-top: -11px, und das ist auch richtig -
 * dort: der Preis-Absatz bringt seinen eigenen Standardabstand nach unten
 * mit, den die -11px nur teilweise wegnehmen. Uebrig bleibt eine kleine
 * Luecke.
 *
 * Diese Vorlage setzt den Absatz auf margin: 0 (siehe .cm-p-preis p).
 * Damit blieben von den -11px volle elf Pixel, die Zeile ruecke in die
 * Unterlaengen des Preises hinein. Der Wert aus der Vorlage war also
 * abgelesen, aber nicht uebertragbar - er haengt an einer Regel, die es
 * hier nicht mehr gibt.
 *
 * 10px sind bewusst etwas mehr Luft als im Original. Ausdruecklicher
 * Wunsch vom 27.08.2026: die Zeile stand zu dicht am Preis. */
.cm-p-hinweis {
	margin: 10px 0 19px;
	font: var(--cm-text-small-bold);
	color: var(--cm-color-ink);
}

.cm-p-kauf .cm-amazon {
	margin: 0;
}

/* Verfuegbarkeit (fa9fe58): 11px gruener Punkt, direkt am Text. */
.cm-p-lager {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 15px 0 0;
	font: var(--cm-text-small);
	color: var(--cm-color-ink);
}

.cm-p-lager__punkt {
	flex: none;
	width: 11px;
	height: 11px;
	margin-top: 3px;
}

/* --- Die Trio-Karte im Kopfbereich (e3d368f) -----------------------
 *
 * EINE WEISSE KARTE MIT SCHATTEN, keine getoente Flaeche. Sie liegt auf
 * dem weissen Grund des Abschnitts und hebt sich allein durch den
 * Schatten ab - 0 4px 4px rgba(0,0,0,.18). Drei Spalten: Bild 20%,
 * Text 49%, Preise 31%.
 *
 * Das Prozentzeichen ragt oben rechts heraus (top -29px, right -18px)
 * und ist deshalb der Grund fuer position:relative an der Karte. */
.cm-p-trio {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin-top: 23px;
	padding: 10px;
	border-radius: 8px;
	background: var(--cm-color-surface);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.18);
	color: var(--cm-color-ink);
	text-decoration: none;
}

.cm-p-trio:hover {
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.24);
}

.cm-p-trio__bild {
	flex: 0 0 20%;
	min-width: 0;
}

.cm-p-trio__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Der Text nimmt, was uebrig bleibt - KEIN fester Prozentwert.
 *
 * Bis zum 27.08.2026 standen hier drei feste Breiten: 20% + 49% + 31%.
 * Das ergibt zusammen 100 %, dazu kommen aber noch zweimal 14px gap - die
 * Zeile war damit 28px breiter als die Karte. Und weil alle drei Spalten
 * auf flex-shrink: 0 standen, konnte nichts nachgeben: der Preis stand
 * rechts ueber dem Kartenrand, mitten auf dem Seitengrund.
 *
 * Feste Prozentbreiten und gap vertragen sich nur, wenn die Prozente die
 * Abstaende mit einrechnen. Richtig ist, genau EINE Spalte dehnbar zu
 * machen - dann geht die Rechnung von selbst auf, auch wenn jemand
 * spaeter den Abstand aendert. */
.cm-p-trio__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-evenly;
	min-width: 0;
}

.cm-p-trio__titel {
	display: block;
	font: var(--cm-text-h5);
}

.cm-p-trio__zeile {
	display: block;
	font: var(--cm-text-small);
}

/* Die beiden Preise stehen nebeneinander auf einer gemeinsamen
 * Grundlinie, die Ersparnis haengt darunter.
 *
 * DIE GRUNDLINIE MACHT align-items: baseline, NICHT DIE ZEILENHOEHE.
 *
 * Vorher stand hier align-items: flex-end, und die Grundlinie wurde von
 * Hand hergestellt: 23px Abstand unter dem kleinen Preis, 27px ueber dem
 * grossen, dazu eine Zeilenhoehe von 13px bei 34px Schrift. Das war aus
 * der Elementor-Vorlage abgelesen, wo derselbe Kasten mit <br> und engen
 * Zeilen gebaut ist. Uebertragbar war es nicht: die 13px sind kleiner als
 * die Schrift, die Ziffern ragen also aus ihrer eigenen Zeile heraus, und
 * das "save 23%" darunter geriet in ihre Unterlaengen.
 *
 * baseline ist genau der Fall, fuer den es das Schluesselwort gibt - zwei
 * verschieden grosse Texte auf eine Linie. Es bleibt richtig, wenn sich
 * eine Schriftgroesse aendert; drei Handmasse tun das nicht. */
.cm-p-trio__preise {
	display: flex;
	flex: 0 0 auto;
	/* Die Gruppe steht unten in der Karte (align-self), die beiden Preise
	   darin auf einer Linie (align-items). Zwei verschiedene Achsen -
	   ohne das erste saesse die Gruppe oben, weil die Karte ihre Spalten
	   auf volle Hoehe zieht. */
	align-self: flex-end;
	align-items: baseline;
	justify-content: flex-end;
	gap: 10px;
}

.cm-p-trio__alt {
	font: var(--cm-weight-regular) 18px/1 var(--cm-font-body);
	color: var(--cm-color-ink);
}

.cm-p-trio__neu {
	display: block;
	font: var(--cm-weight-bold) 34px/1 var(--cm-font-body);
	text-align: center;
	white-space: nowrap;
}

.cm-p-trio__neu small {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	font-weight: var(--cm-weight-regular);
}

/* Der runde dunkle Knopf mit dem Warenkorbzeichen. Er steht nur da, wenn
   der Shop selbst verkauft - siehe kopfbereich.php. */
.cm-p-trio__knopf {
	display: flex;
	flex: none;
	/* Die Reihe richtet an der Grundlinie aus - ein runder Knopf hat
	   keine, er wuerde an der Unterkante seines Bildes haengen. */
	align-self: center;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--cm-radius-pill);
	background: var(--cm-color-ink);
}

.cm-p-trio__knopf img {
	width: 22px;
	height: 22px;
}

.cm-p-trio__abzeichen {
	position: absolute;
	top: -29px;
	right: -18px;
	font: var(--cm-weight-regular) 64px/64px var(--cm-font-display);
	color: var(--cm-color-product-heartfelt);
	pointer-events: none;
}

/* ==========================================================================
   3. Produkttext - orange  (8c96a56)
   ========================================================================== */

/* KEIN position: relative. Es braucht hier keins - und es haette
   dieselbe Wirkung wie bei den Trenngrafiken: der orange Abschnitt laege
   ueber dem Trio-Angebot, dessen margin-top: -2px damit ins Leere
   griffe. */
.cm-p-inhalt {
	background-color: var(--cm-color-signal);
	background-image: url('/wp-content/uploads/2025/03/home-dreierpack-bottom2.svg');
	background-repeat: no-repeat;
	background-position: 50% 101%;
	background-size: contain;
	color: var(--cm-color-surface);
}

/* ZWEI SPALTEN, nicht eine gestapelte Mitte: links das Video hochkant
   (32%), rechts der Text (35%), zusammen zentriert. Der Rest der Breite
   bleibt Luft - so steht es in der Vorlage. */
.cm-p-inhalt__innen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 20px 20px 110px;
}

.cm-p-inhalt__video {
	flex: 0 0 32%;
	min-width: 0;
}

.cm-p-inhalt__video video {
	display: block;
	width: 100%;
	/* 9:16 - das Video ist hochkant gedreht. Elementor notiert dasselbe
	   als --video-aspect-ratio: 0.5625. */
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.2);
	object-fit: cover;
}

.cm-p-inhalt__text {
	flex: 0 0 35%;
	min-width: 0;
}

.cm-p-inhalt .cm-p-inhalt__titel {
	margin: 10px 0 0;
	font: var(--cm-text-h2);
	color: var(--cm-color-surface);
}

/* Die Unterzeile steht in signal-strong auf dem Orange - dunkelrot, nicht
   weiss und nicht fett. */
.cm-p-inhalt__unter {
	margin: 15px 0 22px;
	font: var(--cm-text-lead);
	color: var(--cm-color-signal-strong);
}

.cm-p-inhalt__fliess {
	font: var(--cm-text-body);
	color: var(--cm-color-surface);
}

.cm-p-inhalt__fliess p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. Trio-Angebot - Pfirsich  (dcbca07)
   ========================================================================== */

.cm-p-trioblock {
	margin-top: -2px;
	background: var(--cm-color-tint-peach);
}

/* Die ganze Box ist im Schaufensterbetrieb ein <a> auf das
   Amazon-Listing (siehe template-parts/produkt/trio.php). Sie soll
   deshalb NICHT wie ein Verweis aussehen - die Aufforderung uebernimmt
   der Knopf darin. */
.cm-p-trioblock__innen {
	display: flex;
	align-items: center;
	padding: 0 20px;
	color: inherit;
	text-decoration: none;
}

/* Der Knopf reagiert auf die ganze Box, nicht nur auf sich selbst -
   sonst zeigt die Flaeche keine Wirkung, obwohl sie klickbar ist. */
a.cm-p-trioblock__innen:hover .button {
	opacity: 0.8;
}

/* Text 39%, Bild 61% - das Bild ist der groessere Teil. */
.cm-p-trioblock__text {
	position: relative;
	flex: 0 0 39%;
	min-width: 0;
	padding-block: 50px;
}

.cm-p-trioblock__bild {
	flex: 0 0 61%;
	min-width: 0;
}

.cm-p-trioblock__bild img {
	display: block;
	width: 100%;
	height: auto;
}

/* Das grosse orange Prozentzeichen (52e66ea): 85px, oben rechts UEBER
   der Ueberschrift, nicht daneben. */
.cm-p-trioblock__abzeichen {
	position: absolute;
	top: -17px;
	right: 57px;
	font: var(--cm-weight-regular) 85px/85px var(--cm-font-display);
	color: var(--cm-color-signal);
	pointer-events: none;
}

.cm-p-trioblock .cm-p-trioblock__titel {
	margin: 0;
	font: var(--cm-text-h2);
	color: var(--cm-color-ink);
}

.cm-p-trioblock__titel span {
	display: block;
}

.cm-p-trioblock__zeile {
	margin: 17px 0 30px;
	max-width: 34em;
	font: var(--cm-text-body);
	color: var(--cm-color-ink);
}

/* Die Preise stehen in Koralle, nicht in der Textfarbe - und sie sind
   deutlich groesser als im Kopfbereich (29px / 47px gegen 18px / 34px). */
/* Wie in der Trio-Karte, nur groesser: Zeilenhoehe 18px bei 47px Schrift.
   Die Abstaende stehen an den Elementen - der negative oben am
   durchgestrichenen Preis, der positive am grossen. Beide zusammen setzen
   die Grundlinien aufeinander. */
/* Dieselbe Grundlinie wie in der Trio-Karte oben, aus demselben Grund -
   und mit demselben Mittel statt mit Handmassen. Vorher stand hier
   align-items: center, dazu -25px am kleinen und +21px am grossen Preis
   und eine Zeilenhoehe von 18px bei 47px Schrift. Die Ersparnis darunter
   lag damit in den Unterlaengen des Preises. */
.cm-p-trioblock__preise {
	display: flex;
	align-items: baseline;
	gap: 13px;
	margin: 0 0 20px;
}

.cm-p-trioblock__preise s {
	font: var(--cm-weight-regular) 29px/1 var(--cm-font-body);
	color: var(--cm-color-product-heartfelt);
}

.cm-p-trioblock__preise strong {
	font: var(--cm-weight-bold) 47px/1 var(--cm-font-body);
	color: var(--cm-color-product-heartfelt);
	text-align: center;
	white-space: nowrap;
}

.cm-p-trioblock__ersparnis {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	font-weight: var(--cm-weight-regular);
}

.cm-p-trioblock__knopf {
	margin: 0;
}

/* Der Knopf ist ORANGE, nicht dunkel - die einzige Stelle der Seite, an
   der die Signalfarbe einen Knopf traegt. */
.cm-p-trioblock__knopf .button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--cm-color-signal);
	color: var(--cm-color-surface);
}

.cm-p-trioblock__knopf .button img {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   6. Fragen und Antworten - Koralle  (0ba4a88)
   ========================================================================== */

.cm-p-faq {
	background: var(--cm-color-product-heartfelt);
	color: var(--cm-color-surface);
}

.cm-p-faq__innen {
	display: flex;
	gap: 10px;
	padding: 0 20px 40px;
}

.cm-p-faq__seite {
	flex: 0 0 37%;
	min-width: 0;
}

.cm-p-faq__liste {
	flex: 0 0 63%;
	min-width: 0;
}

.cm-p-faq .cm-p-faq__titel {
	margin: 0;
	color: var(--cm-color-surface);
	font: var(--cm-text-h2);
}

.cm-p-faq__vorspann {
	margin-top: 16px;
	max-width: 22em;
	font: var(--cm-text-body);
}

/* Die Illustration fuellt ihre Spalte aus - das Original setzt KEINE
   eigene Breite, die Zeichnung ist 804px breit und wird allein von der
   Spalte begrenzt. Eine Obergrenze von 320px, wie sie hier bis zum
   27.08.2026 stand, macht sie sichtbar kleiner als im Original. */
.cm-p-faq__bild {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-top: 43px;
}

/* Die Gruppenueberschrift ist Fira Sans 15/23 FETT - nicht die
   Schreibmaschinenschrift und ohne Linie darunter. Bis zum 27.08.2026
   stand hier --cm-text-h5 mit Unterstrich; das war erfunden. */
.cm-p-faq .cm-p-faq__gruppe {
	margin: 13px 0 6px;
	color: var(--cm-color-surface);
	font: var(--cm-text-body-bold);
}

.cm-p-faq__gruppe:first-child {
	margin-top: 0;
}

/* Das Akkordeon: <details>/<summary>, ohne JavaScript.
 *
 * Der Browser oeffnet und schliesst selbst. Das Zeichen dreht sich am
 * Attribut [open] - kein Bild, kein SVG, also auch nichts, was ein
 * globaler Reset verstellen koennte. Genau daran ist Elementors Chevron
 * gescheitert. */
.cm-p-faq__punkt {
	border-top: 1px solid var(--cm-color-surface);
}

.cm-p-faq__punkt:last-child {
	border-bottom: 1px solid var(--cm-color-surface);
}

.cm-p-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	font: var(--cm-text-body);
	cursor: pointer;
	list-style: none;
}

.cm-p-faq__frage:hover {
	color: var(--cm-color-tint-blush);
}

/* Das Dreieck, das Safari und Chrome von sich aus setzen. */
.cm-p-faq__frage::-webkit-details-marker {
	display: none;
}

.cm-p-faq__frage::after {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s;
}

.cm-p-faq__punkt[open] .cm-p-faq__frage::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.cm-p-faq__antwort {
	padding: 0 0 14px;
	font: var(--cm-text-body);
}

.cm-p-faq__antwort p:last-child {
	margin-bottom: 0;
}

/* Die Links in den Antworten stehen hier auf Koralle - weiss ist richtig.
   Auf der Startseite steht dasselbe Akkordeon auf Weiss; dort waere weiss
   unsichtbar. Deshalb ist die Regel in bestand.css auf .single-product
   eingegrenzt. */
.cm-p-faq__antwort a {
	color: var(--cm-color-surface);
	text-decoration: underline;
}

/* ==========================================================================
   7. + 8. Bewertungen  (fc3d39e, 8dc0d4a)
   ========================================================================== */

.cm-p-bewertungen {
	background: var(--cm-color-ink-muted);
	color: var(--cm-color-surface);
}

/* Der Kopf steht noch auf Koralle, die Liste darunter auf gedaempftem
   Gruen - im Original zwei Container mit einer Grafik dazwischen. */
.cm-p-bewertungen__kopf {
	padding: 90px 0 30px;
	background-color: var(--cm-color-product-heartfelt);
	background-image: url('/wp-content/uploads/2025/03/rezensionen-top2.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	max-width: none;
	text-align: center;
}

/* Die Ueberschrift ist so gross wie der Produkttitel (55/61), nicht so
   gross wie eine Abschnittsueberschrift. */
.cm-p-bewertungen .cm-p-bewertungen__titel {
	margin: 0 auto;
	max-width: 847px;
	color: var(--cm-color-surface);
	font: var(--cm-text-h1);
}

.cm-p-bewertungen__unter {
	margin: 25px 0 0;
	font: var(--cm-text-lead);
}

.cm-p-bewertungen__liste {
	padding: 20px 20px 90px;
}

/* --- Lesbarkeit der einzelnen Bewertung ----------------------------
 *
 * Name und Datum standen in FAST-SCHWARZ auf dem dunklen Gruen. Das
 * Datum war praktisch unsichtbar: #4D5D64 gegen einen Grund von #546763
 * ist derselbe Ton. Es ist kein neuer Fehler - auf der Produktion steht
 * er genauso, er faellt dort nur niemandem auf, weil kaum jemand so weit
 * scrollt.
 *
 * Zwei Quellen zeigen dorthin, und beide muessen ueberstimmt werden:
 *
 *   bestand.css   .cr-all-reviews-shortcode ... .meta time
 *                 .cr-all-reviews-shortcode ... .woocommerce-review__author
 *                 -> color: var(--cm-color-ink) !important
 *                 Aus dem Customizer uebernommen, aus der Elementor-Zeit
 *   frontend.css  des Bewertungs-Plugins -> #0E252C und #4D5D64
 *                 Gestaltet fuer einen WEISSEN Grund
 *
 * DESHALB STEHT HIER !important. Gegen ein !important hilft keine
 * Spezifitaet - nur ein zweites. Die Regeln sind auf .cm-p-bewertungen
 * eingegrenzt, treffen also ausschliesslich diesen einen Abschnitt; auf
 * einer Seite mit hellem Grund bleibt alles, wie es ist.
 *
 * Weiss auf #546763 ergibt 5.9:1, Weiss zu 85 % noch 4.8:1 - beides ueber
 * der Schwelle von 4.5:1, die WCAG AA fuer Fliesstext verlangt. */
.cm-p-bewertungen .woocommerce-review__author,
.cm-p-bewertungen .cr-meta-author-title,
.cm-p-bewertungen .cr-comment-head-text {
	color: var(--cm-color-surface) !important;
}

.cm-p-bewertungen .woocommerce-review__published-date,
.cm-p-bewertungen .cr-meta-author-date time,
.cm-p-bewertungen .meta time {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   9. Kaufleiste am Fuss  (1f09385)
   ========================================================================== */

.cm-p-kaufleiste {
	position: sticky;
	bottom: 0;
	/* Ueber dem Seiteninhalt, aber UNTER der Kopfzeile (z-index 2) und
	   unter der Fusszeile (z-index 1) - sonst klebt sie ueber dem
	   Flieder, wenn man ganz nach unten scrollt. */
	z-index: 0;
	background: var(--cm-color-surface);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
}

.cm-p-kaufleiste__innen {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
	padding: 8px 20px;
}

.cm-p-kaufleiste__bild img {
	display: block;
	width: 48px;
	height: auto;
	border-radius: 6px;
}

.cm-p-kaufleiste__name {
	flex: 1 1 auto;
	min-width: 0;
}

.cm-p-kaufleiste__marke {
	display: block;
	font: var(--cm-text-caption);
	color: var(--cm-color-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cm-p-kaufleiste__titel {
	display: block;
	font: var(--cm-text-h6);
}

.cm-p-kaufleiste__preis {
	flex: none;
	text-align: right;
}

.cm-p-kaufleiste__preis .price {
	font: var(--cm-text-body-bold);
}

.cm-p-kaufleiste__hinweis {
	display: block;
	font: var(--cm-text-caption);
	color: var(--cm-color-ink-muted);
}

.cm-p-kaufleiste__kauf .cm-amazon {
	margin: 0;
}

/* ==========================================================================
   Tablet  (bis 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	.cm-p-kopf__galerie {
		flex: 0 0 40%;
	}

	.cm-p-kopf__angaben {
		flex: 0 0 60%;
	}

	/* Fragen: ab hier untereinander, beide Spalten voll breit. */
	.cm-p-faq__innen {
		flex-direction: column;
	}

	.cm-p-faq__seite,
	.cm-p-faq__liste {
		flex: 1 1 auto;
	}

	/* Trio-Angebot: das Verhaeltnis dreht sich, der Text bekommt mehr. */
	.cm-p-trioblock__text {
		flex: 0 0 60%;
		padding: 50px 20px;
	}

	.cm-p-trioblock__bild {
		flex: 0 0 40%;
	}

	.cm-p-trioblock__innen {
		padding-inline: 0;
	}

	.cm-p-trio__preise {
		gap: 6px;
	}

	/* Zwischenstufe aus der Vorlage: feste 1200px statt 100% der Breite.
	   Ohne sie waechst die Welle auf dem Tablet mit der Fensterbreite und
	   schiebt die Ueberschrift aus ihrem gruenen Grund. */
	.cm-p-bewertungen__kopf {
		background-size: 1200px auto;
	}
}

/* ==========================================================================
   Telefon  (bis 767px)
   ========================================================================== */

@media (max-width: 767px) {

	/* Unten 28px statt 0. Das Original hat dort ebenfalls 0 -- bei ihm
	   folgt aber ein Container mit eigenem Abstand, hier stoesst die
	   Trio-Karte unmittelbar an die Trenngrafik des naechsten
	   Abschnitts. */
	.cm-p-kopf__innen {
		flex-direction: column;
		padding: 3px 20px 28px;
	}

	.cm-p-kopf__galerie,
	.cm-p-kopf__angaben {
		flex: 0 0 auto;
	}

	/* KEIN margin-top: -35px.
	 *
	 * Der Wert steht so in der Elementor-Vorlage (5c34e65) und ist von
	 * dort uebernommen worden. Er ist dort aber ein AUSGLEICH: Elementors
	 * Galerie-Widget laesst unter den Miniaturen rund 35px Leerraum
	 * stehen, den das negative Mass wieder wegnimmt. Dieses Theme baut
	 * die Galerie nicht nach - der Leerraum entsteht gar nicht erst, und
	 * der Ausgleich zog die Angaben um genau diesen Betrag UNTER die
	 * Miniaturen. Sichtbar war es an der halb verdeckten Zeile
	 * "CoupleMinutes".
	 *
	 * Merksatz: ein negatives Mass aus einer fremden Vorlage ist fast nie
	 * eine Gestaltungsangabe, sondern die Gegenrechnung zu etwas, das es
	 * hier nicht gibt. Der Abstand kommt jetzt vom gap der Spalte. */
	.cm-p-kopf__angaben {
		margin-top: 0;
	}

	/* Die Schriftgroessen wandern NICHT hier, sondern in tokens.css:
	   dort steht der ganze Satz kleinerer Stile an einer Stelle. */

	/* Die Trio-Karte bricht um: Bild 33%, Text 62%, die Preise darunter
	   ueber die volle Breite. */
	.cm-p-trio {
		flex-wrap: wrap;
	}

	.cm-p-trio__bild {
		flex: 0 0 33%;
	}

	/* Wieder dehnbar statt 62% fest: 33 + 62 = 95 %, dazu 14px gap -- auf
	   einem 320px breiten Schirm ist das ein Pixel zu viel. Derselbe
	   Rechenfehler wie in der Grundregel, nur klein genug, um lange nicht
	   aufzufallen. */
	.cm-p-trio__text {
		flex: 1 1 auto;
	}

	.cm-p-trio__preise {
		flex: 0 0 100%;
		justify-content: flex-end;
	}

	/* Nur die Groessen. Die gemeinsame Grundlinie macht align-items in der
	   Grundregel und braucht hier nichts. */
	.cm-p-trio__alt {
		font-size: 16px;
	}

	.cm-p-trio__neu {
		font-size: 29px;
	}

	/* Auf dem Telefon sitzt das Prozentzeichen weiter oben und kleiner -
	   sonst haengt es neben der Karte in der Luft. */
	.cm-p-trio__abzeichen {
		top: -121px;
		right: -3px;
		font-size: 48px;
		line-height: 48px;
	}

	/* Produkttext: Video ueber Text, beide voll breit. Das Video bekommt
	   eine Hoehenbremse, sonst fuellt ein 9:16-Film den ganzen Schirm. */
	.cm-p-inhalt {
		margin-bottom: -1px;
		background-position: bottom center;
	}

	.cm-p-inhalt__innen {
		flex-wrap: wrap;
		padding: 20px 20px 50px;
	}

	.cm-p-inhalt__video,
	.cm-p-inhalt__text {
		flex: 0 0 100%;
	}

	.cm-p-inhalt__video video {
		width: auto;
		max-width: 100%;
		max-height: 70vh;
		margin-inline: auto;
	}

	.cm-p-trioblock__innen {
		flex-direction: column;
		padding: 20px;
	}

	.cm-p-trioblock__text,
	.cm-p-trioblock__bild {
		flex: 0 0 auto;
		width: 100%;
	}

	.cm-p-trioblock__text {
		padding: 0;
	}

	.cm-p-trioblock__bild {
		padding: 0 20px 40px;
	}

	.cm-p-trioblock__abzeichen {
		top: -17px;
		right: 25px;
		font-size: 70px;
		line-height: 70px;
	}

	/* Nur die Groessen - die Ausrichtung macht align-items: baseline in
	   der Grundregel und braucht auf dem Telefon nichts Eigenes. */
	.cm-p-trioblock__preise strong {
		font-size: 38px;
	}

	.cm-p-trioblock__preise s {
		font-size: 24px;
	}

	.cm-p-faq__innen {
		padding: 20px 20px 0;
	}

	/* Auch hier KEIN negatives Mass. In der Vorlage steht -30px (08a33f4)
	   als Gegenrechnung zum Leerraum unter Elementors Bild-Widget; hier
	   gibt es den nicht, und die Fragenliste rutschte auf die
	   Illustration. Die Gruppenueberschrift "Content & application" lag
	   dann mitten in der Zeichnung. */
	.cm-p-faq__liste {
		margin-top: 10px;
	}

	.cm-p-faq__bild {
		margin-top: 20px;
	}

	.cm-p-bewertungen {
		margin-top: -1px;
	}

	/* background-size: cover -- so steht es in der Vorlage (fc3d39e), und
	 * es ist der Grund, warum der Kopf dort nicht zerfaellt.
	 *
	 * Mit dem Desktop-Wert "100% auto" richtet sich die Hoehe der Welle
	 * nach der BREITE: auf einem 375px-Schirm sind das noch 114px, waehrend
	 * die Ueberschrift dort auf vier Zeilen umbricht und rund 250px hoch
	 * ist. Unterhalb der Grafik kam die eigene Flaechenfarbe des Kastens
	 * durch -- Koralle -- und die Ueberschrift stand zur Haelfte auf
	 * Gruen, zur Haelfte auf Koralle. Mit "cover" fuellt die Welle den
	 * Kasten, egal wie hoch er wird. */
	.cm-p-bewertungen__kopf {
		padding: 50px 20px 20px;
		background-size: cover;
	}

	/* --- Die Kaufleiste auf dem Telefon ---------------------------------
	 *
	 * Bis zum 27.08.2026 blieb hier NUR der Knopf stehen: Bild, Name und
	 * Preis waren ausgeblendet, weil das Bestands-CSS die Leiste auf dem
	 * Telefon durchsichtig macht und den Knopf frei mittig setzt. Das war
	 * aus der Elementor-Fassung uebernommen und sah aus wie ein
	 * vergessener Knopf im Nichts -- gerade auf dem Telefon, wo Titel und
	 * Preis nach dem langen Scrollen laengst aus dem Blick sind, ist die
	 * Leiste dort am nuetzlichsten.
	 *
	 * Sie zeigt jetzt Titel und Preis. Wegfallen muessen dafuer die
	 * beiden entbehrlichsten Angaben: das Vorschaubild (das Produktbild
	 * steht gross auf derselben Seite) und die Zeilen "CoupleMinutes" und
	 * "inc VAT & on Amazon". Ein langer Produktname bekommt drei Punkte
	 * statt eines Umbruchs -- eine Leiste, die je nach Produkt
	 * verschieden hoch ist, springt beim Scrollen. */
	.cm-p-kaufleiste__innen {
		gap: 10px;
		padding: 8px 16px;
	}

	.cm-p-kaufleiste__bild,
	.cm-p-kaufleiste__marke,
	.cm-p-kaufleiste__hinweis {
		display: none;
	}

	.cm-p-kaufleiste__titel {
		overflow: hidden;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cm-p-kaufleiste__kauf .button {
		padding: 10px 16px;
		font-size: 15px;
		white-space: nowrap;
	}
}