/* =====================================================================
   Cremio Bausteine (Block-Muster). Aussehen aus cremio-entwurf.html,
   angepasst an die Blöcke von WordPress.
   ===================================================================== */

:root {
	--f-display: var(--wp--preset--font-family--poppins);
	--f-body: var(--wp--preset--font-family--poppins);
	--f-mono: var(--wp--preset--font-family--poppins);
	--h-track: -0.02em;
	--device: var(--wp--preset--color--geraet);
}

/* ---------- Abstände: in den Bausteinen steuern Raster und Lücken den Abstand ---------- */
.wp-block-post-content > * { margin-block: 0; }
.wp-block-post-content > :not(.alignfull) + :not(.alignfull) { margin-block-start: 1.25rem; }
.cr-blk .is-layout-flow > *,
.cr-blk .is-layout-constrained > *,
.cr-blk.is-layout-flow > * { margin-block: 0; }
.cr-blk figure { margin: 0; }
.cr-blk h1, .cr-blk h2, .cr-blk h3, .cr-blk h4 { margin: 0; line-height: 1.12; letter-spacing: var(--h-track); text-wrap: balance; }
.cr-blk h1 { font-size: var(--wp--preset--font-size--titel-l); font-weight: 800; }
.cr-blk h2 { font-size: var(--wp--preset--font-size--titel-m); font-weight: 700; }
.cr-blk h3, .cr-blk .h3 { font-size: 1.28rem; letter-spacing: -0.012em; line-height: 1.2; font-weight: 700; }
.cr-blk p { margin: 0; }
/* Abstände aus dem Entwurf, die stärker sein müssen als die Rückstellung oben */
.cr-blk .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.cr-blk .more { margin-top: 24px; }
.cr-blk .tabs { margin-bottom: 28px; }
.cr-blk .faq-title { margin-bottom: 14px; }
.cr-blk .h1-look { font-size: var(--wp--preset--font-size--titel-l); font-weight: 800; }

/* ---------- Grundbausteine ---------- */
.cr-blk .narrow { max-width: 760px; }
.cr-blk .wrap.narrow, .cr-blk .wrap.prose { max-width: 1200px; }
.cr-blk .wrap.narrow > * { max-width: 760px; }
.prose { display: grid; gap: 1.05em; }
.prose > * { max-width: 68ch; }
.prose h2 { margin-top: .9em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: .4em; }
.lead { font-size: var(--wp--preset--font-size--lead); color: var(--ink-2); max-width: 60ch; line-height: 1.55; }
.label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.muted { color: var(--ink-2); }
.section { padding-block: clamp(52px, 7vw, 96px); }
.section.tight { padding-block: clamp(36px, 5vw, 64px); }
.section + .section.rule { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.more { margin-top: 24px; }

/* Knöpfe: «Umriss» als zweite Aktion */
.cr-blk .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line-strong);
	padding: 11.5px 18.5px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

/* Schild «Demo mit Beispieldaten» */
.demo-tag,
.shot figcaption {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .66rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--bg);
	border-radius: 6px;
	padding: 3px 8px;
	white-space: nowrap;
	line-height: 1.5;
	margin: 0;
}
.demo-tag::before,
.shot figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* ---------- 1. Hero Startseite (dunkel) ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 6vw, 88px); }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero .copy { display: grid; gap: 22px; min-width: 0; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.hero .act { display: grid; gap: 7px; justify-items: start; }
.hero .act .hint { font-size: .86rem; color: var(--ink-2); }
.hero-dark {
	background: var(--band);
	color: var(--band-ink);
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px);
}
.hero-dark::before {
	content: "";
	position: absolute;
	width: 70vw;
	height: 70vw;
	right: -18vw;
	bottom: -38vw;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 30%, transparent), transparent);
	pointer-events: none;
}
.hero-dark .wrap { position: relative; }
.hero-dark .grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.hero-dark h1 { color: var(--band-ink); font-size: clamp(2.5rem, 5.2vw, 4.3rem); letter-spacing: -0.035em; line-height: 1.02; font-weight: 800; }
.hero-dark h1 .kicker { display: block; color: var(--band-ink-2); font-size: .74rem; letter-spacing: .09em; line-height: 1.4; margin-bottom: 26px; text-transform: uppercase; font-weight: 600; }
.hero-dark h1 .h1-sub { display: block; font-size: .56em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: .32em; }
.hero-dark .lead, .hero-dark .act .hint { color: var(--band-ink-2); }
.hero-dark .is-style-outline > .wp-block-button__link { border-color: var(--band-line); color: var(--band-ink); }
.hero-dark .is-style-outline > .wp-block-button__link:hover { border-color: var(--band-ink); color: var(--band-ink); }

/* Unterstreichung in Koralle unter «nach Mass.» */
.hl { position: relative; white-space: nowrap; display: inline-block; }
.hl::after {
	content: "";
	position: absolute;
	left: -2%;
	bottom: -.16em;
	width: 104%;
	height: .3em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 60 5, 120 4, 180 9 S 270 18, 297 7' fill='none' stroke='%23FE7A59' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	clip-path: inset(0 0 0 0);
	animation: cr-draw 1.1s .45s ease-out both;
}
@keyframes cr-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.proof { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: var(--band-ink); }
.proof li { display: flex; align-items: center; gap: 9px; }
.proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }

