/* Plugin-Vorstellung (Seite /plugin/). Plugin-Bausteine behalten ihr Design aus den Plugin-Einstellungen. */

.sc { overflow-x: clip; }
:where(.sc > .wp-block-post-content) > * { margin-block: 0; }
.sc-wrap { max-width: 1320px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.sc :where(section) { position: relative; }
.sc h2 { font-size: clamp(2.4rem, 5.4vw, 5.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; margin: 0; }
.sc h3 { font-size: var(--wp--preset--font-size--h-4); letter-spacing: -.02em; margin: 1.25rem 0 .4rem; }
.sc .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Abschnittskopf */
.sc-head { display: grid; gap: 1rem; max-width: 760px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sc-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sc-head__lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--muted); max-width: 46ch; margin: 0; }

/* Buttons und Textlinks */
.sc-btn {
	display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .95rem 1.7rem;
	border-radius: 999px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--forest);
	font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: background-color .2s, transform .25s var(--eh-ease), gap .25s var(--eh-ease);
}
.sc-btn::after { content: "→"; }
.sc-btn:hover { background: var(--wp--preset--color--paper); gap: .9em; }
.sc-btn:active { transform: translateY(1px) scale(.99); }
.sc-btn--light { background: var(--wp--preset--color--paper); }
.sc-btn--light:hover { background: var(--wp--preset--color--accent-soft); }
.sc-link {
	color: inherit; font-weight: 600; text-decoration: none;
	border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.sc-link:hover { color: var(--wp--preset--color--accent); }
.sc-link--light:hover, .sc-hero .sc-link:hover { color: var(--wp--preset--color--accent-soft); }

/* Screenshot-Rahmen */
.sc-shot {
	display: block; width: 100%; height: auto; background: var(--wp--preset--color--surface);
	border-radius: var(--eh-radius-m);
	box-shadow: 0 0 0 1px rgba(19, 32, 26, .08), 0 2px 4px rgba(19, 32, 26, .04), 0 40px 80px -40px rgba(13, 24, 19, .45);
}

/* ---------- 1 Einstieg ---------- */
.sc-hero {
	--sc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	isolation: isolate;
	background:
		radial-gradient(60% 80% at 92% 0%, rgba(58, 122, 90, .55) 0%, rgba(58, 122, 90, 0) 70%),
		radial-gradient(50% 60% at 0% 100%, #0D1813 0%, rgba(13, 24, 19, 0) 70%),
		var(--wp--preset--color--forest);
	color: var(--wp--preset--color--paper);
	padding-block: clamp(4.5rem, 12vh, 8.5rem) clamp(9rem, 22vh, 13rem);
}
.sc-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--sc-grain); mix-blend-mode: overlay; opacity: .3;
}
.sc-hero__name {
	margin: 0 0 clamp(1.5rem, 4vh, 2.5rem); font-size: var(--wp--preset--font-size--small); font-weight: 600;
	color: var(--wp--preset--color--accent-soft); animation: eh-rise 1s var(--eh-ease) both;
}
.sc-hero__title {
	margin: 0; color: var(--wp--preset--color--paper);
	font-size: clamp(2.4rem, 10.6vw, 11rem); line-height: .88; letter-spacing: -.06em; font-weight: 600;
}
.sc-hero__title span { display: block; animation: eh-rise 1s var(--eh-ease) both; }
.sc-hero__title span + span { color: var(--wp--preset--color--accent-soft); animation-delay: .12s; padding-left: clamp(0rem, 9vw, 9rem); }
.sc-hero__row {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 4rem;
	margin-top: clamp(2.5rem, 6vh, 4rem); animation: eh-rise 1s .24s var(--eh-ease) both;
}
.sc-hero__lead {
	margin: 0; max-width: 40ch; font-size: var(--wp--preset--font-size--lead); line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 84%, transparent);
}
.sc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* Live-Suche ragt in den Einstieg hinein */
.sc-live { margin-top: clamp(-8rem, -17vh, -6rem); padding-bottom: clamp(4rem, 10vw, 8rem); }
.sc-live__title {
	font-size: var(--wp--preset--font-size--h-4) !important; letter-spacing: -.02em !important; line-height: 1.2 !important;
	color: var(--wp--preset--color--paper); margin: 0 0 1rem !important; font-weight: 500 !important;
}
.sc-live__title em { font-style: normal; color: var(--wp--preset--color--accent-soft); }
.sc-live__panel { margin-top: 0; max-width: none; }
.sc-live__note { margin: 1.1rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ---------- 2 Website als Demo ---------- */
.sc-site { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
.sc-index { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--wp--preset--color--ink); }
.sc-index li { border-bottom: 1px solid var(--wp--preset--color--line); }
.sc-index a {
	display: grid; grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr) 2.5rem; align-items: baseline; gap: 1.5rem;
	padding: clamp(1.1rem, 2.4vw, 1.75rem) 0; color: var(--wp--preset--color--ink); text-decoration: none;
	transition: padding .35s var(--eh-ease), color .2s;
}
.sc-index a::after { content: "→"; justify-self: end; font-size: 1.5rem; transition: transform .35s var(--eh-ease); }
.sc-index a:hover { padding-left: 1rem; color: var(--wp--preset--color--accent); }
.sc-index a:hover::after { transform: translateX(.35rem); }
.sc-index__num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--muted); }
.sc-index__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); letter-spacing: -.035em; line-height: 1.05; font-weight: 600; }
.sc-index__text { color: var(--wp--preset--color--muted); }

