/* CoupleMinutes - Startseite
 *
 * Loest die Elementor-Seite 8 ab. ALLE Masse sind aus Elementors
 * erzeugtem CSS abgelesen, nicht geschaetzt:
 *
 *   uploads/elementor/css/post-8.css    die Seite
 *   uploads/elementor/css/post-41.css   das Kit (Farben und Schriftsaetze)
 *
 * Die Zuordnung der Kit-Namen auf die Tokens dieses Themes:
 *
 *   8c37bd0 -> --cm-text-h1      555e046 -> --cm-text-h2
 *   a0ff9cf -> --cm-text-h3      86f556e -> --cm-text-h4
 *   2070c20 -> --cm-text-h5      92c7a5b -> --cm-text-h6
 *   9b25187 -> --cm-text-h7      primary -> --cm-text-body
 *   631fe2b -> --cm-text-body-bold   secondary -> --cm-text-lead
 *   ec3f686 -> --cm-text-lead-bold   text    -> --cm-text-small
 *   4f88fce -> --cm-text-small-bold  accent  -> --cm-text-caption
 *   c5f9def -> --cm-text-button
 *
 *   primary  -> ink        secondary -> surface    text -> signal
 *   accent   -> product-lighthearted    4c60362 -> product-heartfelt
 *   2de971c  -> product-intimate        4013b39 -> tint-peach
 *
 * Nachgezaehlt am 27.08.2026: die Startseite benutzt KEINE feste Farbe
 * und keine Kit-Farbe ohne Token. Es musste also kein Token dazu.
 *
 * ======================================================================
 * WAS ABSICHTLICH ANDERS IST ALS IM ORIGINAL
 *
 * 1. KEINE NEGATIVEN ABSCHNITTSABSTAENDE. Elementor setzt zwischen die
 *    Abschnitte -20px, -90px, -45px, -40px und -3px. Das sind
 *    Gegenrechnungen gegen den Leerraum von Elementors eigenen
 *    Bausteinen, keine Gestaltungsangaben - dieses Theme baut diese
 *    Bausteine nicht nach, der Leerraum entsteht gar nicht. Derselbe
 *    Fehler hat am 27.08.2026 auf der Produktseite fuenf Abstandsfehler
 *    auf dem Telefon verursacht.
 *
 * 2. KEINE LEERSPALTEN. Drei Abschnitte tragen eine Spalte ohne Inhalt
 *    (22 %, 25 %, 24 %), nur um den Rest zu schieben. Hier macht das
 *    justify-content.
 *
 * 3. RASTER STATT HANDPROZENTE, wo die Werte offensichtlich gleiche
 *    Spalten meinen: die vier Punkte in "Because we care" stehen im
 *    Original auf 24/26/25/25 %.
 *
 * Uebernommen sind Schriftgroessen, Farben, Verhaeltnisse,
 * Innenabstaende und die Grafiken.
 *
 * Geladen NUR auf der Startseite, siehe inc/assets.php.
 */

/* ==========================================================================
   0. Gemeinsames
   ========================================================================== */

.cm-start {
	display: block;
	/* Die Trenngrafiken und die Hintergrundbilder gehen ueber die volle
	   Breite; ohne das entstehen weisse Raender daneben. */
	overflow-x: hidden;
}

.cm-s-hero__innen,
.cm-s-versprechen__innen,
.cm-s-produkt__innen,
.cm-s-trio__innen,
.cm-s-werte__innen,
.cm-s-bewertungen__innen,
.cm-s-ueberuns__innen,
.cm-s-faq__innen,
.cm-s-newsletter__innen,
.cm-s-kontakt__innen {
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
}

/* ==========================================================================
   Das Karussell - eine Scrollbahn, kein Swiper
   ==========================================================================

   Beide Karussells der Seite haben Autoplay AUS, es wird also nur von
   Hand geblaettert. Genau das kann der Browser selbst.

   Die Pfeile stehen im Markup mit [hidden] und werden von theme.js
   eingeblendet. Faellt das Buendel aus, bleibt die Bahn wischbar - ein
   Knopf, der nichts tut, waere schlimmer als keiner.
   ========================================================================== */

.cm-kar {
	position: relative;
	width: 100%;
}

