/* CoupleMinutes - Grundlagen
 *
 * Alles, was jede Seite braucht: Reset, Typografie, Bahn, Knoepfe.
 * Ausschliesslich in Tokens notiert - es steht hier kein Farbwert und
 * keine Schriftgroesse als Zahl.
 *
 * Kopf- und Fusszeile stehen NICHT hier, sondern in kopf-fuss.css.
 *
 * WER HIER ETWAS AENDERT, aendert es fuer die ganze Seite. Abschnitts-
 * eigene Gestaltung gehoert in eine eigene Datei je Abschnitt, sobald es
 * die ersten gibt - nicht hierher.
 *
 * Die Reihenfolge im Ladevorgang ist: tokens.css, DIESE DATEI,
 * bestand.css, kopf-fuss.css. Das uebernommene Customizer-CSS kommt also
 * NACH den Grundlagen und kann sie ueberschreiben - dort stehen die
 * gewachsenen Feinheiten der bestehenden Seite. Kopf und Fuss stehen
 * zuletzt, weil sie vollstaendig abgeloest sind und sich von den
 * Altlasten nichts mehr sagen lassen muessen.
 */

/* ==========================================================================
   1. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cm-color-surface);
	color: var(--cm-color-ink);
	font: var(--cm-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* SVG STEHT HIER ABSICHTLICH NICHT MEHR.
 *
 * Bis zum 27.08.2026 war es dabei - und hat jedes eingebettete SVG im
 * Seiteninhalt umgestellt, also auch die von Elementor. Sichtbar wurde das
 * am FAQ-Akkordeon: dessen zwei Zeichen sind unterschiedlich geschnitten,
 * 12x7 fuer "offen" und 7x12 fuer "geschlossen". Mit "height: auto" und
 * einer von aussen gesetzten Breite von 12px wurde aus dem geschlossenen
 * Zeichen ein 12x20-Balken - das Chevron sass schief und wirkte kaputt.
 *
 * Dasselbe gilt fuer die Sternebewertungen, die Symbole der Icon-Boxen und
 * jedes weitere Inline-SVG, das ein Plugin ausliefert. Ein Reset darf
 * Fremdmarkup nicht nachtraeglich umbauen.
 *
 * Eigene SVG bekommen ihre Masse dort, wo sie benutzt werden - etwa
 * .cm-p-merkmale__symbol in produkt.css.
 */

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Bewegung nur, wo sie gewuenscht ist. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   2. Typografie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: var(--cm-weight-regular);
	text-wrap: balance;
}

h1 { font: var(--cm-text-h1); }
h2 { font: var(--cm-text-h2); }
h3 { font: var(--cm-text-h3); }
h4 { font: var(--cm-text-h4); }
h5 { font: var(--cm-text-h5); }
h6 { font: var(--cm-text-h6); }

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Sichtbarer Fokus. Der Vorgabe-Umriss verschwindet in manchen Browsern
   fast; ohne ihn ist die Seite mit der Tastatur nicht bedienbar. */
:focus-visible {
	outline: 2px solid var(--cm-color-signal);
	outline-offset: 2px;
}

/* Auf kleinen Bildschirmen sind 55px Ueberschrift zu viel. Die Tokens
   halten den Entwurfswert; hier wird er verkleinert, ohne ihn zu
   verlieren. */
@media (max-width: 780px) {
	h1 { font-size: calc(var(--cm-size-h1) * 0.62); line-height: 1.1; }
	h2 { font-size: calc(var(--cm-size-h2) * 0.66); line-height: 1.15; }
	h3 { font-size: calc(var(--cm-size-h3) * 0.78); line-height: 1.2; }
}

/* ==========================================================================
   3. Bahn - die zentrierte Inhaltsspalte
   ========================================================================== */

.cm-bahn {
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.cm-main {
	display: block;
	min-height: 40vh;
}

/* Sprungmarke fuer die Tastaturbedienung. Sichtbar erst beim Fokus. */
.cm-skip {
	position: absolute;
	left: -9999px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--cm-color-ink);
	color: var(--cm-color-surface);
	text-decoration: none;
}