/* ---------- 3 Live-Liste ---------- */
.sc-list { background: var(--wp--preset--color--sand); padding-block: clamp(4rem, 10vw, 8rem); }
.sc-list__more { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }

/* ---------- 4 Exposé ---------- */
.sc-expose { padding-block: clamp(4rem, 10vw, 8rem); }
.sc-expose__stage { position: relative; padding-right: clamp(0rem, 12vw, 11rem); padding-bottom: clamp(2rem, 8vw, 7rem); }
.sc-expose__float {
	position: absolute; right: 0; bottom: 0; width: min(46%, 560px);
	border-radius: var(--eh-radius-l); box-shadow: 0 0 0 1px rgba(19, 32, 26, .1), 0 50px 90px -40px rgba(13, 24, 19, .6);
}
.sc-facts {
	list-style: none; margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
}
.sc-facts li, .sc-specs > div, .sc-ops__grid > div { border-top: 1.5px solid var(--wp--preset--color--ink); padding-top: 1rem; color: var(--wp--preset--color--muted); }
.sc-facts strong { display: block; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); letter-spacing: -.02em; margin-bottom: .4rem; }

/* ---------- 5 Anfrage ---------- */
.sc-inquiry { background: var(--wp--preset--color--accent-soft); padding-block: clamp(4rem, 10vw, 8rem); }
.sc-inquiry__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.sc-inquiry__copy h2 { margin-bottom: 1rem; }
.sc-specs { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.sc-specs > div { border-top-color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent); color: var(--wp--preset--color--ink); }
.sc-specs dt, .sc-ops__grid dt { font-weight: 700; margin-bottom: .3rem; color: var(--wp--preset--color--ink); }
.sc-specs dd, .sc-ops__grid dd { margin: 0; line-height: 1.5; }
.sc-inquiry__shot { margin: 0; }

/* ---------- 6 Einstellung und Wirkung ---------- */
.sc-effects { padding-block: clamp(4rem, 10vw, 8rem); }
.sc-fx { margin: 0 0 clamp(3rem, 7vw, 5.5rem); }
.sc-fx:last-child { margin-bottom: 0; }
.sc-fx__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.sc-fx__setting { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); letter-spacing: -.035em; line-height: 1.1; font-weight: 600; }
.sc-fx__setting span { display: block; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); letter-spacing: 0; font-weight: 600; color: var(--wp--preset--color--accent); margin-bottom: .25rem; }

