/* CoupleMinutes - Kopf- und Fusszeile
 *
 * Loest die Elementor-Vorlagen 68 (Kopf) und 72 (Fuss) ab. ALLE Masse sind
 * aus Elementors erzeugtem CSS abgelesen, nicht geschaetzt:
 *
 *   uploads/elementor/css/post-68.css
 *   uploads/elementor/css/post-72.css
 *
 * Die Farb- und Schriftnamen darin sind Elementors; hier stehen die
 * entsprechenden Tokens. Die Zuordnung ist dieselbe wie in bestand.css:
 *
 *   secondary -> --cm-color-surface        (weiss)
 *   primary   -> --cm-color-ink            (Textfarbe)
 *   text      -> --cm-color-signal         (ORANGE, nicht die Textfarbe!)
 *   2de971c   -> --cm-color-product-intimate (Flieder, Grund der Fusszeile)
 *
 *   631fe2b   -> Fira Sans 15px/23px 700   Navigation
 *   4f88fce   -> Fira Sans 13px/20px 500   Rechtstexte, Zahlarten-Text
 *   92c7a5b   -> ClickClack 15px/20px 400  Claim in der Fusszeile
 */

/* ==========================================================================
   1. Kopfzeile - die weisse Leiste
   ========================================================================== */

/* BEWUSSTE ABWEICHUNG VOM ORIGINAL, 27.08.2026.
 *
 * Elementor setzte hier 0 0 6px rgba(0,0,0,.14) - ein Schatten, der nach
 * ALLEN Seiten faellt. Das war richtig, solange darunter die orange
 * Leiste lag: der Schatten legte sich sichtbar auf Orange. Seit die
 * Leiste fort ist, steht Weiss auf Weiss, und derselbe Schatten wirkt als
 * harte graue Linie.
 *
 * Jetzt faellt er nur nach unten, weiter und schwaecher, und er ist aus
 * der Textfarbe gemischt statt aus reinem Schwarz - zusammen mit dem
 * Verlauf darunter ergibt das die weiche Kante, die dort gewuenscht ist.
 */
.cm-kopf__leiste {
	background: var(--cm-color-surface);
	box-shadow: 0 2px 10px 0 rgba(37, 50, 58, 0.10);
	/* Stapelkontext: die Leiste liegt ueber dem Uebergangsstreifen. */
	position: relative;
	z-index: 2;
}

/* Elementors Kopfcontainer hat 0 Innenabstand oben und unten - die Hoehe
   entsteht dort allein aus dem Logo (130px breit, also rund 67px hoch).
   Hier sind es bewusst 18px mehr je Seite: die Leiste soll Raum haben. */
.cm-kopf__innen {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
	padding: 18px 20px;
}

/* Das Logo links, alles Weitere rechts. */
.cm-kopf__marke {
	margin-inline-end: auto;
}

.cm-kopf__logo img,
.cm-kopf__marke .custom-logo {
	display: block;
	width: 130px;
	height: auto;
}

.cm-kopf__aktionen {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Der Warenkorb.
 *
 * Erscheint nur, wenn wirklich verkauft wird - siehe cm_warenkorb_ausgeben()
 * in inc/woocommerce.php. Auf coupleminutes.co.uk gibt es ihn deshalb nicht,
 * und die rechte Seite traegt allein die Navigation.
 *
 * Elementor gab dem Warenkorbzeichen 26px; die Anzahl stand als Blase
 * rechts oben daran. */
.cm-kopf__warenkorb {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--cm-color-ink);
	text-decoration: none;
	transition: opacity 0.4s;
}

.cm-kopf__warenkorb:hover {
	opacity: 0.7;
}

.cm-kopf__warenkorb-icon {
	width: 26px;
	height: 26px;
	flex: none;
}

.cm-kopf__warenkorb-zahl {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--cm-color-signal);
	color: var(--cm-color-surface);
	font: var(--cm-text-caption);
	line-height: 18px;
	text-align: center;
}

/* ==========================================================================
   2. Kopfzeile - Navigation
   ========================================================================== */

