/* ===========================================================================
   MusikBlog – Engagement-Hooks (Login & Fan-Mitgliedschaft)
   Hell + Dark Mode via body.mb-dark. Alle Klassen mit Präfix .mb-eh-.

   Migriert aus dem Live-Code-Snippet „Upsell Engagement Hooks" (CSS = ID 20)
   ins Plugin (versioniert). Beim Überführen die Design-Handbuch-Korrekturen
   eingearbeitet (MusikBlog-Design-Handbuch §2/§4/§5/§9.2/§9.3):
     - Orange = Sekundär-#E36A34 (statt #E8572A), Hover #C8551F.
     - Keine Text-font-weight 700 → 600 (Buttons/Headings; §2).
     - Keine Schrift < 14px (§9.2): sm-Button/Login/Intro/Card-Text/Dialog-Text.
     - CTA-Buttons min-height 44px (Tap-Target §9.3).
     - Radius 3px (§4), Button-Standard (§5).
   =========================================================================== */

:root {
	--mb-eh-orange:   #E36A34; /* Sekundär-Orange (§8D) — war #E8572A */
	--mb-eh-orange-h: #C8551F; /* dunklere Hover-Variante von #E36A34 */
	--mb-eh-accent:   #C22BF7;
	--mb-eh-fg:       #222227;
	--mb-eh-fg2:      #55555E;
	--mb-eh-fg3:      #84848E;
	--mb-eh-surface:  #F5F5F5;
	--mb-eh-border:   rgba(34, 34, 39, 0.14);
	--mb-eh-shadow:   0 8px 22px rgba(34, 34, 39, 0.10);
	--mb-eh-font:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mb-eh-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --- Oranger Primär-Button („Fan-Mitglied werden") ---
   min-height 44px + inline-flex-Zentrierung garantiert das Tap-Target (§9.3)
   unabhängig von font-size/line-height; Padding steuert nur die Breite. */
.mb-eh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	box-sizing: border-box;
	font-family: var(--mb-eh-font);
	font-weight: 600;
	line-height: 1;
	border: 0;
	border-radius: 3px;
	background: var(--mb-eh-orange);
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background 200ms var(--mb-eh-ease);
}
.mb-eh-btn:hover,
.mb-eh-btn:focus {
	background: var(--mb-eh-orange-h);
	color: #fff !important;
	text-decoration: none !important;
}
.mb-eh-btn--sm { font-size: 14px; padding: 8px 18px; }
.mb-eh-btn--md { font-size: 15px; padding: 10px 22px; }

/* --- Login-Link („Schon Mitglied? Anmelden") – einheitlich, gut lesbar ---
   Dunkel (--mb-eh-fg, im Dark Mode hell), unterstrichen, kein Hintergrund.
   Derselbe Stil wird unten auch dem WP-Kommentar-Login-Link verpasst. */
.mb-eh-login {
	font-family: var(--mb-eh-font);
	font-size: 14px;
	color: var(--mb-eh-fg) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.mb-eh-login:hover { color: var(--mb-eh-fg) !important; }
.mb-eh-login--md { font-size: 14px; }

/* Kommentar-Login-Link („… angemeldet sein …") auf denselben Stil bringen –
   überschreibt den pinken Content-Link-Stil (.mb-post-content a). */
.mb-post-content .must-log-in a,
.must-log-in a {
	background: none !important;
	padding: 0 !important;
	color: var(--mb-eh-fg) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.mb-post-content .must-log-in a:hover,
.must-log-in a:hover { color: var(--mb-eh-fg) !important; background: none !important; }

/* --- Login-abhängige Sichtbarkeit (per Widget, ohne Plugin/Container) ---
   Nutzt die WP-Body-Klasse `logged-in`. Die Klasse am jeweiligen Elementor-
   WIDGET setzen (Erweitert → CSS-Klassen) — exakt das Muster, das die
   Gewinnspielseite schon verwendet. Kein Container-Umbau, Beitragsbild
   bleibt unberührt. */
body:not(.logged-in) .mb-only-logged-in  { display: none !important; }
body.logged-in        .mb-only-logged-out { display: none !important; }

/* --- „Mein Favorit"-CTA (ausgeloggt) ---
   Gleicht den ausgeloggten Button optisch an den eingeloggten Herz-Button an.
   WICHTIG: Elementor setzt CSS-Klassen auf den Widget-WRAPPER (.elementor-element),
   nicht auf den inneren <a class="elementor-button"> — daher hier den inneren
   Button targeten. `.elementor-element.mb-fav-cta` (2 Klassen am Wrapper) schlägt
   Elementors Size-Padding. Klassen am Button-Widget setzen:
       mb-fav-cta mb-eh-intent--favorit mb-only-logged-out */
.elementor-element.mb-fav-cta .elementor-button {
	position: relative !important;
	background: transparent !important;
	color: var(--e-global-color-secondary, #E36A34) !important;
	border: 2px solid var(--e-global-color-secondary, #E36A34) !important;
	border-radius: 3px !important;
	padding: 8px 16px 8px 40px !important;
	font-size: 14px !important;
	font-weight: 400 !important;   /* wie der eingeloggte Button (nicht fett) */
	line-height: 21px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
}
.elementor-element.mb-fav-cta .elementor-button-text { text-transform: none !important; font-weight: 400 !important; }
.elementor-element.mb-fav-cta .elementor-button:hover {
	background: var(--e-global-color-secondary, #E36A34) !important;
	color: #fff !important;
}
.elementor-element.mb-fav-cta .elementor-button::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 23px;
	height: 23px;
	background: var(--mb-heart-static) center / 23px 23px no-repeat;
}

/* --- Herz: statisch + Herzschlag NUR beim Hover ---
   Das Original-SVG (Herz_Icon_animated-js…) zeigt OHNE laufende interne
   Animation nur ein TEILWEISE gezeichnetes Herz (stroke-dasharray/offset) —
   und als background-image läuft diese SVG-CSS-Animation in keinem Browser
   (Safari erst recht nicht). Daher ein sauberes, VOLLES statisches Herz als
   data-URI (rendert überall korrekt; gleiches Herz für CTA + eingeloggten
   Button). Der Herzschlag läuft als CSS-Animation am DOM-Element NUR beim
   Hover — kein Dauer-Puls (der bleibt dem Undo-Effekt auf „Mein MusikBlog"
   vorbehalten). */
:root {
	--mb-heart-static: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 5.978 5.504%22%3E%3Cpath d=%22M2.927 296.816c-.269-.383-.701-.829-1.388-1.432-.713-.626-.999-.949-1.187-1.342-.114-.238-.169-.441-.195-.722-.045-.485.103-.912.429-1.238a1.51 1.51 0 0 1 .803-.418 2.05 2.05 0 0 1 .498 0c.441.077.851.37 1.052.751.04.09.044.098.099 0 .136-.249.361-.468.616-.6.547-.283 1.186-.21 1.652.187.373.318.561.791.514 1.297-.041.446-.182.781-.497 1.178-.137.173-.52.549-.917.902-.651.578-1.03 1.017-1.305 1.409-.041.066-.123.085-.175.027z%22 fill=%22none%22 stroke=%22%23e36a34%22 stroke-width=%22.3%22 transform=%22translate(0 -291.496)%22/%3E%3C/svg%3E");
}

/* Eingeloggter Button: statisches Herz + Hover-Beat */
body.single-post .mb-fav-button .button::before {
	background-image: var(--mb-heart-static) !important;
}
body.single-post .mb-fav-button .button:hover::before {
	animation: mb-heartbeat 0.9s ease-in-out;
	will-change: transform;
}
@keyframes mb-heartbeat {
	0%        { transform: scale(1); }
	20%       { transform: scale(1.2); }
	38%       { transform: scale(1); }
	54%       { transform: scale(1.12); }
	70%, 100% { transform: scale(1); }
}

/* CTA: Hover-Beat (translateY mitführen, sonst springt das Herz) */
.elementor-element.mb-fav-cta .elementor-button:hover::before {
	animation: mb-heartbeat-cta 0.9s ease-in-out;
	will-change: transform;
}
@keyframes mb-heartbeat-cta {
	0%        { transform: translateY(-50%) scale(1); }
	20%       { transform: translateY(-50%) scale(1.2); }
	38%       { transform: translateY(-50%) scale(1); }
	54%       { transform: translateY(-50%) scale(1.12); }
	70%, 100% { transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	body.single-post .mb-fav-button .button:hover::before,
	.elementor-element.mb-fav-cta .elementor-button:hover::before { animation: none; }
}

/* ===== Hook 2 – Artikelende auf Album-Reviews ===== */
.mb-eh-album {
	border-top: 1px solid var(--mb-eh-border);
	border-bottom: 1px solid var(--mb-eh-border);
	padding: 20px 0;
	margin: 0; /* Außenabstand wird komplett in Elementor gesteuert (Widget/Section) */
	font-family: var(--mb-eh-font);
}
.mb-eh-album__h {
	display: block;
	font-size: 18px;   /* = Text-Standard der Seite */
	font-weight: 600;
	line-height: 1.3;
	color: var(--mb-eh-fg);
}
.mb-eh-album__p {
	font-size: 18px;   /* = Sekundärtext-Standard („Keine aktuellen Termine" etc.) */
	line-height: 1.5;
	color: var(--mb-eh-fg2);
	margin: 6px 0 14px;
}
.mb-eh-album__row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ===== Hook 3 – Mein-MusikBlog-Teaser ===== */
.mb-eh-teaser {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 16px;
	text-align: center;
	font-family: var(--mb-eh-font);
}
.mb-eh-teaser__title {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mb-eh-fg);
	margin: 0 0 8px;
}
.mb-eh-teaser__intro {
	font-size: 14px;
	line-height: 1.55;
	color: var(--mb-eh-fg2);
	max-width: 430px;
	margin: 0 auto 22px;
}
.mb-eh-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 22px;
	text-align: left;
}
.mb-eh-card {
	background: var(--mb-eh-surface);
	border: 1px solid var(--mb-eh-border);
	border-radius: 3px;
	padding: 16px 16px 14px;
}
.mb-eh-card svg {
	width: 19px;
	height: 19px;
	color: var(--mb-eh-accent);
	stroke: currentColor;
}
.mb-eh-card__t {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mb-eh-fg);
	margin: 8px 0 4px;
}
.mb-eh-card__p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--mb-eh-fg2);
	margin: 0;
}
.mb-eh-teaser__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
@media (max-width: 560px) {
	.mb-eh-grid { grid-template-columns: 1fr; }
}

/* ===== Hook 1 – Intent-Dialog ===== */
.mb-eh-dialog {
	position: absolute;
	z-index: 9999;
	width: 318px;
	max-width: calc(100vw - 16px);
	padding: 18px 18px 16px;
	background: #fff;
	border: 1px solid var(--mb-eh-border);
	border-radius: 3px;
	box-shadow: var(--mb-eh-shadow);
	text-align: left;
	font-family: var(--mb-eh-font);
}
.mb-eh-dialog[hidden] { display: none; }
.mb-eh-dialog__arrow {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 10px;
	height: 10px;
	background: #fff;
	border-left: 1px solid var(--mb-eh-border);
	border-top: 1px solid var(--mb-eh-border);
	transform: translateX(-50%) rotate(45deg);
}
.mb-eh-dialog__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.mb-eh-dialog__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mb-eh-fg);
	margin: 0;
}
/* Unter .mb-eh-dialog gescoped (Spezifität 0,2,0), damit die globale
   Elementor-Kit-Regel `.elementor-kit-… button{background:…primary}` den ×
   nicht pink einfärbt — ganz ohne !important. */