/* Umschalter wie im Admin: zwei Werte, einer aktiv */
.sc-switch { display: inline-flex; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--wp--preset--color--sand); }
.sc-switch label {
	position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: 999px;
	font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--muted); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s;
}
.sc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sc-switch label:has(input:checked) { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); box-shadow: 0 1px 2px rgba(19, 32, 26, .12), 0 6px 16px -8px rgba(19, 32, 26, .35); }
.sc-switch label:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.sc-fx__stage {
	position: relative; overflow: hidden; border-radius: var(--eh-radius-l); background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 1px rgba(19, 32, 26, .08), 0 40px 80px -40px rgba(13, 24, 19, .45);
}
.sc-fx__stage img { display: block; width: 100%; height: auto; }
.sc-fx__after { position: absolute; inset: 0; height: 100% !important; object-fit: cover; object-position: top; clip-path: inset(0 0 0 0); transition: clip-path .8s var(--eh-ease); }
.sc-fx:has(input[value="before"]:checked) .sc-fx__after { clip-path: inset(0 0 0 100%); }
/* Beim ersten Erscheinen wischt der neue Wert einmal über den alten. */
.sc-fx.is-visible .sc-fx__after { animation: sc-wipe 1.1s .55s var(--eh-ease) backwards; }
@keyframes sc-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sc-fx figcaption { margin-top: 1rem; max-width: 60ch; color: var(--wp--preset--color--muted); }

/* ---------- 7 Admin ---------- */
.sc-admin { background: var(--wp--preset--color--surface); padding-block: clamp(4rem, 10vw, 8rem); }
.sc-admin__screen { perspective: 1800px; }
.sc-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(3rem, 7vw, 5.5rem); }
.sc-tools article p { margin: 0; color: var(--wp--preset--color--muted); }
.sc-tools .sc-shot { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.sc-code {
	margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: clamp(1.25rem, 3vw, 2rem); overflow-x: auto;
	border-radius: var(--eh-radius-m); background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	font: 500 .95rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--wp--preset--color--accent-strong);
}

/* ---------- 8 MCP ---------- */
.sc-mcp { background: var(--wp--preset--color--forest); color: color-mix(in srgb, var(--wp--preset--color--paper) 84%, transparent); padding-block: clamp(4.5rem, 11vw, 9rem); }
.sc-mcp h2 { color: var(--wp--preset--color--paper); margin-bottom: 1.25rem; }
.sc-mcp .sc-head__lead { color: inherit; }
.sc-mcp__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.sc-checks { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.sc-checks li { position: relative; padding-left: 2rem; line-height: 1.5; }
.sc-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--accent-soft); font-weight: 700; }
.sc-mcp__media .sc-shot { box-shadow: 0 0 0 1px rgba(245, 242, 234, .12), 0 50px 90px -40px rgba(0, 0, 0, .7); }
.sc-code--dark { margin-top: 1.25rem; background: rgba(245, 242, 234, .06); border-color: rgba(245, 242, 234, .14); color: var(--wp--preset--color--accent-soft); font-size: .85rem; }

/* ---------- 9 Betrieb ---------- */
.sc-ops { padding-block: clamp(4rem, 10vw, 8rem); }
.sc-ops__title { max-width: 16ch; margin-bottom: clamp(2.5rem, 6vw, 4.5rem) !important; }
.sc-ops__grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }

/* ---------- 10 Abschluss ---------- */
.sc-cta {
	isolation: isolate; overflow: hidden; text-align: center;
	background: radial-gradient(70% 90% at 50% 120%, #3A7A5A 0%, rgba(58, 122, 90, 0) 70%), var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--paper); padding-block: clamp(5rem, 14vw, 11rem);
}
.sc-cta__title { color: var(--wp--preset--color--paper); font-size: clamp(2.75rem, 7.5vw, 7rem) !important; max-width: 14ch; margin-inline: auto !important; line-height: .95 !important; }
.sc-cta__lead { max-width: 44ch; margin: 1.75rem auto 0; font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: color-mix(in srgb, var(--wp--preset--color--paper) 84%, transparent); }
.sc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }

