/* Engel & Kulikov – Zusatz-Styles nur für die Leistungsseiten */
/* ---------- Unterseiten: Hero, Brotkrumen, Eckdaten ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(16px, 3vh, 40px)) 0 clamp(72px, 9vw, 128px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 48px); font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--mist); text-decoration: none; display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--white); }
.page-hero-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; } }
.page-title { font-size: clamp(40px, 4vw + 1rem, 76px); }
.page-title .h1-a, .page-title .acc { display: block; }
.page-title .acc { margin-top: .04em; color: var(--white); }
.page-lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 38ch; }
.facts-card { border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); padding: clamp(20px, 2.6vw, 32px); }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts div:first-child { padding-top: 0; }
.facts dt { font: 500 12px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.facts dd { margin: 0; font-weight: 800; font-size: clamp(20px, .8vw + 16px, 26px); letter-spacing: -.02em; color: var(--white); }
.facts dd small { font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--mist); }
.facts-note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--mist-2); }
.hero-reel { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reel-media--hero { width: min(100%, 300px); border-color: var(--line-2); box-shadow: 0 30px 80px -30px rgb(79 125 255 / .45); }
.hero-reel-cap { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }

/* ---------- Leistungsumfang (fette Stichworte) ---------- */
.spec-list { list-style: none; display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-light-2); }
@media (min-width: 800px) { .spec-list { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); } }
.spec-list li { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--line-light); }
@media (min-width: 560px) { .spec-list li { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; } }
.spec-list strong { font-weight: 800; font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.spec-list span { color: var(--ink-2); }
.price-num--text { font-size: clamp(34px, 1.6vw + 26px, 48px); }

/* ---------- Ablauf als nummerierte Schritte ---------- */
.steps { list-style: none; display: grid; gap: 0 32px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding: 24px 0 36px; border-top: 1px solid var(--line-2); }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--halo); transform-origin: left; transform: scaleX(1); box-shadow: 0 0 10px rgb(79 125 255 / .6); }
.js .step::before { transform: scaleX(0); transition: transform .9s var(--ease) calc(var(--i, 0) * 120ms + 150ms); }
.js .step.is-in::before { transform: scaleX(1); }
.step-num { display: block; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--halo-hi); }
.step .h3 { margin-top: 14px; }
.step p { margin-top: 10px; color: var(--mist); max-width: 34ch; }

