/* ==========================================================================
   Produktfarben auf den beiden Produktseiten
   --------------------------------------------------------------------------
   Fabian, Mail vom 30.09.: die Farben der neuen Logos sollen sich auf den
   jeweiligen Unterseiten wiederfinden, „ohne die Grundfarben zu verlieren".

   Werte aus branding_claysen.pdf:
     praxismanager   LAVENDER      #7878C8   LAVENDER DARK  #223055
     clinic cockpit  PULSE         #E83C7D   PULSE DARK     #5C003C

   Grey (#282627) und Porcelain (#F5F1EE) bleiben unberührt, ebenso jede
   andere Seite. Gold bleibt die Dachmarkenfarbe.

   ⚠️ Warum es zwei Töne je Produkt braucht:
   Lavender liegt auf Weiß bei 3,95:1, Pulse bei 3,91:1. Das reicht für große
   Schrift (Überschriften-Akzent), aber **nicht für weiße Schrift auf der
   Farbe** — ein CTA-Button in der reinen Produktfarbe wäre zu blass. Darum
   bekommen alle vier Stellen mit weißer Schrift die DARK-Variante:
   Weiß auf #223055 = 12,95:1, auf #5C003C = 13,81:1.

   Die mitteldunklen Töne (#5B5BB4 / #C32E67) stehen in --*-gold-dark, weil
   die Vorlagen das als Textfarbe für Pillen, Icons und FAQ nutzen. Sie
   liegen bei 5,83:1 bzw. 5,37:1 — besser als das bisherige #a8924f (3,3:1).

   Diese Datei lädt in divi-nachbau.php als letzte der Brücken. Nicht in
   praxismanager-sub.css oder cockpit.css eintragen: die laden VOR den
   Brücken und verlieren gegen nachbau-*.css.
   ========================================================================== */


/* ==========================================================================
   praxismanager — Lavender
   ========================================================================== */