.mb-eh-dialog .mb-eh-dialog__x {
	flex: none;
	padding: 2px;
	border: 0;
	background: none;
	line-height: 0;
	color: var(--mb-eh-fg3);
	cursor: pointer;
}
.mb-eh-dialog .mb-eh-dialog__x:hover { background: none; color: var(--mb-eh-fg); }
.mb-eh-dialog__x svg { width: 15px; height: 15px; stroke: currentColor; }
.mb-eh-dialog__p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--mb-eh-fg2);
	margin: 6px 0 14px;
}
.mb-eh-dialog__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* ===========================================================================
   Dark Mode (body.mb-dark) – Overrides mit den Dark-Tokens des Design-Systems.
   Orange (#E36A34) und Akzent-Violett (#C22BF7) funktionieren in beiden Modi.
   =========================================================================== */
body.mb-dark {
	--mb-eh-fg:      #F5F5F7;
	--mb-eh-fg2:     #B6B6BE;
	--mb-eh-fg3:     #84848E;
	--mb-eh-surface: #2A2A30;
	--mb-eh-border:  rgba(255, 255, 255, 0.12);
	--mb-eh-shadow:  0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Hook 1 – Dialog: dunkle Karte statt Weiß */
body.mb-dark .mb-eh-dialog,
body.mb-dark .mb-eh-dialog__arrow {
	background: var(--mb-eh-surface);
}

/* Login-Link Hover in Dark */
body.mb-dark .mb-eh-login:hover { color: var(--mb-eh-fg) !important; }

/* ---------------------------------------------------------------------------
   App-Favorit AKTIV (nur native App): Der Engagement-Hook favorisiert in der
   App selbst (kein Upsell-Dialog) und setzt .mb-eh-fav-on auf den CTA-Wrapper.
   Dann den „Mein Favorit"-Button dauerhaft „gefüllt" zeigen und statt des
   Herzens ein weißes Häkchen – klares Favorisiert-Signal, analog dem Häkchen
   am eingeloggten Herz-Button. (Web-Ansicht ohne MBApp unberührt.)
   --------------------------------------------------------------------------- */
.elementor-element.mb-fav-cta.mb-eh-fav-on .elementor-button {
	background: #E36A34 !important; /* literal: var() im background-Shorthand fiel hier aus */
	color: #fff !important;
}
.elementor-element.mb-fav-cta.mb-eh-fav-on .elementor-button::before {
	background: none !important;
	content: "\2713" !important;   /* ✓ */
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 23px;
	text-align: center;
}
.elementor-element.mb-fav-cta.mb-eh-fav-on .elementor-button:hover::before {
	animation: none;   /* kein Herzschlag im aktiven Zustand */
}