.cm-skip:focus {
	left: 12px;
	top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   4. Kopf- und Fusszeile: stehen in kopf-fuss.css
   ==========================================================================

   Sie sind Nachbauten der Elementor-Vorlagen 68 und 72, mit Massen, die
   aus deren erzeugtem CSS abgelesen sind. Das ist genug Stoff fuer eine
   eigene Datei - und diese hier soll die Grundlagen enthalten, nicht die
   Bauteile.
   ========================================================================== */

/* ==========================================================================
   5. Knoepfe
   ========================================================================== */

/* Knoepfe: Pillenform, 17px fett, Textfarbe als Grund.
 *
 * ---------------------------------------------------------------------
 * WARUM DIE WOOCOMMERCE-AUSWAHLLISTE MIT DABEISTEHT
 *
 * WooCommerce bringt eine vollstaendige eigene Knopfgestaltung mit, und
 * ihre Auswahlliste ist spezifischer als eine einzelne Klasse:
 *
 *   .woocommerce a.button.alt   ->   drei Klassen und ein Element
 *   .cm-kauf .button            ->   zwei Klassen
 *
 * Im Schwesterprojekt stand der Kaufknopf deshalb auf Staging in
 * WooCommerce-LILA (#7f54b3) statt in der Hausfarbe - obwohl die Regel
 * dafuer richtig dort stand. Sie hat nur nie gewonnen.
 *
 * WooCommerce hat fuer genau diesen Fall einen Ausstieg: die Koerperklasse
 * woocommerce-block-theme-has-button-styles schaltet den ganzen Satz ab.
 * Sie wird hier BEWUSST NICHT benutzt - an ihr haengen auch der Wartekreis
 * beim Hinzufuegen zum Warenkorb und das Haekchen danach. Die abzuschalten
 * waere ein Nebeneffekt, den niemand bestellt hat.
 *
 * Stattdessen dieselbe Spezifitaet und die spaetere Stelle: assets werden
 * mit Prioritaet 20 eingereiht, WooCommerce mit 10 - unsere Regel steht
 * also weiter unten und gewinnt bei Gleichstand. */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
	display: inline-block;
	padding: 15px 45px;
	border: 0;
	border-radius: var(--cm-radius-pill);
	background: var(--cm-color-ink);
	color: var(--cm-color-surface);
	font: var(--cm-text-button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--cm-color-ink);
	color: var(--cm-color-surface);
	opacity: 0.8;
}

/* ==========================================================================
   Elementors Kit faerbt h1-h6 UND a - staerker als eine einzelne Klasse
   ==========================================================================

   post-41.css setzt:

     .elementor-kit-41 a       color: primary   (0,1,1)
     .elementor-kit-41 h1..h6  color: primary   (0,1,1)

   Eine Regel dieses Themes mit nur EINER Klasse - .button, .cm-s-hero__titel
   - kommt auf (0,1,0) und verliert. Sichtbar wurde das am 27.08.2026 an
   zwei Stellen der Startseite: die weisse Ueberschrift auf dem Kopfbild kam
   in der Textfarbe heraus, und der Knopf "Find out more" stand als dunkle
   Schrift auf dunklem Grund - eine leere Pille.

   Ueberschriften sind einzeln hochgeruestet (Abschnittsklasse davor).
   Knoepfe gehen HIER ueber eine Regel, weil sie ueberall vorkommen und
   ALLE dieselbe Textfarbe wollen: weiss auf farbigem Grund. Es gibt im
   Theme keinen Knopf, der etwas anderes will - nachgezaehlt.

   body[class*="elementor-kit-"] statt der festen 41: das Gegenmittel lebt
   und stirbt mit dem Gift. Ist Elementor abgeschaltet, traegt der Koerper
   die Klasse nicht mehr, und die Regel greift nicht mehr - dann gibt es
   aber auch die Kit-Regel nicht mehr, gegen die sie steht.
   ========================================================================== */

body[class*="elementor-kit-"] a.button {
	color: var(--cm-color-surface);
}