.cm-kar__bahn {
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Die Leiste selbst ist ueberfluessig: geblaettert wird mit Wischen
	   oder mit den Pfeilen. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cm-kar__bahn::-webkit-scrollbar {
	display: none;
}

.cm-kar__folie {
	scroll-snap-align: start;
}

/* ZIEHEN MIT DER MAUS.
 *
 * Ein Scrollbereich laesst sich mit dem FINGER ziehen, mit der Maus
 * nicht - dort scrollt nur das Rad, und das waagerecht nur mit
 * Umschalttaste. Swiper kann es von Haus aus (simulateTouch), und genau
 * das hat auf dem Rechner gefehlt.
 *
 * theme.js zieht deshalb selbst und setzt dabei diese Klasse. Waehrend
 * des Ziehens muessen Einrasten und weiches Scrollen AUS sein: sonst
 * zieht der Browser bei jedem Pixel zum naechsten Rastpunkt zurueck und
 * die Bewegung ruckelt. Beim Loslassen faellt die Klasse weg, und das
 * Einrasten greift wieder - dann rastet es genau einmal ein, dort wo
 * losgelassen wurde. */
.cm-kar__bahn--zieht {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.cm-kar__bahn {
	cursor: grab;
}

/* Die Pfeile.
 *
 * KEINE background-KURZFORM IN DIESER REGEL. Das war der Fehler vom
 * 27.08.2026: die Kurzform stand in der Gruppe mit :hover, und weil ein
 * Pseudoelement die Spezifitaet erhoeht (0,3,0 gegen 0,2,0 an
 * .cm-kar__pfeil--zurueck), setzte sie beim Zeigen background-image auf
 * none - der Pfeil verschwand genau dann, wenn die Maus ankam.
 *
 * Eine Kurzform setzt IMMER alle acht background-Eigenschaften, auch die
 * nicht genannten. Wo ein Bild aus einer anderen Regel kommt, gehoeren
 * deshalb nur Langformen hin.
 *
 * z-index 4: der Faecher geht bis 3, und die aeussere Karte ueberlappt
 * die Pfeile.
 */
.cm-kar__pfeil {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 60px;
	height: 60px;
	transform: translateY(-50%);
	cursor: pointer;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
	transition: filter 0.4s, opacity 0.4s;
}

/* Gegen .elementor-kit-41 button (Radius 100px) und button:hover aus
   basis.css (dunkle Flaeche, opacity .8) - beide staerker als eine
   einzelne Klasse. Nur Langformen, siehe oben. */
.cm-kar .cm-kar__pfeil,
.cm-kar .cm-kar__pfeil:hover,
.cm-kar .cm-kar__pfeil:focus {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
}

.cm-kar .cm-kar__pfeil:hover {
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.43));
}

/* AM ENDE DER BAHN SICHTBAR ABGESCHALTET.
 *
 * Vorher stand hier nichts, und die Regel darueber setzte opacity
 * hart auf 1 - der abgeschaltete Pfeil sah aus wie ein
 * funktionierender. Beim ersten Aufruf steht die Bahn ganz links, der
 * linke Pfeil ist also abgeschaltet: wer ihn zuerst probiert, haelt das
 * ganze Karussell fuer kaputt. */
.cm-kar .cm-kar__pfeil:disabled {
	opacity: 0.35;
	cursor: default;
	filter: none;
}

.cm-kar .cm-kar__pfeil[hidden] {
	display: none;
}

.cm-kar .cm-kar__pfeil--zurueck {
	left: 20px;
	background-image: url('/wp-content/uploads/2025/03/arrow-left.svg');
}

.cm-kar .cm-kar__pfeil--vor {
	right: 20px;
	background-image: url('/wp-content/uploads/2025/03/arrow-right.svg');
}

/* ==========================================================================
   1. Kopfbereich  (4035937)
   ========================================================================== */

.cm-s-hero {
	position: relative;
	padding: 130px 20px 0;
	background: url('/wp-content/uploads/2025/03/coupleminutes-background-min.jpg') top center / cover no-repeat;
}

/* Die Verlaufsgrafik liegt UNTEN und blendet den Bildrand aus. Elementor
   loest sie als ::before des Containers, hier ebenso. */
.cm-s-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2025/03/gradient-hero.svg') bottom center / contain no-repeat;
	pointer-events: none;
}