.cm-nav__liste {
	display: flex;
	align-items: center;
	/* Elementor: --e-nav-menu-horizontal-menu-item-margin: calc(48px/2),
	   also 24px je Seite = 48px zwischen den Punkten. */
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-nav__liste a {
	position: relative;
	display: block;
	/* Platz fuer das Icon davor - aus dem Bestands-CSS uebernommen. */
	padding-left: 28px;
	color: var(--cm-color-ink);
	font: var(--cm-text-body-bold);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.4s;
}

.cm-nav__liste a:hover {
	opacity: 0.7;
}

/* Die drei farbigen Zeichen vor den Menuepunkten.
 *
 * Sie hingen im Customizer-CSS an .elementor-location-header und waren
 * damit nach dem Themewechsel wirkungslos - die Navigation stand nackt da.
 * Die Klassen justforfun / mattersoftheheart / pillowtalk kommen aus der
 * Datenbank (_menu_item_classes) und gibt wp_nav_menu unveraendert aus.
 */
.cm-nav__liste a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 18.5px;
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

.cm-nav__liste .justforfun a::before {
	background-image: url('/wp-content/uploads/2022/09/menu-justforfun.svg');
}

.cm-nav__liste .mattersoftheheart a::before {
	background-image: url('/wp-content/uploads/2022/09/menu-mattersoftheheart.svg');
}

.cm-nav__liste .pillowtalk a::before {
	background-image: url('/wp-content/uploads/2022/09/menu-pillowtalk.svg');
}

/* ==========================================================================
   3. Kopfzeile - der Uebergang zum Inhalt
   ==========================================================================

   Hier lag bis zum 27.08.2026 die orange USP-Leiste (Grund signal,
   Innenabstand 14px 20px, Fira Sans 13/18). Sie ist auf Wunsch ganz
   entfallen; die Begruendung steht in header.php.

   An ihrer Stelle blendet ein Streifen von Weiss nach Durchsichtig. Er
   wirkt dort, wo es etwas zu ueberblenden gibt - auf der Startseite laeuft
   das Bild des Kopfbereichs in die weisse Leiste hinein. Auf weissen
   Seiten ist er unsichtbar, und das ist richtig so: dort trennt der
   Schatten der Leiste, mehr braucht es nicht.
   ========================================================================== */

.cm-kopf__uebergang {
	position: relative;
	z-index: 1;
	height: 28px;
	/* Der Streifen liegt UEBER dem Inhalt, er schiebt ihn nicht nach
	   unten. Sonst entstuende auf jeder weissen Seite ein Leerraum ohne
	   Anlass, und der Bildkopf der Startseite ruecke um dieselben 28px
	   tiefer. */
	margin-bottom: -28px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.85),
		rgba(255, 255, 255, 0)
	);
	/* Er liegt ueber dem Inhalt und darf deshalb keine Klicks abfangen. */
	pointer-events: none;
}

/* ==========================================================================
   4. Kopfzeile - Telefon und Tablet
   ========================================================================== */

.cm-nav__schalter {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

/* Der Balken ist die mittlere Linie; die beiden anderen entstehen aus
   ::before und ::after. Beim Oeffnen werden daraus die zwei Striche eines
   Kreuzes, und die mittlere Linie verschwindet. */
.cm-nav__balken,
.cm-nav__balken::before,
.cm-nav__balken::after {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--cm-color-ink);
	transition: transform 0.25s, opacity 0.25s;
}

.cm-nav__balken {
	margin-inline: auto;
	position: relative;
}

.cm-nav__balken::before,
.cm-nav__balken::after {
	content: '';
	position: absolute;
	left: 0;
}

.cm-nav__balken::before { top: -7px; }
.cm-nav__balken::after  { top: 7px; }

.cm-nav__schalter[aria-expanded="true"] .cm-nav__balken {
	background: transparent;
}

.cm-nav__schalter[aria-expanded="true"] .cm-nav__balken::before {
	transform: translateY(7px) rotate(45deg);
}

.cm-nav__schalter[aria-expanded="true"] .cm-nav__balken::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* WOGEGEN DIESE VIER ZEILEN STEHEN - nachgemessen am 27.08.2026
 *
 * Beim Antippen wurde aus dem Schalter eine graue Kugel. Zwei fremde
 * Regeln greifen auf ihn durch, beide mit einer Klasse UND einem Element
 * und damit staerker als .cm-nav__schalter (eine Klasse):
 *
 *   .elementor-kit-41 button   border-radius: 100px
 *       aus uploads/elementor/css/post-41.css. Das Kit gestaltet JEDEN
 *       <button> der Seite, auch einen, der mit Elementor nichts zu tun
 *       hat.
 *
 *   button:hover               background: ink, opacity: .8
 *       aus basis.css - die eigene Knopfgestaltung, die alle Knoepfe
 *       meint.
 *
 * Einzeln faellt keine der beiden auf: der runde Rand ist unsichtbar,
 * solange die Flaeche durchsichtig ist, und die dunkle Flaeche waere ohne
 * den runden Rand ein Quadrat. Zusammen ergeben sie einen dunklen Kreis
 * von 44px - und auf dem Telefon bleibt :hover nach dem Tippen stehen,
 * also genau so lange, wie das Menue offen ist. Deshalb sah es aus, als
 * haenge es am Oeffnen.
 *
 * Zwei Klassen schlagen beide. Auf Reihenfolge zu bauen waere hier
 * unsicher: die Kit-Datei kann jederzeit spaeter eingereiht werden.
 */
.cm-kopf .cm-nav__schalter,
.cm-kopf .cm-nav__schalter:hover,
.cm-kopf .cm-nav__schalter:focus {
	border-radius: 0;
	background: transparent;
	color: inherit;
	opacity: 1;
}