body.pm-page {
	--pm-gold:          #7878C8;
	--pm-gold-dark:     #5B5BB4;
	--pm-gold-light:    #A9A9DE;
	--pm-gold-bg:       rgba(120, 120, 200, 0.08);
	--pm-gold-glow:     rgba(120, 120, 200, 0.25);
	--pm-gold-gradient: linear-gradient(135deg, #7878C8, #5B5BB4);
}

/* Weiße Schrift braucht die dunkle Variante. */
body.pm-page .pm-btn-primary {
	background: linear-gradient(135deg, #223055, #2E4070);
	box-shadow: 0 4px 24px rgba(34, 48, 85, 0.30);
}
body.pm-page .pm-btn-primary:hover {
	box-shadow: 0 8px 40px rgba(34, 48, 85, 0.45);
}
body.pm-page .pm-eco-tag:hover {
	background: linear-gradient(135deg, #223055, #2E4070);
	box-shadow: 0 4px 16px rgba(34, 48, 85, 0.30);
}

/* Rahmen und Streuung, die den Goldton fest im Code stehen hatten. */
body.pm-page .pm-orbit-ring {
	border-color: rgba(120, 120, 200, 0.2);
}
body.pm-page .pm-orbit-center-dots {
	background-image: radial-gradient(circle, rgba(120, 120, 200, 0.35) 1px, transparent 1px);
}
body.pm-page .pm-eco-group {
	border-color: rgba(120, 120, 200, 0.3);
}
body.pm-page .pm-eco-group:hover {
	border-color: rgba(120, 120, 200, 0.5);
}


/* ==========================================================================
   clinic cockpit — Pulse
   ========================================================================== */

body.ck-page {
	--ck-gold:          #E83C7D;
	--ck-gold-dark:     #C32E67;
	--ck-gold-light:    #F49BBF;
	--ck-gold-bg:       rgba(232, 60, 125, 0.08);
	--ck-gold-gradient: linear-gradient(135deg, #E83C7D, #C32E67);
}

/* Weiße Schrift braucht die dunkle Variante. */
body.ck-page .ck-btn--primary {
	background: linear-gradient(135deg, #5C003C, #8A0059);
	box-shadow: 0 6px 18px rgba(92, 0, 60, 0.35);
}
body.ck-page .ck-btn--primary:hover {
	box-shadow: 0 10px 26px rgba(92, 0, 60, 0.45);
}
/* Nummernkreis im Datenfluss: 15px fett in Weiß, also auch dunkel. */
body.ck-page .ck-flow-num {
	background: linear-gradient(135deg, #5C003C, #8A0059);
}

/* Rahmen und Flächen, die den Goldton fest im Code stehen hatten. */
body.ck-page .ck-tab:hover            { border-color: rgba(232, 60, 125, 0.5); }
body.ck-page .ck-module:hover         { border-color: rgba(232, 60, 125, 0.4); }
body.ck-page .ck-problem-num          { border-color: rgba(232, 60, 125, 0.3); }
body.ck-page .ck-diff-card            { border-color: rgba(232, 60, 125, 0.25); }
body.ck-page .ck-price-card--featured { border-color: rgba(232, 60, 125, 0.45); }
body.ck-page .ck-cta-card             { border-color: rgba(232, 60, 125, 0.35); }
body.ck-page .ck-faq-item--empty      { border-color: rgba(232, 60, 125, 0.5); }

body.ck-page .ck-flow-card--accent {
	background: linear-gradient(160deg, #fffafc, #fdeef4);
	border-color: rgba(232, 60, 125, 0.35);
	box-shadow: 0 14px 34px rgba(232, 60, 125, 0.14);
}


/* ==========================================================================
   Produktlogo im Hero
   ========================================================================== */

.cl-produktlogo {
	display: block;
	height: 38px;
	width: auto;
	max-width: 100%;
	margin: 0 0 22px;
}

/* Der Cockpit-Hero ist mittig gesetzt, der Praxismanager-Hero linksbündig. */
body.ck-page .cl-produktlogo { margin-left: 0; }

@media (max-width: 1024px) {
	.cl-produktlogo { height: 32px; margin-bottom: 18px; }
	body.ck-page .cl-produktlogo { margin-left: auto; margin-right: auto; }
}


/* ==========================================================================
   Gemeinsame cl-Bausteine auf den beiden Produktseiten
   --------------------------------------------------------------------------
   Kontaktabschnitt, Formular-Button, Feature-Kacheln und Zeitstrahl kommen
   aus landing.css und holen ihre Farbe aus --cl-ocker. Ohne diese Umstellung
   stünde unten auf der Seite ein goldener Absende-Button unter einem
   lavendelfarbenen Hero — der auffälligste Bruch.

   Die Variablen gelten nur innerhalb der beiden Seiten. Jede andere Seite
   behält das Gold der Dachmarke.
   ========================================================================== */

body.pm-page {
	--cl-ocker:               #7878C8;
	--cl-ocker-dark:          #5B5BB4;
	--cl-ocker-light:         #A9A9DE;
	--cl-ocker-bg:            rgba(120, 120, 200, 0.10);
	--cl-ocker-bg-md:         rgba(120, 120, 200, 0.18);
	--cl-gold-gradient-hover: linear-gradient(135deg, #5B5BB4, #4A4A9C);
}

body.ck-page {
	--cl-ocker:               #E83C7D;
	--cl-ocker-dark:          #C32E67;
	--cl-ocker-light:         #F49BBF;
	--cl-ocker-bg:            rgba(232, 60, 125, 0.10);
	--cl-ocker-bg-md:         rgba(232, 60, 125, 0.18);
	--cl-gold-gradient-hover: linear-gradient(135deg, #C32E67, #A32553);
}

/* Weiße Schrift auf dem Akzent: wieder die dunkle Variante.
   Betrifft den Absende-Button des Kontaktformulars, den Hauptknopf und die
   Punkte des Zeitstrahls. */
body.pm-page .cl-cf7 .wpcf7-submit,
body.pm-page .cl-btn-primary,
body.pm-page .cl-timeline-item.is-visible .cl-timeline-dot,
body.pm-page .cl-timeline-item:hover .cl-timeline-dot {
	background: linear-gradient(135deg, #223055, #2E4070);
}
body.pm-page .cl-cf7 .wpcf7-submit        { box-shadow: 0 4px 18px rgba(34, 48, 85, 0.25); }
body.pm-page .cl-cf7 .wpcf7-submit:hover  { box-shadow: 0 8px 28px rgba(34, 48, 85, 0.35); }

body.ck-page .cl-cf7 .wpcf7-submit,
body.ck-page .cl-btn-primary,
body.ck-page .cl-timeline-item.is-visible .cl-timeline-dot,
body.ck-page .cl-timeline-item:hover .cl-timeline-dot {
	background: linear-gradient(135deg, #5C003C, #8A0059);
}
body.ck-page .cl-cf7 .wpcf7-submit        { box-shadow: 0 4px 18px rgba(92, 0, 60, 0.25); }
body.ck-page .cl-cf7 .wpcf7-submit:hover  { box-shadow: 0 8px 28px rgba(92, 0, 60, 0.35); }

/* Der große Schattenzahl-Wasserzeichen in den Stapelkarten. */
body.pm-page .pm-stack-card-num { color: rgba(120, 120, 200, 0.12); }


/* ==========================================================================
   Flächen, die den Goldton fest im Code tragen
   --------------------------------------------------------------------------
   background-image statt der background-Kurzschreibweise: der
   Praxismanager-Hero animiert seinen Verlauf über background-size, und die
   Kurzschreibweise würde die Größe auf auto zurücksetzen und die Animation
   anhalten.
   ========================================================================== */

/* Icon-Kacheln der Feature-Karten (48x48, aus landing-divi.css). */
body.pm-page .cl-feature-card .et_pb_main_blurb_image .et_pb_image_wrap {
	background: linear-gradient(135deg, rgba(120, 120, 200, 0.12), rgba(120, 120, 200, 0.04));
}
body.ck-page .cl-feature-card .et_pb_main_blurb_image .et_pb_image_wrap {
	background: linear-gradient(135deg, rgba(232, 60, 125, 0.12), rgba(232, 60, 125, 0.04));
}

/* Der weiche Schein hinter dem Hero — er liegt direkt hinter dem
   Produktlogo, ein Goldstich fällt dort am ehesten auf. */
body.pm-page .pm-hero,
body.pm-page .pmh-hero.et_pb_section {
	background-image: radial-gradient(ellipse 80% 60% at 50% 40%,
		rgba(120, 120, 200, 0.18) 0%,
		rgba(169, 169, 222, 0.10) 40%,
		var(--pm-bg, #FAFAF8) 100%);
}

body.ck-page .ck-hero-glow {
	background-image: radial-gradient(ellipse at center,
		rgba(232, 60, 125, 0.16) 0%,
		rgba(232, 60, 125, 0) 65%);
}

body.ck-page .ck-tab.is-active {
	box-shadow: 0 6px 18px rgba(232, 60, 125, 0.18);
}