/* ============================================================
   marketing-optimierung.com – Interaktive Grafiken
   Ersetzt die statischen .visual-placeholder. Nutzt nur die
   bestehenden Theme-Variablen (--indigo-*, --grey-*) und ist
   reduced-motion-tauglich.
   ============================================================ */

.mo-graphic {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--indigo-100), var(--indigo-50));
	border: 1px solid var(--indigo-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--indigo-700);
	font-size: var(--fs-sm);
	-webkit-user-select: none;
	user-select: none;
	contain: layout paint;
}

.mo-graphic--dark {
	background: linear-gradient(135deg, rgba(99, 102, 241, .14), rgba(15, 8, 50, .55));
	border-color: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .85);
}

.mo-graphic--square {
	aspect-ratio: 1 / 1;
}

.mo-graphic__caption {
	position: absolute;
	left: var(--space-md);
	right: var(--space-md);
	bottom: var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--indigo-600);
}

.mo-graphic--dark .mo-graphic__caption {
	color: rgba(255, 255, 255, .75);
}

.mo-graphic__caption-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-green, #22c55e);
	animation: mo-pulse 2s infinite;
}

.mo-graphic__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mo-graphic svg {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes mo-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
	.mo-graphic *,
	.mo-graphic *::before,
	.mo-graphic *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===========================================================
   1) RADAR — Sichtbarkeitsanalyse Kunststoff
   =========================================================== */

.mo-radar__rings circle {
	fill: none;
	stroke: var(--indigo-300);
	stroke-opacity: .55;
	stroke-width: 1;
}

.mo-radar__sweep {
	transform-origin: 50% 50%;
	animation: mo-radar-sweep 6s linear infinite;
	mix-blend-mode: multiply;
	opacity: .55;
}

@keyframes mo-radar-sweep {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.mo-radar__node {
	transition: transform .25s ease, filter .25s ease;
	cursor: pointer;
}

.mo-radar__node circle {
	fill: var(--indigo-500);
	transition: r .25s ease, fill .25s ease;
}

.mo-radar__node text {
	font-size: 9px;
	font-weight: 600;
	fill: var(--indigo-800);
	text-anchor: middle;
	pointer-events: none;
}

.mo-radar__node--self circle {
	fill: var(--indigo-700);
}

.mo-radar__node--self::after {
	content: '';
}

.mo-radar__pulse {
	transform-origin: 50% 50%;
	transform-box: fill-box;
	animation: mo-radar-pulse 2.6s ease-out infinite;
}

@keyframes mo-radar-pulse {
	0%   { r: 4;  opacity: .8; }
	100% { r: 30; opacity: 0; }
}

.mo-radar__node:hover circle:not(.mo-radar__pulse),
.mo-radar__node--active circle:not(.mo-radar__pulse) {
	fill: var(--indigo-700);
	r: 8;
}

/* ===========================================================
   2) WERTSCHÖPFUNGSKETTE — Pellet → Verarbeitung → Produkt
   =========================================================== */

.mo-chain {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	padding: var(--space-lg) var(--space-md) var(--space-3xl);
	align-items: center;
}

.mo-chain__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm);
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--indigo-200);
	border-radius: var(--radius-md);
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: pointer;
	min-width: 0;
}

.mo-chain__step:hover,
.mo-chain__step--active {
	transform: translateY(-3px);
	border-color: var(--indigo-500);
	box-shadow: 0 12px 24px rgba(79, 70, 229, .18);
}

.mo-chain__icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--indigo-50);
	color: var(--indigo-600);
}

.mo-chain__icon svg {
	width: 18px;
	height: 18px;
}

.mo-chain__step--active .mo-chain__icon {
	background: var(--indigo-600);
	color: var(--white);
}

.mo-chain__title {
	font-size: 11px;
	font-weight: var(--fw-bold);
	color: var(--indigo-900);
	line-height: 1.2;
}

.mo-chain__sub {
	font-size: 9px;
	color: var(--grey-500);
	line-height: 1.2;
	min-height: 1.2em;
}

.mo-chain__connector {
	position: absolute;
	top: 50%;
	right: -10%;
	width: 20%;
	height: 2px;
	background: linear-gradient(90deg, var(--indigo-300), var(--indigo-500));
	transform: translateY(-50%);
	pointer-events: none;
}

.mo-chain__step:last-child .mo-chain__connector { display: none; }

.mo-chain__pellet {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--indigo-600);
	box-shadow: 0 0 6px var(--indigo-500);
	animation: mo-chain-flow 4s linear infinite;
	animation-delay: var(--mo-delay, 0s);
}