.cm-s-hero__innen {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.cm-s-hero .cm-s-hero__titel {
	margin: 0 0 70px;
	color: var(--cm-color-surface);
	font: var(--cm-text-h1);
	text-align: center;
}

/* Die Karten ueberlappen sich - im Original ueber einen NEGATIVEN
   Abstand von 120px zwischen den Folien (Tablet 90px, Telefon 50px).
   Fuenf Karten sind auf jeder Groesse gleichzeitig sichtbar, sie werden
   nur immer staerker gefaechert.

   Swiper rechnet: Folienbreite = (Bahn + Abstand * (n-1)) / n. Bei
   negativem Abstand wird die Folie also BREITER als ein Fuenftel.

   Die Bahn ist um 110px schmaler als der Abschnitt - so ist links und
   rechts Platz fuer die Pfeile (bestand.css: width calc(100% - 110px)). */
.cm-kar--karten .cm-kar__bahn {
	width: calc(100% - 110px);
	margin-inline: auto;
	padding: 50px 0;
}

/* DIE FOLIE SELBST WIRD NICHT GEDREHT - das macht die Karte darin.
   Der Grund ist das Einrasten: der Rastbereich einer Folie ist laut
   Spezifikation ihr TRANSFORMIERTER Rahmen. Gedrehte und verkleinerte
   Folien rasten deshalb nicht dort ein, wo sie im Layout stehen, und
   jede Position rastet anders - gemessen am 28.08.2026 auf dem Telefon
   24,5px daneben, immer in dieselbe Richtung. Genau so viel stand der
   Faecher neben der Mitte.

   Die Karte fuellt die Folie vollstaendig aus, das Bild sieht also
   gleich aus. Nur der Rastbereich bleibt jetzt der, den das Layout
   vorgibt. */
.cm-kar--karten .cm-kar__folie {
	position: relative;
	flex: 0 0 calc((100% + 480px) / 5);
	transition: opacity 0.7s ease-in-out;
}

.cm-kar--karten .cm-s-hero__karte {
	transform: var(--cm-faecher, none);
	transition: transform 0.5s ease-in-out;
}

.cm-kar--karten .cm-kar__folie + .cm-kar__folie {
	margin-left: -120px;
}

/* --------------------------------------------------------------------
   DER FAECHER

   Er ist KEIN Swiper-Effekt. Er stand in bestand.css als eigenes CSS an
   Swipers Positionsklassen, und von dort ist er Wert fuer Wert
   uebernommen:

     .swiper-slide-active                    rotate(-5deg) scale(.6)  z 1
     .swiper-slide-next                      rotate(-5deg) scale(.8)  z 2
     .swiper-slide-next + .swiper-slide      scale(1.08)              z 3
     ... + .swiper-slide + .swiper-slide     rotate(5deg)  scale(.8)  z 2
     ... noch eines weiter                   rotate(5deg)  scale(.6)  z 1
     .swiper-slide-prev und alles ab dem 6.  opacity 0

   Hier heissen die Klassen --p0 bis --p4 und werden von theme.js
   gesetzt. Die Reihenfolge ist dieselbe: p2 ist die mittlere Karte.

   DER SCHLEIER liegt auf ALLEN Karten AUSSER der mittleren.

   IM ORIGINAL WAR ER EIN RECHTECK - ein :before mit #0000004d und
   Radius 22px, unten 5px kuerzer. Das passt an keiner Ecke: die neun
   Karten sind PNG mit runden Ecken, und ihr Radius ist WEDER 22px NOCH
   bei allen gleich. Gemessen an den Dateien (900px breit):

     CM_Fun_1..3, CM_Heart_2   81px  =  9,0 % der Kartenbreite
     CM_Heart_1                76px  =  8,4 %
     CM_Pillow_1..4            69px  =  7,7 %

   Auf dem Bildschirm sind das 27 bis 32px, waehrend das Rechteck mit
   22px rundet - der Schleier stand also an jeder Ecke ueber die Karte
   hinaus, unterschiedlich weit je Bild. Genau das war zu sehen.

   DESHALB LIEGT HIER KEIN RECHTECK MEHR UEBER DER KARTE, SONDERN DAS
   BILD SELBST WIRD ABGEDUNKELT. Ein Filter trifft nur die Pixel, die
   es gibt; die durchsichtigen Ecken bleiben durchsichtig. Damit passt
   der Schleier bei jedem Bild, in jeder Groesse, ohne einen einzigen
   abgelesenen Radius.

   Der Wert ist derselbe wie vorher, nur anders geschrieben: Schwarz mit
   0x4d Deckung (0,302) ueber einer Farbe c ergibt c * 0,698 - und genau
   das macht brightness(.698).

   Ohne JavaScript bleibt jede Karte ungetruebt: der Filter haengt an
   den Positionsklassen, die theme.js setzt. Alle Karten unter einem
   Schleier und keine davor waere schlechter als gar kein Faecher.
   -------------------------------------------------------------------- */

.cm-s-hero__karte img {
	transition: filter 1s;
}

.cm-kar--karten .cm-kar__folie--p0 .cm-s-hero__karte img,
.cm-kar--karten .cm-kar__folie--p1 .cm-s-hero__karte img,
.cm-kar--karten .cm-kar__folie--p3 .cm-s-hero__karte img,
.cm-kar--karten .cm-kar__folie--p4 .cm-s-hero__karte img {
	filter: brightness(0.698);
}

/* Die mittlere Karte traegt nie den Schleier, aber die Textauflage -
   und die hatte im Original ihre eigene Dauer (0,7s statt 1s). */
.cm-kar--karten .cm-kar__folie--p2 .cm-s-hero__karte img {
	transition: filter 0.7s;
}

/* Die Werte stehen weiter beieinander, sie wirken nur eine Ebene
   tiefer: --cm-faecher wird an die Karte vererbt und dort gesetzt. Die
   Stapelung bleibt bei der Folie, denn sie ist es, die neben ihren
   Geschwistern steht. */
.cm-kar--karten .cm-kar__folie--p0 {
	z-index: 1;
	--cm-faecher: rotate(-5deg) scale(0.6);
}

.cm-kar--karten .cm-kar__folie--p1 {
	z-index: 2;
	--cm-faecher: rotate(-5deg) scale(0.8);
}

.cm-kar--karten .cm-kar__folie--p2 {
	z-index: 3;
	--cm-faecher: scale(1.08);
}

.cm-kar--karten .cm-kar__folie--p3 {
	z-index: 2;
	--cm-faecher: rotate(5deg) scale(0.8);
}

.cm-kar--karten .cm-kar__folie--p4 {
	z-index: 1;
	--cm-faecher: rotate(5deg) scale(0.6);
}

.cm-kar--karten .cm-kar__folie--aus {
	opacity: 0;
}

.cm-s-hero__karte {
	position: relative;
	margin: 0;
	text-align: center;
}

.cm-s-hero__karte img {
	display: block;
	width: 100%;
	height: auto;
}

/* Die Bildunterschrift ist eine AUFLAGE ueber der ganzen Karte, kein
   Text darunter - und sie erscheint nur beim Zeigen auf die MITTLERE
   Karte. Die anderen tragen den Schleier und waeren ohnehin nicht zu
   lesen.

   SIE BRINGT IHRE DUNKLE FLAECHE NICHT MEHR SELBST MIT. Im Original war
   auch sie ein Rechteck (#000000b2, Radius 12px) und stand aus
   demselben Grund an den Ecken ueber die Karte hinaus wie der Schleier.
   Abgedunkelt wird deshalb wieder das BILD - Schwarz mit 0xb2 Deckung
   (0,698) ergibt c * 0,302, also brightness(.302). Das Ergebnis ist
   Pixel fuer Pixel dasselbe, nur ohne Ecken, die nicht passen. */
.cm-s-hero__karte figcaption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	color: var(--cm-color-surface);
	font: var(--cm-weight-regular) 27px/30px var(--cm-font-display);
	text-align: center;
	opacity: 0;
	transition: opacity 0.7s;
	pointer-events: none;
}