/* ==========================================================================
   Der Kaufweg
   ==========================================================================

   HIER STAND IM SCHWESTERPROJEKT DER AMAZON-KNOPF (.cm-amazon-button) in
   der Signalfarbe. Dieser Shop verkauft selbst; an seine Stelle treten
   drei Dinge, die alle drei Zustaende des Kaufwegs abdecken:

     .cm-kauf       das kompakte Formular aus cm_kaufformular()
     .cm-kauf__leer "Currently unavailable"
     .cm-soon       "Ordering opens shortly." im Schaufensterbetrieb

   Der Kaufknopf traegt die Textfarbe wie jeder andere Knopf des Themes -
   die Signalfarbe war eine Auszeichnung fuer den Weg NACH DRAUSSEN. Ein
   Kaufknopf im eigenen Shop braucht sie nicht; er steht ohnehin allein
   in seinem Abschnitt.
   ========================================================================== */

.cm-kauf {
	margin: 20px 0;
}

/* Das Formular hat genau ein sichtbares Kind. display: contents waere
   kuerzer, faellt aber in Safari unter 15.4 ersatzlos aus - dann stuende
   der Knopf ohne Abstand da. */
.cm-kauf .button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Das Warenkorbzeichen in den Kaufknoepfen - in beiden Bauformen: im
   Formular (cm-kauf) und im Direktkauf-Knopf (cm-kauf-direkt).

   "brightness(0) invert(1)" und nicht "invert(1)": die erste Stufe zieht
   das Bild auf Schwarz, die zweite auf Weiss. Das Ergebnis ist weiss,
   EGAL welche Farbe in der Datei steht.

   Hier stand zuerst nur invert(1), daneben der Kommentar, die Datei sei
   schwarz gezeichnet. Sie ist es nicht - warenkorb.svg traegt viermal
   fill="white". invert(1) hat das Zeichen damit SCHWARZ gemacht, auf
   schwarzem Knopf, an den zwei Stellen der Produktseite, an denen das
   Trio gekauft wird. Gemeldet am 29.08.2026 aus dem Live-Betrieb.

   Dieselbe Schreibweise steht in bestand.css und kopf-fuss.css. */
.cm-kauf .button img,
.cm-kauf-direkt img {
	filter: brightness(0) invert(1);
}

/* Der Direktkauf-Knopf ist ein <a class="button">. Er erbt damit alles aus
   der Knopfregel oben; hier steht nur, was ihn von ihr unterscheidet: das
   Zeichen sitzt neben der Beschriftung.

   DREI TEILE IN DER AUSWAHL, damit sie (0,2,1) erreicht und gegen
   ".woocommerce a.button" gewinnt. Mit nur ".cm-kauf-direkt" (0,1,0) blieb
   der Knopf auf display: inline-block stehen, und das Zeichen sass auf
   einer eigenen Zeile - gemessen am 29.08.2026. Dieselbe Falle wie beim
   runden Knopf der Trio-Karte; sie steht im Kommentar oben. */
a.cm-kauf-direkt.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* Solange sein Aufruf laeuft. Das Flyout setzt die Klasse. */
.cm-kauf-direkt.is-wartet {
	opacity: 0.7;
	pointer-events: none;
}

.cm-kauf__leer,
.cm-soon {
	margin: 20px 0;
	font: var(--cm-text-body-bold);
	color: var(--cm-color-ink-muted);
}

/* Der Schaufenster-Hinweis steht dort, wo sonst der Knopf steht, und soll
   nicht wie ein Defekt aussehen: ein ruhiges Band statt einer nackten
   Zeile. */
.cm-soon {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--cm-radius-pill);
	background: var(--cm-color-tint-blush);
	color: var(--cm-color-ink);
}

/* In der Uebersicht sitzt derselbe Hinweis in der Produktkachel und darf
   dort nicht so viel Platz nehmen wie ein Knopf. */
.woocommerce ul.products .cm-soon {
	padding: 8px 16px;
	font: var(--cm-text-small-bold);
}

/* ==========================================================================
   6. Einzelteile
   ========================================================================== */

.cm-seite__kopf {
	padding-top: 40px;
}

.cm-beitrag {
	padding-block: 24px;
	border-bottom: 1px solid var(--cm-color-tint-blush);
}

.cm-404 {
	padding-block: 80px;
	text-align: center;
}

.cm-404__wege {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-block: 28px;
}

.cm-blaettern {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding-block: 32px;
}