.mo-chain__step:last-child .mo-chain__pellet { display: none; }

@keyframes mo-chain-flow {
	0%   { transform: translateX(0)    scale(.4); opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translateX(60px) scale(1);  opacity: 0; }
}

/* ===========================================================
   3) BRANCHEN-HUB — Methodik in der Mitte, Industrien außen
   =========================================================== */

.mo-hub__core {
	transform-origin: 50% 50%;
	transform-box: fill-box;
}

.mo-hub__core-bg {
	fill: var(--indigo-600);
}

.mo-graphic--dark .mo-hub__core-bg {
	fill: rgba(99, 102, 241, .85);
}

.mo-hub__core-ring {
	fill: none;
	stroke: var(--indigo-500);
	stroke-opacity: .35;
	animation: mo-hub-ring 3s ease-out infinite;
	transform-origin: 50% 50%;
	transform-box: fill-box;
}

.mo-hub__core-ring:nth-child(2) { animation-delay: .9s; }
.mo-hub__core-ring:nth-child(3) { animation-delay: 1.8s; }

@keyframes mo-hub-ring {
	0%   { r: 28; opacity: .8; stroke-width: 2; }
	100% { r: 80; opacity: 0;  stroke-width: 1; }
}

.mo-hub__core-label {
	fill: var(--white);
	font-size: 11px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.mo-hub__line {
	stroke: var(--indigo-400);
	stroke-opacity: .6;
	stroke-width: 1.2;
	stroke-dasharray: 3 3;
	animation: mo-hub-dash 14s linear infinite;
}

.mo-graphic--dark .mo-hub__line {
	stroke: rgba(255, 255, 255, .35);
}

@keyframes mo-hub-dash {
	to { stroke-dashoffset: -120; }
}

.mo-hub__node {
	cursor: pointer;
	transition: transform .25s ease;
	transform-origin: center;
	transform-box: fill-box;
}

.mo-hub__node-bg {
	fill: var(--white);
	stroke: var(--indigo-300);
	stroke-width: 1.5;
	transition: fill .25s ease, stroke .25s ease;
}

.mo-graphic--dark .mo-hub__node-bg {
	fill: rgba(255, 255, 255, .08);
	stroke: rgba(255, 255, 255, .25);
}

.mo-hub__node:hover .mo-hub__node-bg,
.mo-hub__node--active .mo-hub__node-bg {
	fill: var(--indigo-600);
	stroke: var(--indigo-700);
}

.mo-hub__node-label {
	fill: var(--indigo-800);
	font-size: 9px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.mo-graphic--dark .mo-hub__node-label {
	fill: rgba(255, 255, 255, .85);
}

.mo-hub__node:hover .mo-hub__node-label,
.mo-hub__node--active .mo-hub__node-label {
	fill: var(--white);
}

/* ===========================================================
   4) SEO CLUSTER — Themen-Cluster
   =========================================================== */

.mo-cluster__edge {
	stroke: var(--indigo-300);
	stroke-width: 1.2;
	fill: none;
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: mo-cluster-draw 1.4s ease-out forwards;
}

.mo-cluster.is-visible .mo-cluster__edge {
	animation-play-state: running;
}

@keyframes mo-cluster-draw {
	to { stroke-dashoffset: 0; }
}

.mo-cluster__hub circle {
	fill: var(--indigo-600);
}

.mo-cluster__hub text {
	fill: var(--white);
	font-size: 8.5px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.mo-cluster__node {
	cursor: pointer;
	transition: transform .25s ease;
}

.mo-cluster__node circle {
	fill: var(--white);
	stroke: var(--indigo-400);
	stroke-width: 1.4;
	transition: fill .2s ease, stroke .2s ease, r .2s ease;
}

.mo-cluster__node text {
	font-size: 8px;
	fill: var(--indigo-800);
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.mo-cluster__node:hover circle,
.mo-cluster__node--active circle {
	fill: var(--indigo-500);
	stroke: var(--indigo-700);
	r: 18;
}

.mo-cluster__node:hover text,
.mo-cluster__node--active text {
	fill: var(--white);
}

/* ===========================================================
   5) SEA TREE — Kampagnen-Hierarchie
   =========================================================== */

.mo-tree {
	position: absolute;
	inset: 0;
	padding: var(--space-md) var(--space-md) var(--space-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.mo-tree__row {
	display: flex;
	gap: 6px;
	justify-content: center;
}

.mo-tree__node {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--indigo-200);
	border-radius: var(--radius-sm, 6px);
	padding: 4px 6px;
	font-size: 9.5px;
	font-weight: 600;
	color: var(--indigo-800);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: all .25s ease;
	cursor: pointer;
	max-width: 220px;
}

.mo-tree__row--account .mo-tree__node {
	background: var(--indigo-600);
	color: var(--white);
	border-color: var(--indigo-700);
	font-weight: 700;
	flex: 0 1 60%;
}

.mo-tree__row--campaign .mo-tree__node { background: var(--indigo-100); }
.mo-tree__row--adgroup  .mo-tree__node { background: rgba(255, 255, 255, .95); font-size: 8.5px; padding: 3px 4px; }

.mo-tree__node:hover,
.mo-tree__node--active {
	transform: translateY(-2px);
	border-color: var(--indigo-500);
	box-shadow: 0 6px 14px rgba(79, 70, 229, .18);
}

.mo-tree__counter {
	display: inline-block;
	background: rgba(255, 255, 255, .15);
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 8.5px;
	font-variant-numeric: tabular-nums;
}

.mo-tree__row--campaign .mo-tree__counter { background: var(--white); color: var(--indigo-700); }
.mo-tree__row--adgroup  .mo-tree__counter { background: var(--indigo-50); color: var(--indigo-700); }

.mo-tree__edges {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mo-tree__edge {
	fill: none;
	stroke: var(--indigo-300);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	animation: mo-tree-flow 8s linear infinite;
}

@keyframes mo-tree-flow {
	to { stroke-dashoffset: -120; }
}

/* ===========================================================
   6) GEO ANSWER — KI-Antwort mit Zitationen
   =========================================================== */

.mo-answer {
	position: absolute;
	inset: 0;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.mo-answer__prompt {
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--indigo-200);
	border-radius: var(--radius-md);
	padding: 8px 10px;
	font-size: 11px;
	color: var(--grey-700);
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.mo-answer__prompt-tag {
	background: var(--indigo-600);
	color: var(--white);
	font-size: 8px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.mo-answer__bubble {
	background: var(--white);
	border: 1px solid var(--indigo-300);
	border-radius: var(--radius-md);
	padding: 8px 10px;
	box-shadow: 0 8px 20px rgba(79, 70, 229, .12);
	font-size: 11px;
	color: var(--indigo-900);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
}

.mo-answer__line {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--indigo-200), var(--indigo-100));
	width: 0;
	animation: mo-answer-fill 1.2s ease-out forwards;
}

.mo-answer.is-visible .mo-answer__line { animation-play-state: running; }

.mo-answer__line:nth-child(1) { animation-delay: .15s; }
.mo-answer__line:nth-child(2) { animation-delay: .35s; }
.mo-answer__line:nth-child(3) { animation-delay: .55s; width: 0; }

@keyframes mo-answer-fill {
	0%   { width: 0; }
	100% { width: var(--mo-w, 80%); }
}

.mo-answer__citations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.mo-answer__cite {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 9.5px;
	font-weight: 600;
	background: var(--indigo-50);
	color: var(--indigo-700);
	border: 1px solid var(--indigo-200);
	padding: 2px 6px;
	border-radius: 999px;
	transition: all .2s ease;
	cursor: pointer;
}

.mo-answer__cite[data-self="1"] {
	background: var(--indigo-600);
	color: var(--white);
	border-color: var(--indigo-700);
}

.mo-answer__cite-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.mo-answer__cite:hover {
	transform: translateY(-1px);
}

/* ===========================================================
   7) GEO RESEARCH — Konversation B2B
   =========================================================== */

.mo-chat {
	position: absolute;
	inset: 0;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.mo-chat__msg {
	display: flex;
	gap: 6px;
	font-size: 10.5px;
	line-height: 1.35;
	max-width: 88%;
	opacity: 0;
	transform: translateY(6px);
	animation: mo-chat-in .45s ease-out forwards;
}

.mo-chat.is-visible .mo-chat__msg { animation-play-state: running; }

.mo-chat__msg:nth-child(1) { animation-delay: .15s; }
.mo-chat__msg:nth-child(2) { animation-delay: .55s; }
.mo-chat__msg:nth-child(3) { animation-delay: 1.0s; }
.mo-chat__msg:nth-child(4) { animation-delay: 1.45s; }

.mo-chat__msg--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.mo-chat__avatar {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--indigo-600);
	color: var(--white);
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mo-chat__msg--ai .mo-chat__avatar { background: var(--indigo-100); color: var(--indigo-700); }

.mo-chat__bubble {
	background: var(--white);
	border: 1px solid var(--indigo-200);
	border-radius: 12px;
	padding: 5px 8px;
	color: var(--grey-700);
}

.mo-chat__msg--user .mo-chat__bubble {
	background: var(--indigo-600);
	color: var(--white);
	border-color: var(--indigo-700);
}

.mo-chat__msg--ai .mo-chat__bubble strong { color: var(--indigo-700); }

@keyframes mo-chat-in {
	to { opacity: 1; transform: translateY(0); }
}

/* ===========================================================
   8) PERFORMANCE BARS — Wachstum SEO/SEA/GEO
   =========================================================== */

.mo-bars {
	position: absolute;
	inset: 0;
	padding: var(--space-md) var(--space-lg) var(--space-3xl);
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.mo-bars__row {
	display: grid;
	grid-template-columns: 38px 1fr 38px;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	color: var(--indigo-800);
}

.mo-bars__track {
	height: 14px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid var(--indigo-200);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.mo-bars__fill {
	position: absolute;
	inset: 0;
	width: 0;
	background: linear-gradient(90deg, var(--indigo-500), var(--indigo-700));
	border-radius: 999px;
	animation: mo-bars-fill 1.4s cubic-bezier(.2, .9, .2, 1) forwards;
	animation-play-state: paused;
}

.mo-bars.is-visible .mo-bars__fill { animation-play-state: running; }

.mo-bars__row:nth-child(1) .mo-bars__fill { animation-delay: .1s; }
.mo-bars__row:nth-child(2) .mo-bars__fill { animation-delay: .35s; }
.mo-bars__row:nth-child(3) .mo-bars__fill { animation-delay: .6s; }

@keyframes mo-bars-fill {
	to { width: var(--mo-bar, 70%); }
}

.mo-bars__value {
	font-variant-numeric: tabular-nums;
	color: var(--indigo-700);
	text-align: right;
}

.mo-bars__sparkle {
	position: absolute;
	right: -6px;
	top: -2px;
	bottom: -2px;
	width: 14px;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .8), transparent 60%);
	border-radius: 50%;
	mix-blend-mode: screen;
}

/* ===========================================================
   9) METHODIK LOOP — Audit → Strategie → Umsetzung → Skalierung
   =========================================================== */

.mo-loop__ring {
	fill: none;
	stroke: rgba(255, 255, 255, .18);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
	animation: mo-hub-dash 22s linear infinite;
}

.mo-graphic:not(.mo-graphic--dark) .mo-loop__ring {
	stroke: var(--indigo-300);
}

.mo-loop__center {
	fill: rgba(255, 255, 255, .9);
}

.mo-graphic--dark .mo-loop__center {
	fill: rgba(99, 102, 241, .9);
}

.mo-loop__center-text {
	fill: var(--indigo-700);
	font-size: 10px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
}

.mo-graphic--dark .mo-loop__center-text { fill: var(--white); }

.mo-loop__step {
	transition: transform .25s ease;
	cursor: pointer;
	transform-origin: center;
	transform-box: fill-box;
}

.mo-loop__step-bg {
	fill: var(--white);
	stroke: var(--indigo-400);
	stroke-width: 1.2;
	transition: fill .25s ease, stroke .25s ease;
}

.mo-graphic--dark .mo-loop__step-bg {
	fill: rgba(255, 255, 255, .08);
	stroke: rgba(255, 255, 255, .3);
}

.mo-loop__step-num {
	fill: var(--indigo-700);
	font-size: 10px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: middle;
}

.mo-loop__step-label {
	fill: var(--indigo-800);
	font-size: 8.5px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.mo-graphic--dark .mo-loop__step-num,
.mo-graphic--dark .mo-loop__step-label {
	fill: rgba(255, 255, 255, .85);
}

.mo-loop__step--active .mo-loop__step-bg {
	fill: var(--indigo-600);
	stroke: var(--indigo-700);
}

.mo-loop__step--active .mo-loop__step-num,
.mo-loop__step--active .mo-loop__step-label {
	fill: var(--white);
}

.mo-loop__step:hover .mo-loop__step-bg {
	stroke: var(--indigo-700);
}

/* ===========================================================
   Responsives: Schriftgrößen für SVG-Texte skalieren mit
   Container; auf kleinen Screens etwas Padding reduzieren.
   =========================================================== */

@media (max-width: 540px) {
	.mo-chain { padding: var(--space-md) var(--space-sm) var(--space-3xl); }
	.mo-bars  { padding: var(--space-md) var(--space-md) var(--space-3xl); }
	.mo-tree  { padding: var(--space-sm) var(--space-sm) var(--space-3xl); }
	.mo-graphic__caption {
		left: var(--space-sm);
		right: var(--space-sm);
		bottom: var(--space-sm);
	}
}