/* Produktansicht in 3D */
.stage3d { position: relative; perspective: 1600px; min-width: 0; --mx: 0; --my: 0; padding: 18px 4% 54px 6%; }
.rig { position: relative; transform-style: preserve-3d; transform: rotateY(calc(-15deg + var(--mx) * 8deg)) rotateX(calc(7deg - var(--my) * 6deg)); transition: transform .3s ease-out; }
.scr-desk { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--band-ink) 10%, transparent); }
.scr-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--paper); font-size: .7rem; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-bar::before { content: ""; flex: none; width: 36px; height: 8px; margin-right: 8px; background: radial-gradient(circle 4px at 4px 4px, var(--line-strong) 98%, transparent) 0 0 / 14px 8px repeat-x; }
.scr-desk img, .scr-phone img { display: block; width: 100%; height: auto; }
.cr-blk .scr-phone { position: absolute; right: -6%; bottom: -16%; width: 28%; margin: 0; padding: 6px; border-radius: 24px; background: var(--device); box-shadow: 0 34px 60px -18px rgba(0, 0, 0, .7); transform: translateZ(90px); }
.scr-phone img { border-radius: 18px; }
.chip3d {
	position: absolute;
	display: grid;
	grid-template-columns: 30px auto;
	column-gap: 10px;
	align-items: center;
	padding: 9px 14px 9px 9px;
	border-radius: 14px;
	background: var(--card);
	color: var(--ink-2);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
	font-size: .72rem;
	line-height: 1.25;
	white-space: nowrap;
}
.chip3d::before {
	content: "";
	grid-row: span 2;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--coral-soft);
	-webkit-mask: none;
}
.chip3d::after {
	content: "";
	position: absolute;
	left: 15px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: var(--coral-ink);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.chip3d strong { display: block; font-weight: 600; font-size: .8rem; color: var(--ink); }
.chip3d.c1 { left: -9%; top: 14%; transform: translateZ(150px); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.chip3d.c2 { left: 4%; bottom: -9%; transform: translateZ(120px); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.chip3d.c3 { right: -3%; top: -7%; transform: translateZ(70px); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); }
@media (max-width: 860px) {
	.hero .grid, .hero-dark .grid, .page-hero .grid { grid-template-columns: 1fr; }
	.stage3d { padding: 8px 8% 56px 4%; perspective: 1200px; }
	.rig { transform: rotateY(-10deg) rotateX(6deg); }
	.chip3d { font-size: .66rem; padding: 7px 10px 7px 7px; grid-template-columns: 24px auto; }
	.chip3d strong { font-size: .72rem; }
	.chip3d::before { width: 24px; height: 24px; }
	.chip3d::after { left: 12px; width: 14px; height: 14px; margin-top: -7px; }
	.chip3d.c1 { left: 4%; top: 38%; }
	.chip3d.c3 { right: 0; }
	.chip3d.c2 { display: none; }
}
@media (max-width: 420px) { .hero-dark h1 { font-size: 2.5rem; } }

/* ---------- 2. Hero Unterseiten mit Brotkrumen ---------- */
.page-hero { padding-block: clamp(26px, 4vw, 48px) clamp(40px, 5vw, 64px); }
.page-hero .wrap { display: grid; gap: clamp(20px, 3vw, 32px); }
.page-hero .grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.page-hero .copy { display: grid; gap: 18px; min-width: 0; }
.page-hero.narrow-hero .copy { max-width: 760px; }
@media (max-width: 860px) { .page-hero .grid { grid-template-columns: 1fr; } }
.crumbs { font-size: .86rem; color: var(--ink-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- 11. App-Platzhalter, QR-Zahlteil, Rapport ---------- */
.sk { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.sk.s { width: 38%; } .sk.m { width: 58%; } .sk.l { width: 82%; } .sk.t { height: 7px; opacity: .7; }
.app { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(15, 42, 32, .35); }
.desk { border-radius: 14px; overflow: hidden; max-width: 100%; }
.desk .chrome { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, var(--ink)); }
.desk .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.desk .chrome .demo-tag { margin-left: auto; }
.desk .body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 260px; }
.desk .side { border-right: 1px solid var(--line); padding: 14px 12px; display: grid; align-content: start; gap: 11px; }
.desk .side .mini { font-weight: 800; font-size: 1rem; letter-spacing: -0.03em; margin-bottom: 6px; color: var(--ink); }
.desk .side .mini::before { display: none; }
.desk .side .mini i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); margin-left: 1px; }
.desk .side span { font-size: .74rem; color: var(--ink-2); display: flex; gap: 7px; align-items: center; }
.desk .side span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; border: 1.5px solid var(--line-strong); }
.desk .side span.on { color: var(--ink); font-weight: 600; }
.desk .side span.on::before { background: var(--coral); border-color: var(--coral); }
.desk .main { padding: 16px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.desk .main .mtitle { font-weight: 700; font-size: 1rem; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.tile small, .rows small { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tile .sk { height: 14px; }
.rows { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rows div { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.rows div:first-child { border-top: 0; background: color-mix(in srgb, var(--paper) 60%, var(--card)); }
.chip-st { justify-self: start; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--coral-soft); color: var(--coral-ink); }
.chip-st.ok { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-2); }
@media (max-width: 560px) {
	.desk .body { grid-template-columns: 1fr; }
	.desk .side { display: none; }
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qrbill { display: grid; grid-template-columns: .9fr 1.6fr; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; max-width: 560px; background: var(--card); color: var(--ink); position: relative; }
.qrbill > div { padding: 14px; display: grid; gap: 8px; align-content: start; }
.qrbill .receipt { border-right: 1px dashed var(--line-strong); }
.qrbill .qh { margin: 0; font: 700 .78rem Arial, Helvetica, "Liberation Sans", sans-serif; }
.qrbill small { font: 700 .56rem Arial, Helvetica, "Liberation Sans", sans-serif; color: var(--ink); }
.qrbill .pay { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
.qrbill .pay .qh { grid-column: 1 / -1; }
.qrcode { width: 112px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(25, 1fr); position: relative; background: var(--card); }
.qrcode i.on { background: var(--ink); }
.qrcode .cross { position: absolute; inset: 0; margin: auto; width: 20%; height: 20%; background: #000; border: 2px solid #fff; display: grid; place-items: center; }
.qrcode .cross::before, .qrcode .cross::after { content: ""; position: absolute; background: #fff; }
.qrcode .cross::before { width: 58%; height: 18%; }
.qrcode .cross::after { width: 18%; height: 58%; }
.qrbill .scissors { position: absolute; left: calc(36% - 9px); top: -2px; color: var(--ink-2); }
.qrbill .demo-tag { position: absolute; right: 10px; bottom: 10px; }
@media (max-width: 520px) {
	.qrbill { grid-template-columns: 1fr; }
	.qrbill .receipt { border-right: 0; border-bottom: 1px dashed var(--line-strong); }
	.qrbill .scissors { display: none; }
}

.rapport { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; padding: 18px; display: grid; gap: 12px; max-width: 460px; position: relative; }
.rapport .r-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 8px; }
.rapport .r-head b { font-size: 1.1rem; }
.rapport .row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.rapport .row small { font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.rapport .sign { border-top: 1px solid var(--line-strong); padding-top: 8px; display: grid; gap: 4px; }
.rapport .sign svg { width: 160px; height: 44px; }
.rapport .demo-tag { position: absolute; right: 12px; top: -11px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.split .copy { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- 3. Wie viele Programme (Morph) ---------- */
.morph { position: relative; border-top: 1px solid var(--line); }
.morph-sticky { padding-block: clamp(52px, 7vw, 96px); }
.morph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.morph-copy { display: grid; gap: 16px; min-width: 0; }
.morph-after { font-size: 1.06rem; color: var(--ink); border-left: 3px solid var(--coral); padding-left: 16px; max-width: 60ch; }
.morph-after strong { font-weight: 600; }
.morph-stage { position: relative; height: 500px; perspective: 1100px; min-width: 0; --k: 1.2; --p: 0; }
.cr-blk .tools { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.tools li {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	white-space: nowrap;
	border: 1px dashed var(--line-strong);
	background: var(--card);
	color: var(--ink-2);
	border-radius: 12px;
	padding: 11px 16px;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .35);
	transform: translate3d(calc(var(--x) * var(--k) * (1 - var(--p))), calc(var(--y) * var(--k) * (1 - var(--p))), calc(var(--z) * (1 - var(--p)))) rotate(calc(var(--r) * (1 - var(--p)))) scale(calc(1 - var(--p) * .55));
	opacity: calc(1.2 - var(--p) * 1.35);
	margin: 0;
}
.tools li:nth-child(1) { --x: -165px; --y: -115px; --z: 120px; --r: -9deg; }
.tools li:nth-child(2) { --x: -60px; --y: -205px; --z: 40px; --r: 3deg; }
.tools li:nth-child(3) { --x: 110px; --y: -190px; --z: -80px; --r: -5deg; }
.tools li:nth-child(4) { --x: 170px; --y: -95px; --z: -30px; --r: 7deg; }
.tools li:nth-child(5) { --x: 185px; --y: 15px; --z: 160px; --r: -6deg; }
.tools li:nth-child(6) { --x: 150px; --y: 125px; --z: -90px; --r: -10deg; }
.tools li:nth-child(7) { --x: 40px; --y: 205px; --z: 30px; --r: 4deg; }
.tools li:nth-child(8) { --x: -120px; --y: 170px; --z: -40px; --r: -4deg; }
.tools li:nth-child(9) { --x: -185px; --y: 75px; --z: 60px; --r: 8deg; }
.tools li:nth-child(n+10) { --x: -195px; --y: -25px; --z: -140px; --r: 5deg; }
.core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(380px, 88%); background: var(--band); color: var(--band-ink); border-radius: var(--r); padding: 22px 24px; display: grid; gap: 6px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); z-index: 2; scale: calc(.82 + var(--p) * .18); }
.core .wp-block-image img { display: block; height: 52px; width: auto; margin-left: -6px; }
.core p { color: var(--band-ink-2); font-size: .95rem; }
.cr-blk .core-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.core-list li { font-size: .82rem; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--band-ink) 10%, transparent); color: var(--band-ink); margin: 0; }
.core-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 7px; vertical-align: .1em; }
.sat { position: absolute; left: 50%; translate: -50% 0; z-index: 3; white-space: nowrap; font-size: .82rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1.5px dashed var(--coral); background: var(--bg); color: var(--ink); }
.sat.top { top: calc(50% - 158px); }
.sat.bot { top: calc(50% + 120px); }
.sat.top::after, .sat.bot::before { content: ""; position: absolute; left: 50%; width: 0; height: 30px; border-left: 1.5px dashed var(--coral); }
.sat.top::after { top: 100%; }
.sat.bot::before { bottom: 100%; }
.morph.live .sat { opacity: calc(var(--p) * 3 - 2); }
.morph.live .morph-track { height: 240vh; }
.morph.live .morph-sticky { position: sticky; top: calc(var(--admin-bar) + 69px); min-height: calc(100vh - 69px - var(--admin-bar)); display: grid; align-items: center; padding-block: 32px; }
.morph.live .core { opacity: calc(.5 + var(--p) * .5); }
.morph.live .core-list { opacity: calc(var(--p) * 2.4 - 1.3); }
@media (max-width: 860px) {
	.sat { font-size: .72rem; padding: 5px 10px; }
	.sat.top { top: calc(50% - 135px); }
	.sat.bot { top: calc(50% + 100px); }
	.sat.top::after, .sat.bot::before { height: 22px; }
	.morph-grid { grid-template-columns: 1fr; }
	.morph-stage { height: 380px; --k: .56; }
	.tools li { font-size: .8rem; padding: 7px 10px; }
	.core { width: min(300px, 86%); padding: 18px; }
	.core .wp-block-image img { height: 42px; }
	/* Am Handy: Werkzeuge als Liste, darunter die Cremio-Karte */
	.morph:not(.live) .morph-stage { height: auto; perspective: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
	.morph:not(.live) .tools { position: static; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
	.morph:not(.live) .tools li { position: static; translate: none; transform: none; opacity: 1; box-shadow: none; font-size: .76rem; padding: 5px 9px; }
	.morph:not(.live) .tools::after { content: ""; flex: 0 0 100%; height: 30px; margin-top: 6px; background: repeating-linear-gradient(to bottom, var(--coral) 0 4px, transparent 4px 8px) center / 1.5px 100% no-repeat; }
	.morph:not(.live) .core { position: relative; left: auto; top: auto; translate: none; scale: 1; width: min(340px, 100%); }
	.morph:not(.live) .sat { position: static; translate: none; }
	.morph:not(.live) .sat::before, .morph:not(.live) .sat::after { display: none; }
}

/* ---------- 4. Beispiel-Cockpit ---------- */
.live-demo { background: var(--paper); }
.demo-note { font-size: .95rem; color: var(--ink); border-left: 3px solid var(--coral); padding-left: 14px; max-width: 68ch; }
.cr-blk .demo-views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.demo-views .wp-block-button__link {
	font-weight: 600;
	font-size: .92rem;
	padding: 9px 16px;
	border: 1.5px solid var(--line-strong);
	color: var(--ink);
	background: var(--card);
}
.demo-views .wp-block-button__link:hover { border-color: var(--ink); background: var(--card); color: var(--ink); }
.demo-views .on .wp-block-button__link { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.browser { border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .45); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.browser-bar::before { content: ""; flex: none; width: 42px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, var(--line-strong) 98%, transparent) 0 0 / 16px 10px repeat-x; }
.browser-bar p { font-size: .8rem; color: var(--ink-2); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Höhe wie im Entwurf */
.browser-view { position: relative; width: 100%; height: clamp(520px, calc(100vh - 190px), 800px); }
.browser-view .poster, .browser-view .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.browser-view .demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.demo-tip { display: none; }
/* Am Handy: ohne Leiste, Bereichs-Knöpfe in einer Zeile zum Wischen, Hinweis unter dem Rahmen */
@media (max-width: 859px) {
	.browser-bar { display: none; }
	.browser-view { height: clamp(460px, calc(100svh - 150px), 760px); }
	.cr-blk .demo-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px 3px 4px; margin: 0 -3px 12px; }
	.cr-blk .demo-views::-webkit-scrollbar { display: none; }
	.cr-blk .demo-views .wp-block-button { flex: none; }
	.cr-blk .demo-tip { display: block; margin-top: 12px; font-size: .88rem; color: var(--ink-2); }
}

/* ---------- 5. Sprach-Beispiel und Handy ---------- */
.voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.voice-copy { display: grid; gap: 14px; min-width: 0; }
.voice-flow { padding: clamp(18px, 3vw, 30px); display: grid; gap: 16px; background: var(--band); border-radius: 22px; color: var(--band-ink); min-width: 0; }
.voice-flow > * { display: grid; gap: 8px; min-width: 0; }
.v-step { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--band-ink-2); }
.v-bubble { background: var(--coral); color: var(--on-coral); border-radius: 18px 18px 18px 6px; padding: 14px 16px; font-weight: 600; display: flex; gap: 12px; align-items: center; line-height: 1.4; }
.wave { display: inline-flex; gap: 3px; align-items: center; height: 22px; flex: none; }
.wave i { width: 3px; height: 40%; border-radius: 2px; background: var(--on-coral); animation: cr-wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -.25s; } .wave i:nth-child(3) { animation-delay: -.5s; } .wave i:nth-child(4) { animation-delay: -.75s; } .wave i:nth-child(5) { animation-delay: -.4s; }
@keyframes cr-wave { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.v-box { background: var(--card); color: var(--ink); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; font-size: .92rem; }
.v-title { font-weight: 700; margin-bottom: 4px !important; font-size: 1rem; }
.v-box .v-dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px; font-weight: 500; }
.v-box .v-dl strong { font-weight: 400; color: var(--ink-2); }
.v-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-row .v-sub { display: block; color: var(--ink-2); font-size: .82rem; font-weight: 400; }
.v-btn { flex: none; background: var(--coral); color: var(--on-coral); font-weight: 600; border-radius: 999px; padding: 8px 14px; font-size: .88rem; }
.voice-flow.play > * { animation: cr-pop .6s ease-out both; }
.voice-flow.play > :nth-child(2) { animation-delay: .9s; }
.voice-flow.play > :nth-child(3) { animation-delay: 1.8s; }
@keyframes cr-pop { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .voice { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .v-box .v-dl { grid-template-columns: 1fr; gap: 0; } .v-box .v-dl + .v-dl { margin-top: 4px !important; } }

.phone-sec { background: var(--paper); }
.phone-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.phone-grid .copy { display: grid; gap: 16px; min-width: 0; }
.phones { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.12; perspective: 1400px; justify-self: center; }
.cr-blk .ph-dev { position: absolute; margin: 0; width: 44%; padding: 7px; border-radius: 30px; background: var(--device); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .6); }
.ph-dev img { display: block; width: 100%; height: auto; border-radius: 24px; }
.ph-dev.a { left: 6%; top: 0; transform: rotateY(16deg) rotateZ(-3deg); }
.ph-dev.b { right: 4%; top: 9%; transform: rotateY(-16deg) rotateZ(3deg); }
.cr-blk .dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dots li { display: flex; gap: 12px; align-items: baseline; }
.dots li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transform: translateY(-1px); }
@media (max-width: 860px) { .phone-grid { grid-template-columns: 1fr; } .phones { order: 2; } }

/* ---------- 6. Branchen-Umschalter ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .label, .band .lead { color: var(--band-ink-2); }
.band a { color: var(--band-ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabs button { font: 600 .95rem/1.4 var(--f-body); color: var(--band-ink); background: transparent; border: 1.5px solid var(--band-line); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.tabs button:hover { border-color: var(--band-ink-2); }
.tabs button[aria-selected="true"] { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.tab-panels { display: grid; gap: 56px; }
.tab-panels.is-tabs { gap: 0; }
.tab-label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--coral); }
.tab-panels.is-tabs .tab-label { display: none; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.panel > .tab-label { grid-column: 1 / -1; }
.panel .copy { display: grid; gap: 16px; min-width: 0; }
.panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.panel .copy > p { color: var(--band-ink-2); }
.panel .copy > p:last-child a { color: var(--band-ink); }
.cr-blk .feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.feat li { padding: 11px 0; border-top: 1px solid var(--band-line); display: flex; gap: 10px; align-items: baseline; margin: 0; }
.feat li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--coral); flex: none; transform: translateY(-2px); }
.panel .app { border-color: transparent; }
.shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55); position: relative; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { position: absolute; right: 10px; top: 10px; }
.panel[hidden] { display: none; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cr-blk .feat { grid-template-columns: 1fr; } }

/* ---------- 7. Zeit-Check ---------- */
.cr-blk .check-hint { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.check { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.check-list { display: grid; border-top: 1px solid var(--line-strong); }
.check-item { border-bottom: 1px solid var(--line-strong); padding: 18px 14px; display: grid; gap: 4px; }
/* Titel farbig und fett, Beschreibung darunter normal */
.check-item .t { font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--coral-ink); }
.check-item .d { font-weight: 400; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.check.is-live .check-item { padding: 0; }
/* Ganze Zeile ist anklickbar (Label um das Kästchen) */
.check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 14px; min-height: 44px; cursor: pointer; transition: background-color .15s; }
.check-row:hover { background: color-mix(in srgb, var(--coral) 6%, transparent); }
.check-row:has(input:checked) { background: var(--coral-soft); }
.check-row:has(input:checked) .d { color: var(--ink); }
.check-row:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: -3px; border-radius: 4px; }
.check-text { display: grid; gap: 4px; }
.check-text .t, .check-text .d { display: block; }
.check-row input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ink-2); border-radius: 6px; background: var(--card) center / 14px 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.check-row input:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' fill='none' stroke='%23F9F8F5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-row input:focus-visible { outline: none; }
/* Kontaktbox rechts */
.check-result { position: sticky; top: calc(var(--admin-bar) + 92px); background: var(--band); color: var(--band-ink); border-radius: var(--r); padding: clamp(22px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.cr-blk .check-result h3 { color: var(--band-ink); font-size: 1.3rem; line-height: 1.25; }
.check-result p { color: var(--band-ink-2); font-size: .98rem; line-height: 1.55; }
.check-result .check-status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--band-ink) 10%, transparent); color: var(--band-ink); font-size: .85rem; font-weight: 600; line-height: 1.4; }
.check-result .check-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.check-result .check-status[hidden] { display: none; }
.check-result .wp-block-buttons { justify-self: start; margin-top: 6px; }
@media (max-width: 860px) { .check { grid-template-columns: 1fr; } .check-result { position: static; } }
@media (max-width: 480px) {
	.check-row { padding: 16px 10px; gap: 14px; }
	.check-result .wp-block-buttons { justify-self: stretch; }
	.check-result .wp-block-button, .check-result .wp-block-button__link { width: 100%; }
}

/* ---------- 8. Ablauf, Trio, Offerte, Für wen ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); counter-reset: s; }
.steps > * { counter-increment: s; display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-strong); position: relative; }
.steps > *::before { content: counter(s, decimal-leading-zero); font-size: .78rem; color: var(--coral-ink); letter-spacing: .06em; }
.steps p { color: var(--ink-2); font-size: .97rem; }
.steps.long { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps .gone { font-size: .88rem; color: var(--ink-2); border-top: 1px dashed var(--line-strong); padding-top: 8px; margin-top: 2px; }
.steps .gone strong { color: var(--coral-ink); font-weight: 600; }
.steps.flow > * { display: flex; flex-direction: column; gap: 10px; }
.steps.flow .gone { margin-top: auto !important; }
.flow-end { margin-top: 32px !important; display: grid; gap: 8px; max-width: 72ch; border-left: 3px solid var(--coral); padding-left: 20px; }
@media (max-width: 980px) { .steps, .steps.long { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps, .steps.long { grid-template-columns: 1fr; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.trio > * { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: 18px; }
.trio p { color: var(--ink-2); }
.cost-note { font-weight: 600; color: var(--ink); border-left: 3px solid var(--coral); padding-left: 14px; max-width: 68ch; }
.trio + .cost-note, .trio ~ .muted { margin-top: 24px !important; max-width: 68ch; }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; } }

.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-top: clamp(56px, 8vw, 96px) !important; padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.pricing:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.cost-copy { display: grid; gap: 16px; }
.offer { background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: clamp(18px, 3vw, 28px); }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 4px !important; }
.offer-head .wp-block-image img { display: block; height: 30px; width: auto; margin-left: -4px; }
.offer-head p { font-size: .82rem; color: var(--ink-2); }
.offer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px dashed var(--line-strong); }
.offer-row:last-child { border-bottom: 0; }
.offer-row .dt { font-weight: 600; color: var(--ink); }
.offer-row .dd { color: var(--ink-2); font-size: .95rem; grid-column: 1; }
.offer-row .when { grid-column: 2; grid-row: 1; font-size: .82rem; color: var(--coral-ink); font-weight: 600; white-space: nowrap; text-align: right; }
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } }

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.fit > * { border-top: 2px solid var(--ink); padding: 18px 0 0; display: grid; gap: 14px; align-content: start; }
.fit > .no { border-top: 2px dashed var(--ink-2); }
.cr-blk .fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fit li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); }
.fit li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.fit .yes li::before { background: var(--coral); }
.fit .no li::before { border: 1.5px solid var(--ink-2); }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* ---------- 9. Persönlich ---------- */
.person { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cr-blk .person > h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.person .copy { display: grid; gap: 16px; min-width: 0; }
.cr-blk .pquote { margin: 0; display: grid; gap: 10px; border-left: 3px solid var(--coral); padding: 0 0 0 20px; }
.pquote p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.4; color: var(--ink); }
.pquote cite { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.contact { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .98rem; }
.contact > * { display: grid; gap: 2px; }
.contact .c-label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.contact .c-val { font-weight: 600; }
.contact .c-val a { color: var(--ink); }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } }

/* ---------- 10. FAQ, Antwortbox, Auf einen Blick, Tabelle, Karten ---------- */
.faq { display: grid; border-top: 1px solid var(--line-strong); max-width: 860px; }
.faq-title { margin-bottom: 14px !important; }
.faq .wp-block-details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; position: relative; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.4rem; color: var(--coral-ink); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > :not(summary) { color: var(--ink-2); max-width: 68ch; margin: 0 0 10px; }
.faq details > :last-child:not(summary) { margin-bottom: 20px; }
.faq-group { display: grid; gap: 14px; }
.split.faq-split { align-items: start; }

.answer { border-left: 3px solid var(--coral); padding: 4px 0 4px 22px; display: grid; gap: 12px; max-width: 72ch; }
.answer p:not(.label) { font-size: 1.1rem; }
.box { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.cr-blk .box.glance h2 { font-size: 1.35rem; }
.glance-dl { display: grid; gap: 8px; }
/* Bezeichnung links, Text rechts. Kein Raster, damit Links und Kommas im Satz zusammenbleiben. */
.glance-dl p { display: block; position: relative; padding-left: calc(8.5em + 20px); color: var(--ink-2); }
.glance-dl p strong { position: absolute; left: 0; top: 0; width: 8.5em; font-weight: 600; color: var(--ink); }
.box ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 560px) {
	.glance-dl p { padding-left: 0; }
	.glance-dl p strong { position: static; display: block; width: auto; }
}
.stack-40 { display: grid; gap: 40px; }

.tbl { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); margin: 0; }
.tbl table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .96rem; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); vertical-align: top; }
.tbl thead { border: 0; }
.tbl thead th { border-top: 0; font-size: 1.02rem; background: var(--paper); font-weight: 700; }
.tbl thead th:last-child { background: var(--ink); color: var(--bg); }
.tbl tbody th { font-weight: 600; width: 24%; }
.tbl td:last-child { background: var(--coral-soft); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 22px; display: grid; gap: 10px; align-content: start; color: var(--ink); background: var(--card); grid-template-rows: auto auto 1fr auto; position: relative; transition: border-color .15s; }
.card:has(a:hover) { border-color: var(--ink); }
.card p { color: var(--ink-2); font-size: .97rem; }
.card .label { font-size: .74rem; }
.card .go { font-weight: 600; color: var(--coral-ink); align-self: end; }
.card .go a { text-decoration: none; color: inherit; }
/* Der Link liegt auf dem Titel und deckt die ganze Karte ab */
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h2 a:focus-visible { outline: 0; }
.card:has(h2 a:focus-visible) { outline: 3px solid var(--coral); outline-offset: 3px; }
.card .go a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .go a:focus-visible { outline: 0; }
.card:has(.go a:focus-visible) { outline: 3px solid var(--coral); outline-offset: 3px; }
.card.soonc { background: transparent; border-style: dashed; }
.card.soonc .go:not(:has(a)) { color: var(--ink-2); }
.tbl figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .cards { grid-template-columns: 1fr; } }