/* ==========================================================================
   Trenngrafiken zwischen den Abschnitten
   ==========================================================================

   cm_trenner() gibt eine geschwungene SVG-Kante aus. Die Startseite
   benutzt sie viermal, die Produktseite zweimal - die Regeln gehoeren
   deshalb HIERHER und nicht in eine seitenweise geladene Datei. Genau
   das war am 27.08.2026 der Fehler: sie standen in produkt.css, und auf
   der Startseite lagen die Wellen ohne jede Regel da.

   DIE GRAFIKEN SIND EINFARBIGE FORMEN AUF DURCHSICHTIGEM GRUND -
   nachgesehen, nicht angenommen:

     home-dreierpack-top-1.svg    1204x124   #F79E4B  (Signal)
     home-rezensionen-top.svg     1201x114   #E9795E  (Koralle)
     home-rezensionen-bottom.svg  1201x127   #E9795E  (Koralle)

   Sie tragen also die Farbe des Abschnitts, in den sie hineinfliessen,
   und muessen ueber die VOLLE Breite laufen. In ihrer Eigenbreite von
   1201px enden sie auf einem breiteren Fenster mittendrin, und die
   Farbflaeche darunter setzt hart an - genau das war zu sehen.

   Die 10px Ueberbreite mit 6px Versatz nach links sind kein Zierrat: die
   Formen ragen in ihrer eigenen Zeichenflaeche ueber den Rand hinaus
   (der Dreierpack-Trenner ist 1204 statt 1200 Einheiten breit), und ohne
   den Ueberstand blitzt an den Seiten eine Haarlinie durch. Im Original
   steht dasselbe, dort je Grafik mit 4px bzw. 6px; hier ein Wert fuer
   alle. Beschnitten wird es vom overflow-x der Seite.
   ========================================================================== */

.cm-trenner {
	/* line-height 0: ein <img> ist zeileninhalt und saesse sonst auf der
	   Grundlinie - darunter blieben ein paar Pixel Grund stehen. */
	line-height: 0;
	/* Nach OBEN 1px, nach UNTEN 3px ueberlappen.
	 *
	 * Die -1px oben sind nicht dieselben wie die am Bild darunter, auch
	 * wenn beide gleich aussehen. Sie decken zwei verschiedene Faelle:
	 *
	 *   hier  - dass zwischen zwei Kaesten ueberhaupt eine LUECKE
	 *           entsteht. Firefox rundet Kastenkanten auf ganze
	 *           Geraetepixel; liegen zwei Kanten auf einem Bruchteil,
	 *           bleibt dazwischen eine Reihe unbemalt, und da scheint der
	 *           Seitengrund durch. Ueberlappen sich die Kaesten, kann das
	 *           nicht passieren.
	 *
	 *   Bild  - dass die durchsichtige oberste Reihe der GRAFIK den
	 *           Hintergrund dieses Abschnitts sehen laesst.
	 */
	margin-top: -1px;
	margin-bottom: -3px;
}

/* DIE -1px GEHOEREN AN DAS BILD, NICHT AN DEN ABSCHNITT.
 *
 * Der Unterschied ist der ganze Punkt. Die Wellenform beginnt in ihrer
 * Zeichenflaeche nicht bei 0, sondern bei 0.5 - die oberste Pixelreihe
 * der Grafik ist also durchsichtig, und die Kante darunter ist
 * kantengeglaettet, also halb deckend. Sichtbar wird dort, was HINTER
 * der Grafik liegt: der Hintergrund des Trennabschnitts.
 *
 * Zieht man den ganzen ABSCHNITT hoch, wandert sein Hintergrund mit -
 * der helle Streifen bleibt. Am 28.08.2026 genau so gemessen: erst weiss,
 * nach dem Einfaerben des Abschnitts pfirsichfarben, aber immer da.
 *
 * Zieht man das BILD hoch, liegt seine durchsichtige Reihe ueber dem
 * Abschnitt DARUEBER - und der ist genau die Farbe, aus der die Welle
 * herausfliesst. Der Streifen verschwindet.
 *
 * So steht es auch im Original: margin: -1px 0px 0px 0px an der
 * Bildkachel, nicht am Container.
 */
.cm-trenner img {
	display: block;
	width: calc(100% + 10px);
	max-width: none;
	height: auto;
	margin-top: -1px;
	margin-left: -6px;
}