.cm-kar--karten .cm-kar__folie--p2 .cm-s-hero__karte:hover img {
	filter: brightness(0.302);
}

.cm-kar--karten .cm-kar__folie--p2 .cm-s-hero__karte:hover figcaption {
	opacity: 1;
}

.cm-s-hero__knopf {
	margin: 0 0 70px;
	text-align: center;
}

/* ==========================================================================
   2. "Heartfelt moments in a box."  (7fe035a)
   ========================================================================== */

.cm-s-versprechen {
	padding: 40px 20px 75px;
	background: var(--cm-color-surface);
}

.cm-s-versprechen__innen {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* GROESSE WIE DIE H1, nicht wie eine H2 - so steht es im Original
   (Satz 8c37bd0). Kein Versehen beim Ablesen. */
.cm-s-versprechen__titel {
	margin: 0 0 20px;
	font: var(--cm-text-h1);
	text-align: center;
}

.cm-s-versprechen__text {
	margin: 0;
	font: var(--cm-text-lead);
	text-align: center;
}

.cm-s-versprechen__punkte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 20px;
	width: 100%;
	max-width: 990px;
	margin: 0;
	padding: 13px 0 0;
	list-style: none;
}

.cm-s-punkt {
	margin-bottom: 17px;
	text-align: center;
}

.cm-s-punkt__symbol {
	display: block;
	width: auto;
	height: 90px;
	margin-inline: auto;
}

.cm-s-punkt__titel {
	margin: 0 0 6px;
	font: var(--cm-text-h7);
}

.cm-s-punkt__text {
	margin: 0;
	font: var(--cm-text-body);
}

/* ==========================================================================
   3-5. Die drei Einzeltitel  (ba84e1a, 19fc950, aa00d3c)
   ========================================================================== */

.cm-s-produkte {
	padding-block: 40px;
	background: var(--cm-color-surface);
	/* Sprungziel des Knopfes "Find out more". Der Versatz ersetzt das
	   Elementor-Snippet 4768, das dasselbe mit JavaScript tat. */
	scroll-margin-top: 20px;
}

.cm-s-produkt__innen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding-inline: 20px;
}

.cm-s-produkt + .cm-s-produkt {
	margin-top: 60px;
}

.cm-s-produkt--bild-rechts .cm-s-produkt__innen {
	flex-direction: row-reverse;
}

.cm-s-produkt__bild {
	flex: 0 0 38%;
	min-width: 0;
}

.cm-s-produkt__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.cm-s-produkt__text {
	flex: 0 0 44%;
	min-width: 0;
}

.cm-s-produkt__titel {
	margin: 0 0 17px;
	font: var(--cm-text-h3);
}

.cm-s-produkt__zeile {
	margin: 0 0 21px;
	font: var(--cm-text-lead);
}

.cm-s-produkt__merkmale {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font: var(--cm-text-lead);
}

.cm-s-produkt__merkmale li {
	display: flex;
	align-items: flex-start;
	gap: 3px;
	padding-block: 6px;
}