@media (max-width: 1024px) {

	.cm-nav__schalter {
		display: block;
		order: 2;
	}

	.cm-kopf__innen {
		flex-wrap: wrap;
		gap: 12px;
		padding-inline: 16px;
	}

	.cm-kopf__marke {
		margin-inline-end: auto;
	}

	.cm-nav {
		order: 3;
		width: 100%;
	}

	/* Ausgeklappt wird orange mit weisser Schrift - so hatte Elementor es
	   auch (Dropdown-Grund "text", Links "secondary"). */
	.cm-nav__liste {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0 -16px;
		background: var(--cm-color-signal);
	}

	.cm-nav[data-offen="ja"] .cm-nav__liste {
		display: flex;
	}

	.cm-nav__liste li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	.cm-nav__liste a {
		padding: 14px 16px 14px 48px;
		color: var(--cm-color-surface);
		font: var(--cm-text-lead-bold);
	}

	/* Die Zeichen sind einfarbig dunkel gezeichnet - auf orangem Grund
	   werden sie hier weiss eingefaerbt, wie im Bestands-CSS. */
	.cm-nav__liste a::before {
		left: 16px;
		top: 50%;
		width: 25px;
		height: 25px;
		margin-top: -12.5px;
		filter: brightness(0) invert(1);
	}

	.cm-kopf__uebergang {
		height: 18px;
		margin-bottom: -18px;
	}
}

/* ==========================================================================
   5. Fusszeile
   ========================================================================== */

.cm-fuss {
	/* POSITION: RELATIVE IST HIER KEIN ZIERRAT.
	 *
	 * Am Ende der Startseite steht eine Illustration mit den winkenden
	 * Figuren. Sie ist Absicht ueberlappend gesetzt: auf dem Telefon mit
	 * "margin-bottom: -40px", auf dem Rechner sogar absolut positioniert
	 * mit "bottom: -48px". Sie soll also ein Stueck in die Fusszeile
	 * hineinragen und dort von ihr angeschnitten werden.
	 *
	 * Positionierte Elemente werden aber SPAETER gezeichnet als statische -
	 * unabhaengig von der Reihenfolge im Markup. Eine statische Fusszeile
	 * verschwindet deshalb hinter der Illustration, und genau so sah es auf
	 * dem Telefon aus: die Figuren lagen ueber den Rechtstext-Links.
	 *
	 * Elementors eigene Fusszeile hatte das Problem nie, weil .e-con von
	 * Haus aus position: relative traegt. Hier steht es jetzt ausdruecklich.
	 */
	position: relative;
	z-index: 1;

	margin-top: 0;
	background: var(--cm-color-product-intimate);
	color: var(--cm-color-surface);
}

.cm-fuss__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px 0;
	width: 100%;
	max-width: var(--cm-content-width);
	margin-inline: auto;
	padding: 45px 20px;
}

/* Die Spaltenbreiten stammen aus post-72.css, Haltepunkt fuer Haltepunkt. */
.cm-fuss__spalte--claim   { flex: 0 0 28%; }
.cm-fuss__spalte--recht   { flex: 0 0 42%; }
.cm-fuss__spalte--zahlung { flex: 0 0 30%; }

@media (max-width: 1024px) {
	.cm-fuss__spalte--claim   { flex-basis: 36%; }
	.cm-fuss__spalte--recht   { flex-basis: 33%; }
	.cm-fuss__spalte--zahlung { flex-basis: 31%; }
}

.cm-fuss__claim {
	margin: 0;
	color: var(--cm-color-surface);
	font: var(--cm-text-h6);
}

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

.cm-fuss__liste li + li {
	margin-top: 9px;
}

.cm-fuss__liste a {
	color: var(--cm-color-surface);
	font: var(--cm-text-small-bold);
	text-decoration: none;
	cursor: pointer;
}

.cm-fuss__liste a:hover,
.cm-fuss__liste a:focus {
	color: #FFFFFFBD;
}

.cm-fuss__zahlungtitel {
	margin: 0 0 18px;
	color: var(--cm-color-surface);
	font: var(--cm-text-small-bold);
}

.cm-fuss__zahlarten {
	width: 300px;
	max-width: 100%;
	height: auto;
}

.cm-fuss__hinweis {
	margin: 16px 0 0;
	padding: 8px 14px;
	border-radius: 4px;
	background: var(--cm-color-signal);
	color: var(--cm-color-surface);
	font: var(--cm-text-small);
}

/* --- Fusszeile auf dem Telefon ---------------------------------------
 *
 * Hier war die erste Fassung kaputt: drei Spalten mit festen Prozentwerten
 * ergeben auf 375px Breite drei Streifen von rund 100px, in denen
 * "Return policy & returns form" senkrecht umbricht.
 *
 * Ab 767px stehen die Spalten deshalb untereinander - so macht es auch
 * Elementor, dessen Spaltenbreiten erst ab 768px gelten.
 */
@media (max-width: 767px) {

	.cm-fuss__innen {
		flex-direction: column;
		gap: 28px;
		padding: 32px 20px;
	}

	.cm-fuss__spalte--claim,
	.cm-fuss__spalte--recht,
	.cm-fuss__spalte--zahlung {
		flex: 1 1 auto;
		width: 100%;
	}

	.cm-fuss__claim {
		font: var(--cm-text-h5);
	}
}