/* ---------- Scroll-Szene: Admin kippt beim Hereinscrollen in die Ebene ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sc-tilt {
			transform-origin: 50% 100%;
			animation: sc-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 48%;
		}
		.sc-hero__title { animation: none; }
		.sc-hero__title span { animation: sc-title-out linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
		.sc-hero__title span + span { animation-name: sc-title-out-2; }
	}
}
@keyframes sc-tilt {
	from { transform: rotateX(24deg) scale(.8) translateY(6vh); opacity: .4; filter: saturate(.6); }
	to { transform: none; opacity: 1; filter: none; }
}
@keyframes sc-title-out { to { transform: translateX(-6vw); opacity: .35; } }
@keyframes sc-title-out-2 { to { transform: translateX(6vw); opacity: .35; } }

/* ---------- Schmal ---------- */
@media (max-width: 1000px) {
	.sc-facts, .sc-ops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-inquiry__grid, .sc-mcp__grid { grid-template-columns: minmax(0, 1fr); }
	.sc-tools { grid-template-columns: minmax(0, 1fr); }
	.sc-tools article { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 1.5rem; align-items: start; }
	.sc-tools article .sc-zoom { grid-row: span 2; }
	.sc-tools article h3 { margin-top: 0; }
}
@media (max-width: 700px) {
	.sc-hero { padding-bottom: 8rem; }
	.sc-hero__title span + span { padding-left: 0; }
	.sc-hero__actions { width: 100%; }
	.sc-live { margin-top: -6rem; }
	.sc-index a { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; gap: .25rem 1rem; }
	.sc-index__text { grid-column: 2; grid-row: 2; font-size: var(--wp--preset--font-size--small); }
	.sc-index a::after { grid-column: 3; grid-row: 1; font-size: 1.2rem; }
	.sc-expose__stage { padding: 0 0 5rem; }
	.sc-expose__float { width: 62%; border-radius: var(--eh-radius-m); }
	.sc-facts, .sc-specs, .sc-ops__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.sc-tools article { display: block; }
	.sc-switch { width: 100%; }
	.sc-switch label { flex: 1; justify-content: center; padding: 0 .75rem; }
	.sc-fx__setting { font-size: var(--wp--preset--font-size--h-4); }
}

/* ---------- Screenshots groß ansehen (Popover) ---------- */
.sc-zoom {
	display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit;
	border-radius: var(--eh-radius-m); cursor: zoom-in; text-align: left;
}
.sc-zoom > img { transition: transform .45s var(--eh-ease), box-shadow .45s var(--eh-ease); }
.sc-zoom:hover > img:not(.sc-tilt) { transform: translateY(-4px); }
.sc-zoom:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.sc-expose__stage > .sc-zoom:first-child { width: 100%; }
.sc-pop {
	inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(1rem, 3vw, 2.5rem);
	border: 0; background: rgba(13, 24, 19, .92); overflow: auto; cursor: zoom-out;
}
.sc-pop:popover-open { display: grid; place-items: center; }
.sc-pop::backdrop { background: transparent; }
.sc-pop img { display: block; max-width: min(100%, 2400px); width: auto; height: auto; max-height: calc(100dvh - 6rem); border-radius: var(--eh-radius-m); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); cursor: default; }
.sc-pop__close {
	position: fixed; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
	min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font: inherit; font-weight: 600;
}
.sc-pop__close:hover { background: var(--wp--preset--color--accent-soft); }
@media (max-width: 700px) {
	/* Auf dem Handy darf der Screenshot breiter als der Bildschirm sein und wird gescrollt. */
	.sc-pop:popover-open { place-items: start; }
	.sc-pop img { max-width: none; width: 200vw; max-height: none; }
}