.cm-s-produkt__merkmale img {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Knopf, Preis und Steuerhinweis stehen auf EINER Grundlinie. Im
   Original macht das align-items: flex-end plus drei Innenabstaende von
   Hand (18px links am Preis, 9px unter ihm, 12px unter "inc VAT").
   Uebernommen ist die Absicht, nicht die Handmasse: baseline haelt auch
   dann, wenn sich eine Schriftgroesse aendert. */
.cm-s-produkt__kauf {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: 0;
}

.cm-s-produkt__preis {
	font: var(--cm-weight-medium) 29px/1 var(--cm-font-body);
	white-space: nowrap;
}

.cm-s-produkt__preis .woocommerce-Price-amount {
	font: inherit;
}

.cm-s-produkt__steuer {
	font: var(--cm-text-caption);
}

/* Die Farbe der Produktlinie traegt Knopf, Preis und Steuerhinweis. */
.cm-s-produkt--lighthearted .cm-s-produkt__kauf .button {
	background: var(--cm-color-product-lighthearted);
}

.cm-s-produkt--lighthearted .cm-s-produkt__preis,
.cm-s-produkt--lighthearted .cm-s-produkt__steuer {
	color: var(--cm-color-product-lighthearted);
}

.cm-s-produkt--heartfelt .cm-s-produkt__kauf .button {
	background: var(--cm-color-product-heartfelt);
}

.cm-s-produkt--heartfelt .cm-s-produkt__preis,
.cm-s-produkt--heartfelt .cm-s-produkt__steuer {
	color: var(--cm-color-product-heartfelt);
}

.cm-s-produkt--intimate .cm-s-produkt__kauf .button {
	background: var(--cm-color-product-intimate);
}

.cm-s-produkt--intimate .cm-s-produkt__preis,
.cm-s-produkt--intimate .cm-s-produkt__steuer {
	color: var(--cm-color-product-intimate);
}

.cm-s-produkte__illu {
	width: 100%;
	max-width: var(--cm-content-width);
	margin: 20px auto 0;
	padding-inline: 20px;
	text-align: right;
}

.cm-s-produkte__illu img {
	width: 24%;
	height: auto;
}

/* ==========================================================================
   7. Das Dreierpack  (b2bef8c)
   ==========================================================================

   ORANGE mit weisser Schrift. Auf der PRODUKTseite ist derselbe Block
   pfirsich mit dunkler Schrift - zwei Abschnitte, nicht einer.
   ========================================================================== */

.cm-s-trio {
	background:
		url('/wp-content/uploads/2025/03/home-dreierpack-bottom.svg') bottom center / contain no-repeat,
		var(--cm-color-signal);
}

.cm-s-trio__innen {
	display: flex;
	align-items: flex-start;
	padding-inline: 20px;
}

.cm-s-trio__text {
	position: relative;
	flex: 0 0 39%;
	min-width: 0;
	margin: 40px 0 20px;
}

.cm-s-trio__bild {
	flex: 1 1 auto;
	min-width: 0;
}

.cm-s-trio__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.cm-s-trio__abzeichen {
	position: absolute;
	top: -17px;
	right: 57px;
	color: var(--cm-color-product-heartfelt);
	font: var(--cm-weight-regular) 85px/85px var(--cm-font-display);
	pointer-events: none;
}

.cm-s-trio .cm-s-trio__titel {
	margin: 0;
	color: var(--cm-color-surface);
	font: var(--cm-text-h2);
}

.cm-s-trio__titel span {
	display: block;
}

.cm-s-trio__zeile {
	margin: 17px 0 30px;
	color: var(--cm-color-surface);
	font: var(--cm-text-body);
}

.cm-s-trio__preise {
	display: flex;
	align-items: baseline;
	gap: 13px;
	margin: 0;
	color: var(--cm-color-surface);
}

.cm-s-trio__preise s {
	font: var(--cm-weight-regular) 29px/1 var(--cm-font-body);
}

.cm-s-trio__preise strong {
	font: var(--cm-weight-bold) 47px/1 var(--cm-font-body);
	text-align: center;
	white-space: nowrap;
}

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

.cm-s-trio__preise .cm-s-trio__knopf {
	align-self: center;
	margin-left: 12px;
	background: var(--cm-color-ink);
}

/* ==========================================================================
   8. "Because we care..."  (7419562)
   ========================================================================== */

/* DIE -3px SIND EINE NAHT, KEINE GEGENRECHNUNG.
 *
 * Sie stehen so im Original (--margin-top: -3px) und ich hatte sie
 * weggelassen - unter der pauschalen Annahme, negative Abstaende zwischen
 * Abschnitten seien immer Gegenrechnungen gegen Elementors Bausteine.
 * Hier sind sie es nicht: die weisse Welle am Fuss des Dreierpacks ist
 * eine SVG-Grafik, deren Form ihre Zeichenflaeche nicht ganz ausfuellt.
 * Unter ihr bleiben zwei bis drei Pixel Orange stehen, und das ist auf
 * dem Bildschirmfoto vom 28.08.2026 ein durchgehender oranger Strich
 * quer ueber die Seite.
 *
 * Merksatz, geschaerft: ein negatives Mass ZWISCHEN Abschnitten kann
 * beides sein. Gegenrechnung, wenn es Leerraum eines fremden Bausteins
 * zuruecknimmt - Naht, wenn darueber eine Hintergrundgrafik endet. Der
 * Blick auf die Nachbarschaft entscheidet, nicht die Faustregel. */
.cm-s-werte {
	margin-top: -3px;
	padding: 70px 20px 60px;
	background: var(--cm-color-surface);
}

.cm-s-werte__innen {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cm-s-werte__titel {
	margin: 0 0 20px;
	font: var(--cm-text-h2);
	text-align: center;
}

.cm-s-werte__punkte {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-s-wert {
	text-align: center;
}

.cm-s-wert__symbol {
	display: block;
	width: auto;
	height: 90px;
	margin-inline: auto;
}

/* IM ORIGINAL OHNE EIGENE SCHRIFTANGABE. Der Baustein ist ein
   heading-Widget mit tag=div; Elementors Kit gestaltet nur h1 bis h6,
   also erbt es den Fliesstext. Das sieht nach Versehen aus und ist der
   Bestand - hier steht es ausgeschrieben, damit es niemand fuer einen
   Fehler dieses Themes haelt. */
.cm-s-wert__titel {
	margin: 0;
	padding: 14px 0 9px;
	font: var(--cm-weight-regular) 15px/1 var(--cm-font-body);
}

.cm-s-wert__text {
	margin: 0;
	font: var(--cm-text-body);
}

/* ==========================================================================
   10. Die Bewertungen  (d6353ea)
   ========================================================================== */

.cm-s-bewertungen {
	padding: 50px 20px;
	background: var(--cm-color-product-heartfelt);
}

.cm-s-bewertungen__innen {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cm-s-bewertungen .cm-s-bewertungen__titel {
	max-width: 776px;
	margin: 0 0 25px;
	color: var(--cm-color-surface);
	font: var(--cm-text-h2);
	text-align: center;
}

.cm-s-bewertungen__lead {
	margin: 0 0 65px;
	color: var(--cm-color-surface);
	font: var(--cm-text-lead);
	text-align: center;
}

/* Die Bahn laesst links und rechts Platz fuer die Pfeile - im Original
   ueber .rezensionen-slider .swiper { width: calc(100% - 140px) }. */
.cm-kar--bewertungen .cm-kar__bahn {
	gap: 40px;
	width: calc(100% - 140px);
	margin-inline: auto;
	padding-block: 4px 12px;
}

.cm-kar--bewertungen .cm-kar__folie {
	flex: 0 0 calc((100% - 80px) / 3);
}

.cm-s-stimme {
	height: 100%;
	padding: 18px;
	background: var(--cm-color-surface);
	box-shadow: 0 4px 9px 0 #8f8d8d;
}

/* Das Abzeichen ragt links aus der Karte heraus und ist bei ALLEN sechs
   Karten salbeigruen - auch bei "Matters of Heart" und "Pillow Talk".
   Nachgezaehlt, nicht angenommen. */
.cm-s-stimme__produkt {
	display: inline-block;
	margin: 0 0 14px -18px;
	padding: 4px 15px 4px 20px;
	border-radius: 0 10px 10px 0;
	background: var(--cm-color-product-lighthearted);
	font: var(--cm-weight-regular) 15px/1.4 var(--cm-font-body);
}

.cm-s-stimme__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 11px;
}

.cm-s-stimme__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 0 14px;
}

.cm-s-stimme__kopf > div {
	width: 50%;
}

.cm-s-stimme__name {
	margin: 0;
	font: var(--cm-weight-regular) 15px/1 var(--cm-font-body);
}

.cm-s-stimme__datum {
	margin: 3px 0 0;
	font: var(--cm-weight-regular) 15px/1 var(--cm-font-body);
}

.cm-s-stimme__sterne {
	width: 50%;
	margin: 2px 0 0;
	color: var(--cm-color-signal);
	font-size: 18px;
	letter-spacing: 2px;
	text-align: right;
}

.cm-s-stimme__text {
	margin: 0;
	font: var(--cm-text-body);
}

/* ==========================================================================
   12. "Why CoupleMinutes?"  (06770e9)
   ========================================================================== */

.cm-s-ueberuns {
	padding: 60px 20px 100px;
	background: url('/wp-content/uploads/2025/03/home-about-bottom.svg') bottom center / cover no-repeat;
}

.cm-s-ueberuns__innen {
	display: flex;
	align-items: center;
	gap: 30px;
}

.cm-s-ueberuns__bild {
	flex: 0 0 47%;
	min-width: 0;
}

.cm-s-ueberuns__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.cm-s-ueberuns__text {
	flex: 1 1 auto;
	min-width: 0;
}

.cm-s-ueberuns__titel {
	margin: 0;
	font: var(--cm-text-h2);
}

.cm-s-ueberuns__lead {
	max-width: 480px;
	margin: 26px 0 23px;
	font: var(--cm-text-lead);
}

.cm-s-ueberuns__text p {
	margin: 0 0 16px;
	font: var(--cm-text-body);
}

/* ==========================================================================
   13. Fragen und Antworten  (a399a53)
   ========================================================================== */

.cm-s-faq {
	padding: 70px 20px 30px;
	background: var(--cm-color-surface);
}

.cm-s-faq__innen {
	display: flex;
	gap: 10px;
}

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

.cm-s-faq__liste {
	flex: 1 1 auto;
	min-width: 0;
}

.cm-s-faq__titel {
	margin: 0;
	font: var(--cm-text-h2);
}

.cm-s-faq__vorspann {
	max-width: 264px;
	margin: 16px 0 0;
	font: var(--cm-text-body);
}

.cm-s-faq__bild {
	display: block;
	width: 90%;
	height: auto;
	margin-top: 43px;
}

.cm-s-faq__bild--unten {
	display: none;
}

.cm-s-faq__gruppe {
	margin: 13px 0 6px;
	font: var(--cm-text-body-bold);
}

.cm-s-faq__gruppe + .cm-s-faq__punkt {
	border-top: 0;
}

.cm-s-faq__punkt {
	border-bottom: 1px solid var(--cm-color-tint-sage);
}

.cm-s-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font: var(--cm-text-lead-bold);
	list-style: none;
	cursor: pointer;
}

.cm-s-faq__frage::-webkit-details-marker {
	display: none;
}

/* Das Zeichen entsteht aus zwei Kanten, nicht aus einer Datei - so kann
   kein globaler SVG-Reset es verstellen. Dieselbe Loesung wie auf der
   Produktseite. */
.cm-s-faq__frage::after {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s;
}

.cm-s-faq__punkt[open] .cm-s-faq__frage::after {
	transform: rotate(45deg);
}

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

.cm-s-faq__antwort p {
	margin: 0 0 12px;
}

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

/* ==========================================================================
   15. Newsletter  (40ac516)
   ========================================================================== */

.cm-s-newsletter {
	padding: 40px 20px 120px;
	background: url('/wp-content/uploads/2025/03/home-newsletter-bottom.svg') bottom center / cover no-repeat;
}

.cm-s-newsletter__innen {
	display: flex;
	align-items: stretch;
}

.cm-s-newsletter__text {
	display: flex;
	flex: 0 0 40%;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.cm-s-newsletter__formular {
	display: flex;
	flex: 0 0 40%;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-top: 80px;
}

.cm-s-newsletter__illu {
	display: flex;
	flex: 0 0 20%;
	align-items: flex-end;
	min-width: 0;
	margin-bottom: -110px;
}

.cm-s-newsletter__illu img {
	width: 100%;
	height: auto;
}

.cm-s-newsletter .cm-s-newsletter__titel {
	margin: 0;
	color: var(--cm-color-surface);
	font: var(--cm-text-h2);
}

.cm-s-newsletter__zeile {
	max-width: 310px;
	margin: 14px 0 32px;
	color: var(--cm-color-surface);
	font: var(--cm-text-body);
}

.cm-s-newsletter__listentitel {
	margin: 0 0 15px;
	color: var(--cm-color-surface);
	font: var(--cm-text-body-bold);
}

.cm-s-newsletter__punkte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-s-newsletter__punkte li {
	display: flex;
	align-items: center;
	gap: 1px;
	padding-block: 6px;
	color: var(--cm-color-surface);
	font: var(--cm-text-body);
}

.cm-s-newsletter__punkte img {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   16. "We're here for you."  (fd16931)
   ========================================================================== */

.cm-s-kontakt {
	padding: 70px 20px 140px;
	background: var(--cm-color-surface);
}

.cm-s-kontakt__innen {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cm-s-kontakt__titel {
	margin: 0;
	font: var(--cm-text-h2);
	text-align: center;
}

.cm-s-kontakt__zeile {
	margin: 17px 0 50px;
	font: var(--cm-text-body);
	text-align: center;
}

.cm-s-kontakt__mail {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: var(--cm-text-body);
}

.cm-s-kontakt__mail img {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Die winkenden Figuren ragen absichtlich in die Fusszeile. */
.cm-s-kontakt__illu {
	margin-bottom: -48px;
	text-align: center;
}

.cm-s-kontakt__illu img {
	width: 340px;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {

	.cm-kar--karten .cm-kar__bahn {
		width: calc(100% - 70px);
		padding: 30px 0;
	}

	.cm-kar--karten .cm-kar__folie {
		flex: 0 0 calc((100% + 360px) / 5);
	}

	.cm-kar--karten .cm-kar__folie + .cm-kar__folie {
		margin-left: -90px;
	}

	.cm-s-hero__karte figcaption {
		font-size: 23px;
		line-height: 26px;
	}

	.cm-kar .cm-kar__pfeil {
		width: 52px;
		height: 52px;
	}

	.cm-s-hero__knopf {
		margin: 20px 0 60px;
	}

	.cm-s-produkt__bild {
		flex: 0 0 40%;
	}

	.cm-s-produkt__text {
		flex: 0 0 60%;
	}

	.cm-s-versprechen__punkte {
		grid-template-columns: repeat(3, 1fr);
	}

	.cm-s-werte__punkte {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.cm-s-trio__innen {
		align-items: center;
	}

	.cm-s-ueberuns__bild {
		flex: 0 0 40%;
	}

	.cm-s-faq__innen {
		flex-direction: column;
	}

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

	/* Auf dem Tablet steht die Illustration UNTER den Fragen, nicht
	   daneben - so wie im Original, wo die obere ab 1024px verschwindet
	   und die untere erscheint. */
	.cm-s-faq__bild--oben {
		display: none;
	}

	.cm-s-faq__bild--unten {
		display: block;
	}

	.cm-kar--bewertungen .cm-kar__folie {
		flex: 0 0 calc((100% - 40px) / 2);
	}
}

/* ==========================================================================
   Telefon
   ========================================================================== */

@media (max-width: 767px) {

	.cm-s-hero {
		/* Auch hier eine Naht: die Verlaufsgrafik am Fuss laesst zwei
		   Pixel Bild stehen. Im Original ebenso (--margin-bottom: -2px),
		   und ebenfalls nur auf dem Telefon. */
		margin-bottom: -2px;
		padding: 70px 20px 0;
	}

	.cm-s-hero__titel {
		margin-bottom: 20px;
	}

	/* Auf dem Telefon ist die Bahn BREITER als der Abschnitt und um die
	   halbe Mehrbreite nach links geschoben - die aeusseren Karten
	   laufen dann links und rechts aus dem Bild heraus.

	   KEIN INNENABSTAND. Hier standen bis zum 28.08.2026 110px rechts,
	   damit sich die letzte Karte noch hereinholen liess. Das hat den
	   Faecher aus der Mitte geschoben, und zwar unvermeidlich: die
	   Folienbreite ist calc((100% + 200px) / 5), und diese 100 % sind
	   der INHALTSKASTEN der Bahn - ein Innenabstand macht ihn schmaler.
	   Die fuenf Karten fuellten damit nur noch 100% + 110px statt
	   100% + 220px und sassen um die halbe Differenz, also 55px, zu
	   weit links. Genau das war auf dem Telefon zu sehen.

	   Der Grund fuer den Zusatz ist mit der Schleife entfallen: die
	   Bahn hat kein Ende mehr, das man erreichen koennte. Damit stehen
	   hier wieder die abgelesenen Werte aus bestand.css, Wert fuer
	   Wert. */
	.cm-kar--karten .cm-kar__bahn {
		width: calc(100% + 220px);
		margin-left: -110px;
		margin-right: 0;
		padding: 30px 0;
	}

	.cm-kar--karten .cm-kar__folie {
		flex: 0 0 calc((100% + 200px) / 5);
	}

	.cm-s-hero__karte figcaption {
		padding: 15px;
		font-size: 15px;
		line-height: 18px;
	}

	.cm-kar--karten .cm-kar__folie + .cm-kar__folie {
		margin-left: -50px;
	}

	.cm-kar .cm-kar__pfeil {
		width: 45px;
		height: 45px;
	}

	.cm-s-hero__knopf {
		margin: 0 0 25px;
	}

	.cm-s-versprechen {
		padding: 45px 20px 35px;
	}

	.cm-s-versprechen__punkte {
		grid-template-columns: 1fr;
		gap: 20px 0;
	}

	.cm-s-produkt__innen {
		flex-direction: column;
		gap: 20px;
	}

	/* Auf dem Telefon steht das Bild IMMER oben - das Wechselspiel von
	   links und rechts gibt es nur nebeneinander. */
	.cm-s-produkt--bild-rechts .cm-s-produkt__innen {
		flex-direction: column;
	}

	.cm-s-produkt__bild,
	.cm-s-produkt__text {
		flex: 1 1 auto;
		width: 100%;
	}

	.cm-s-produkt + .cm-s-produkt {
		margin-top: 40px;
	}

	.cm-s-produkte__illu img {
		width: 50%;
	}

	.cm-s-trio__innen {
		flex-direction: column;
	}

	.cm-s-trio__text {
		flex: 1 1 auto;
		width: 100%;
		margin: 40px 0 0;
	}

	.cm-s-trio__zeile {
		margin: 17px 0 20px;
	}

	.cm-s-trio__preise s {
		font-size: 23px;
	}

	.cm-s-trio__preise strong {
		font-size: 40px;
	}

	.cm-s-werte__punkte {
		gap: 24px 20px;
	}

	.cm-s-bewertungen__lead {
		margin-bottom: 30px;
	}

	.cm-kar--bewertungen .cm-kar__bahn {
		width: calc(100% - 60px);
		gap: 20px;
	}

	.cm-kar--bewertungen .cm-kar__folie {
		flex: 0 0 100%;
	}

	.cm-s-ueberuns {
		padding: 40px 20px 50px;
	}

	.cm-s-ueberuns__innen {
		flex-direction: column;
	}

	.cm-s-ueberuns__bild,
	.cm-s-ueberuns__text {
		flex: 1 1 auto;
		width: 100%;
	}

	.cm-s-faq {
		padding: 40px 20px 30px;
	}

	.cm-s-faq__vorspann {
		max-width: 243px;
	}

	/* Die Welle des Newsletters verdeckt hier die untere Haelfte der
	   Zeichnung. Nachgemessen am 27.08.2026 ist das auf der Produktion
	   genauso - trotzdem sieht es nach Panne aus, deshalb fort. */
	.cm-s-faq__bild--unten {
		display: none;
	}

	.cm-s-newsletter {
		padding: 60px 20px 50px;
	}

	.cm-s-newsletter__innen {
		flex-direction: column;
	}

	.cm-s-newsletter__text,
	.cm-s-newsletter__formular,
	.cm-s-newsletter__illu {
		flex: 1 1 auto;
		width: 100%;
	}

	.cm-s-newsletter__formular {
		padding-top: 0;
	}

	.cm-s-newsletter__illu {
		justify-content: flex-end;
		margin-bottom: 0;
	}

	.cm-s-newsletter__illu img {
		width: 40%;
	}

	.cm-s-kontakt {
		padding: 70px 20px 0;
	}

	.cm-s-kontakt__zeile {
		margin: 10px 0 10px;
	}

	/* KEINE UEBERLAPPUNG AUF DEM TELEFON.
	 *
	 * Im Original ragt die Zeichnung auch hier in die Fusszeile
	 * (margin: 70px 0 -40px). Sie hat sich damit am 27.08.2026 vor die
	 * Rechtstext-Links gedraengt, und die Notloesung war, sie auf dem
	 * Telefon ganz auszublenden.
	 *
	 * Die Ursache war der negative Abstand, nicht die Zeichnung. Hier
	 * gibt es ihn nicht, also darf sie bleiben. */
	.cm-s-kontakt__illu {
		margin-bottom: 0;
	}

	.cm-s-kontakt__illu img {
		width: 100%;
	}
}