/* Funktionsgruppen (zwei Spalten mit Fragen) */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px); }
.fgrid > * { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cr-blk .fgrid h2 { font-size: 1.6rem; }
.cr-blk .fgrid ul { margin: 0; padding-left: 1.15em; display: grid; gap: 4px; color: var(--ink-2); }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr; } }

/* ---------- Seiten aus Auftrag 5: Fragen, Artikel, Anfrage, Rechtliches ---------- */
.cr-blk .faq-group > h2:not(.h3) { font-size: 1.4rem; }
.cr-blk .prose > h2:not(:first-child) { margin-top: .9em; }
.cr-blk .interesse-split { align-items: start; }
@media (max-width: 480px) { .cr-blk h1, .cr-blk h2 { hyphens: auto; -webkit-hyphens: auto; } }
@media (max-width: 420px) { .cr-blk h1.h1-s { font-size: 1.8rem; } }
.cr-blk .h1-m { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cr-blk .h1-s { font-size: clamp(2rem, 4vw, 3rem); }
.article { display: grid; gap: 1.05em; max-width: 70ch; }
.cr-blk .article h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cr-blk .article h2 { margin-top: 1em; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.cr-blk .article ul, .cr-blk .article ol { margin: 0; padding-left: 1.25em; display: grid; gap: .45em; }
.cr-blk .article .faq { margin-top: .2em; }
.label strong { color: var(--coral-ink); font-weight: 500; }
.meta-line { font-size: .74rem; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }
.crumbs-row { margin-bottom: 22px !important; }
.legal { display: grid; gap: 1em; }
.cr-blk .wrap.legal { max-width: 1200px; }
.cr-blk .wrap.legal > * { max-width: 72ch; }
.cr-blk .legal h2 { font-size: 1.35rem; margin-top: 1.1em; }
.steps.one { grid-template-columns: 1fr !important; margin-top: 8px !important; }
.anfrage-formular { display: grid; gap: 16px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); align-content: start; }
.anfrage-formular .hint { font-size: .86rem; color: var(--ink-2); }

/* Formular «Persönliche Demo anfragen» */
form.interest { display: grid; gap: 16px; position: relative; }
form.interest .f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { form.interest .f2 { grid-template-columns: 1fr; } }
form.interest .feld { display: grid; gap: 6px; align-content: start; }
form.interest label { font-weight: 600; font-size: .94rem; color: var(--ink); }
form.interest label .opt { font-weight: 400; color: var(--ink-2); }
form.interest input, form.interest select, form.interest textarea { font: 400 1rem var(--f-body); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 12px 13px; width: 100%; margin: 0; }
form.interest select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F2A20' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
form.interest textarea { min-height: 120px; resize: vertical; }
/* «Bitte wählen» bei Branche wie ein Platzhalter */
form.interest select:invalid { color: var(--ink-2); }
form.interest select option { color: var(--ink); }
/* Stern bei Pflichtfeldern */
form.interest .pflicht { color: var(--coral-ink); margin-left: 3px; }
form.interest input:focus, form.interest select:focus, form.interest textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
form.interest .has-error input, form.interest .has-error select, form.interest .has-error textarea { border-color: var(--coral-ink); }
form.interest .feld-fehler { font-size: .86rem; font-weight: 500; color: var(--coral-ink); }
/* Bereiche aus dem Zeit-Check */
form.interest fieldset.bereiche { border: 0; margin: 0; padding: 0; min-width: 0; }
form.interest fieldset.bereiche legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .94rem; color: var(--ink); }
form.interest legend .opt { font-weight: 400; color: var(--ink-2); }
form.interest .bereiche-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
form.interest .bereich { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--bg); font-weight: 500; font-size: .94rem; cursor: pointer; transition: background-color .15s, border-color .15s; }
form.interest .bereich:hover { border-color: var(--ink-2); }
form.interest .bereich:has(input:checked) { background: var(--coral-soft); border-color: var(--coral-ink); }
form.interest .bereich:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 2px; }
form.interest .bereich input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; padding: 0; margin: 0; flex: none; border: 2px solid var(--ink-2); border-radius: 5px; background: var(--card) center / 12px 12px no-repeat; box-shadow: none; cursor: pointer; }
form.interest .bereich input:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' fill='none' stroke='%23F9F8F5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
form.interest .bereich input:focus { outline: none; box-shadow: none; }
/* Softwarekosten mit CHF davor */
form.interest .chf-feld { display: flex; align-items: center; max-width: 280px; background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: 10px; }
form.interest .chf-feld span { padding-left: 13px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
form.interest .chf-feld input { border: 0; background: transparent; padding-left: 8px; }
form.interest .chf-feld input:focus { box-shadow: none; }
form.interest .chf-feld:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
form.interest .has-error .chf-feld { border-color: var(--coral-ink); }
form.interest .feld-hilfe { font-size: .86rem; color: var(--ink-2); }
form.interest button { justify-self: start; cursor: pointer; border: 0; }
form.interest button:disabled { opacity: .7; cursor: wait; }
.cr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { background: var(--paper); border-radius: 10px; padding: 14px 16px; font-size: .95rem; }
.form-msg.is-err { border-left: 4px solid var(--coral-ink); }
.form-msg.is-ok { border-left: 4px solid var(--coral); font-weight: 600; color: var(--ink); font-size: 1.05rem; padding: 20px 22px; }
.form-msg:focus { outline: none; }
@media (max-width: 600px) { form.interest button { justify-self: stretch; } }

/* ---------- 12. Fester Knopf am Handy: Zähler ---------- */
.mcta-count { margin: 0; font-size: .8rem; line-height: 1.25; font-weight: 600; color: var(--ink); max-width: 6.5em; }
.mcta-count b { color: var(--coral-ink); font-size: 1.1rem; }
.cr-mcta { gap: 12px; align-items: center; }

/* ---------- 13. Feinschliff Handy, Tablet, Computer (Auftrag 10) ---------- */
/* Bausteine-Wolke: am Computer bis 1320 px etwas enger, damit nichts über den Rand ragt */
@media (min-width: 861px) and (max-width: 1320px) { .morph-stage { --k: 1; } }
/* Ansichten der Beispiel-Demo und Branchen-Umschalter: gut tippbar */
.demo-views .wp-block-button__link, .tabs button { min-height: 44px; }
/* Tastatur-Fokus sichtbar */
.browser-view .demo-frame:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
/* Hinweis über der Vergleichstabelle: nur sichtbar, wenn die Tabelle seitlich gewischt werden muss */
.tbl-hinweis { display: none; }
@media (max-width: 672px) {
	.cr-blk .tbl-hinweis { display: block; font-size: .9rem; color: var(--ink-2); margin-bottom: 10px; }
	.tbl-hinweis::after { content: "\2192"; margin-left: 6px; color: var(--coral-ink); font-weight: 600; }
}
/* Kleine Bezeichnungen am Handy etwas grösser (mind. 12 px) */
@media (max-width: 600px) {
	.label, .card .label, .meta-line { font-size: .78rem; }
	.hero-dark h1 .kicker { font-size: .78rem; }
	.contact .c-label { font-size: .75rem; }
	.demo-tag, .shot figcaption { font-size: .72rem; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	.hl::after, .wave i, .voice-flow.play > * { animation: none; }
	.rig { transition: none; }
}