/* ---------- MCP: Terminal statt blassem Screenshot ---------- */
.sc h2 { hyphens: manual; text-wrap: balance; }
.sc-inquiry__copy h2, .sc-mcp h2 { font-size: clamp(2.3rem, 4.2vw, 4.25rem); }
.sc-mcp__media { position: relative; display: grid; gap: 1.25rem; }
.sc-term {
	position: relative; z-index: 2; border-radius: var(--eh-radius-l); overflow: hidden;
	background: linear-gradient(160deg, #1B2D24 0%, #0D1813 100%);
	box-shadow: 0 0 0 1px rgba(220, 229, 217, .14), 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 80px -20px rgba(58, 122, 90, .45);
	font: 500 clamp(.85rem, 1.1vw, 1rem)/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sc-term__bar { display: flex; align-items: center; gap: .45rem; padding: .85rem 1.1rem; border-bottom: 1px solid rgba(220, 229, 217, .1); }
.sc-term__bar span { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(220, 229, 217, .22); }
.sc-term__bar b { margin-left: auto; font-weight: 500; font-size: .8rem; color: rgba(220, 229, 217, .55); }
.sc-term__log { list-style: none; margin: 0; padding: clamp(1.1rem, 2.4vw, 1.75rem); display: grid; gap: .7rem; }
.sc-term__log li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; color: var(--wp--preset--color--paper); }
.sc-term__log i { font-style: normal; color: #8FD3AE; }
.sc-term__log i::before { content: "● "; color: #3A7A5A; }
.sc-term__log em { font-style: normal; color: rgba(245, 242, 234, .55); }
.sc-term__you { padding: .8rem 1rem; margin-bottom: .35rem; border-radius: 12px; background: rgba(220, 229, 217, .1); font-family: var(--wp--preset--font-family--body); font-size: 1.05em; }
.sc-term__you::before { content: "›"; margin-right: .6rem; color: #8FD3AE; font-weight: 700; }
.sc-term__done { margin-top: .35rem; color: #8FD3AE !important; font-weight: 600; }
.sc-term__done::before { content: "✓ "; }
/* Zeilen laufen nacheinander ein, sobald das Terminal sichtbar ist. */
.sc-term.is-visible .sc-term__log li { animation: sc-line .5s var(--eh-ease) backwards; }
.sc-term.is-visible .sc-term__log li:nth-child(2) { animation-delay: .5s; }
.sc-term.is-visible .sc-term__log li:nth-child(3) { animation-delay: .9s; }
.sc-term.is-visible .sc-term__log li:nth-child(4) { animation-delay: 1.3s; }
.sc-term.is-visible .sc-term__log li:nth-child(5) { animation-delay: 1.7s; }
.sc-term.is-visible .sc-term__log li:nth-child(6) { animation-delay: 2.2s; }
@keyframes sc-line { from { opacity: 0; transform: translateY(8px); } }
.sc-mcp__draft { width: 62%; margin: -3.5rem 0 0 auto; position: relative; z-index: 1; transform: rotate(1.5deg); }
.sc-mcp__draft .sc-shot { filter: saturate(.9); }
.sc-mcp__media .sc-code--dark { margin-top: 0; }
@media (max-width: 700px) {
	.sc-mcp__draft { width: 85%; margin-top: -2rem; }
}

/* Echter MCP-Entwurf als schräg gelegte Karte über dem Terminal. */
.sc-draft { position: relative; z-index: 3; width: min(70%, 420px); margin: -5rem 0 0 auto; }
.sc-draft__img { display: block; width: 100%; height: auto; border-radius: var(--eh-radius-l); box-shadow: 0 0 0 1px rgba(220, 229, 217, .18), 0 60px 110px -40px rgba(0, 0, 0, .9); }
.sc-draft figcaption {
	position: absolute; top: -.9rem; left: 1.25rem; display: flex; gap: .5rem; align-items: center;
	padding: .45rem .9rem; border-radius: 999px; background: #F3E3C7; color: #5E3A0E; font-size: .8rem; font-weight: 600;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
}
.sc-draft figcaption b { font-weight: 800; }
.sc-draft .sc-zoom { border-radius: var(--eh-radius-l); }
@media (max-width: 700px) { .sc-draft { width: 88%; margin-top: -2.5rem; } }

/* MCP-Abschnitt hell: dunkles Terminal und dunkler Entwurf heben sich klar ab. */
.sc-mcp { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.sc-mcp h2 { color: var(--wp--preset--color--ink); }
.sc-mcp .sc-head__lead { color: var(--wp--preset--color--muted); }
.sc-checks li::before { color: var(--wp--preset--color--accent); }
.sc-mcp .sc-code--dark { background: var(--wp--preset--color--forest); border-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--accent-soft); }
.sc-term { box-shadow: 0 60px 120px -50px rgba(13, 24, 19, .55), 0 0 0 1px rgba(19, 32, 26, .2); }

/* Vorher-nachher kompakter: Einstellung links, Bild rechts statt über die volle Breite. */
@media (min-width: 900px) {
	.sc-fx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "bar stage" "cap stage"; gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start; }
	.sc-fx__bar { grid-area: bar; flex-direction: column; align-items: flex-start; align-self: end; margin-bottom: 1.25rem; }
	.sc-fx__stage { grid-area: stage; max-width: 760px; justify-self: end; width: 100%; }
	.sc-fx figcaption { grid-area: cap; margin-top: 0; }
}
.sc-fx__stage { max-width: 760px; }
/* Ganzes Bild zeigen: Höhe begrenzen, Breite folgt dem Seitenverhältnis (kein Abschneiden). */
.sc-fx__stage { width: fit-content; max-width: min(100%, 760px); }
.sc-fx__stage img.sc-fx__before { width: auto; max-width: 100%; max-height: min(640px, 78vh); }
.sc-fx__after { object-position: center; }

/* Alle Paare gleich: Rahmen in voller Spaltenbreite, Bild mittig darin, Text links vertikal mittig. */
.sc-fx__stage { width: 100%; max-width: 760px; display: grid; place-items: center; padding: clamp(.75rem, 2vw, 1.5rem); background: var(--wp--preset--color--surface); }
.sc-fx__pic { position: relative; display: block; max-width: 100%; border-radius: var(--eh-radius-m); overflow: hidden; box-shadow: 0 0 0 1px rgba(19, 32, 26, .06); }
.sc-fx__stage img.sc-fx__before { display: block; width: auto; max-width: 100%; max-height: min(600px, 74vh); }
@media (min-width: 900px) {
	.sc-fx { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". stage" "bar stage" "cap stage" ". stage"; align-items: start; }
	.sc-fx__stage { justify-self: stretch; }
}

/* Entwurf wird „übernommen": Zeiger fährt zum Button, drückt, Status springt auf Live. Einmal, wenn sichtbar. */
.sc-draft figcaption.sc-draft__badge { display: grid; padding: 0; background: none; box-shadow: none; }
.sc-draft__state { grid-area: 1 / 1; display: flex; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); white-space: nowrap; }
.sc-draft__state.is-draft { background: #F3E3C7; color: #5E3A0E; }
.sc-draft__state.is-live { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper); opacity: 0; }
.sc-draft__state b { font-weight: 800; }
.sc-draft__apply {
	position: absolute; right: 1.25rem; bottom: -1.4rem; z-index: 2;
	padding: .8rem 1.4rem; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper);
	font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 16px 30px -12px rgba(13, 24, 19, .7);
}
.sc-draft__cursor { position: absolute; right: 2.2rem; bottom: -2.6rem; z-index: 4; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); pointer-events: none; }
.sc-draft.is-visible .sc-draft__apply { animation: sc-apply-in .5s 2.6s var(--eh-ease) backwards, sc-press .35s 4s ease-in-out; }
.sc-draft.is-visible .sc-draft__cursor { animation: sc-cursor 1.6s 3s var(--eh-ease) forwards; }
.sc-draft.is-visible .is-draft { animation: sc-fade-out .3s 4.2s forwards; }
.sc-draft.is-visible .is-live { animation: sc-fade-in .4s 4.2s forwards; }
.sc-draft.is-visible .sc-draft__img { animation: sc-glow 1.2s 4.2s ease-out; }
@keyframes sc-apply-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes sc-press { 50% { transform: scale(.94); filter: brightness(1.15); } }
@keyframes sc-cursor {
	0% { opacity: 0; transform: translate(-140px, 90px); }
	25% { opacity: 1; }
	62% { opacity: 1; transform: translate(0, 0); }
	72% { transform: translate(0, 0) scale(.85); }
	82% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { opacity: 0; transform: translate(14px, 18px); }
}
@keyframes sc-fade-out { to { opacity: 0; } }
@keyframes sc-fade-in { to { opacity: 1; } }
@keyframes sc-glow { 0% { box-shadow: 0 0 0 0 rgba(143, 211, 174, .9), 0 60px 110px -40px rgba(0, 0, 0, .9); } 100% { box-shadow: 0 0 0 18px rgba(143, 211, 174, 0), 0 60px 110px -40px rgba(0, 0, 0, .9); } }
@media (prefers-reduced-motion: reduce) {
	.sc-draft__cursor { display: none; }
	.sc-draft .is-draft { opacity: 0; }
	.sc-draft .is-live { opacity: 1; }
}

/* Nach dem Klick erscheint das Formular: Kreis-Enthüllung vom Button aus, Karte richtet sich auf. */
.sc-draft { rotate: -2deg; }
.sc-draft .sc-zoom { position: relative; z-index: 1; }
.sc-draft::before {
	content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--eh-radius-l);
	border: 1.5px dashed rgba(19, 32, 26, .35);
	background:
		linear-gradient(rgba(19, 32, 26, .14), rgba(19, 32, 26, .14)) 2rem 2.2rem / 55% 1.4rem no-repeat,
		repeating-linear-gradient(180deg, transparent 0 1.6rem, rgba(19, 32, 26, .08) 1.6rem 3.6rem) 2rem 5rem / calc(100% - 4rem) calc(100% - 9rem) no-repeat,
		color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent);
}
.sc-draft.is-visible { animation: sc-straighten .9s 4.25s var(--eh-ease) forwards; }
.sc-draft.is-visible .sc-draft__img { animation: sc-form-reveal 1.1s 4.15s cubic-bezier(.7, 0, .2, 1) both, sc-glow 1.2s 5.2s ease-out; }
@keyframes sc-form-reveal { from { clip-path: circle(0% at 82% 100%); } to { clip-path: circle(160% at 82% 100%); } }
@keyframes sc-straighten { to { rotate: 0deg; scale: 1.03; } }
@media (prefers-reduced-motion: reduce) {
	.sc-draft { rotate: 0deg; }
	.sc-draft::before { display: none; }
}
.sc-draft__img { aspect-ratio: 1 / 1.05; object-fit: cover; object-position: top; }
.sc-draft { margin-top: -1.25rem; }
.sc-draft figcaption.sc-draft__badge { z-index: 5; }