/* ---------- Womit wir arbeiten ---------- */
.tools { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.tool { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transition: background-color .25s; }
.tool:hover { background: rgb(255 255 255 / .04); }
.tool-tag { align-self: flex-start; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line-2); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.tool-name { margin-top: 6px; font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; color: var(--white); }
.tool p { color: var(--mist); font-size: 15.5px; line-height: 1.55; }
.tools-note { margin-top: 20px; font-size: 14px; color: var(--mist-2); }




@media (prefers-reduced-motion: reduce) {
  .js .step::before { transform: scaleX(1); }
}

/* ---------- Motion-Graphics-Beispiele (Reels-Seite) ---------- */
.mg-grid { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 700px) { .mg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); } }
.mg-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mg-item figcaption { display: flex; gap: 10px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.mg-num { color: var(--halo-hi); }
.mg { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); container-type: inline-size; isolation: isolate; box-shadow: 0 30px 70px -40px rgb(79 125 255 / .55); font-family: var(--f-sans); color: var(--white); }
.mg > * { position: absolute; }
.mg:not(.is-playing) *, .mg:not(.is-playing) *::before, .mg:not(.is-playing) *::after, .is-paused .mg *, .is-paused .mg *::before, .is-paused .mg *::after { animation-play-state: paused !important; }
.mg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.mg-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mg-toggle:hover { border-color: var(--halo); background: rgb(79 125 255 / .1); }
.mg-toggle .i { width: 18px; height: 18px; }
.mg-toggle .i-play, .mg-toggle[aria-pressed="true"] .i-pause { display: none; }
.mg-toggle[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .mg-toggle { display: none; }
.mg-note { font-size: 14px; color: var(--mist-2); max-width: 60ch; }

/* 01 · Logo-Reveal (5 s) */
.mg--reveal { background: radial-gradient(120% 70% at 50% 36%, #16307a 0%, #0a1430 45%, #050608 100%); }
.mg1-glow { left: 50%; top: 36%; width: 90cqw; aspect-ratio: 1; margin: -45cqw 0 0 -45cqw; border-radius: 50%; background: radial-gradient(circle, rgb(79 125 255 / .55), rgb(79 125 255 / 0) 62%); animation: mg1-glow 5s var(--ease) infinite; }
.mg1-ring { left: 50%; top: 36%; width: 58cqw; height: 58cqw; margin: -29cqw 0 0 -29cqw; overflow: visible; animation: mg1-spin 5s linear infinite; }
.mg1-ring circle { fill: none; stroke: var(--halo-hi); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 277; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 3px rgb(79 125 255 / .9)); animation: mg1-draw 5s cubic-bezier(.65, 0, .35, 1) infinite; }
.mg1-mono { left: 0; right: 0; top: 36%; transform: translateY(-50%); text-align: center; font-weight: 900; font-size: 22cqw; letter-spacing: -.05em; line-height: 1; animation: mg1-mono 5s var(--ease) infinite; }
.mg1-word { left: 0; right: 0; top: 66%; display: flex; justify-content: center; gap: 3cqw; overflow: hidden; padding: 1cqw 0; font-weight: 800; font-size: 12cqw; letter-spacing: -.02em; line-height: 1; }
.mg1-word > span { display: block; animation: mg1-rise 5s var(--ease) infinite; }
.mg1-b { color: var(--halo-hi); }
.mg1-word > .mg1-b { animation-name: mg1-rise-b; }
.mg1-word::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .75), transparent); mix-blend-mode: overlay; animation: mg1-shine 5s ease-in-out infinite; }
.mg1-tag { left: 0; right: 0; top: 79%; text-align: center; font: 500 3.6cqw/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); animation: mg1-tag 5s var(--ease) infinite; }
@keyframes mg1-glow { 0% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; transform: scale(1); } 60% { opacity: .75; transform: scale(1.08); } 86% { opacity: .8; } 96%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes mg1-spin { 0% { transform: rotate(0); opacity: 1; } 86% { opacity: 1; } 96%, 100% { transform: rotate(80deg); opacity: 0; } }
@keyframes mg1-draw { 0% { stroke-dashoffset: 277; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes mg1-mono { 0%, 16% { opacity: 0; transform: translateY(-50%) scale(.55); } 28% { opacity: 1; transform: translateY(-50%) scale(1.08); } 34% { transform: translateY(-50%) scale(1); } 86% { opacity: 1; transform: translateY(-50%) scale(1); } 96%, 100% { opacity: 0; transform: translateY(-50%) scale(1.15); } }
@keyframes mg1-rise { 0%, 28% { transform: translateY(115%); } 38% { transform: translateY(0); } 86% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(-30%); opacity: 0; } }
@keyframes mg1-rise-b { 0%, 33% { transform: translateY(115%); } 43% { transform: translateY(0); } 86% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(-30%); opacity: 0; } }
@keyframes mg1-shine { 0%, 48% { left: -40%; } 62%, 100% { left: 120%; } }
@keyframes mg1-tag { 0%, 50% { opacity: 0; transform: translateY(8px); } 60% { opacity: 1; transform: none; } 86% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* 02 · Kinetic Type (6 s) */
.mg--kinetic { background: var(--halo); }
.mg2-panel { inset: 0; display: grid; place-items: center; align-content: center; gap: 7cqw; }
.mg2-panel b { font-weight: 900; font-size: 23cqw; letter-spacing: -.05em; line-height: 1; }
.mg2-a { z-index: 1; background: var(--halo); color: var(--ink); }
.mg2-b { z-index: 2; background: var(--paper); color: var(--navy); animation: mg2-b 6s cubic-bezier(.75, 0, .2, 1) infinite; }
.mg2-c { z-index: 3; background: var(--navy-2); color: var(--white); animation: mg2-c 6s cubic-bezier(.75, 0, .2, 1) infinite; }
.mg2-d { z-index: 4; background: var(--ink); animation: mg2-d 6s cubic-bezier(.75, 0, .2, 1) infinite; }
.mg2-a b { animation: mg2-wa 6s var(--ease) infinite; }
.mg2-b b { animation: mg2-wb 6s var(--ease) infinite; }
.mg2-c b { animation: mg2-wc 6s var(--ease) infinite; }
.mg2-c b::after { content: ""; display: block; height: 1.6cqw; margin-top: 2cqw; border-radius: 1cqw; background: var(--halo); transform-origin: left; animation: mg2-line 6s var(--ease) infinite; }
.mg2-badge { display: grid; place-items: center; width: 46cqw; aspect-ratio: 1; border: .8cqw solid var(--white); border-radius: 10cqw; font-weight: 900; font-size: 10cqw; line-height: .95; letter-spacing: -.03em; text-align: center; color: var(--white); animation: mg2-badge 6s var(--ease) infinite; }
.mg2-cta { padding: 3cqw 6cqw; border-radius: 99cqw; background: var(--halo); color: var(--ink); font-weight: 700; font-size: 4.6cqw; animation: mg2-cta 6s var(--ease) infinite; }
@keyframes mg2-b { 0%, 20% { transform: translateY(101%); } 25% { transform: translateY(0); } 95% { transform: translateY(0); } 95.5%, 100% { transform: translateY(101%); } }
@keyframes mg2-c { 0%, 40% { transform: translateY(-101%); } 45% { transform: translateY(0); } 95% { transform: translateY(0); } 95.5%, 100% { transform: translateY(-101%); } }
@keyframes mg2-d { 0%, 60% { clip-path: circle(0% at 50% 50%); opacity: 1; } 67% { clip-path: circle(80% at 50% 50%); } 93% { clip-path: circle(80% at 50% 50%); opacity: 1; } 100% { clip-path: circle(80% at 50% 50%); opacity: 0; } }
@keyframes mg2-wa { 0% { transform: scale(1.4) rotate(-6deg); opacity: 0; } 8% { transform: none; opacity: 1; } 20% { transform: scale(.94); } 100% { transform: scale(.94); } }
@keyframes mg2-wb { 0%, 22% { transform: translateY(40%) skewY(8deg); opacity: 0; } 30% { transform: none; opacity: 1; } 40%, 100% { transform: scale(.94); } }
@keyframes mg2-wc { 0%, 42% { transform: scale(.6); opacity: 0; } 50% { transform: scale(1.06); opacity: 1; } 54%, 100% { transform: none; } }
@keyframes mg2-line { 0%, 50% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes mg2-badge { 0%, 63% { transform: scale(.4) rotate(-12deg); opacity: 0; } 71% { transform: scale(1.08) rotate(2deg); opacity: 1; } 75%, 100% { transform: none; opacity: 1; } }
@keyframes mg2-cta { 0%, 74% { transform: translateY(30%); opacity: 0; box-shadow: 0 0 0 0 rgb(79 125 255 / .6); } 80% { transform: none; opacity: 1; box-shadow: 0 0 0 0 rgb(79 125 255 / .6); } 88% { box-shadow: 0 0 0 4cqw rgb(79 125 255 / 0); } 100% { box-shadow: 0 0 0 4cqw rgb(79 125 255 / 0); } }

/* 03 · Shape-Morph (6 s) */
.mg--morph { background: radial-gradient(110% 60% at 50% 38%, #0f1f55, #050608 70%); }
.mg3-grid { inset: -10cqw; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 10cqw 10cqw; animation: mg3-grid 6s linear infinite; }
.mg3-shape { left: 50%; top: 38%; opacity: 0; }
.mg3-circle { width: 18cqw; height: 18cqw; border-radius: 50%; background: var(--halo); animation: mg3-circle 6s cubic-bezier(.7, 0, .25, 1) infinite; }
.mg3-square { width: 16cqw; height: 16cqw; border-radius: 3cqw; background: var(--mist); animation: mg3-square 6s cubic-bezier(.7, 0, .25, 1) infinite; }
.mg3-tri { width: 19cqw; height: 17cqw; background: var(--white); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: mg3-tri 6s cubic-bezier(.7, 0, .25, 1) infinite; }
.mg3-pill { width: 24cqw; height: 9cqw; border-radius: 9cqw; background: var(--halo-hi); animation: mg3-pill 6s cubic-bezier(.7, 0, .25, 1) infinite; }
.mg3-badge { left: 50%; top: 38%; width: 38cqw; height: 38cqw; margin: -19cqw 0 0 -19cqw; display: grid; place-items: center; border-radius: 11cqw; background: linear-gradient(145deg, var(--halo-hi), var(--navy) 85%); box-shadow: 0 0 0 1px rgb(255 255 255 / .2) inset, 0 4cqw 10cqw -2cqw rgb(79 125 255 / .6); font-weight: 900; font-size: 16cqw; letter-spacing: -.05em; animation: mg3-badge 6s var(--ease) infinite; }
.mg3-word { left: 0; right: 0; top: 66%; text-align: center; font-weight: 800; font-size: 11cqw; letter-spacing: -.02em; line-height: 1; animation: mg3-word 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.mg3-line { left: 26%; right: 26%; top: 75%; height: 1.2cqw; border-radius: 1cqw; background: var(--halo); transform-origin: left; animation: mg3-line 6s var(--ease) infinite; }
.mg3-sub { left: 0; right: 0; top: 81%; text-align: center; font: 500 3.4cqw/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist-2); animation: mg3-sub 6s var(--ease) infinite; }
@keyframes mg3-grid { to { transform: translate(10cqw, 10cqw); } }
@keyframes mg3-circle { 0% { opacity: 1; transform: translate(-50%, -50%) translate(-28cqw, -46cqw) scale(1); } 32% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
@keyframes mg3-square { 0% { opacity: 1; transform: translate(-50%, -50%) translate(26cqw, -34cqw) rotate(45deg); } 32% { opacity: 1; transform: translate(-50%, -50%) rotate(225deg); } 40%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(270deg) scale(0); } }
@keyframes mg3-tri { 0% { opacity: 1; transform: translate(-50%, -50%) translate(-26cqw, 44cqw) rotate(-120deg); } 32% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
@keyframes mg3-pill { 0% { opacity: 1; transform: translate(-50%, -50%) translate(24cqw, 50cqw) rotate(90deg); } 32% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
@keyframes mg3-badge { 0%, 33% { opacity: 0; transform: scale(0) rotate(-30deg); } 42% { opacity: 1; transform: scale(1.12) rotate(4deg); } 47% { transform: none; } 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.85); } }
@keyframes mg3-word { 0%, 48% { clip-path: inset(0 100% 0 0); opacity: 1; } 60% { clip-path: inset(0 0 0 0); } 90% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes mg3-line { 0%, 58% { transform: scaleX(0); opacity: 1; } 68% { transform: scaleX(1); } 90% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes mg3-sub { 0%, 64% { opacity: 0; transform: translateY(6px); } 72% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after { animation: none !important; }
  .mg-toggle { display: none; }
}
@media (max-width: 699px) {
  .mg-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mg-grid::-webkit-scrollbar { display: none; }
  .mg-item { flex: 0 0 72%; scroll-snap-align: center; }
  .mg-note::before { content: "Wischen für alle drei Beispiele. "; color: var(--white); }
}

/* ---------- Preis-Stufen ---------- */
.tiers { display: grid; gap: 1px; margin-top: clamp(40px, 5vw, 64px); background: var(--line-light-2); border: 1px solid var(--line-light-2); }
@media (min-width: 700px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiers--3 { grid-template-columns: repeat(3, 1fr); } .tiers--5 { grid-template-columns: repeat(6, 1fr); } .tiers--5 .tier { grid-column: span 2; } .tiers--5 .tier:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1200px) { .tiers--4 { grid-template-columns: repeat(4, 1fr); } }
.tier { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); background: var(--white); color: var(--ink); }
.tier-for { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tier-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-weight: 800; font-size: clamp(21px, .6vw + 17px, 25px); letter-spacing: -.02em; color: var(--ink); }
.tier-badge { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--halo); background: rgb(79 125 255 / .12); font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 16px; }
.tier-num { font-weight: 900; font-size: clamp(25px, 1.1vw + 19px, 32px); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tier-unit { font-size: 14px; color: var(--ink-2); }
.tier-meta { margin-top: 10px; font: 500 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tier .checks { margin: 20px 0 0; padding-top: 18px; font-size: 15px; }
.tier--featured { background: var(--navy); color: var(--mist); }
.tier--featured .tier-title, .tier--featured .tier-num { color: var(--white); }
.tier--featured .tier-for, .tier--featured .tier-unit, .tier--featured .tier-meta { color: var(--mist); }
.tier--featured .tier-badge { color: var(--white); }
.tier--featured .checks { border-top-color: var(--line-2); }
#preise .cta-row { margin-top: 28px; }

/* ---------- Automatisierung: Vorher / Nachher ---------- */
.ba-ex-list { list-style: none; display: grid; gap: 1px; margin-top: clamp(40px, 5vw, 64px); background: var(--line-2); border: 1px solid var(--line-2); }
@media (min-width: 900px) { .ba-ex-list { grid-template-columns: 1fr 1fr; } }
.ba-ex { padding: clamp(22px, 2.6vw, 32px); background: var(--ink); }
.ba-ex-title { font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: var(--white); }
.ba-ex-cols { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 560px) { .ba-ex-cols { grid-template-columns: 1fr 1fr; } }
.ba-ex-cols p { padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.ba-ex-before { background: rgb(255 255 255 / .04); color: var(--mist-2); }
.ba-ex-after { background: rgb(79 125 255 / .12); color: var(--white); box-shadow: inset 0 0 0 1px rgb(79 125 255 / .35); }
.ba-ex-label { display: block; margin-bottom: 6px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.ba-ex-after .ba-ex-label { color: var(--halo-hi); }
.calc { margin-top: 28px; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--halo); background: rgb(79 125 255 / .06); }
.calc-label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--halo-hi); }
.calc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 12px; font-size: clamp(18px, .8vw + 14px, 24px); color: var(--white); }
.calc-line span:nth-child(even) { color: var(--mist-2); }
.calc-line strong { font-weight: 800; color: var(--white); }
.calc-note { margin-top: 10px; font-size: 14px; color: var(--mist-2); }

/* ---------- Videoüberwachung: Kabel vs. Funk ---------- */
.vs-list { list-style: none; display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.vs-row { display: grid; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 800px) { .vs-row { grid-template-columns: 180px 1fr 1fr; gap: 28px; align-items: start; } }
.vs-title { font-weight: 700; font-size: 21px; color: var(--white); }
.vs-row p { font-size: 15px; line-height: 1.5; }
.vs-bad { color: var(--mist-2); }
.vs-good { color: var(--white); }
.vs-label { display: block; margin-bottom: 4px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.vs-good .vs-label { color: var(--halo-hi); }
.vs-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 15px; color: var(--mist); }
.vs-note .i { flex: none; margin-top: 2px; color: var(--halo-hi); }
.vs-note strong { color: var(--white); }

.contact-person { margin-top: 20px; color: var(--mist); }
.contact-person strong { color: var(--white); }

/* ---------- Beispiel-Kurzvideo ---------- */
.reel-media { position: relative; justify-self: center; width: min(100%, 260px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0b1230; border: 1px solid var(--line-light-2); }
.reel-poster, .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-toggle {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .3);
  background: rgb(5 6 8 / .72); color: var(--white); font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s;
}
.reel-toggle:hover { background: rgb(5 6 8 / .9); }
.reel-toggle:active { transform: translateY(1px); }
.reel-toggle .i { width: 18px; height: 18px; }
.reel-toggle .i-pause, .reel-toggle[aria-pressed="true"] .i-play { display: none; }
html:not(.js) .reel-toggle { display: none; }
.reel-toggle[aria-pressed="true"] .i-pause { display: block; }
@media (min-width: 1200px) { .tiers--4 .tier-num, .tiers--5 .tier-num { font-size: 26px; } }

/* ---------- Monatspauschale & Preisaufbau (Websites) ---------- */
.tier-monthly { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgb(79 125 255 / .08); font-size: 14px; color: var(--ink-2); }
.tier-monthly-num { font-weight: 800; font-size: 17px; color: var(--navy); font-variant-numeric: tabular-nums; }
.tier--featured .tier-monthly { background: rgb(255 255 255 / .08); color: var(--mist); }
.tier--featured .tier-monthly-num { color: var(--white); }
.pb-split { display: grid; gap: 1px; margin-top: clamp(40px, 5vw, 64px); background: var(--line-light-2); border: 1px solid var(--line-light-2); }
@media (min-width: 1000px) { .pb-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pb-card { padding: clamp(22px, 2.6vw, 34px); background: var(--white); color: var(--ink); }
.pb-when { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pb-h { margin-top: 10px; font-weight: 800; font-size: clamp(21px, .6vw + 17px, 25px); letter-spacing: -.02em; }
.pb-sub { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.pb-card .checks { margin-top: 20px; font-size: 15px; }
.pb-table-wrap { margin-top: 20px; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pb-table th, .pb-table td { padding: 11px 8px; border-bottom: 1px solid var(--line-light); text-align: center; vertical-align: middle; }
.pb-table tbody th { text-align: left; font-weight: 500; color: var(--ink-2); padding-left: 0; }
.pb-table thead th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pb-table td { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pb-price th, .pb-price td { font-weight: 900 !important; font-size: 18px; color: var(--navy) !important; border-bottom-color: var(--line-light-2); }
.pb-table tr > :nth-child(3) { background: rgb(79 125 255 / .06); }
.pb-yes .i { width: 18px; height: 18px; color: var(--halo); vertical-align: middle; }
.pb-no { color: var(--ink-2); }
.pb-example { margin-top: 24px; max-width: 80ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pb-example strong { color: var(--ink); }
@media (max-width: 599px) {
  .pb-table { font-size: 13px; }
  .pb-table th, .pb-table td { padding: 10px 4px; }
  .pb-table td { white-space: normal; }
  .pb-price th, .pb-price td { font-size: 15px; }
}

/* ---------- Live-Beispiel Buchungssystem ---------- */
.live-demo { display: grid; gap: 20px; align-items: center; margin-top: 28px; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--halo); background: rgb(79 125 255 / .08); }
@media (min-width: 1000px) { .live-demo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }
.live-demo-label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--halo-hi); }
.live-demo-title { margin-top: 8px; font-weight: 800; font-size: clamp(21px, .6vw + 17px, 25px); letter-spacing: -.02em; color: var(--white); }
.live-demo-text > p:not(.live-demo-label) { margin-top: 10px; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--mist); }
.live-demo .checks { margin: 18px 0 0; font-size: 15px; color: var(--mist); }
.live-demo-shot { margin: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #f4f7fb; }
.live-demo-shot img { display: block; width: 100%; height: auto; }

/* ---------- Kontaktseite (QR-Code der Visitenkarte) ---------- */
.kontakt-page { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 80px)); min-height: 80vh; }
.kc-grid { display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 800px) { .kc-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.kc { display: grid; align-content: start; gap: 22px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-2); border-radius: 16px; background: rgb(255 255 255 / .03); }
.kc-head { display: flex; align-items: center; gap: 16px; }
.kc-ini { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--navy); border: 1px solid rgb(79 125 255 / .4); font: 800 20px/1 var(--f-sans); color: var(--halo-hi); }
.kc-name { font-weight: 800; font-size: clamp(22px, 1.2vw + 16px, 28px); letter-spacing: -.02em; color: var(--white); }
.kc-role { margin-top: 4px; font-size: 15px; color: var(--mist); }
.kc-save { width: 100%; }
.kc-rows { display: grid; border-top: 1px solid var(--line-2); }
.kc-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 2px; border-bottom: 1px solid var(--line-2); color: var(--white); font-size: 16px; text-decoration: none; }
.kc-row .i { width: 20px; height: 20px; color: var(--halo-hi); flex: none; }
.kc-row:hover { color: var(--halo-hi); }
.kc-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 599px) { .kc-more .btn { flex: 1 1 100%; } }
.kontakt-page .section-head .lead { margin-top: 16px; }
.page-kontakt .fab, .page-kontakt [data-fab-hint] { display: none; }