/* ---------- Review-Korrekturen ---------- */
/* Einstieg: lesbarere Laufweite, keine Einrückung, Aktionen direkt unter dem Text. */
.sc-hero__title { letter-spacing: -.045em; }
.sc-hero__title span + span { padding-left: 0; }
.sc-hero__row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2rem; }
/* Betrieb: Titel links, Punkte rechts statt leerer Fläche. */
@media (min-width: 1000px) {
	.sc-ops .sc-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
	.sc-ops__title { margin-bottom: 0 !important; }
	.sc-ops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
}
/* Website-Index: Kopf neben die Liste statt darüber mit leerer rechter Hälfte. */
@media (min-width: 1000px) {
	.sc-site .sc-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
	.sc-site .sc-head { margin-bottom: 0; position: sticky; top: calc(var(--eh-header-h) + 2rem); }
	.sc-index a { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr) 2rem; }
}
.sc-site { padding-block: clamp(3rem, 7vw, 5.5rem); }
/* Exposé: Lightbox kleiner und innerhalb des Rasters. */
.sc-expose__stage { padding-right: 0; padding-bottom: clamp(2rem, 6vw, 5rem); }
.sc-expose__stage > .sc-zoom:first-child { width: 82%; }
.sc-expose__float { width: min(38%, 480px); }
.sc-inquiry__shot .sc-shot { aspect-ratio: 1.16; object-fit: cover; object-position: 0 70%; }