/* ONSET.digital – Designsystem
   Stand 03.11.2026 (bereinigt): Seitengrund Weiß (--paper), Flächen Creme (--sky-soft / --blush), Text Dunkelbraun #251a1b.
   Akzentfarbe je Leistungswelt über die Body-Klasse (siehe „Welten“ weiter unten):
     body.t-brand = Braun #911e28 · body.t-commerce = Mauve · body.t-systems = Pastell-Lila.
   Schrift: Onest (lokal). Gilda Display + Jost nur für die Lynka-Fallstudie (Kundenmarke).
   Alle Tokens stehen im einen :root-Block unten; neue Farben dort anlegen, nicht im Code verteilen. */

/* Onest lokal (SIL OFL, Lizenz in fonts/OFL-onest.txt) – keine Verbindung zu Google */
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/onest-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #251a1b;
  --paper: #ffffff;
  --white: #ffffff;
  --venus: #988b85;
  --shadz: #a5212c;
  --berry: #911e28;
  --sky: #eee5ea;
  --sky-soft: #fdf7ec;
  --sky-line: #c9bbe8;
  --sky-ink: #2c1f20;
  --sky-glow: rgba(180, 152, 168, .45);
  --berry-soft: #efe7ec;
  --berry-on-dark: #b498a8;
  --g1: #eceae9;
  --g2: #d5d0ce;
  --g3: #756a65;
  --g4: #5b534f;
  --g5: #251a1b;
  --silver: linear-gradient(90deg, var(--venus), var(--berry) 55%, var(--shadz));
  --line: rgba(37, 26, 27, .12);
  --line-strong: rgba(37, 26, 27, .3);
  --r: 4px;
  --r-s: 3px;
  --f-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --f-serif: var(--f-sans);
  --f-mono: var(--f-sans);
  --t-display: clamp(3rem, 1.8rem + 4.6vw, 6rem);
  --t-h1: clamp(2.5rem, 1.7rem + 3.2vw, 5rem);
  --t-h2: clamp(2.1rem, 1.5rem + 2.6vw, 4.5rem);
  --t-h3: clamp(1.35rem, 1.15rem + .7vw, 1.9rem);
  --t-lead: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --t-body: clamp(1.07rem, 1.02rem + .2vw, 1.22rem);
  --t-small: .94rem;
  --t-mono: .78rem;
  --gut: 24px;
  --edge: clamp(20px, 5vw, 72px);
  --max: 1296px; /* 07.11.: eine Standardbreite für Header, Inhalt und Flächen */
  --sec: clamp(72px, 8vw, 128px);
  --ease: var(--ease-out);
  --head-h: 72px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --f-display: var(--f-sans);
  --fs-xs: .8125rem;
  --fs-s: .875rem;
  --fs-m: 1rem;
  --fs-b: 1.0625rem;
  --fs-l: 1.125rem;
  --fs-lead: 1.375rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  --card-line: #e7e7ea;
  --spring: cubic-bezier(.22, 1, .36, 1);
  --blush: #f5f5f6;
  --peach: #f5f5f6;
  --hand: "Caveat", "Segoe Print", cursive;
  --soft: #f6f6f7;
  --tint-berry: #fdf8ee;
  --tint-lilac: #f4f4f6;
  --tint-teal: #f2f2f4;
  --tint-gray: #f5f5f7;
  --lyn-bord: #372629;
  --lyn-deep: #231819;
  --lyn-ivory: #EEE5D2;
  --lyn-champ: #F2E2A1;
  --lyn-linen: #E9DDCD;
  --lyn-ink: #1D1D1B;
  --copper: #b498a8;
  --champagne: #e7dbe2;
  --graphite: radial-gradient(85% 75% at 90% -10%, rgba(149, 31, 40, .38), transparent 62%), radial-gradient(70% 70% at -10% 115%, rgba(51, 35, 37, .45), transparent 62%), linear-gradient(155deg, #251a1b 0%, #251a1b 45%, #251a1b 100%);
  --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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  interpolate-size: allow-keywords;
  --copper-text: var(--sky-ink);
  --soft-panel: linear-gradient(165deg, #ffffff 0%, #fefbf6 45%, #fdf7ed 100%);
  --soft-line: #eee5ea;
  --brown: #911e28;
  --dark: #251a1b;
  --cream: #fcf4e5;
  --mauve: #b498a8;
  --mauve-soft: #f5eff2;
  --mauve-ink: #5e4654;
  --lila: #c9bbe8;
  --lila-soft: #f3effa;
  --lila-ink: #4e3f72;
  --trio: linear-gradient(90deg, var(--brown) 0 33.33%, var(--mauve) 33.33% 66.66%, var(--lila) 66.66%);
  --red: #911e28;
  --red-deep: #5c0f18;
  /* Akzentfarbe (Name historisch „yellow“): seit 07.11.2026 Rosé der neuen CI statt Gelb. Text darauf immer --yellow-ink */
  --yellow: #ecc5c9;
  --yellow-soft: #f6e6e8;
  --yellow-ink: #251a1b;
  --red-ink: #2a0a0f;
  --red-soft: #f9eced;
  --head-total: calc(var(--head-h) + 12px);
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--f-sans);
  font-variation-settings: "wdth" 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
p, li, dd { hyphens: auto; overflow-wrap: break-word; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.02; letter-spacing: -.025em; hyphens: manual; overflow-wrap: break-word; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typo-Helfer ---------- */
.display { font-size: var(--t-display); font-weight: 500; letter-spacing: -.045em; line-height: .92; font-variation-settings: "wdth" 112; }
.h1 { font-size: var(--t-h1); letter-spacing: -.04em; line-height: .96; font-variation-settings: "wdth" 110; }
.h2 { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1; font-variation-settings: "wdth" 108; }
.h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.12; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-variation-settings: normal; }
.lead { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.01em; color: var(--g5); max-width: 38ch; }
.mono { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: normal; }
.muted { color: var(--g4); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--edge)); margin-inline: auto; padding-inline: var(--edge); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.on-white { background: var(--white); }

/* Indexzeile: Nummer · Thema · Haarlinie */
.idx { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.idx::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.idx .mono:first-child { color: var(--g3); }

@media (max-width: 767px) {
  :root { --gut: 16px; --head-h: 64px; }
  .grid > * { grid-column: 1 / -1 !important; }
}

/* ---------- Buttons & Links ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 24px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg); border-radius: 0;
  font-size: 1rem; font-weight: 500; letter-spacing: -.005em; text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { --bg: var(--g5); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); border-color: var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.tlink { display: inline-flex; gap: 10px; align-items: baseline; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 2px; font-weight: 500; }
.tlink:hover, .tlink:focus-visible { background-size: 100% 1px; }
.tlink::after { content: "→"; font-family: var(--f-mono); }

/* ---------- Header & Mega-Menü ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hd__in { display: flex; align-items: center; gap: 32px; height: var(--head-h); }
.logo { font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; font-variation-settings: "wdth" 118; white-space: nowrap; }
.logo span { color: var(--g3); font-weight: 400; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__item > a, .nav__item > button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: none; border: 0; text-decoration: none; font-size: .98rem; }
.nav__item > button::after { content: ""; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.nav__item > button[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav__item > a[aria-current="page"], .nav__item > button.is-current { text-decoration: underline; text-underline-offset: .35em; }
.hd__cta { margin-left: 12px; min-height: 44px; padding: 0 18px; }
.menu-btn { display: none; margin-left: auto; height: 44px; padding: 0 4px; background: none; border: 0; gap: 10px; align-items: center; }
.menu-btn i { display: block; width: 22px; height: 1px; background: currentColor; box-shadow: 0 6px 0 currentColor; transform: translateY(-3px); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 40px 0 48px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 32px var(--gut); }
.mega__grid--sol { grid-template-columns: 1fr 1fr 1.15fr; }
.mega h3 { font-size: var(--t-mono); font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g3); margin: 0 0 12px; font-weight: 400; }
.mega ul { list-style: none; margin: 0 0 28px; padding: 0; }
.mega li a { display: block; padding: 6px 0; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid transparent; }
.mega li a:hover { border-bottom-color: var(--ink); }
.mega li a small { display: block; color: var(--g4); font-size: .84rem; }
.mega li .soon { color: var(--g3); font-size: .95rem; padding: 6px 0; display: block; }
.mega__aside { border-left: 1px solid var(--line); padding-left: 28px; }
.mega__aside p { color: var(--g4); font-size: .98rem; }

@media (max-width: 1100px) {
  .nav, .hd__cta { display: none; }
  .menu-btn { display: inline-flex; }
  /* backdrop-filter würde für fixed-Kinder einen eigenen Bezugsrahmen bilden */
  .hd.is-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .hd.is-menu .nav { display: flex; position: fixed; inset: var(--head-h) 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; padding: 16px var(--edge) 120px; overflow-y: auto; gap: 0; }
  .hd.is-menu .nav__item { border-bottom: 1px solid var(--line); }
  .hd.is-menu .nav__item > a, .hd.is-menu .nav__item > button { width: 100%; height: 60px; font-size: 1.35rem; padding: 0; justify-content: space-between; }
  .hd.is-menu .hd__cta { display: inline-flex; position: fixed; left: var(--edge); right: var(--edge); bottom: 20px; justify-content: space-between; margin: 0; min-height: 56px; }
  .mega { position: static; padding: 0 0 20px; border: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  .mega.is-open { display: block; }
  .mega .wrap { padding: 0; }
  .mega__grid, .mega__grid--sol { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .mega__aside { grid-column: 1 / -1; border: 0; padding: 0; }
}
@media (max-width: 520px) { .mega__grid, .mega__grid--sol { grid-template-columns: 1fr; } }

/* ---------- Breadcrumb ---------- */
.bc { padding-top: 28px; }
.bc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; }
.bc li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--g3); }
.bc a { text-decoration: none; color: var(--g4); }
.bc a:hover { color: var(--ink); }

/* ---------- Bildplatzhalter („Platte“) ---------- */

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.js .clip.is-in { clip-path: inset(0); }

/* ---------- Hero ---------- */
/* Die H1 ist das LCP-Element und wird nie versteckt. Bewegung kommt nur von der Haarlinie darunter. */

/* Seiten-Hero (Unterseiten) */
.phero { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(64px, 7vw, 112px); }
.phero__h { grid-column: 1 / 11; }
.phero__lead { grid-column: 1 / 7; margin-top: 36px; }
.phero__ans { grid-column: 8 / 13; margin-top: 36px; border-left: 1px solid var(--line-strong); padding-left: 24px; font-size: var(--t-small); color: var(--g5); align-self: start; }
.phero__ans .mono { display: block; margin-bottom: 10px; color: var(--g3); }
.phero__vis { grid-column: 1 / -1; margin-top: clamp(56px, 6vw, 96px); }
.phero .btns { margin-top: 32px; }

/* ---------- Vertrauen ---------- */

/* ---------- Positionierung: Stückwerk → System ---------- */
.pieces { position: relative; aspect-ratio: 1; border: 1px solid var(--line-strong); background: var(--white); }
.pos__toggle { margin-top: 64px; }

/* ---------- Explainer (Erklär-Animationen, generisch) ---------- */
.xp { margin: 0; border: 1px solid var(--line-strong); background: var(--white); position: relative; }
.xp__hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.xp__hd .mono:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 10px; vertical-align: 1px; transition: opacity 200ms ease; }
.xp.is-paused .xp__hd .mono:first-child::before { opacity: .3; }
.xp__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.xp__stage { position: relative; padding: clamp(18px, 3vw, 36px); border-right: 1px solid var(--line); min-height: 360px; display: flex; align-items: center; justify-content: center; }
.xp__side { display: flex; flex-direction: column; }
.xp__steps { list-style: none; margin: 0; padding: 0; flex: 1; }
.xp__steps li { border-bottom: 1px solid var(--line); }
.xp__steps button { display: grid; grid-template-columns: 34px 1fr; gap: 6px; width: 100%; text-align: left; padding: 14px 18px; background: none; border: 0; color: var(--g3); transition: color .35s var(--ease), background .35s var(--ease); position: relative; }
.xp__steps button .mono { padding-top: 4px; }
.xp__steps button b { font-weight: 500; display: block; font-size: .98rem; line-height: 1.35; }
.xp__steps button span.d { display: block; font-size: .9rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
.xp__steps button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.xp__steps li.is-done button { color: var(--g4); }
.xp__steps li.is-at button { color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.xp__steps li.is-at button span.d { max-height: 12em; opacity: 1; }
.xp__steps li.is-at button::before { transform: scaleY(1); transition: transform var(--dur, 4.2s) linear; }
.xp.is-paused .xp__steps li.is-at button::before, .xp.is-static .xp__steps li.is-at button::before { transition: none; }
.xp__ctrl { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); }
.xp__ctrl button { height: 40px; min-width: 40px; padding: 0 12px; background: none; border: 1px solid var(--line); border-radius: 0; font-size: .85rem; }
.xp__ctrl button:hover { border-color: var(--line-strong); }
.xp__ctrl .xp__count { margin-left: auto; color: var(--g3); }
.xp__result { padding: 14px 18px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--g4); }
.xp__note { padding: 10px 18px; border-top: 1px solid var(--line); color: var(--g3); font-size: .8rem; }
@media (max-width: 900px) {
  .xp__body { grid-template-columns: 1fr; }
  .xp__stage { border-right: 0; border-bottom: 1px solid var(--line); min-height: 300px; }
}

/* Elemente, die schrittweise erscheinen */
.js :is(.xp, .hero-live) [data-from] { opacity: .14; transition: opacity .6s var(--ease), transform .7s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s; }
.js :is(.xp, .hero-live) [data-from].is-in { opacity: 1; }

/* --- System-Diagramm (Startseite) --- */

/* --- Smartphone-Produktseite (Shopify) --- */
.phone { width: min(280px, 70%); aspect-ratio: 9/19; border: 1px solid var(--ink); border-radius: 30px; padding: 12px; background: var(--paper); position: relative; box-shadow: 0 12px 24px -16px rgba(37,26,27,.3); }
.phone__scr { height: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; font-size: 10px; }
.phone__bar { height: 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-weight: 600; font-size: 9px; letter-spacing: .02em; }
.phone__img { flex: 0 0 38%; display: flex; align-items: flex-end; padding: 8px; font-family: var(--f-mono); font-size: 7px; color: var(--g4); position: relative; }
.phone__dots { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 3px; }
.phone__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--g3); }
.phone__dots i:first-child { background: var(--ink); }
.phone__p { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.phone__t { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.phone__price { display: flex; justify-content: space-between; align-items: center; }
.phone__stars { letter-spacing: 1px; font-size: 9px; }
.phone__var { display: flex; gap: 4px; }
.phone__var i { flex: 1; border: 1px solid var(--line-strong); text-align: center; font-style: normal; padding: 4px 0; font-size: 8px; }
.phone__var i.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.phone__ship { font-size: 8.5px; font-weight: 600; }
.phone__usp { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; font-size: 7px; text-align: center; color: var(--g4); }
.phone__usp span { border-top: 1px solid var(--line); padding-top: 4px; }
.phone__cta { margin-top: auto; background: var(--ink); color: var(--paper); text-align: center; padding: 9px 0; font-weight: 600; font-size: 10px; }
.hs { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 500 10px/22px var(--f-mono); text-align: center; translate: -50% -50%; box-shadow: 0 0 0 0 rgba(10,10,11,.35); }
.js :is(.xp, .hero-live) .hs[data-from] { opacity: 0; transform: scale(.4); }
.js :is(.xp, .hero-live) .hs[data-from].is-in { opacity: 1; transform: none; }
.hs.is-at { outline: 2px solid var(--berry); outline-offset: 3px; }
.phone [data-from].is-at { outline: 1px dashed var(--ink); outline-offset: 2px; }

/* --- Zwei Bahnen (KI-Automatisierung) --- */
.lanes { width: 100%; display: grid; gap: 22px; }
.lane__hd { display: flex; justify-content: space-between; margin-bottom: 10px; }
.lane__track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; position: relative; }
.lane__box { border: 1px solid var(--line-strong); padding: 10px 8px; font-size: .78rem; line-height: 1.3; min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; background: var(--paper); }
.lane__box .mono { font-size: .58rem; color: var(--g3); }
.lane--auto .lane__box { background: var(--white); }
.lane__box.is-human { border-style: dashed; border-color: var(--ink); }
.lane__box.is-at { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lane__box.is-at .mono { color: var(--g2); }
@media (max-width: 600px) { .lane__track { grid-template-columns: repeat(2, 1fr); } .lane__box { min-height: 64px; } }

/* --- Such-Ergebnisse (SEO) --- */
.serp { width: 100%; max-width: 520px; display: grid; gap: 12px; font-size: .86rem; }
.serp__q { border: 1px solid var(--line-strong); padding: 12px 14px; display: flex; gap: 10px; align-items: center; background: var(--white); font-family: var(--f-mono); font-size: .82rem; }
.serp__q::before { content: ""; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.serp__typed { overflow: hidden; white-space: nowrap; border-right: 1.5px solid var(--ink); width: 0; max-width: max-content; }
.serp__typed.is-in { width: var(--chars); transition: width 1.4s steps(var(--n)); animation: caret .8s steps(2) infinite; }
@keyframes caret { 50% { border-color: transparent; } }
.serp__ai { border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
.serp__ai .mono { display: block; margin-bottom: 6px; color: var(--g4); }
.serp__ai p { margin: 0 0 8px; line-height: 1.45; }
.serp__cite { display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: .68rem; border: 1px solid var(--line-strong); padding: 3px 7px; margin-right: 4px; }
.serp__cite.is-at, .serp__res.is-at { outline: 2px solid var(--ink); outline-offset: 2px; }
.serp__res { padding: 8px 2px; border-bottom: 1px solid var(--line); }
.serp__res small { display: block; color: var(--g4); font-family: var(--f-mono); font-size: .66rem; }
.serp__res b { font-weight: 500; display: block; }
.serp__res span { color: var(--g4); font-size: .8rem; }

/* --- Raster wird Seite (Webdesign) --- */
.gb { width: 100%; max-width: 560px; aspect-ratio: 4/3; border: 1px solid var(--line-strong); position: relative; background: var(--white); overflow: hidden; }
.gb__cols { position: absolute; inset: 0 16px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.gb__cols i { background: rgba(10,10,11,.05); border-inline: 1px solid rgba(10,10,11,.08); transform-origin: top; }
.js :is(.xp, .hero-live) .gb__cols[data-from] i { transform: scaleY(0); transition: transform .9s var(--ease); }
.js :is(.xp, .hero-live) .gb__cols[data-from].is-in i { transform: none; }
.gb__cols i:nth-child(n) { transition-delay: calc(var(--k) * 40ms); }
.gb__b { position: absolute; border: 1px solid var(--ink); transition: background .6s var(--ease), border-color .6s, opacity .6s; display: flex; align-items: flex-end; padding: 6px; font-family: var(--f-mono); font-size: .58rem; }
.gb__b.is-visited { background: var(--ink); color: var(--paper); }
.gb__b[data-soft].is-visited { background: var(--g1); color: var(--ink); border-color: var(--g2); }
.gb__b.is-at { outline: 2px solid var(--ink); outline-offset: 3px; }
.gb__lbl { opacity: 0; transition: opacity .4s var(--ease); }
.gb__lbl.is-at { opacity: 1; }
.gb__txt { position: absolute; display: grid; gap: 5px; }
.gb__txt i { height: 5px; background: var(--g3); display: block; }
.gb__txt i.big { height: 14px; background: var(--ink); }
.gb__lbl { position: absolute; right: 10px; top: 10px; font-family: var(--f-mono); font-size: .6rem; background: var(--paper); padding: 3px 6px; border: 1px solid var(--line); }

/* --- Pipeline (CRM) --- */
.pipe { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: relative; }
.pipe__col { border: 1px solid var(--line); min-height: 220px; padding: 8px; background: var(--paper); }
.pipe__col .mono { font-size: .58rem; display: block; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; color: var(--g4); }
.pipe__ghost { height: 34px; border: 1px dashed var(--g2); margin-bottom: 6px; }
.pipe__deal { position: absolute; top: 36px; left: 8px; width: calc(25% - 20px); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 8px; font-size: .74rem; line-height: 1.25; transform: translateX(calc(var(--x, 0) * (100% + 21.5px))); transition: transform 1s var(--ease); z-index: 2; }
.pipe__deal small { display: block; font-family: var(--f-mono); font-size: .56rem; color: var(--g2); margin-top: 4px; }
.pipe__tasks { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.pipe__task { border: 1px solid var(--line-strong); padding: 8px 10px; font-size: .76rem; display: flex; gap: 8px; align-items: flex-start; background: var(--white); }
.pipe__task::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--ink); flex: none; margin-top: 3px; }
.pipe__task.is-at::before { background: var(--ink); }
@media (max-width: 600px) { .pipe__col .mono { font-size: .5rem; letter-spacing: 0; } .pipe__deal { font-size: .62rem; padding: 6px; } }

/* --- Linearer Ablauf (generisch) --- */
.flow { width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; position: relative; padding-top: 30px; }
.flow::before { content: ""; position: absolute; top: 44px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 1px; background: var(--line-strong); }
.flow__bar { position: absolute; top: 43px; left: calc(50% / var(--n)); height: 3px; background: var(--ink); }
.flow__n { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 6px; }
.flow__dot { width: 30px; height: 30px; border: 1px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 500 .66rem var(--f-mono); position: relative; z-index: 1; transition: background .5s, color .5s; }
.flow__n.is-in .flow__dot { background: var(--ink); color: var(--paper); }
.flow__n b { font-weight: 500; font-size: .86rem; line-height: 1.2; }
.flow__n small { font-size: .8rem; color: var(--g4); line-height: 1.35; }
.flow__n.is-at .flow__dot { transform: scale(1.18); }
@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; padding-top: 0; gap: 14px; }
  .flow::before { top: 0; bottom: 0; left: 15px; right: auto; width: 1px; height: auto; }
  .flow__bar { top: 0; left: 14px; }
  .flow__n { flex-direction: row; text-align: left; align-items: flex-start; }
  .flow__n > div { display: grid; }
}

/* ---------- Leistungs-Index (Startseite / Hub) ---------- */
.svc__item { border-bottom: 1px solid var(--line-strong); }
.svc__btn { width: 100%; display: grid; grid-template-columns: 56px 1fr 24px; align-items: baseline; gap: 12px; padding: 24px 0; background: none; border: 0; text-align: left; }
.svc__btn .h3 { transition: transform .5s var(--ease); }
.svc__btn:hover .h3 { transform: translateX(8px); }
.svc__btn .mono { color: var(--g3); }
.svc__pv { display: none; }
.svc__pv.is-on { display: block; animation: fadeIn .6s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Referenzen ---------- */
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) var(--gut); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
.chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); background: none; border-radius: 0; font-size: .92rem; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Prozess ---------- */
.proc { grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; position: relative; counter-reset: p; }
.proc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.proc__fill { position: absolute; left: 0; top: 0; width: 1px; background: var(--ink); }
.proc li { display: grid; grid-template-columns: 120px 1fr 1.3fr; gap: var(--gut); padding: 36px 0 36px 32px; border-bottom: 1px solid var(--line); transition: opacity .6s var(--ease); }
.js .proc li { opacity: .35; }
.js .proc li.is-in { opacity: 1; }
.proc li .mono { color: var(--g3); padding-top: 8px; }
.proc li p { margin: 0; color: var(--g4); }
@media (max-width: 1023px) { .proc { grid-column: 1 / -1; } }
@media (max-width: 767px) { .proc li { grid-template-columns: 1fr; gap: 8px; padding-left: 24px; } }

/* ---------- Differenzierung ---------- */

/* ---------- Über-Teaser / Porträt ---------- */

/* ---------- Insights ---------- */
.ins { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gut); }
.ins__card { grid-column: span 4; text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.ins__card--lg { grid-column: span 6; }
.ins__card--sm { grid-column: span 3; }
.ins__card h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
.ins__card p { margin: 0; color: var(--g4); font-size: var(--t-small); }
.ins__card .mono { color: var(--g3); display: flex; gap: 12px; }
.cover { aspect-ratio: 4/3; border: 1px solid var(--line-strong); background: var(--white); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.ins__card:hover .cover__lines { transform: translateX(6.25%); }
.cover__k { position: relative; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.cover__w { position: relative; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; line-height: .9; font-variation-settings: "wdth" 120; }
@media (max-width: 1023px) { .ins__card, .ins__card--lg, .ins__card--sm { grid-column: span 6; } .ins__card--lg { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ins__card, .ins__card--lg, .ins__card--sm { grid-column: 1 / -1; } }

/* ---------- CTA ---------- */
.cta__h { grid-column: 1 / 10; }
.cta__txt { grid-column: 1 / 6; margin-top: 40px; }

/* ---------- Content-Bausteine (Unterseiten) ---------- */
.blk__h { grid-column: 1 / 5; }
.blk__h .h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.4rem); }
.blk__b { grid-column: 6 / 13; }
.blk__b > p:first-child { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.01em; }
@media (max-width: 1023px) { .blk__h { grid-column: 1 / -1; margin-bottom: 32px; } .blk__b { grid-column: 1 / -1; } }

.lst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lst li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.lst li::before { content: counter(l, decimal-leading-zero); counter-increment: l; font-family: var(--f-mono); font-size: var(--t-mono); color: var(--g3); padding-top: 5px; }
.lst { counter-reset: l; }
.lst b { font-weight: 500; display: block; margin-bottom: 4px; }
.lst span { color: var(--g4); }

.svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.svcs > div { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); }
.svcs > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.svcs h3 { font-size: 1.25rem; margin-bottom: 10px; letter-spacing: -.015em; }
.svcs p { margin: 0; color: var(--g4); font-size: var(--t-small); }
@media (max-width: 767px) { .svcs { grid-template-columns: 1fr; } .svcs > div:nth-child(even) { padding-left: 0; border-left: 0; } }

.tech { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tech span { padding: 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .95rem; }

.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 20px; gap: 24px; padding: 24px 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 48px 28px 0; color: var(--g5); max-width: 70ch; }

.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.rel a { padding: 28px 24px 28px 0; text-decoration: none; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: background .3s; }
.rel a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.rel a b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; }
.rel a span { color: var(--g4); font-size: var(--t-small); }
.rel a .mono { color: var(--g3); }
.rel a:hover b { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .rel { grid-template-columns: 1fr; } .rel a + a { padding-left: 0; border-left: 0; } }

.callout { border: 1px solid var(--line-strong); padding: 28px; background: var(--white); }
.callout .mono { color: var(--g3); display: block; margin-bottom: 10px; }

/* ---------- Artikel ---------- */
.art { grid-column: 3 / 11; }
.art h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); margin: 72px 0 20px; letter-spacing: -.025em; line-height: 1.1; }
.art h3 { font-size: 1.3rem; margin: 40px 0 12px; }
.art p, .art li { font-size: 1.15rem; line-height: 1.7; }
.art ul { padding-left: 1.2em; }
.art .callout { margin: 40px 0; }
.art__meta { display: flex; gap: 24px; flex-wrap: wrap; color: var(--g4); margin-top: 28px; }
@media (max-width: 1023px) { .art { grid-column: 1 / -1; } }
.toc { border-top: 1px solid var(--line); padding-top: 16px; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: var(--t-small); }
.toc li { padding: 4px 0; }

/* ---------- Formular ---------- */
.form { grid-column: 1 / 8; }
.form__aside { grid-column: 9 / 13; }
.fs { border: 0; margin: 0 0 48px; padding: 0; }
.fs legend { padding: 0; margin-bottom: 24px; display: flex; gap: 16px; align-items: baseline; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.fs legend .mono { color: var(--g3); }
.fld { display: grid; gap: 8px; margin-bottom: 22px; }
.fld label, .fld .lbl { font-size: .95rem; font-weight: 500; }
.fld label small, .fld .lbl small { color: var(--g4); font-weight: 400; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); background: var(--white); border-radius: 0; font-size: 1rem; }
.fld textarea { min-height: 140px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.fld .hint { font-size: .85rem; color: var(--g4); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gut); }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); font-size: .92rem; cursor: pointer; background: var(--white); }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .92rem; color: var(--g5); margin: 8px 0 28px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.hp { position: absolute; left: -9999px; }
.form__prog { display: flex; gap: 6px; margin-bottom: 40px; }
.form__prog i { flex: 1; height: 2px; background: var(--g2); }
.form__prog i.on { background: var(--ink); }
.js .form [data-stage="2"] { display: none; }
.js .form.is-s2 [data-stage="1"] { display: none; }
.js .form.is-s2 [data-stage="2"] { display: block; }
.form__msg { padding: 20px; border: 1px solid var(--ink); margin-top: 20px; display: none; }
.form__msg.is-on { display: block; }
.fld.is-err input { border-color: var(--ink); border-width: 2px; }
.err { font-size: .85rem; font-weight: 500; }

/* ---------- Footer ---------- */
.ft { background: var(--ink); color: var(--paper); padding-top: clamp(80px, 9vw, 140px); --line: rgba(255,255,255,.14); }
.ft__top { grid-column: 1 / 6; }
.ft__top .h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.6rem); margin-bottom: 20px; }
.ft__top p { color: var(--g2); max-width: 38ch; }
.ft__cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px var(--gut); }
.ft h3 { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g3); font-weight: 400; margin-bottom: 16px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--g1); font-size: .96rem; }
.ft li a:hover { color: var(--white); text-decoration: underline; }
.ft__bar { margin-top: 80px; padding: 24px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .88rem; color: var(--g3); }
.ft__bar a { color: var(--g2); text-decoration: none; }
.ft__bar a:hover { color: var(--white); }
.ft__bar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ft__contact { margin-top: 32px; font-size: .96rem; color: var(--g2); line-height: 1.8; }
.ft__contact a { color: var(--paper); }
@media (max-width: 1023px) { .ft__top, .ft__cols { grid-column: 1 / -1; } .ft__cols { margin-top: 56px; } }
@media (max-width: 600px) { .ft__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Platzhalter-Hinweise im Text ---------- */
.ph { font-family: var(--f-mono); font-size: .78em; letter-spacing: .02em; background: var(--g1); border: 1px dashed var(--g3); padding: 1px 6px; color: var(--g5); white-space: normal; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Weniger Bewegung, nicht null: Farbe/Deckkraft bleiben kurz animiert, Bewegung entfällt */
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js .clip { opacity: 1; transform: none; clip-path: none; }
  .area, .btn, .chip, .svc__btn .h3, .btn .ico { transform: none !important; }
}

/* =====================================================================
   Theme „Beere“ – Überlagerungen auf das Grundsystem
   ===================================================================== */
body { font-weight: 400; letter-spacing: -.005em; }
.display { letter-spacing: -.05em; }
.h1, .h2 { letter-spacing: -.04em; }

/* Akzentwort statt Serifen-Kursiv: farbig hervorgehoben wie in der Referenz */
em { font-family: var(--f-sans); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--berry); }

/* Labels: Onest statt Mono, klein und gesperrt */
.mono { font-family: var(--f-sans); font-weight: 500; font-size: .8rem; letter-spacing: .1em; }
.idx .mono:first-child { color: var(--berry); }
::selection { background: var(--berry); color: var(--white); }

/* Dunkle Flächen mit weichem Beeren-Licht (zwei Lichtquellen, zurückhaltend) */

/* Buttons: Pillen, Beere als Primärfarbe */
.btn { --bg: var(--berry); --fg: var(--white); border-radius: 999px; padding: 0 26px; }
.btn:hover { --bg: var(--shadz); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--white); border-color: var(--ink); }
.tlink::after { color: var(--berry); font-family: var(--f-sans); }
.chip, .chips span { border-radius: 999px; }
.chip[aria-pressed="true"], .chips input:checked + span { background: var(--berry); border-color: var(--berry); color: var(--white); }

/* Header */
.hd { background: color-mix(in srgb, var(--paper) 82%, transparent); }
.logo span { color: var(--berry); }

/* Bildplatzhalter: weiche Beeren-Lichtfläche statt Schraffur */

/* Erklär-Animationen */
.xp { border-radius: calc(var(--r) + 4px); overflow: hidden; border-color: var(--line); }
.xp__steps button::before { background: var(--berry); }
.xp__hd .mono:first-child::before { background: var(--berry); border-radius: 50%; }
.xp__ctrl button { border-radius: 999px; }
.xp__steps li.is-at button { background: var(--berry-soft); }
.hs { background: var(--berry); }
.phone { border-radius: 34px; }
.phone [data-at].is-at { outline-color: var(--berry); }
.phone__cta { background: var(--berry); border-radius: 999px; }
.phone__var i { border-radius: 6px; }
.lane__box { border-radius: var(--r-s); }
.lane__box.is-at { background: var(--berry); border-color: var(--berry); }
.lane__box.is-human { border-color: var(--berry); }
.lane__box.is-human.is-at { background: var(--ink); border-color: var(--ink); }
.serp__ai { border-radius: var(--r-s); background: linear-gradient(135deg, var(--berry-soft), var(--white)); border-color: var(--berry); }
.serp__q { border-radius: 999px; }
.serp__typed { border-color: var(--berry); }
.serp__cite { border-radius: 999px; }
.serp__cite.is-at, .serp__res.is-at { outline-color: var(--berry); }
.gb { border-radius: var(--r-s); }
.gb__b { border-radius: 6px; }
.gb__b[data-at="5"].is-visited, .gb__b.is-at { background: var(--berry); border-color: var(--berry); color: var(--white); outline-color: var(--berry); }
.gb__txt i.big { border-radius: 3px; }
.pipe__col { border-radius: var(--r-s); }
.pipe__deal { background: var(--berry); border-color: var(--berry); border-radius: 8px; }
.pipe__deal small { color: #ebe2e7; }
.pipe__task { border-radius: 8px; }
.pipe__task.is-at::before { background: var(--berry); border-color: var(--berry); }
.flow__dot { border-radius: 50%; }
.flow__bar { background: var(--berry); }
.flow__n.is-in .flow__dot { background: var(--berry); border-color: var(--berry); color: var(--white); }

/* Positionierung: Bausteine */
.pieces { border-radius: var(--r); border-color: var(--line); overflow: hidden; }

/* Inhaltsbausteine */
.callout { border-radius: var(--r); border-color: var(--line); }
.cover { border-radius: var(--r); border-color: transparent; color: var(--white);
  background: radial-gradient(80% 90% at 80% 20%, rgba(149,31,40,.85), transparent 60%), radial-gradient(60% 70% at 10% 100%, rgba(152,139,133,.6), transparent 70%), #251a1b; }
.svcs { border-top: 0; gap: 12px; }
.svcs > div, .svcs > div:nth-child(even) { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.tech { border: 0; gap: 8px; }
.tech span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 18px; }
.lst li::before, .faq summary::after, .rel a .mono, .svc__btn .mono { color: var(--berry); }
 .proc li .mono { color: var(--berry-on-dark); font-family: var(--f-sans); }
.proc__fill { background: var(--berry); width: 2px; }
.fld input, .fld select, .fld textarea { border-radius: var(--r-s); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline-color: var(--berry); border-color: var(--berry); }
.consent input { accent-color: var(--berry); }
.form__prog i.on { background: var(--berry); }
.ph { border-radius: 6px; border-color: var(--venus); background: var(--berry-soft); color: var(--g4); }

/* Startseiten-Hero: weiches Licht hinter dem Visual */

/* Footer */
.ft li a:hover { color: var(--berry-on-dark); }

/* Kontrast: Venus nur dekorativ – Texte mindestens in --g4 */
.xp__steps button, .ins__card .mono, .bc a, .mega h3, .fld .hint { color: var(--g4); }
.xp__steps li.is-done button { color: var(--g5); }

/* ---------- Leistungen als dunkles Karten-Raster (Startseite) ---------- */
.area { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease); }
.area:hover, .area:focus-within { background: rgba(149,31,40,.16); border-color: rgba(180,152,168,.45); transform: translateY(-3px); }
.area:has(a:focus-visible) { outline: 2px solid var(--berry-on-dark); outline-offset: 3px; }

/* ---------- Kundenstimmen als Glas-Karten ---------- */

/* ---------- Team-Block mit Kennzahlen ---------- */
.stats { margin: 40px 0 0; }
.stat { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.stat:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.stat dt { font-size: clamp(2.6rem, 2rem + 2vw, 4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.stat dt .ph { font-size: .9rem; letter-spacing: 0; }
.stat dd { margin: 0; font-size: .88rem; color: #c9c2bf; line-height: 1.45; }

/* =====================================================================
   Motion-Review (Design-Engineering-Durchgang)
   ===================================================================== */

/* Drückbares Feedback */
.btn, .chip, .xp__ctrl button, .xp__steps button, .menu-btn, .svc__btn, .chips span { transition-property: background-color, color, border-color, transform; transition-duration: 160ms; transition-timing-function: var(--ease-out); }
.btn:active, .chip:active, .xp__ctrl button:active, .menu-btn:active, .chips label:active span { transform: scale(.97); }

/* Pfeil im Button: transform statt width (kein Layout) */
.tlink { transition: background-size 250ms var(--ease-out); }

/* Hover nur auf Geräten mit Maus, kurz und ruhig */
.svc__btn .h3, .cover__lines, .area { transition-duration: 220ms; transition-timing-function: var(--ease-out); }
.area { transition-property: background-color, border-color, transform; }
.svc__btn:hover .h3, .ins__card:hover .cover__lines, .area:hover { transform: none; }
.area:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
@media (hover: hover) and (pointer: fine) {
  .svc__btn:hover .h3 { transform: translateX(6px); }
  .ins__card:hover .cover__lines { transform: translateX(6.25%); }
  .area:hover { background: rgba(149,31,40,.16); border-color: rgba(180,152,168,.45); transform: translateY(-3px); }
}
.area:focus-within { background: rgba(149,31,40,.16); border-color: rgba(180,152,168,.45); }

/* Mega-Menü: von der Navigation aus, öffnen 200 ms, schließen schneller */
.mega { transform-origin: top center; transform: translateY(-6px); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s 140ms; }
.mega.is-open { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 0s; }
.nav__item > button::after { transition-duration: 200ms; }

/* Scroll-Reveals: kürzer, kleinerer Weg */
.js .rv { transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0s); }
.js .clip { transition: clip-path 900ms var(--ease-in-out); }

/* Akkordeon & Vorschau */
.svc__pv.is-on { animation: none; }
.svc__pv { opacity: 0; transition: opacity 200ms ease; }
.svc__pv.is-on { opacity: 1; }
.faq summary::after { transition-duration: 200ms; }
.xp__steps button span.d { transition: max-height 300ms var(--ease-out), opacity 250ms ease; }


/* Erklär-Animationen: Zustandswechsel gleichmäßig, Bewegung mit ease-in-out */
.js :is(.xp, .hero-live) [data-from] { transition: opacity 400ms ease, background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 500ms var(--ease-out); }
.js :is(.xp, .hero-live) .hs[data-from] { transform: scale(.85); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.pipe__deal { transition: transform 700ms var(--ease-in-out); }
.lane__box { transition: opacity 400ms ease, background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
.flow__n.is-at .flow__dot { transform: scale(1.1); }
.flow__dot { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms var(--ease-out); }

/* Fortschrittslinien über transform statt width/height (kein Layout) */
.flow__bar { width: calc(100% - 100% / var(--n)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-in-out); }
@media (max-width: 640px) { .flow__bar { width: 3px; height: 100%; transform-origin: center top; transform: scaleY(var(--p, 0)); } }
.proc__fill { height: 100%; transform-origin: center top; transform: scaleY(var(--p, 0)); transition: transform 500ms var(--ease-out); }

/* Positionierung: Bausteine ordnen sich mit ease-in-out und leichtem Versatz */
@starting-style { .svc__pv.is-on { opacity: 0; } }
.flow__n b, .flow__n small { display: block; hyphens: auto; overflow-wrap: break-word; } .flow__n small { margin-top: 4px; }

/* =====================================================================
   Impeccable-Polish
   ===================================================================== */
.display { letter-spacing: -.04em; }
.h1, .h2 { letter-spacing: -.035em; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Browser-Oberflächen aus der Palette */
html { accent-color: var(--berry); caret-color: var(--berry); scrollbar-color: var(--venus) transparent; }
.stat dt, .xp__count, .xp__steps .mono, .flow__dot { font-variant-numeric: tabular-nums; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Inhalte sind sofort sichtbar; die eine authored Bewegung sind die Erklär-Animationen */
.js .rv { opacity: 1; transform: none; transition: none; }
.js .clip { clip-path: none; transition: none; }

/* Verwandte Inhalte: sichtbare Überschrift */
.rel__h { margin-bottom: 28px; }

/* Keine farbigen Seitenbalken > 1px; Hervorhebung über Gewicht */

/* Eine Tiefe pro Karte: Glas-Karten nur mit Schatten + Lichtkante */

/* Glas nur wo gewollt (Kundenstimmen) */

/* Keine dekorativen Streifen-/Rastertexturen ohne Bezug */
.phone__img { background: radial-gradient(80% 80% at 70% 30%, rgba(149,31,40,.22), transparent 70%), #eeebea; }
.cover__lines { display: none; }
.lane--slow .lane__box.is-wait { background: transparent; border-style: dashed; }

/* Icons */
.ico { display: block; flex: none; }
.xp__ctrl button { display: inline-grid; place-items: center; }
.phone__icons { display: flex; gap: 6px; }
.stars { display: inline-flex; gap: 1px; vertical-align: -1px; }
.stars svg { width: 8px; height: 8px; fill: var(--ink); }
.tlink::after { content: ""; display: inline-block; width: 1em; height: 1em; align-self: center; background: currentColor; color: var(--berry);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tlink::after { background: var(--berry); }
.faq summary::after { content: ""; width: 14px; height: 14px; align-self: center; color: var(--berry);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }

/* Rhythmus: mehr Luft über Überschriften als darunter */
.blk__h .h2 + p, .blk__h .h2 + div { margin-top: 20px; }
.phero { padding-top: clamp(48px, 7vw, 112px); }

/* Detektor-Befunde: Lesbarkeit */

 .xp__hd .mono, .ins__card .mono { text-transform: none; letter-spacing: .02em; }
 .lane__box .mono, .pipe__col .mono { font-size: .7rem; letter-spacing: .04em; }
.stat dd .ph { font-size: .8rem; }
.proc li .mono { color: var(--berry); }
.ft h3 { color: #b3aba8; }
.ft__bar { color: #b3aba8; }
.cover__k { font-size: .78rem; }
@media (max-width: 600px) { .xp__hd .mono + .mono { display: none; } }

/* =====================================================================
   Taste-Feinschliff
   ===================================================================== */
/* Hero: zwei Zeilen, Abstand oben gedeckelt, CTA ohne Scrollen sichtbar */

/* Phosphor-Icons in Buttons und Steuerung */
.btn .ico { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .ico { transform: translateX(4px); } }
.xp__ctrl .ico { width: 16px; height: 16px; }

/* Unterschiede: gruppiert in zwei Spalten statt Tabelle mit Linie unter jeder Zeile */

/* Listen: keine Linie unter jeder Zeile, Struktur über Nummer und Abstand */
.lst { border-top: 1px solid var(--line); padding-top: 8px; }
.lst li { border-bottom: 0; padding: 14px 0; }

/* =====================================================================
   Lebendigkeit & Struktur (Runde „mehr Gefühl“)
   ===================================================================== */
html { scroll-padding-top: calc(var(--head-h) + 72px); }

/* ---------- Überschriften bekommen einen Beeren-Strich als Anker ---------- */
.sec .h2:not(.cta__h)::before { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--berry); margin-bottom: clamp(20px, 2.4vw, 32px); transform-origin: left; }
.cta__h::before { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--berry-on-dark); margin-bottom: 32px; }

/* ---------- Dunkle Abschnitte als abgerundete Bühnen mit wanderndem Licht ---------- */
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18vmax, -8vmax) scale(1.12); } 100% { transform: translate(34vmax, -2vmax) scale(.96); } }

/* ---------- Hero: lebendes System-Diagramm ---------- */
.hero-sys__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.hero-sys__steps li { grid-area: 1 / 1; font-size: .95rem; line-height: 1.45; color: #d9d2cf; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 400ms var(--ease-out); }
.hero-sys__steps li b { color: #fff; font-weight: 500; }
.hero-sys__steps li.is-at { opacity: 1; transform: none; }
.js .hero-sys__steps li:not(.is-at) { pointer-events: none; }
html:not(.js) .hero-sys__steps li:first-child { opacity: 1; transform: none; }

/* Einstieg: Headline, Text und System bauen sich beim Laden auf (nur ohne Reduced Motion) */
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sysIn { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Keyword-Band ---------- */

/* ---------- Kapitel-Leiste ---------- */
.chapters { position: sticky; top: var(--head-h); z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.chapters ol { list-style: none; margin: 0; padding: 8px 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.chapters ol::-webkit-scrollbar { display: none; }
.chapters a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: .9rem; white-space: nowrap; color: var(--g4); transition: background-color 200ms ease, color 200ms ease; }
.chapters a span { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--g3); transition: color 200ms ease; }
.chapters a:hover { color: var(--ink); background: var(--g1); }
.chapters a[aria-current] { background: var(--ink); color: var(--white); }
.chapters a[aria-current] span { color: var(--berry-on-dark); }
@keyframes grow { to { transform: scaleX(1); } }

/* ---------- Erklär-Animationen: mehr Tiefe ---------- */
.xp { box-shadow: 0 30px 70px -50px rgba(165, 33, 44, .5); }
.xp__prog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 0 18px 12px; border-bottom: 1px solid var(--line); }
.xp__prog i { height: 3px; border-radius: 2px; background: var(--g1); position: relative; overflow: hidden; }
.xp__prog i::after { content: ""; position: absolute; inset: 0; background: var(--berry); transform-origin: left; transform: scaleX(0); }
.xp__prog i.is-in::after { transform: scaleX(1); }
.xp__prog i.is-at::after { transform: scaleX(0); animation: segFill var(--dur, 4.2s) linear forwards; }
.xp.is-paused .xp__prog i.is-at::after, .xp.is-static .xp__prog i.is-at::after { animation: none; transform: scaleX(1); }
@keyframes segFill { to { transform: scaleX(1); } }
.xp__hd { border-bottom: 0; }
.xp__stage { background: radial-gradient(70% 70% at 50% 45%, rgba(149, 31, 40, .07), transparent 70%), linear-gradient(180deg, #fff, #fbfaf9); }
.xp__steps li.is-at button .mono { color: var(--berry); font-weight: 600; }

/* System-Knoten mit Icons, Halo und wanderndem Lichtpunkt */

/* ---------- Leistungskarten: Icon + Licht unter dem Mauszeiger ---------- */
.area::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 250ms ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(180, 152, 168, .22), transparent 65%); }
@media (hover: hover) and (pointer: fine) { .area:hover::before { opacity: 1; } }

/* ---------- Aufbau beim Scrollen (CSS scroll-driven, ohne JS; ohne Unterstützung sofort sichtbar) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec .h2, .sec .lead, .area, .ins__card, .proc li, .stat, .svcs > div, .xp, .pieces, .rel a, .faq details {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%;
    }
    .area:nth-child(4n+2), .ins__card:nth-child(2), .svcs > div:nth-child(even), .rel a:nth-child(2) { animation-range: entry 6% entry 44%; }
    .area:nth-child(4n+3), .ins__card:nth-child(3), .rel a:nth-child(3) { animation-range: entry 12% entry 50%; }
    .area:nth-child(4n+4) { animation-range: entry 18% entry 56%; }
    .sec .h2::before { animation: drawLine linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reveal { from { clip-path: inset(18% 0 0 0 round var(--r)); transform: scale(1.04); } to { clip-path: inset(0 0 0 0 round var(--r)); transform: none; } }

/* Reduced Motion: Lichtpunkte aus, alles statisch */
@media (max-width: 380px) { .h2 { font-size: 1.85rem; } }

/* =====================================================================
   Leistungs- & Lösungsseiten: Live-Hero, Bühne für die Erklärung
   ===================================================================== */
/* Hero mit lebender Erklärung rechts */

.hero-live { margin: 0; position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--white);
  box-shadow: 0 40px 80px -50px rgba(149, 31, 40, .55), 0 0 0 1px var(--line); }
.hero-live::before { content: ""; position: absolute; z-index: -1; inset: -30% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(149, 31, 40, .16), transparent); pointer-events: none; }
.hero-live__stage { min-height: 320px; padding: clamp(18px, 2.4vw, 32px); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 40%, rgba(149, 31, 40, .07), transparent 70%), linear-gradient(180deg, #fff, #fbfaf9); }
.hero-live__cap { padding: 16px clamp(18px, 2.4vw, 28px) 20px; border-top: 1px solid var(--line); }
.hero-live__cap .mono { color: var(--berry); display: block; margin-bottom: 8px; }
.hero-live .hero-sys__steps { min-height: 4.4em; }
.hero-live .hero-sys__steps li { color: var(--g4); }
.hero-live .hero-sys__steps li b { color: var(--ink); }
.hero-live .tlink { margin-top: 12px; font-size: .92rem; }
.hero-live .phone { width: min(220px, 62%); }
.hero-live .flow { padding-top: 10px; }

/* Dunkle Bühne für die ausführliche Erklärung (ohne die .on-dark-Regeln für Kindelemente) */
.stage { color: var(--white);
  background:
    radial-gradient(55% 60% at 0% 100%, rgba(149, 31, 40, .38), transparent 70%),
    radial-gradient(40% 45% at 100% 0%, rgba(165, 33, 44, .22), transparent 70%),
    var(--ink); }
main > .stage { margin: clamp(8px, 1.2vw, 18px); border-radius: clamp(22px, 3vw, 40px); overflow: hidden; isolation: isolate; }
main > .stage::after { content: ""; position: absolute; z-index: -1; width: 70vmax; aspect-ratio: 1; right: -25vmax; top: -35vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(149, 31, 40, .4), rgba(165, 33, 44, .12) 55%, transparent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { main > .stage::after { animation: drift 24s ease-in-out infinite alternate-reverse; } }
.stage .h2::before { background: var(--berry-on-dark); }
.stage em { color: var(--berry-on-dark); }
.stage .xp { color: var(--ink); border-color: transparent; box-shadow: 0 40px 90px -40px rgba(37, 26, 27, .7), 0 0 0 1px rgba(255,255,255,.08); }
@media (max-width: 600px) { .lane__hd .muted { display: none; } }

/* =====================================================================
   Runde „Beratung zuerst“ + klarere Erklärungen
   ===================================================================== */

/* ---------- Beratungs-Abschnitt (Startseite) ---------- */

/* ---------- Leistungsraster: drei Schwerpunkte + Ergänzend ---------- */

/* ---------- „Was passiert gerade“: große Einblendung in jeder Bühne ---------- */
.xp__stage, .hero-live__stage { position: relative; flex-direction: column; gap: 14px; }
.xp__now { position: relative; align-self: stretch; display: grid; min-height: 2.6em; z-index: 3; }
.xp__now span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; color: var(--ink);
  opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 400ms var(--ease-out); }
.xp__now span.is-at { opacity: 1; transform: none; }
.xp__now em { font-style: normal; font-size: .72rem; font-weight: 600; color: #fff; background: var(--berry); border-radius: 999px; padding: 4px 9px; font-variant-numeric: tabular-nums; }
.xp.is-static .xp__now span:last-child { opacity: 1; transform: none; }

/* ---------- Shopify: Beschriftung neben dem aktiven Hotspot ---------- */
.hs__lbl { position: absolute; left: calc(100% + 24px); translate: 0 -50%; white-space: nowrap; font-size: .82rem; font-weight: 500; color: #fff; background: var(--ink); padding: 6px 12px; border-radius: 999px;
  opacity: 0; transform: translateX(-6px); transition: opacity 250ms ease, transform 350ms var(--ease-out); pointer-events: none; }
.hs__lbl::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1px; background: var(--ink); }
.hs__lbl.is-at { opacity: 1; transform: none; }
.phone [data-at].is-at { outline: 2px solid var(--berry); outline-offset: 3px; border-radius: 4px; transition: outline-color 200ms ease; }
@media (max-width: 700px) { .hs__lbl { display: none; } }

/* ---------- Flow: Icons, aktive Station als Karte ---------- */
.flow__dot { width: 38px; height: 38px; }
.flow::before, .flow__bar { top: 49px; }
.flow__n.is-at > div { background: var(--white); box-shadow: 0 0 0 1px rgba(149,31,40,.3), 0 16px 30px -18px rgba(149,31,40,.6); border-radius: 12px; padding: 8px 10px; }
.flow__n > div { transition: box-shadow 300ms ease, background-color 300ms ease; padding: 8px 10px; border-radius: 12px; }
.flow__n:not(.is-in) small { opacity: .5; }
@media (max-width: 640px) { .flow::before, .flow__bar { top: 0; left: 19px; } }

/* ---------- Beratung: Roadmap-Animation ---------- */
.road { position: relative; width: 100%; max-width: 620px; aspect-ratio: 4 / 3; border-radius: var(--r-s); background: var(--white); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.road__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.road__col { border-left: 1px dashed var(--g2); padding: 12px; }
.road__col:first-child { border-left: 0; }
.road__col span { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g4); padding: 4px 10px; border-radius: 999px; background: var(--g1); transition: background-color 300ms ease, color 300ms ease; }
.road__col.is-visited span { background: var(--ink); color: #fff; }
.road__col:first-child.is-visited span { background: var(--berry); }
.js :is(.xp, .hero-live) .road__cols[data-from] { opacity: 0; }
.js :is(.xp, .hero-live) .road__cols.is-in { opacity: 1; }
.road__note { position: absolute; width: 28.5%; }
.js :is(.xp, .hero-live) .road__note[data-from] { opacity: 0; }
.js :is(.xp, .hero-live) .road__note.is-in { opacity: 1; }
.road__card { position: relative; padding: 10px 12px; border-radius: 10px; background: #fff7d6; box-shadow: 0 6px 14px -8px rgba(37,26,27,.35); font-size: clamp(.62rem, .5rem + .45vw, .84rem); font-weight: 500; line-height: 1.25; color: var(--ink);
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform 900ms var(--ease-in-out), background-color 300ms ease; }
.road__card.is-prio { background: #fcf4e6; }
.js :is(.xp, .hero-live) .road__card[data-from] { opacity: 1; }
.road__card.is-in { transform: none; }
.road__flag { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--berry); color: #fff; font-style: normal; transform: scale(.6); opacity: 0; transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.js :is(.xp, .hero-live) .road__flag[data-from] { opacity: 0; }
.road__flag.is-in { opacity: 1 !important; transform: none; }
.road__stamp { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--berry); color: #fff; font-weight: 600; font-size: .86rem; transform: scale(.8) rotate(-6deg); }
.js :is(.xp, .hero-live) .road__stamp[data-from] { opacity: 0; transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.js :is(.xp, .hero-live) .road__stamp.is-in { opacity: 1; transform: none; }

/* ---------- Branding: Markenaufbau ---------- */
.bs { position: relative; width: 100%; max-width: 620px; aspect-ratio: 4 / 3; border-radius: var(--r-s); background: var(--white); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.bs__vals { position: absolute; left: 6%; top: 8%; display: flex; gap: 6px; flex-wrap: wrap; }
.bs__vals span { font-size: .78rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: var(--g1); }
.bs__mark { position: absolute; left: 6%; top: 22%; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: #251a1b; transition: letter-spacing 900ms var(--ease-out), opacity 500ms ease; }
.bs__mark i { font-style: normal; color: #e2735a; }
.js :is(.xp, .hero-live) .bs__mark[data-from]:not(.is-in) { letter-spacing: .3em; }
.bs__type { position: absolute; right: 6%; top: 22%; display: grid; gap: 2px; text-align: right; }
.bs__type b { font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem); font-weight: 500; line-height: 1; color: #2f5d58; }
.bs__type span { font-size: .86rem; font-weight: 600; }
.bs__type .sm { font-size: .7rem; font-weight: 400; color: var(--g4); }
.bs__sw { position: absolute; left: 6%; top: 47%; display: flex; gap: 8px; }
.bs__sw i { width: clamp(26px, 5vw, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(37,26,27,.08); transform: scale(.3); transition: transform 500ms var(--ease-out), opacity 300ms ease; transition-delay: calc(var(--k) * 90ms); }
.bs__sw i.is-in { transform: none; }
.bs__apps { position: absolute; left: 6%; right: 6%; bottom: 7%; display: grid; grid-template-columns: 1.2fr .7fr 1fr; gap: 10px; align-items: end; }
.bs__app { border-radius: 10px; transform: translateY(14px); transition: transform 600ms var(--ease-out), opacity 400ms ease; }
.bs__app.is-in { transform: none; }
.bs__app:nth-child(2) { transition-delay: 90ms; }
.bs__app:nth-child(3) { transition-delay: 180ms; }
.bs__app b { font-weight: 600; letter-spacing: -.04em; }
.bs__app b i { font-style: normal; color: #e2735a; }
.bs__card { aspect-ratio: 1.7; background: #251a1b; color: #fff; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.bs__card b { font-size: 1rem; }
.bs__card small { font-size: .56rem; color: #e8dccb; }
.bs__phone { aspect-ratio: .55; background: #e8dccb; border: 3px solid #251a1b; border-radius: 14px; padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.bs__phone b { font-size: .72rem; }
.bs__phone span { height: 4px; border-radius: 2px; background: rgba(37,26,27,.25); }
.bs__phone em { margin-top: auto; font-style: normal; font-size: .5rem; text-align: center; background: #2f5d58; color: #fff; border-radius: 999px; padding: 3px 0; }
.bs__bag { aspect-ratio: .85; background: #2f5d58; color: #e8dccb; display: grid; place-items: center; border-radius: 6px 6px 10px 10px; position: relative; }
.bs__bag::before { content: ""; position: absolute; top: -14px; left: 32%; width: 36%; height: 20px; border: 3px solid #2f5d58; border-bottom: 0; border-radius: 12px 12px 0 0; }
.bs__bag b { font-size: 1rem; }
@media (max-width: 600px) { .bs__type .sm { display: none; } .bs__vals span { font-size: .66rem; padding: 4px 8px; } }

/* Hero-Live: genug Platz für die großen Bühnen */
.hero-live .road, .hero-live .bs { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .road__card { transform: none !important; } }
.bs__apps { height: 34%; } .bs__card { aspect-ratio: auto; height: 74%; } .bs__phone { aspect-ratio: auto; height: 100%; } .bs__bag { aspect-ratio: auto; height: 80%; } .bs__sw { top: 45%; }
@media (max-width: 600px) { .bs__mark { font-size: 1.7rem; } .bs__type b { font-size: 1.5rem; } .bs__type span { font-size: .7rem; } }

/* =====================================================================
   Vereinfachung: klare, wiederkehrende Bausteine
   ===================================================================== */
/* „Passt das zu Ihnen?“ – zwei Spalten */
.fit { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 80px); margin-top: 48px; }
.fit__h { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g4); margin-bottom: 20px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 1.05rem; line-height: 1.45; }
.checks .ico { color: var(--berry); margin-top: 3px; }
.sits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sits li { padding: 20px 22px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.sits b { display: block; font-weight: 500; font-size: 1.05rem; margin-bottom: 6px; }
.sits span { color: var(--g4); font-size: .95rem; }
.sits--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .fit, .sits--grid { grid-template-columns: 1fr; } }

/* Werkzeuge als eine ruhige Zeile */
.tools { margin-top: 32px; color: var(--g4); font-size: .95rem; }
.tools b { color: var(--ink); font-weight: 500; }

/* Ablauf: nummerierte Schritte nebeneinander */
.steps4 { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; position: relative; }
.steps4 li { position: relative; padding: 24px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.on-white .steps4 li { background: var(--paper); }
.steps4__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--berry); color: #fff; font-weight: 600; font-size: .95rem; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.steps4 h3 { font-size: 1.15rem; margin-bottom: 8px; letter-spacing: -.01em; }
.steps4 p { margin: 0; color: var(--g4); font-size: .95rem; }

/* Startseite ruhiger: weniger Leerraum zwischen den Abschnitten */

/* ---------- USP: Kreativ und technisch ---------- */

/* =====================================================================
   Startseite editorial: persönlich, typografisch, ohne Kästen
   ===================================================================== */
/* Hero mit Porträt */
.ed-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(56px, 7vw, 112px); }
.ed-hero__h { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.8rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.ed-hero__h .ln { display: block; }
.ed-hero__h2 { color: var(--g4); }
.ed-hero__lead { margin: clamp(24px, 3vw, 40px) 0 32px; font-size: var(--t-lead); line-height: 1.5; color: var(--g5); max-width: 46ch; }
.ed-hero__meta { margin-top: 28px; font-size: .95rem; color: var(--g4); }
.ed-hero__meta span { color: var(--berry); margin: 0 6px; }
.ed-hero__img { margin: 0; }
@media (max-width: 900px) { .ed-hero { grid-template-columns: 1fr; align-items: start; } .ed-hero__img { max-width: 440px; } }
@media (prefers-reduced-motion: no-preference) {
  .ed-hero__h .ln { overflow: hidden; padding-bottom: .06em; }
  .ed-hero__h .ln > span { display: inline-block; animation: lineUp 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 80ms); }
  .ed-hero__lead, .ed-hero .btns, .ed-hero__meta { animation: fadeUp 800ms var(--ease-out) 380ms both; }
  .ed-hero__img { animation: fadeUp 1000ms var(--ease-out) 200ms both; }
}

/* Großes Zitat */
.ed-quote { border-block: 1px solid var(--line); padding: clamp(56px, 7vw, 112px) 0; }
.ed-quote blockquote { margin: 0; max-width: 24ch; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 400; }
.ed-quote__by { margin-top: 28px; color: var(--g4); font-size: .95rem; }

/* Überschriften ruhig, ohne Deko-Strich und Farbwort */
.ed-h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); letter-spacing: -.03em; line-height: 1.08; font-weight: 500; margin-bottom: clamp(28px, 3vw, 44px); }
.ed-intro { max-width: 60ch; color: var(--g4); margin: -12px 0 40px; font-size: 1.05rem; }

/* Leistungen als nummerierte Liste */
.ed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ed-list__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) 40px; gap: 24px; align-items: start; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line-strong); }
.ed-list__n { font-size: .95rem; color: var(--g4); padding-top: .55em; font-variant-numeric: tabular-nums; }
.ed-list__t { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.ed-list__t a { text-decoration: none; }
.ed-list__t a::after { content: ""; position: absolute; inset: 0; }
.ed-list__body p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--g5); max-width: 56ch; }
.ed-list__body .ed-list__i { margin-top: 12px; font-size: .92rem; color: var(--g4); }
.ed-list__go { padding-top: .4em; color: var(--ink); transition: transform 220ms var(--ease-out), color 220ms ease; justify-self: end; }
@media (hover: hover) and (pointer: fine) {
  .ed-list__row:hover .ed-list__go { transform: translateX(6px); color: var(--berry); }
  .ed-list__row:hover .ed-list__t { color: var(--berry); }
}
.ed-list__t { transition: color 220ms ease; }
.ed-list__row:has(a:focus-visible) { outline: 2px solid var(--berry); outline-offset: 4px; }
.ed-more { margin-top: 32px; color: var(--g4); }
.ed-more a { color: var(--ink); }
@media (max-width: 800px) { .ed-list__row { grid-template-columns: 40px 1fr; } .ed-list__body { grid-column: 2; } .ed-list__go { display: none; } }

/* Arbeitsweise: Text + Live-Illustration */

/* Über / Netzwerk */
.ed-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ed-about__txt p { font-size: 1.06rem; line-height: 1.65; color: var(--g5); max-width: 60ch; }
.ed-facts { margin: 28px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.ed-facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ed-facts dt { font-size: .82rem; color: var(--g4); margin-bottom: 4px; }
.ed-facts dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) { .ed-about { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ed-hero__h { font-size: 2rem; } .ed-quote blockquote { font-size: 1.6rem; } }

/* =====================================================================
   Gesamtüberarbeitung: editoriale Linie auf allen Seiten
   (keine Deko-Striche über Überschriften, keine Kästen mit Icons,
   Farbe in Überschriften nur in der H1)
   ===================================================================== */
.sec .h2::before, .cta__h::before { display: none; }
.sec .h2 em, .cta__h em, .ed-h2 em { color: inherit; }
.sec .h2, .cta__h { letter-spacing: -.03em; }

/* „Das bekommen Sie“: nummerierte Liste in zwei Spalten statt Karten */
.svcs { counter-reset: sv; gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--ink); }
.svcs > div, .svcs > div:nth-child(even) { position: relative; background: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 24px 0 24px 52px; }
.svcs > div::before { counter-increment: sv; content: counter(sv, decimal-leading-zero); position: absolute; left: 0; top: 27px; font-size: .9rem; color: var(--g4); font-variant-numeric: tabular-nums; }
.svcs h3 { font-size: 1.2rem; margin-bottom: 8px; }
.svcs p { font-size: 1rem; }

/* Ablauf: Spalten mit Linie statt Boxen */
.steps4 { gap: 0 clamp(24px, 3vw, 48px); }
.steps4 li, .on-white .steps4 li { background: none; box-shadow: none; border-radius: 0; padding: 20px 0 0; border-top: 2px solid var(--ink); }
.steps4__n { width: auto; height: auto; background: none; color: var(--berry); font-size: 1rem; margin-bottom: 10px; display: block; text-align: left; }
@media (max-width: 700px) { .steps4 { gap: 24px; } }

/* Ausgangslagen: ruhige Liste */
.sits { gap: 0; border-top: 1px solid var(--line-strong); }
.sits li { background: none; box-shadow: none; border-radius: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sits--grid { gap: 0 clamp(32px, 5vw, 80px); }

/* Werte auf „Über ONSET“ */
.ed-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--ink); }
.ed-values li { display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.ed-values span { grid-row: span 2; color: var(--g4); font-size: .9rem; padding-top: 4px; font-variant-numeric: tabular-nums; }
.ed-values h3 { font-size: 1.25rem; letter-spacing: -.015em; margin-bottom: 6px; }
.ed-values p { margin: 0; color: var(--g5); }
@media (max-width: 800px) { .ed-values { grid-template-columns: 1fr; } }

/* Über-uns-Text zweispaltig ausgewogen */
.ed-about__txt + .ed-about__txt { padding-top: 0; }
.wrap.ed-about:has(.ed-about__txt + .ed-about__txt) { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .wrap.ed-about:has(.ed-about__txt + .ed-about__txt) { grid-template-columns: 1fr; } }

/* Übersichtsseiten: H1 groß und allein */
.phero__h .h1:only-child { font-size: clamp(2.8rem, 1.8rem + 4vw, 6rem); }

/* Skill-Prüfung: Beschriftungen normal geschrieben, Rundungen auf Tokens */
 .hero-live__cap .mono, .fit__h { text-transform: none; letter-spacing: .01em; font-size: .9rem; }
 .hero-live { border-radius: 20px; }
.sec .h2:not(.cta__h)::before, .stage .h2::before { display: none; }

/* =====================================================================
   Bildwelt „Magazin“ (Entwurf B, Wahl der Inhaberin, 27.10.2026)
   Newsreader für Überschriften, Inter Tight für Text, flache Flächen,
   eckige Buttons, Beere nur als feiner Akzent. Ersetzt Leuchten, Verläufe, Pillen.
   ===================================================================== */
body { font-family: var(--f-sans); font-size: 17px; line-height: 1.65; letter-spacing: 0; }
.mono { font-family: var(--f-sans); }

/* Überschriften in der Serife */
h1, h2, .display, .h1, .h2, .ed-h2, .ed-hero__h, .ed-list__t, .cta__h, .ed-quote blockquote, .ed-values h3, .svcs h3, .steps4 h3, .sits b, .rel a b, .ins__card h3, .art h2, .ft__top .h2, .faq summary, .xp__now span, .phero__h h1 {
  font-family: var(--f-display); font-weight: 400; letter-spacing: -.015em;
}
h1, .h1, .display, .phero__h h1, .ed-hero__h { font-weight: 300; }
.h2, .ed-h2, .cta__h { font-weight: 300; line-height: 1.08; }
h1 em, h2 em, .h1 em, .h2 em, .display em, .cta__h em, blockquote em { font-family: var(--f-display); font-style: italic; font-weight: inherit; color: var(--berry); }
 .stage h2 em { color: #b498a8; }
.faq summary { font-size: 1.3rem; }
.xp__now span { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); }

/* Logo & Navigation */
.logo { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; }
.logo span { color: inherit; opacity: .5; }
.hd { background: color-mix(in srgb, var(--paper) 92%, transparent); }

/* Buttons: eckig, ruhig */
.btn { --bg: var(--ink); --fg: #fff; border-radius: 2px; font-weight: 500; }
.btn:hover { --bg: var(--berry); }
.btn--ghost { border-radius: 2px; border-color: var(--ink); }
.chip, .chips span, .xp__ctrl button, .serp__q, .serp__cite { border-radius: 2px; }
.mag-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; font-weight: 500; }
.mag-link:hover { color: var(--berry); }

/* Flächen: flach, ohne Leuchten und Verläufe */
 .stage { background: #251a1b; }
 main > .stage { border-radius: 4px; }
 main > .stage::after, .hero-live::before { display: none; }
.hero-live { box-shadow: 0 0 0 1px var(--line); border-radius: 6px; }
.hero-live__stage, .xp__stage { background: #fff; }
.xp { box-shadow: 0 0 0 1px var(--line); border-radius: 6px; }
.stage .xp { box-shadow: none; }
.xp__steps li.is-at button { background: #fcf5e8; }
.xp__now em { border-radius: 2px; }
.road, .bs, .gb { border-radius: 3px; }
.cover { border-radius: 2px; background: #251a1b; }
.callout { border-radius: 2px; }
.fld input, .fld select, .fld textarea { border-radius: 2px; }

/* Fotoflächen: schlicht wie ein Bild, das noch fehlt (Spezifikation bleibt im Code) */

/* Startseite: Magazin-Hero */

/* Zitat kursiv in der Serife */
.ed-quote { border-top: 0; }
.ed-quote blockquote { font-style: italic; font-weight: 300; max-width: 26ch; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.18; }

/* Leistungen in drei Spalten */

/* Editoriale Listen und Werte: Serifentitel ruhiger */
.ed-list__t { font-weight: 300; }
.ed-hero__h { font-weight: 300; }

/* Footer-Wortmarke in der Serife */
.ft { background: #251a1b; }

/* =====================================================================
   Schrift zurück auf Onest (Wunsch der Inhaberin, 27.10.2026)
   Layout und flache Magazin-Bildwelt bleiben; Hervorhebung farbig statt kursiv.
   ===================================================================== */
body { font-size: 17px; letter-spacing: -.005em; }
h1, h2, .display, .h1, .h2, .ed-h2, .ed-hero__h, .ed-list__t, .cta__h, .ed-values h3, .svcs h3, .steps4 h3, .sits b, .rel a b, .ins__card h3, .art h2, .ft__top .h2, .faq summary, .xp__now span, .phero__h h1 { font-weight: 500; letter-spacing: -.03em; }
h1 em, h2 em, .h1 em, .h2 em, .display em, .cta__h em, blockquote em { font-style: normal; }
.ed-quote blockquote { font-style: normal; font-weight: 400; letter-spacing: -.03em; }
.logo { font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.logo span { opacity: 1; color: var(--berry); font-weight: 400; }
.faq summary { font-size: 1.15rem; }

/* =====================================================================
   Anti-KI & Handwerk
   Ruhe statt Einblend-Effekten, eine Erklär-Animation pro Seite,
   Feinheiten, die man erst auf den zweiten Blick bemerkt.
   ===================================================================== */

/* 1 · Keine generischen Einblend-Effekte mehr (Inhalte stehen einfach da) */
.sec .h2, .sec .lead, .area, .ins__card, .proc li, .stat, .svcs > div,
.xp, .pieces, .rel a, .faq details, .sec .h2::before, .ed-hero__h .ln > span, .ed-hero__lead,
.ed-hero .btns, .ed-hero__meta, .ed-hero__img { animation: none !important; }

/* 2 · Weiche Seitenübergänge (Cross-Document View Transitions, reines CSS) */
@view-transition { navigation: auto; }
.hd { view-transition-name: site-header; }
::view-transition-old(root) { animation: 180ms cubic-bezier(.23, 1, .32, 1) both vtOut; }
::view-transition-new(root) { animation: 320ms cubic-bezier(.23, 1, .32, 1) both vtIn; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* 3 · Typografische Feinheiten */
html { text-rendering: optimizeLegibility; font-kerning: normal; font-optical-sizing: auto; }
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
h1, h2, h3 { font-feature-settings: "kern" 1, "liga" 1, "ss01" 1; text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
blockquote, .ed-quote blockquote { hanging-punctuation: first; }
.ed-quote blockquote p { text-indent: -.42em; }
 .ed-list__n, .steps4__n, .xp__count, .svcs > div::before { font-variant-numeric: tabular-nums lining-nums; }
 .caps { font-variant-caps: all-small-caps; letter-spacing: .04em; }

/* 4 · Links mit fein animierter Unterstreichung */
.mag-link, .tlink, .ed-more a, .art p a, .ft li a {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .28em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 200ms ease, text-underline-offset 200ms var(--ease-out), color 200ms ease;
  background: none;
}
@media (hover: hover) and (pointer: fine) {
  .mag-link:hover, .tlink:hover, .ed-more a:hover, .art p a:hover, .ft li a:hover { text-decoration-color: currentColor; text-underline-offset: .18em; }
}

/* 5 · Präzises Raster: Seitenkopf ohne Live-Animation, ruhige Textbreite */

/* 6 · Abschluss: ruhig, ohne Bild */
.cta .cta__txt { grid-column: 1 / 8; }

/* 7 · Fokus und Auswahl als bewusste Details */
::selection { background: #251a1b; color: #fff; }

/* 8 · Haarlinien exakt auf Pixelraster */
.ed-list, .svcs, .ed-values { border-top-width: 1px; }
@media (min-resolution: 2dppx) { .ed-list__row, .svcs > div, .ed-values li, .sits li, .rel a { border-bottom-width: .5px; } }

/* =====================================================================
   Suche, Academy, Buchungsleiste
   ===================================================================== */
/* Suchknopf im Header */
.search-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--white); color: var(--g5); font-size: .9rem; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.search-btn:hover { border-color: var(--ink); color: var(--ink); }
.search-btn kbd { font: 500 .72rem var(--f-sans); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--g4); }
.hd__in .nav { margin-left: 8px; }
@media (max-width: 1100px) { .menu-btn { margin-left: 6px; } .search-btn { padding: 0 10px; } .search-btn span, .search-btn kbd { display: none; } }
.badge { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: .68rem; font-weight: 600; letter-spacing: .02em; border-radius: 2px; background: var(--berry); color: #fff; vertical-align: 2px; }

/* Suchfenster */
.search { position: fixed; inset: 0; z-index: 200; background: rgba(37,26,27,.45); display: grid; justify-items: center; align-items: start; padding: clamp(16px, 10vh, 120px) 16px 16px; opacity: 0; transition: opacity 160ms ease; }
.search.is-open { opacity: 1; }
.search[hidden] { display: none; }
.search__panel { width: min(680px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column; background: var(--white); border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(37,26,27,.4); overflow: hidden; transform: translateY(-8px); transition: transform 200ms var(--ease-out); }
.search.is-open .search__panel { transform: none; }
.search__form { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.search__form .ico { color: var(--g4); flex: none; }
.search__form input { flex: 1; min-width: 0; height: 60px; border: 0; outline: 0; background: none; font-size: 1.1rem; color: var(--ink); }
.search__form input::-webkit-search-cancel-button { display: none; }
.search__close { flex: none; height: 28px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 2px; background: none; font-size: .75rem; color: var(--g4); cursor: pointer; }
.search__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.search__results a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 3px; text-decoration: none; color: var(--ink); }
.search__results a:hover, .search__results a.is-active, .search__results a:focus-visible { background: #f3f2f1; outline: none; }
.search__results small { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--berry); }
.search__results b { font-weight: 500; font-size: 1rem; }
.search__results span { font-size: .88rem; color: var(--g4); line-height: 1.45; }
.search__hint { margin: 0; padding: 10px 20px 14px; font-size: .82rem; color: var(--g4); border-top: 1px solid var(--line); }
.search__results:empty + .search__hint { border-top: 0; }

/* Suchseite */
.search-page__form { display: flex; gap: 8px; margin-top: 32px; }
.search-page__form input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--white); font-size: 1.05rem; }
.search__results--page { padding: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.search__results--page a { padding: 18px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.search__results--page a:hover { background: none; }
.search__results--page a:hover b { color: var(--berry); }
[data-sp-hint] { padding-left: 0; border-top: 0; }

/* Mobile Buchungsleiste */
.bookbar { display: none; }
@media (max-width: 767px) {
  .bookbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; padding: 6px; background: var(--white); border-radius: 4px; box-shadow: 0 12px 30px -10px rgba(37,26,27,.35), 0 0 0 1px var(--line); transform: translateY(140%); transition: transform 260ms var(--ease-out); }
  .bookbar.is-on { transform: none; }
  .bookbar a { display: grid; place-items: center; height: 46px; border-radius: 2px; text-decoration: none; font-weight: 500; font-size: .95rem; }
  .bookbar__main { background: var(--ink); color: #fff; }
  .bookbar__alt { border: 1px solid var(--line-strong); color: var(--ink); }
  body { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .bookbar, .search, .search__panel { transition: none; } }

/* Academy */
.acad__badge { display: inline-block; margin: 0 0 18px; padding: 4px 10px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; border-radius: 2px; background: var(--berry); color: #fff; justify-self: start; }
.acad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
@media (max-width: 860px) { .acad { grid-template-columns: 1fr; } }
.perks { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.perks li { border-top: 2px solid #fff; padding-top: 18px; }
.perks span { font-size: .85rem; color: #b498a8; font-variant-numeric: tabular-nums; }
.perks h3 { font-size: 1.35rem; margin: 8px 0 10px; letter-spacing: -.02em; }
.perks p { margin: 0; color: #c9c6c5; }
@media (max-width: 860px) { .perks { grid-template-columns: 1fr; } }
.course-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 56px); padding: 28px 0; border-top: 1px solid var(--ink); }
.course-group__h { font-size: 1.15rem; letter-spacing: -.01em; }
.courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); }
.courses h4 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.courses p { margin: 0; color: var(--g5); font-size: .97rem; }
.courses .courses__meta { margin-top: 8px; font-size: .85rem; color: var(--g4); }
@media (max-width: 860px) { .course-group, .courses { grid-template-columns: 1fr; } }
.waitlist .btn { margin-top: 8px; }
.waitlist .form__msg { display: none; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--ink); border-radius: 2px; }
.waitlist .form__msg.is-on { display: block; }
@media (max-width: 1023px) { .waitlist, #warteliste .form__aside { grid-column: 1 / -1 !important; } }
.hd__cta, .nav__item > a, .nav__item > button { white-space: nowrap; }
@media (max-width: 1599px) { .search-btn span, .search-btn kbd { display: none; } .search-btn { padding: 0 10px; } .nav__item > a, .nav__item > button { padding: 0 9px; } .hd__in { gap: 20px; } }
@media (max-width: 420px) { .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hd__in { gap: 12px; } .bookbar a { font-size: .85rem; white-space: nowrap; } .bookbar { grid-template-columns: 1.3fr 1fr; } }
.badge { font-size: .72rem; }

/* ============================================================
   Shopify vorn & „Keine klassische Agentur“ (27.10.2026)
   ============================================================ */

/* Vergleich: viele Hände gegen eine */
.vs2 { width: 100%; display: grid; gap: 22px; font-size: .9rem; }
.vs2__row { border: 1px solid var(--line); border-radius: 4px; padding: 16px 16px 18px; background: #fff; }
.vs2__row--onset { border-color: var(--ink); }
.vs2__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 14px; font-weight: 600; }
.vs2__count { font-weight: 400; color: var(--g4); font-variant-numeric: tabular-nums; }
.vs2__count b { font-weight: 600; color: var(--ink); font-size: 1.15rem; margin-left: 4px; }
.vs2__row--classic .vs2__count b { color: var(--berry); }
.vs2__count b.is-zero { color: var(--ink); }
.js .vs2__count b[data-at]:not(.is-at) { display: none; }
html:not(.js) .vs2__count b[data-at]:not(:last-child) { display: none; }
.vs2__chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vs2__p { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--g4); transition: color .3s ease, border-color .3s ease, background-color .3s ease, opacity .3s ease; }
.vs2__p b { font-weight: 500; }
.js .vs2__p.is-idle { opacity: .4; }
.vs2__p.is-at { color: var(--ink); border-color: var(--berry); background: var(--berry-soft); }
.vs2__hand { display: inline-flex; color: var(--berry); font-style: normal; }
.js .xp .vs2__hand[data-from]:not(.is-in) { opacity: .15; }
.vs2__track { display: flex; align-items: center; gap: 12px; }
.vs2__me { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 2px; background: var(--ink); color: #fff; white-space: nowrap; }
.vs2__me b { font-weight: 500; }
.vs2__line { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.vs2__line i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--berry); transition: width .7s var(--ease-out); }
.vs2__labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; font-size: .78rem; color: var(--g4); padding-left: 0; }
.vs2__labels span { text-align: center; }
@media (max-width: 480px) { .vs2__p { padding: 6px 8px; } .vs2__p b { font-size: .82rem; } .vs2__labels { font-size: .7rem; } }

.why { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 28px 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.why li { color: var(--g5); line-height: 1.6; }
.why b { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; margin-bottom: 8px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* Leistungs-Explorer */
.ex__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin-bottom: 28px; }
.ex__tabs [role="tab"] { text-align: left; background: none; border: 0; border-top: 1px solid var(--line-strong); padding: 16px 0 6px; color: var(--g4); cursor: pointer; font: inherit; display: grid; gap: 4px; transition: color .2s ease, border-color .2s ease; }
.ex__tabs [role="tab"]:hover { color: var(--ink); }
.ex__tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-top: 3px solid var(--berry); padding-top: 14px; }
.ex__tabs b { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
@media (max-width: 700px) { .ex__tabs { grid-template-columns: 1fr; gap: 0; } .ex__tabs [role="tab"] { padding: 12px 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; } .ex__tabs [role="tab"][aria-selected="true"] { padding-top: 10px; } }

/* Leistungs- und Lösungsseiten: Hero mit laufendem Beispiel rechts */
.phx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.phx .phero__h { grid-column: auto; }
.phx .phero__h .h1, .phx .phero__h h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.9rem); }
.phx .lead { margin-top: 28px; max-width: 46ch; }
.phx .btns { margin-top: 32px; }
.phx__live .hero-live { max-width: 440px; margin-left: auto; }
@media (max-width: 960px) { .phx { grid-template-columns: 1fr; } .phx__live .hero-live { margin: 0; } }
/* Hero-Beispiel kompakt: Schrittname steht schon in der Bildunterschrift */
:is( .phx__live) .xp__now { display: none; }
:is( .phx__live) .hero-live__stage { min-height: 0; }
:is( .phx__live) .hero-live .phone { width: min(190px, 56%); }

/* ============================================================
   Handschrift (27.10.2026): weniger Vorlagen-Signale
   Beere nur noch für Logo-Punkt, H1-Akzentwort und den aktiven Zustand
   in Animationen. Ziffern, Labels und Badges bleiben in Tinte und Grau.
   ============================================================ */
.mono, .mega h3, .ft h3, .bc, .bc a, .fit__h, .road__col span, .search__results small, .cover__k {
  font-family: var(--f-sans); text-transform: none; letter-spacing: 0; }
.mega h3, .ft h3, .fit__h { font-size: .9rem; font-weight: 500; color: var(--g4); }
.bc { font-size: .88rem; }

/* Nummern: schlichte Ziffern statt farbiger Marken */
.xp__now em { background: none; color: var(--g4); padding: 0; border-radius: 0; font-size: .7em; font-weight: 500; letter-spacing: 0; }
 .steps4__n, .ed-list__n, .xp__steps .mono, .hero-live__cap .mono, .search__results small { color: var(--g4); }
.xp__hd .mono { color: var(--g4); }
.xp__hd .mono:first-child::before { display: none; }

/* Badges: Hinweis, kein Aufkleber */
.badge { background: none; color: var(--g4); border: 1px solid var(--line-strong); padding: 0 5px; font-weight: 500; }
.acad__badge { background: none; color: var(--ink); border: 1px solid var(--ink); }

/* Hero: Zeile statt Zahlenreihe */

/* Abschnittskopf zweispaltig: bricht den Rhythmus Überschrift-über-Absatz */
.ed-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.ed-split .ed-h2 { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 1; }
.ed-split .ed-intro { margin: 0; }
@media (max-width: 860px) { .ed-split { grid-template-columns: 1fr; } }

/* Gründe als Zeilen mit Randtitel statt drei gleicher Spalten */
.why { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.why li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); padding: 20px 0; border-bottom: 1px solid var(--line); }
.why b { margin: 0; font-size: 1.1rem; }
@media (max-width: 700px) { .why li { grid-template-columns: 1fr; gap: 6px; } }

/* Tabs: hörbar gedrückt, Farbe nur bei echtem Zeiger */
.ex__tabs [role="tab"] { transition: color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out); }
.ex__tabs [role="tab"]:active { transform: scale(.985); }
.ex__tabs [role="tab"]:hover { color: var(--g4); }
@media (hover: hover) and (pointer: fine) { .ex__tabs [role="tab"]:hover { color: var(--ink); } }
.rel .mono { color: var(--g4); }

/* ============================================================
   Weiche Bedienelemente (27.10.2026, Wunsch der Inhaberin)
   Buttons und Steuerungen rund, Eingabefelder sanft gerundet.
   ============================================================ */
.btn, .btn--ghost, .chip, .chips span, .xp__ctrl button, .search-btn, .menu-btn, .bookbar a { border-radius: 999px; }
.btn { padding: 0 24px 0 26px; gap: 12px;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.btn .ico { transition: transform 200ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.search-btn kbd { border-radius: 6px; }
.fld input, .fld select, .fld textarea, .search-page__form input { border-radius: 12px; }
.search-page__form .btn { flex-shrink: 0; }
.bookbar { border-radius: 999px; padding: 6px; }
.serp__q, .serp__cite { border-radius: 999px; }
.btn { white-space: nowrap; }
@media (max-width: 400px) { .btn { padding: 0 18px 0 20px; gap: 10px; font-size: .95rem; } }
@media (max-width: 400px) { .btn { white-space: normal; text-align: left; line-height: 1.25; padding-block: 12px; } }

/* ============================================================
   Einfach & im Fluss (27.10.2026)
   Ein durchgehender Papiergrund statt Weiß-/Schwarzblöcken, keine Kartenkästen,
   Erklärungen als ruhige Illustration mit einer Bildunterschrift.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Flächen: alles auf einem Grund; nur der Schluss-CTA bleibt dunkel */
.on-white, .sec.stage { background: transparent; }
.sec.stage { color: var(--ink); --line: rgba(37, 26, 27, .1); --line-strong: rgba(37, 26, 27, .28); }
main > .stage { margin: 0; border-radius: 0; }
.stage em, .stage h2 em { color: var(--berry); }
.stage .muted, .stage .lead, .stage p { color: inherit; }
.sec { padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(64px, 8vw, 128px); }
.sec + .sec { padding-top: clamp(24px, 3vw, 48px); }

/* Karten werden zu Textblöcken */
.sits li, .steps4 li, .svcs > div, .svcs > div:nth-child(even), .callout {
  background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
.sits { gap: 28px 40px; }
.svcs { gap: 36px 48px; }

/* Erklär-Player: Bühne + eine wechselnde Bildunterschrift */
.xp, .stage .xp { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.xp__hd, .xp__now, .xp__count, .xp__note { display: none; }
.xp__prog { border: 0; padding: 0 0 14px; }
.xp__prog i { height: 2px; background: var(--line); }
.xp__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.xp__stage, .stage .xp__stage { border: 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.xp__side { justify-content: center; }
.js .xp__steps { display: grid; flex: 0; }
.js .xp__steps li { grid-area: 1 / 1; border: 0; opacity: 0; transform: translateY(6px); visibility: hidden;
  transition: opacity 320ms ease, transform 420ms var(--ease-out), visibility 0s 320ms; }
.js .xp__steps li.is-at { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.js .xp.is-static .xp__steps li:last-child { opacity: 1; transform: none; visibility: visible; }
.xp__steps button, .xp__steps li.is-at button, .stage .xp__steps li.is-at button { background: none; padding: 0; cursor: default; color: var(--ink); grid-template-columns: 1fr; gap: 10px; }
.xp__steps button::before { display: none; }
.xp__steps button .mono { padding: 0; font-size: .9rem; color: var(--g4); }
.xp__steps button b { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1.2; letter-spacing: -.02em; }
.js .xp__steps button span.d { max-height: none; opacity: 1; font-size: 1rem; line-height: 1.6; color: var(--g4); margin-top: 8px; }
.xp__ctrl { border: 0; padding: 24px 0 0; gap: 8px; }
.xp__ctrl [data-act="play"] { font-size: 0; width: 40px; padding: 0; position: relative; }
.xp__ctrl [data-act="play"]::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.xp.is-paused .xp__ctrl [data-act="play"]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; border-right: 0; margin-left: 3px; }
.xp__result { border: 0; padding: 28px 0 0; max-width: 70ch; font-size: .98rem; }
@media (max-width: 900px) { .xp__body { grid-template-columns: 1fr; } .xp__stage, .stage .xp__stage { border: 0; } }

/* ============================================================
   Bewegung mit Fluss (27.10.2026)
   Nur CSS: ruhiger Einstieg im Hero, Inhalte gleiten beim Scrollen herein
   (an die Scrollposition gekoppelt, kein Wackeln, keine Verzögerung),
   feine Fortschrittslinie unter dem Header. H1 bleibt sofort sichtbar (LCP).
   ============================================================ */
@keyframes svUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes svLift { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes svLine { to { background-size: 100% 2px; } }
@keyframes svFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes svRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes svSettle { from { transform: scale(.94); } to { transform: none; } }
@keyframes svBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg */
   .phx .lead { animation: svUp 700ms var(--ease-out) 80ms both; }
   .phx .btns { animation: svUp 700ms var(--ease-out) 180ms both; }
   .phx__live { animation: svLift 1000ms var(--ease-out) 120ms both; }
   .phx__live .hero-live { animation: svFloat 6s ease-in-out 1.2s infinite alternate; }
   .phx .phero__h em { background: linear-gradient(currentColor, currentColor) 0 94% / 0 2px no-repeat; animation: svLine 900ms var(--ease-out) 500ms forwards; }

  /* Gekoppelt an den Scroll (Chrome, Edge, Safari 26); andere Browser zeigen alles sofort */
  /* Scroll-gekoppeltes Einblenden ersetzt durch einmaliges, gestaffeltes Hereingleiten (site.js, .rv) */

  /* Tab-Wechsel weich */

  /* Verwandte Links reagieren auf den Zeiger */
  @media (hover: hover) and (pointer: fine) {
    .rel a { transition: transform 250ms var(--ease-out); }
    .rel a:hover { transform: translateY(-3px); }
  }
}

/* ============================================================
   Schliff (27.10.2026): eine Typo-Skala für die ganze Seite
   Vorher über 60 Schriftgrößen aus den Überarbeitungsschichten.
   Jetzt: 13 · 14 · 16 · 17 · 18 · 22 px, H3 20 px, H2 und H1 je eine Formel.
   ============================================================ */
body { font-size: var(--fs-b); line-height: 1.6; }
main p, main li, main dd { text-wrap: pretty; }

/* Überschriften */
 .phx .phero__h .h1, .phx .phero__h h1, .phero__h h1, .phero__h .h1, .ed-hero__h { font-size: var(--fs-h1); line-height: 1.02; }
.h2, .ed-h2, .ed-split .ed-h2, .blk__h .h2, .cta__h { font-size: var(--fs-h2); line-height: 1.06; }
.ft__top .h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.art h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
main h3, .h3, .course-group__h, .why b, .ex__tabs b, .xp__steps button b { font-size: var(--fs-h3); line-height: 1.3; }
h2.h3 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); }
.ed-list__t a, .ed-list__t { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }

/* Fließtext */
.lead, .phero__lead, .ed-hero__lead, .cta__txt .lead { font-size: var(--fs-lead); line-height: 1.45; }
 .art p, .art li, .faq summary { font-size: var(--fs-l); }
main p, .why li, .ed-intro, .ed-more, .ed-about__txt p, dd, .callout p { font-size: var(--fs-b); }
 .xp__result, .tools, .fld label, .fld .lbl, .hero-sys__steps li, .ed-list__i, .courses__meta, .mega__aside p, .nav__item, .js .xp__steps button span.d { font-size: var(--fs-m); }

/* Meta, Labels, Kleingedrucktes */
.mono, .bc, .bc a, .art__meta, .ft__bar, .ft__bar a, .tlink, .hero-live__cap .tlink, .fit__h, .mega h3, .ft h3, dt, .callout .muted, .perks span, .steps4__n, .xp__steps button .mono { font-size: var(--fs-s); }
.badge, .acad__badge, small, .cover__k { font-size: var(--fs-xs); }
 .perks span { color: var(--g4); }

/* Zeilenlänge */
.ed-more, .tools, .xp__result, .art p { max-width: 68ch; }
.why li > :not(b) { max-width: 62ch; }

/* Klickflächen */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
/* Skala: spezifischere Altregeln einfangen */
.svcs h3, .steps4 li h3, .perks li h3, .art h3, .ed-values h3, .courses li h4 { font-size: var(--fs-h3); line-height: 1.3; }
.courses li h4 { font-size: var(--fs-l); }
.nav__item > a, .nav__item > button, .ft__contact, .ft__contact a, .ft li a { font-size: var(--fs-m); }
.ed-list__body p, .checks li span, .sits li b, .sits li span, .steps4 li p, .courses li p, .callout p { font-size: var(--fs-b); }
.sits li span, .steps4 li p, .courses li p { font-size: var(--fs-m); }
.ed-list__n, .ed-list__i, .ed-hero__meta, .ed-quote__by, .chips span, .consent, .rel a > span, .rel .mono { font-size: var(--fs-m); }
.rel .mono, .hero-live__cap .mono, .ed-values li > span, .ed-facts dt, .form__aside .muted, .courses__meta, a small { font-size: var(--fs-s); }
.fs legend { font-size: var(--fs-h3); }
.logo { font-size: 1.25rem; }
.mega li a { font-size: var(--fs-b); }
.mega li a small { font-size: var(--fs-s); }
.ed-list__body p.ed-list__i { font-size: var(--fs-m); }
.callout p.muted, .form__aside .callout p.muted, .courses li p.courses__meta { font-size: var(--fs-s); }
/* Einstieg: Text bewegt sich nur, bleibt aber immer lesbar (falls Animationen stocken) */
@keyframes svNudge { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
   .phx .lead, .phx .btns { animation-name: svNudge; }
}
/* Mobil: Lead etwas ruhiger, Leistungsliste untereinander statt schmaler Spalte */
.lead, .phero__lead, .ed-hero__lead, .cta__txt .lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.375rem); }
@media (max-width: 600px) {
  .ed-list__row { grid-template-columns: 1fr; gap: 8px; }
  .ed-list__body { grid-column: 1; }
}
/* Nummern der Leistungsblöcke über dem Titel statt darüberliegend */
.svcs > div { position: relative; padding: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.svcs > div::before { position: static; display: block; margin-bottom: 8px; font-size: var(--fs-s); }
@media (max-width: 960px) { .phx { grid-template-columns: minmax(0, 1fr); } }
.phx__live { min-width: 0; }

/* ============================================================
   Taste-Durchgang (27.10.2026)
   ============================================================ */
/* H1 führt, schreit aber nicht */

/* Leistungs-Explorer asymmetrisch: Auswahl links, Beispiel rechts */
@media (min-width: 1100px) {
  .ex__tabs { grid-template-columns: 1fr; gap: 0; margin: 0; position: sticky; top: 110px; }
  .ex__tabs [role="tab"] { padding: 18px 0 18px; border-top: 1px solid var(--line); }
  .ex__tabs [role="tab"][aria-selected="true"] { border-top: 2px solid var(--berry); padding-top: 17px; }
}

/* Academy-Vorteile: Zeilen mit Randtitel statt drei gleicher Spalten */
.perks { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
.perks li { display: grid; grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr); gap: 8px clamp(16px, 3vw, 48px); align-items: baseline; padding: 22px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.perks h3 { margin: 0; }
.perks p { color: var(--g5); max-width: 60ch; }
@media (max-width: 700px) { .perks li { grid-template-columns: 2.5rem minmax(0, 1fr); } .perks p { grid-column: 2; } }

/* Fehlertext unter dem Feld, in Beere */
.err { color: var(--berry); margin: 6px 0 0; font-size: var(--fs-s); }
.fld.is-err input, .fld.is-err select, .fld.is-err textarea { border-color: var(--berry); }
label.is-err { color: var(--berry); }

/* ============================================================
   Flow nach Vorbild milestudio.de (27.10.2026)
   weiche Karten, die beim Hereinscrollen gestaffelt hochgleiten.
   Inhalte unverändert.
   ============================================================ */

/* Header als schwebende Kapsel */
.hd { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 12px; }
.hd::after { display: none !important; }
.hd__in { background: color-mix(in srgb, #fff 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--card-line); border-radius: 999px; padding-inline: 22px 8px; height: 64px; position: relative;
  width: calc(100% - 2 * var(--edge)); max-width: var(--max); /* Kapsel bündig mit der Inhaltskante, nicht bis zum Fensterrand */
  box-shadow: 0 10px 30px -18px rgba(37, 26, 27, .22); }
.hd .mega { top: calc(100% + 8px); border: 1px solid var(--card-line); border-radius: 24px; box-shadow: 0 24px 60px -30px rgba(37, 26, 27, .3); background: #fff; }
/* Mobilmenü: Untermenü ohne Karte (Rahmen, Radius, Schatten), bündig mit den Menüpunkten */
@media (max-width: 1100px) { .hd .mega { border: 0; border-radius: 0; box-shadow: none; background: none; } .hd .mega > .wrap { padding-inline: 0; } }
.hd.is-menu .hd__in { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
@media (max-width: 1100px) { .hd__in { padding-inline: 18px 6px; } }


/* Zarter Farbschimmer hinter dem Hero */
@keyframes glowDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
 .phx { position: relative; isolation: isolate; }
 .phx::before { content: ""; position: absolute; z-index: -1; inset: -120px -10% auto auto; width: min(780px, 90vw); aspect-ratio: 1.2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180, 152, 168, .26), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(149, 31, 40, .06), transparent 70%);
  filter: blur(10px); }
@media (prefers-reduced-motion: no-preference) {  .phx::before { animation: glowDrift 14s ease-in-out infinite alternate; } }
body { overflow-x: clip; }

/* Weiche Karten */
.sits li, .steps4 li, .svcs > div, .svcs > div:nth-child(even), .perks li, .rel > a, .courses li, .ed-values li {
  background: #fff; border: 1px solid var(--card-line); border-radius: 22px; padding: 24px;
  box-shadow: 0 1px 0 rgba(37, 26, 27, .02), 0 14px 34px -26px rgba(37, 26, 27, .2);
  transition: transform 350ms var(--spring), box-shadow 350ms ease, border-color 200ms ease; }
.svcs, .sits, .steps4, .courses, .ed-values, .rel { gap: 16px; border-top: 0; }
.svcs > div { padding-top: 24px; }
.perks { border-top: 0; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.perks li { display: block; }
.perks li h3 { margin: 8px 0 8px; }
.ed-values li { display: block; }
.rel > a { border-bottom: 1px solid var(--card-line); }
/* Alte Linien-Regel `.rel a + a` (Abstand/Rand links weg) überstimmt sonst ab der 2. Karte den Kartenstil */
.rel > a + a { padding-left: 24px; border-left: 1px solid var(--card-line); }
@media (hover: hover) and (pointer: fine) {
  .sits li:hover, .steps4 li:hover, .svcs > div:hover, .perks li:hover, .rel > a:hover, .courses li:hover, .ed-values li:hover {
    transform: translateY(-4px); border-color: #ddd7d3; box-shadow: 0 1px 0 rgba(37, 26, 27, .02), 0 24px 44px -28px rgba(37, 26, 27, .3); }
}

/* Gestaffeltes Hereingleiten (Klassen setzt site.js) */
@keyframes rvIn { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.rv:not(.is-rv) { opacity: 0; }
.rv.is-rv { animation: rvIn 900ms var(--spring) calc(var(--rv-i, 0) * 90ms) backwards; }

/* Erklär-Bühne: weicher, wie die Karten */
.xp__stage, .stage .xp__stage { border-radius: 28px; box-shadow: 0 0 0 1px var(--card-line), 0 30px 60px -40px rgba(37, 26, 27, .3); }
.hero-live { border-radius: 28px; box-shadow: 0 0 0 1px var(--card-line), 0 30px 60px -36px rgba(37, 26, 27, .3); background: #fff; }


/* ============================================================
   Liebevoll (27.10.2026): Wärme, Handschrift, kleine Überraschungen
   ============================================================ */
body { background: var(--paper); }
.hd__in { background: color-mix(in srgb, #fff 88%, transparent); }

/* Abschnitte als weiche, getönte Flächen: bricht den gleichförmigen Fluss liebevoll auf */
#anders, .sec.stage, .sec#passt {
  margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px); padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
#anders { background: var(--blush); }
.sec.stage { background: linear-gradient(180deg, var(--peach), var(--blush)); }
.sec#passt { background: #fff; border: 1px solid var(--card-line); }
#anders + .sec, .sec.stage + .sec { padding-top: clamp(64px, 7vw, 112px); }

/* Akzentwort mit hand gezeichneter Linie, die sich einzeichnet */
@keyframes drawIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
 .phx .phero__h em, .phero__h em { position: relative; background: none !important; animation: none !important; white-space: nowrap; }
 .phx .phero__h em::after, .phero__h em::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .28em; pointer-events: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-8 90-11 194-5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-8 90-11 194-5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
   .phx .phero__h em::after, .phero__h em::after { animation: drawIn 900ms var(--spring) 450ms both; }
}

/* Handschrift-Notizen */
.note { font-family: var(--hand); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--berry); margin: 0; }

/* Sticker am Hero-Beispiel */
@keyframes bob { from { translate: 0 0; } to { translate: 0 -7px; } }

/* Kleine Freude beim Zeigen */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 10px 24px -12px rgba(149, 31, 40, .45); }
  .sits li:hover, .steps4 li:hover, .svcs > div:hover, .perks li:hover, .courses li:hover, .ed-values li:hover { border-color: #e2d4dc; }
}
.checks li svg { transition: transform 300ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .checks li:hover svg { transform: scale(1.2) rotate(-8deg); } }
 .phx { overflow-x: clip; }
 .phx::before { right: 0; inset-inline-end: 0; }
.ed-facts dd { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 520px) { .ed-facts { grid-template-columns: 1fr !important; } }

/* ============================================================
   Persönlichkeit durch Konkretes (27.10.2026)
   Kicker-Labels, feste Versprechen, offene Preise, Bento mit Mini-Oberflächen.
   Deko (Sticker, Handschrift, Kringel) entfernt.
   ============================================================ */
 .phx .phero__h em::after, .phero__h em::after { display: none; }
 .phero__h em { white-space: normal; }

/* Kicker über Überschriften */
.kicker { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.ed-split .kicker { margin-bottom: 14px; }

/* Versprechen */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.promises li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--card-line); border-radius: 18px; font-size: var(--fs-s); color: var(--g4); line-height: 1.45; }
.promises li svg { color: var(--berry); flex: none; margin-top: 2px; }
.promises b { display: block; color: var(--ink); font-size: var(--fs-m); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 1000px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }

/* Bento */
.bento__tile { background: #fff; border: 1px solid var(--card-line); border-radius: 28px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 14px 34px -28px rgba(37, 26, 27, .25); }
.bento__tile h3 { margin: 14px 0 0; }
.bento__tile p { margin: 0; color: var(--g4); font-size: var(--fs-m); max-width: 52ch; }
@media (max-width: 900px) { .bento__tile { grid-column: 1 / -1 !important; } }

/* Mini-Oberflächen */

/* Preise */
.prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prices a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; background: #fff; border: 1px solid var(--card-line); border-radius: 22px; text-decoration: none; color: inherit;
  transition: transform 350ms var(--spring), box-shadow 350ms ease, border-color 200ms ease; }
.prices__k { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.prices__p { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prices__d { color: var(--g4); font-size: var(--fs-m); }
.prices__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; font-size: var(--fs-s); color: var(--g4); }
.prices__more a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line, #ece4e8); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.prices__more a:hover { border-color: #e2d4dc; transform: translateY(-2px); }
.prices__more b { font-weight: 600; }
.prices__note { margin: 16px 0 0; font-size: var(--fs-s); color: var(--g4); }
@media (hover: hover) and (pointer: fine) { .prices a:hover { transform: translateY(-4px); border-color: #e2d4dc; box-shadow: 0 24px 44px -28px rgba(37, 26, 27, .3); } }
@media (max-width: 1000px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .prices { grid-template-columns: 1fr; } }
main { padding-top: 44px; }
@media (max-width: 600px) { main { padding-top: 40px; } }
main { padding-top: 56px; }
@media (max-width: 600px) { main { padding-top: 48px; } }

/* ============================================================
   Weiß statt Beige, Aufbau nach milestudio (27.10.2026)
   Weißer Grund, neutrale Grau-Flächen, ein dunkler Abschnitt.
   ============================================================ */
body { background: #fff; }
.hd__in { background: color-mix(in srgb, #fff 90%, transparent); }

/* Hero: nur ein zarter Beeren-Schimmer, kein Pfirsich */
 .phx::before { background: radial-gradient(closest-side, rgba(149, 31, 40, .08), transparent 72%); filter: blur(20px); }

/* Getönte Flächen jetzt neutral grau */
.sec.stage { background: var(--soft); }
 .sec#passt { background: var(--soft); border: 0; }

/* Der eine dunkle Abschnitt */
#anders { background: #141416; color: #fff; margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .28); }
@media (max-width: 900px) { .xp__body { grid-template-columns: minmax(0, 1fr); } }
.xp__stage, .xp__side { min-width: 0; }
@media (max-width: 400px) { .vs2__chain { gap: 6px; } .vs2__p { padding: 5px 7px; } .vs2__p svg { display: none; } }

/* ============================================================
   Finaler Schliff (27.10.2026): Person, Leben in den Details
   ============================================================ */
/* Personenkarte */

/* Werkzeug-Band */
@keyframes toolsRun { to { transform: translateX(-50%); } }

/* Mini-Oberflächen leben: Endzustand ist immer der sichtbare Zustand */
@keyframes lineIn { 0%, 6% { opacity: .25; transform: translateX(-6px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes sumPulse { 0%, 40% { background: transparent; } 50% { background: #fcf2e1; } 70%, 100% { background: transparent; } }
@keyframes typing { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes typeShow { 0%, 12% { opacity: 0; height: 0; margin: 0; } 16%, 40% { opacity: 1; height: 26px; } 44%, 100% { opacity: 0; height: 0; margin: 0; } }
@keyframes replyIn { 0%, 42% { opacity: 0; transform: translateY(8px) scale(.97); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }
/* Loops so versetzt, dass Sekunde 0 schon im sichtbaren Teil liegt */
/* Kein Online-Punkt: er würde Erreichbarkeit in Echtzeit versprechen */

/* ============================================================
   Echte Referenzen & Effekte aus der Venice-Version (27.10.2026)
   ============================================================ */
/* Erzählte Referenzen */
.stories { display: grid; gap: clamp(64px, 9vw, 120px); }
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.story--flip .story__media { order: 2; }
.story__media { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--soft); box-shadow: 0 50px 90px -50px rgba(37, 26, 27, .45); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spring); }
@media (hover: hover) and (pointer: fine) { .story__media:hover img { transform: scale(1.04); } }
.story__cover { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; color: #fff; background: linear-gradient(135deg, #251a1b, #141416); letter-spacing: -.04em; }
.story__chapter { position: absolute; left: 18px; top: 18px; padding: 7px 14px; border-radius: 999px; background: rgba(20, 20, 22, .82); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); }
.story__meta { margin: 0 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.story__client { margin: 0 0 6px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.025em; }
.story__client a { text-decoration: none; color: inherit; }
.story__headline { margin: 0 0 26px; font-size: var(--fs-l); color: var(--g5); }
.story__steps { list-style: none; margin: 0 0 28px; padding: 0; position: relative; display: grid; gap: 18px; }
.story__steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--card-line); }
.story__steps li { position: relative; padding-left: 34px; }
.story__steps li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--berry); box-sizing: border-box; }
.story__steps li:last-child::before { background: var(--berry); }
.story__steps strong { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.story__steps p { margin: 0; font-size: var(--fs-m); color: var(--g4); line-height: 1.6; }
.story__steps li:last-child p { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } .story--flip .story__media { order: 0; } }

/* Bild öffnet sich beim Hereinscrollen (Rahmen zieht sich auf) */
@keyframes clipOpen { from { clip-path: inset(7% 7% 7% 7% round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }
@media (prefers-reduced-motion: no-preference) {
  .story.is-rv .story__media { animation: clipOpen 1.1s var(--spring) both; }
  .story.is-rv .story__media img { animation: imgSettle 1.4s var(--spring) both; }
}
@keyframes imgSettle { from { transform: scale(1.12); } to { transform: none; } }

/* Laufendes Bildband */
@keyframes stripRun { to { transform: translateX(-50%); } }
.wstrip { overflow: hidden; padding: 10px 0 clamp(40px, 5vw, 72px); }
.wstrip__track { display: flex; gap: 16px; width: max-content; }
.wstrip__item { margin: 0; width: clamp(180px, 18vw, 260px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--soft); flex: none; }
.wstrip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--spring); }
@media (hover: hover) and (pointer: fine) { .wstrip__item:hover img { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .wstrip__track { animation: stripRun 60s linear infinite; }
  .wstrip:hover .wstrip__track { animation-play-state: paused; }
}

/* Blätter: Abschnitt schiebt sich mit runden Ecken über den vorigen */
.lift { position: relative; z-index: 1; margin-top: -48px; border-radius: 48px 48px 0 0; background: #fff; box-shadow: 0 -24px 50px -40px rgba(37, 26, 27, .35); }
.lift + .wstrip { background: #fff; position: relative; z-index: 1; }
@media (max-width: 700px) { .lift { margin-top: -28px; border-radius: 28px 28px 0 0; } }
#bekommen { background: var(--soft); padding-bottom: clamp(96px, 10vw, 150px); }

/* Fallstudien-Seite */
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 32px 0 0; border-top: 1px solid var(--card-line); }
.case-facts div { padding: 12px 0; border-bottom: 1px solid var(--card-line); }
.case-facts dt { font-size: var(--fs-s); color: var(--g4); }
.case-facts dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.story__media--hero { aspect-ratio: 4 / 3; }
.case-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-chapters li { background: #fff; border: 1px solid var(--card-line); border-radius: 22px; padding: 26px; }
.case-chapters span { font-size: var(--fs-s); color: var(--berry); font-weight: 600; font-variant-numeric: tabular-nums; }
.case-chapters h3 { margin: 6px 0 10px; }
.case-chapters p { margin: 0; color: var(--g4); }
@media (max-width: 760px) { .case-chapters { grid-template-columns: 1fr; } }
.case-result .lead { color: #c9c9cf; max-width: 60ch; }
.case-tags { margin-top: 28px; color: #a9a9b0; font-size: var(--fs-m); }
.case-tags b { color: #fff; font-weight: 600; }
.case-next__a { display: flex; flex-direction: column; gap: 4px; padding: 28px; border-radius: 28px; background: var(--soft); text-decoration: none; color: inherit; transition: transform 350ms var(--spring); }
.case-next__a b { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.03em; }
.case-next__a span { color: var(--g4); }
@media (hover: hover) and (pointer: fine) { .case-next__a:hover { transform: translateY(-4px); } }
.soon { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.soon li { display: flex; gap: 14px; align-items: center; padding: 14px 20px 14px 14px; border: 1px dashed var(--card-line); border-radius: 999px; color: var(--g4); font-size: var(--fs-s); }
.soon b { display: block; color: var(--ink); font-size: var(--fs-m); }
.soon__ini { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 600; color: var(--ink); }

/* ============================================================
   Suche & weiche Verläufe (28.10.2026)
   Mix: milestudio (Aufbau) + tobiasnase (Raster, getönte Karten) + ONSET-Beere
   ============================================================ */

/* Suchknopf im Header: wirkt wie ein Feld */
.search-btn { height: 42px; padding: 0 8px 0 14px; gap: 10px; border-color: var(--card-line); background: linear-gradient(180deg, #fff, #f8f8fa); color: var(--g4);
  transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }
/* Nur Lupe sichtbar (bis 1599 px Breite): runder Knopf, Icon mittig statt 3 px nach rechts */
@media (max-width: 1599px) { .search-btn { width: 42px; padding: 0; justify-content: center; gap: 0; } }
.search-btn span { font-size: var(--fs-s); min-width: 70px; text-align: left; }
.search-btn kbd { border-color: var(--card-line); background: #fff; }
@media (hover: hover) and (pointer: fine) { .search-btn:hover { border-color: #dbcad4; color: var(--ink); box-shadow: 0 0 0 4px rgba(149, 31, 40, .08); } }

/* Suchfenster */
.search { background: rgba(20, 20, 22, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 180ms ease; }
.search__panel { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--card-line); background: linear-gradient(180deg, #fff 0%, #fff 70%, #fefbf6 100%);
  box-shadow: 0 40px 80px -30px rgba(20, 20, 22, .45); transform: translateY(-8px) scale(.985); transition: transform 220ms var(--spring); overflow: hidden; }
.search__form { padding: 0 14px 0 20px; border-bottom-color: var(--card-line); }
.search__form .ico { color: var(--berry); }
.search__form input { height: 64px; font-size: 1.15rem; }
.search__form input::placeholder { color: #a3a3ab; }
.search__close { border-radius: 8px; border-color: var(--card-line); }
.search__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 4px; }
.search__chips[hidden] { display: none; }
.search__chips button { border: 1px solid var(--card-line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--fs-s); color: var(--g5); cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--spring); }
.search__chips button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .search__chips button:hover { border-color: #dbcad4; background: var(--tint-berry); color: var(--berry); } }
.search__results { padding: 8px; }
.search__results a { border-radius: 14px; padding: 12px 16px 12px 20px; position: relative; transition: background-color 120ms ease; }
.search__results a:hover { background: var(--tint-gray); }
.search__results a.is-active, .search__results a:focus-visible, .search__results a.is-active:hover { background: linear-gradient(90deg, var(--tint-berry), #fff); }
.search__results a.is-active::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--berry); }
.search__results small { color: var(--berry); text-transform: none; letter-spacing: 0; font-weight: 600; }
.search__results mark { background: #ede5ea; color: inherit; border-radius: 3px; padding: 0 2px; }
.search__hint { order: -1; border-top: 0; padding: 12px 20px 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--g4); }
.search__panel > .search__form { order: -2; }
.search__keys { display: flex; gap: 18px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--card-line); background: #fafafb; font-size: .75rem; color: var(--g4); }
.search__keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; margin-right: 3px; border: 1px solid var(--card-line); border-bottom-width: 2px; border-radius: 6px; background: #fff; font-weight: 600; font-size: .7rem; color: var(--g5); }
@media (max-width: 600px) { .search__keys { display: none; } .search { padding-top: 12px; } }

/* Hero: Rasterpapier + Beeren-Verlauf, läuft weich aus */
body { position: relative; }
body::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: min(1100px, 120vh); pointer-events: none;
  background:
    linear-gradient(rgba(37, 26, 27, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(37, 26, 27, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(60% 55% at 78% 8%, rgba(149, 31, 40, .12), transparent 70%),
    radial-gradient(50% 45% at 10% 0%, rgba(120, 90, 200, .08), transparent 70%),
    linear-gradient(180deg, #fefaf3 0%, #fff 75%);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
 .phx::before { display: none; }

/* Preiskarten im Stil getönter Leistungskarten */
.prices li:nth-child(1) a { background: linear-gradient(180deg, var(--tint-berry) 0%, #fff 55%); }
.prices li:nth-child(2) a { background: linear-gradient(180deg, var(--tint-lilac) 0%, #fff 55%); }
.prices li:nth-child(3) a { background: linear-gradient(180deg, var(--tint-teal) 0%, #fff 55%); }
.prices li:nth-child(4) a { background: linear-gradient(180deg, var(--tint-gray) 0%, #fff 55%); }
.prices__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: 8px;
  background: linear-gradient(135deg, #af242f, #781921); box-shadow: 0 10px 20px -10px rgba(149, 31, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.prices li:nth-child(2) .prices__ico { background: linear-gradient(135deg, #7d6bd6, #5442a8); box-shadow: 0 10px 20px -10px rgba(84, 66, 168, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.prices li:nth-child(3) .prices__ico { background: linear-gradient(135deg, #2f9c94, #1d6f69); box-shadow: 0 10px 20px -10px rgba(29, 111, 105, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.prices li:nth-child(4) .prices__ico { background: linear-gradient(135deg, #3a3a40, #17171a); box-shadow: 0 10px 20px -10px rgba(23, 23, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.prices__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prices__tags i { font-style: normal; font-size: .75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--card-line); color: var(--g5); }
.prices__go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
.prices__go svg { transition: transform 250ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .prices a:hover .prices__go svg { transform: translateX(4px); } }

/* Weitere zarte Verläufe */
.bento__tile { background: linear-gradient(165deg, #fff 0%, #fff 60%, #fefaf4 100%); }
#bekommen { background: linear-gradient(180deg, #f7f7f9 0%, #fef9f2 100%); }
.hd__in { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(250, 250, 251, .88)); }
 #anders { background: radial-gradient(70% 60% at 88% 0%, rgba(149, 31, 40, .32), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(120, 90, 200, .14), transparent 70%), #141416; }
.btn:not(.btn--ghost) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.sits li, .steps4 li, .case-chapters li { background: linear-gradient(180deg, #fff 0%, #fefdfa 100%); }
.steps4 li:nth-child(1) { background: linear-gradient(180deg, var(--tint-berry) 0%, #fff 50%); }
.steps4 li:nth-child(2) { background: linear-gradient(180deg, var(--tint-lilac) 0%, #fff 50%); }
.steps4 li:nth-child(3) { background: linear-gradient(180deg, var(--tint-teal) 0%, #fff 50%); }
.steps4 li:nth-child(4) { background: linear-gradient(180deg, var(--tint-gray) 0%, #fff 50%); }
main, .ft { position: relative; z-index: 1; }

/* ============================================================
   Keine Verzerrung von Text (28.10.2026)
   Text in Animationen wird nur eingeblendet oder verschoben, nie gestaucht,
   gesperrt, skaliert oder gedreht (das macht Schrift unscharf und wirkt verzerrt).
   ============================================================ */
.js :is(.xp, .hero-live) .bs__mark[data-from]:not(.is-in) { letter-spacing: -.05em; opacity: .15; }
.bs__mark { transition: opacity 600ms ease; }
.js :is(.xp, .hero-live) .hs[data-from] { transform: translateY(4px); }
.road__card { transform: translate(var(--dx), var(--dy)); }
.road__stamp { transform: translateY(8px); }
.js :is(.xp, .hero-live) .road__stamp.is-in { transform: none; }
.road__flag { transform: none; }
/* Personenkarte: Text darf in schmalen Spalten umbrechen statt gequetscht zu werden */
/* Lange Wörter in Überschriften sauber trennen statt überlaufen */
main h1, main h2, main h3 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 420px) { main h1, main h2 { hyphens: auto; -webkit-hyphens: auto; } }

/* ============================================================
   Lynka-Fallstudie: Vorher/Nachher + CI (28.10.2026)
   Farben, Schriften und Logos aus lynka-brand-guidelines
   ============================================================ */
@font-face { font-family: "Gilda Display"; src: url("fonts/gilda-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Vergleichsregler */
.cmp { position: relative; max-width: 760px; margin-inline: auto; aspect-ratio: 1; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(37, 26, 27, .5); user-select: none; touch-action: pan-y; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #fff; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(37, 26, 27, .15); pointer-events: none; }
.cmp__handle i { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -8px rgba(37, 26, 27, .4); }
.cmp__handle i::before, .cmp__handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.cmp__handle i::before { left: 9px; border-right-color: var(--lyn-bord); }
.cmp__handle i::after { right: 9px; border-left-color: var(--lyn-bord); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__range:focus-visible + * , .cmp:focus-within .cmp__handle i { outline: 2px solid var(--lyn-bord); outline-offset: 3px; }
.cmp__tag { position: absolute; top: 16px; padding: 7px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; pointer-events: none; }
.cmp__tag--l { left: 16px; background: rgba(29, 29, 27, .78); color: #fff; }
.cmp__tag--r { right: 16px; background: var(--lyn-champ); color: var(--lyn-deep); }

/* Logo-Kacheln */
.lyn-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lyn-tile { margin: 0; border-radius: 24px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 36px 28px 20px; border: 1px solid var(--card-line); }
.lyn-tile img { max-width: 78%; max-height: 150px; height: auto; }
.lyn-tile--wide { grid-column: span 2; }
.lyn-tile--wide img { max-width: 70%; }
.lyn-tile figcaption { margin-top: auto; font-size: var(--fs-s); }
.lyn-tile--light { background: #fff; color: var(--g4); }
.lyn-tile--linen { background: var(--lyn-linen); color: #6E6153; border-color: transparent; }
.lyn-tile--dark { background: var(--lyn-bord); color: var(--lyn-ivory); border-color: transparent; }
.lyn-tile--ink { background: var(--lyn-ivory); color: #6E6153; border-color: transparent; }
@media (max-width: 760px) { .lyn-logos { grid-template-columns: minmax(0, 1fr); } .lyn-tile--wide { grid-column: auto; } }

/* Farben */
.lyn-group { margin: 32px 0 14px; font-size: var(--fs-s); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--g4); }
.lyn-swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lyn-swatches--core { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lyn-swatches--more { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.lyn-swatches li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); color: var(--g4); }
.lyn-swatches li > b { color: var(--ink); font-size: var(--fs-m); margin-top: 8px; }
.lyn-sw { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; border-radius: 18px; padding: 12px 14px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(37, 26, 27, .06); }
.lyn-swatches--core .lyn-sw { aspect-ratio: 1; }
.lyn-sw b { font: 500 .8rem/1 ui-monospace, Consolas, monospace; letter-spacing: .02em; }
@media (max-width: 760px) { .lyn-swatches--core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Typografie */
.lyn-type { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.lyn-type__card { border-radius: 24px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.lyn-type__card--display { background: var(--lyn-deep); color: var(--lyn-ivory); }
.lyn-type__card--text { background: var(--lyn-linen); color: var(--lyn-ink); }
.lyn-type__name { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.lyn-type__big { margin: 8px 0; font-family: "Gilda Display", Georgia, serif; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.05; color: var(--lyn-champ); }
.lyn-type__mid { margin: 8px 0 0; font-family: "Jost", "Century Gothic", Arial, sans-serif; font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); letter-spacing: .18em; }
.lyn-type__body { margin: 0; font-family: "Jost", "Century Gothic", Arial, sans-serif; font-size: 1.05rem; line-height: 1.55; }
.lyn-type__abc { margin: auto 0 0; font-size: var(--fs-s); opacity: .8; }
.lyn-type__card--display .lyn-type__abc { font-family: "Gilda Display", Georgia, serif; font-size: 1.1rem; }
.lyn-type__card--text .lyn-type__abc { font-family: "Jost", Arial, sans-serif; }
@media (max-width: 860px) { .lyn-type { grid-template-columns: minmax(0, 1fr); } }

/* Anwendungen */
.lyn-moods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 18vw, 240px); gap: 14px; }
.lyn-mood { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--lyn-linen); }
.lyn-mood img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spring); }
@media (hover: hover) and (pointer: fine) { .lyn-mood:hover img { transform: scale(1.04); } }
.lyn-mood figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(35, 24, 25, .82); color: var(--lyn-ivory); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.lyn-mood--a { grid-column: span 4; grid-row: span 2; }
.lyn-mood--b { grid-column: span 2; grid-row: span 2; }
.lyn-mood--c { grid-column: span 3; grid-row: span 2; }
.lyn-mood--d { grid-column: span 3; grid-row: span 2; }
.lyn-mood--e, .lyn-mood--f { grid-column: span 3; grid-row: span 2; }
@media (max-width: 760px) { .lyn-moods { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; } .lyn-mood { grid-column: auto !important; grid-row: auto !important; } }
@media (max-width: 600px) { .cmp__tag > span { display: none; } }

/* ============================================================
   Premium-Refinement (28.10.2026)
   Schwarz/Weiß mit Beere als Marke, Kupfer/Champagner nur als Licht.
   Kein Violett, keine bunten Tönungen, keine Glow-Kugeln.
   ============================================================ */
/* Dunkle Flächen: Graphit mit Kupferlicht und feinem Korn */
 #anders, .case-result { background: var(--graphite); position: relative; isolation: isolate; }
 #anders::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .05; border-radius: inherit; pointer-events: none; display: block; }
 .cta .kicker { color: var(--champagne); }
/* Hero-Hintergrund: Kupfer statt Violett */
body::before {
  background:
    linear-gradient(rgba(37, 26, 27, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(37, 26, 27, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(60% 55% at 78% 8%, rgba(180, 152, 168, .30), transparent 70%),
    radial-gradient(50% 45% at 8% 0%, rgba(149, 31, 40, .05), transparent 70%),
    linear-gradient(180deg, #fefaf4 0%, #fff 75%) !important;
}
/* Icon-Kacheln: Beere, Graphit, Kupfer, Tinte */
.prices li:nth-child(2) .prices__ico { background: linear-gradient(135deg, #3a3a40, #17171a); box-shadow: 0 10px 20px -10px rgba(23, 23, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.prices li:nth-child(3) .prices__ico { background: linear-gradient(135deg, #dd4855, #a21a26); box-shadow: 0 10px 20px -10px rgba(162, 26, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.prices li:nth-child(4) .prices__ico { background: linear-gradient(135deg, #ffffff, #ececef); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(23, 23, 26, .35), inset 0 0 0 1px var(--card-line); }

/* Feine Trennlinie, die sich einzeichnet */
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Leistungsseiten ---------- */
.svc-intro__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: start; border-top: 1px solid var(--ink); padding-top: clamp(24px, 3vw, 40px); }
.svc-intro__answer { margin: 0; font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 400; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
.svc-combo { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-combo li { padding: 7px 14px; border: 1px solid var(--card-line); border-radius: 999px; font-size: var(--fs-s); color: var(--g5); background: #fff; }
.svc-combo li + li::before { content: "+"; margin-right: 8px; color: var(--copper); font-weight: 600; }
@media (max-width: 760px) { .svc-intro__grid { grid-template-columns: minmax(0, 1fr); } }

.svc-problem { color: #fff; margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px); }
.svc-problem .ed-h2 { color: #fff; max-width: 18ch; }
.svc-problem__list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.svc-problem__list li { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 22px; }
.svc-problem__list h3 { color: #fff; margin: 0 0 8px; }
.svc-problem__list p { margin: 0; color: #b6b6bd; max-width: 34ch; }
@media (max-width: 860px) { .svc-problem__list { grid-template-columns: minmax(0, 1fr); } }

.svc-approach__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.svc-approach__head { position: sticky; top: 140px; }
.svc-approach__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc-approach__list li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--card-line); }
.svc-approach__list li > span { font-size: var(--fs-s); font-weight: 600; color: var(--berry); padding-top: 4px; font-variant-numeric: tabular-nums; }
.svc-approach__list h3 { margin: 0 0 6px; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); }
.svc-approach__list p { margin: 0; color: var(--g4); max-width: 56ch; }
@media (max-width: 860px) { .svc-approach__grid { grid-template-columns: minmax(0, 1fr); } .svc-approach__head { position: static; } }

/* Leistungsumfang als redaktionelle Liste statt Kärtchen */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); border-top: 1px solid var(--ink); }
.svc-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--card-line); }
.svc-list h3 { margin: 0 0 6px; }
.svc-list p { margin: 0; color: var(--g4); max-width: 46ch; }
.svc-list--wide { grid-template-columns: minmax(0, 1fr); }
.svc-list--wide li { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; padding: 28px 0; }
.svc-list--wide h3 { font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); margin: 0; }
@media (max-width: 760px) { .svc-list, .svc-list--wide { grid-template-columns: minmax(0, 1fr); } .svc-list--wide li { grid-template-columns: 3rem minmax(0, 1fr); } .svc-list--wide p { grid-column: 2; margin-top: 6px; } }

/* Systemlandschaft */
@keyframes flow { to { stroke-dashoffset: -20; } }
.sysmap { position: relative; aspect-ratio: 16 / 9; max-height: 620px; margin-inline: auto; border-radius: 32px; border: 1px solid var(--card-line);
  background: radial-gradient(50% 60% at 50% 50%, rgba(149, 31, 40, .05), transparent 70%), linear-gradient(rgba(37, 26, 27, .035) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(37, 26, 27, .035) 1px, transparent 1px) 0 0 / 32px 32px, #fff; overflow: hidden; }
.sysmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sysmap__lines line { stroke: #d7cfcb; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; }
.sysmap__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; padding: 18px 26px; border-radius: 20px; background: var(--graphite); color: #fff; font-weight: 600; text-align: center; box-shadow: 0 24px 48px -24px rgba(37, 26, 27, .6); max-width: 40%; }
.sysmap__core span { display: block; font-size: clamp(1rem, .8rem + .7vw, 1.35rem); letter-spacing: -.01em; }
.sysmap__nodes { list-style: none; margin: 0; padding: 0; }
.sysmap__nodes li { position: absolute; translate: -50% -50%; z-index: 1; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--card-line); font-size: var(--fs-s); font-weight: 500; color: var(--g5); white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(37, 26, 27, .3); max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .sysmap__lines line { animation: flow 1.6s linear infinite; }
  .sysmap.rv .sysmap__nodes li { opacity: 0; transition: opacity 500ms ease, transform 600ms var(--spring); transform: translateY(8px); transition-delay: calc(var(--i) * 70ms + 200ms); }
  .sysmap.rv.is-rv .sysmap__nodes li { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .sysmap { aspect-ratio: auto; max-height: none; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .sysmap__lines { display: none; }
  .sysmap__core { position: static; translate: none; max-width: none; }
  .sysmap__nodes { display: flex; flex-wrap: wrap; gap: 8px; }
  .sysmap__nodes li { position: static; translate: none; max-width: 100%; white-space: normal; }
}

/* Horizontaler Ablauf mit Linie, die sich einzeichnet */
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ink); transform-origin: left; }
.tl li { position: relative; padding-top: 34px; }
.tl__dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--berry); }
.tl li:last-child .tl__dot { background: var(--berry); }
.tl__n { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); margin-bottom: 8px; }
.tl h3 { margin: 0 0 8px; }
.tl p { margin: 0; color: var(--g4); font-size: var(--fs-m); }
@media (prefers-reduced-motion: no-preference) {
  .tl.rv::before { transform: scaleX(0); transition: transform 1.4s var(--spring) .1s; }
  .tl.rv.is-rv::before { transform: scaleX(1); }
  .tl.rv li { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 700ms var(--spring); transition-delay: calc(var(--d, 0) * 1ms); }
  .tl.rv.is-rv li { opacity: 1; transform: none; }
  .tl li:nth-child(1) { --d: 200; } .tl li:nth-child(2) { --d: 420; } .tl li:nth-child(3) { --d: 640; } .tl li:nth-child(4) { --d: 860; } .tl li:nth-child(5) { --d: 1080; } .tl li:nth-child(6) { --d: 1300; }
}
@media (max-width: 860px) {
  .tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; }
  .tl.rv::before { transform: scaleY(0); } .tl.rv.is-rv::before { transform: scaleY(1); }
  .tl li { padding: 0 0 28px 40px; }
  .tl__dot { top: 4px; }
}

/* Warum ONSET: große typografische Aussagen */
.svc-why__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc-why__list li { padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--card-line); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1.3; letter-spacing: -.02em; max-width: 40ch; text-wrap: pretty; }
.svc-why__list li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--berry); margin-right: 16px; vertical-align: .18em; }

/* Business Innovator 2026 (nur Text, kein offizielles Siegel) */
.award { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 10px 24px -18px rgba(37, 26, 27, .35); text-decoration: none; color: var(--ink); }
.award__mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--graphite); color: var(--champagne); flex: none; }
.award__txt { display: flex; flex-direction: column; line-height: 1.2; }
.award__txt small { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.award__txt b { font-size: var(--fs-s); font-weight: 600; }
.award--about { margin-top: 24px; }
.ft-award { display: inline-flex; align-items: center; gap: 8px; color: inherit; opacity: .8; font-size: var(--fs-s); }
.ft-award svg { color: var(--champagne); }
@media (prefers-reduced-motion: no-preference) {
  .award__mark svg { animation: awardTurn 6s var(--spring) infinite; }
}
@keyframes awardTurn { 0%, 80% { transform: none; } 90% { transform: rotate(-12deg); } 100% { transform: none; } }

/* Micro-Interactions: Navigation und Links */
@media (hover: hover) and (pointer: fine) {
  .svc-list li, .svc-approach__list li { transition: background-color 200ms ease; }
  .rel a:hover b { color: var(--berry); }
}
.svc-why__list li { max-width: none; padding-right: min(30%, 360px); }
@media (max-width: 760px) { .svc-why__list li { padding-right: 0; } }
.ft__bar { flex-wrap: wrap; gap: 8px 24px; }

/* Dunkle Flächen: Verlauf ins Aubergine (28.10.2026, Wunsch der Inhaberin) */
 #anders, .case-result, .sysmap__core, .award__mark { background: var(--graphite); }
.ft { background: linear-gradient(180deg, #251a1b 0%, #251a1b 100%); }
 .svc-problem__list p, .case-result .lead { color: #c4bab6; }

/* ============================================================
   Feinschliff nach Emil Kowalski (28.10.2026)
   ============================================================ */
/* Suche per Tastatur: sofort, ohne Übergang */
.search.is-instant, .search.is-instant .search__panel { transition: none; }

/* Hereingleiten: kürzerer Weg, enger gestaffelt */
@keyframes rvIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rv.is-rv { animation-duration: 700ms; animation-delay: calc(var(--rv-i, 0) * 60ms); }

/* Tab-Wechsel im Leistungs-Explorer: häufige Aktion, also knapp */
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Hover-Lift: schneller und dezenter; Druck-Feedback auf klickbaren Karten */
.sits li, .steps4 li, .svcs > div, .perks li, .rel > a, .courses li, .ed-values li, .prices a, .case-next__a {
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .prices a:hover, .rel > a:hover, .case-next__a:hover { transform: translateY(-3px); }
}
.prices a:active, .rel > a:active, .case-next__a:active, .ed-list__row a:active, .search__results a:active { transform: scale(.985); transition-duration: 120ms; }
.story__media img { transition: transform 600ms var(--ease-out); }

/* Mega-Menü: Dropdown-Tempo (öffnen 200 ms, schließen schneller) */
@media (min-width: 1101px) {
  .mega { transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms var(--ease-out), visibility 0s 150ms; }
  .mega.is-open { transform: none; transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s 0s; }
}


/* FAQ: Antwort klappt weich auf statt zu springen (wo der Browser es kann) */
.faq summary::after { transition: transform 200ms var(--ease-out); }
@supports selector(::details-content) {
  .faq details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 260ms var(--ease-out), opacity 200ms ease, content-visibility 260ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* Schaltflächen im Erklär-Player: Druck-Feedback wie Buttons */
.xp__ctrl button { transition: transform 140ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.xp__ctrl button:active, .search__close:active { transform: scale(.95); }

/* ============================================================
   impeccable polish (28.10.2026)
   ============================================================ */
/* Kontrast: Kupfer als Text dunkler; Grautöne in dunklen Flächen aus dem Aubergine abgeleitet */
.award__txt small, .svc-combo li + li::before { color: var(--copper-text); }
 .ft, .case-result { --g4: #b9aea9; --g5: #dad4d1; --g3: #a59b96; }

/* Kein Zierkorn (feTurbulence), die Verläufe tragen allein */
 #anders::after { display: none; }

/* Eine Kante pro Karte: Rahmen ja, breiter Schatten nein */
.sits li, .steps4 li, .svcs > div, .perks li, .rel > a, .courses li, .ed-values li, .prices a, .bento__tile, .case-chapters li, .promises li, .award, .search-btn { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .sits li:hover, .steps4 li:hover, .svcs > div:hover, .perks li:hover, .courses li:hover, .ed-values li:hover, .prices a:hover, .rel > a:hover { box-shadow: 0 10px 22px -16px rgba(37, 26, 27, .28); }
  .search-btn:hover { box-shadow: none; }
}
.xp__stage, .stage .xp__stage, .hero-live { box-shadow: 0 0 0 1px var(--card-line); }

/* Ungeordnete Listen ohne Nummern: Inhalt rückt auf die volle Breite */
.svc-approach__list li { grid-template-columns: minmax(0, 1fr); }
.svc-list li, .svc-list--wide li { grid-template-columns: minmax(0, 1fr); }
.svc-list--wide li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 760px) { .svc-list--wide li { grid-template-columns: minmax(0, 1fr); } .svc-list--wide p { grid-column: auto; } }
.svc-problem__list li { border-top: 0; padding-top: 0; }
.svc-problem__list li::before { content: ""; display: block; width: 40px; height: 2px; background: var(--champagne); margin-bottom: 20px; }


/* Versalien nur noch im Label; Inhalte in Satzschreibung */
.tl__n, .prices__k, .story__meta, .search__hint, .lyn-type__name, .lyn-group, .cmp__tag { text-transform: none; letter-spacing: 0; }
.prices__k, .story__meta { font-size: var(--fs-s); }

/* Browser-Flächen gehören zum Design */
::selection { background: #eadfe5; color: var(--ink); }
 .cta ::selection, .ft ::selection { background: rgba(215, 194, 206, .35); color: #fff; }
html { caret-color: var(--berry); accent-color: var(--berry); scrollbar-color: #ccc2bd transparent; scrollbar-width: thin; }
 .cta :focus-visible, .ft :focus-visible { outline-color: #d7c2ce; }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Mini-Oberflächen im Bento: Fläche statt zweiter Karte */

/* ============================================================
   Helle Flächen statt dunkler (28.10.2026, Wunsch der Inhaberin)
   Verlauf Weiß → zartes Rosé, dunkle Schrift, Beere als Akzent.
   Ersetzt die Aubergine-Flächen und den dunklen Footer.
   ============================================================ */

/* Abschnitte */
#anders, .sec--soft, .case-result {
  background: var(--soft-panel); color: var(--ink); border: 1px solid var(--soft-line);
  margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px);
  --line: rgba(37, 26, 27, .1); --line-strong: rgba(37, 26, 27, .22); --g3: #746c68; --g4: #5b534f; --g5: #251a1b; }
#anders::after, .sec--soft::after { display: none; }
:is(#anders, .sec--soft) .ed-intro, .case-result .lead { color: var(--g4); }
:is(#anders, .sec--soft) .kicker { color: var(--berry); }
:is(#anders, .sec--soft) ::selection { background: #eadfe5; color: var(--ink); }

/* „Keine klassische Agentur“ */
#anders .why { border-top-color: var(--ink); }
#anders .why li { color: var(--g4); border-bottom-color: var(--soft-line); }
#anders .why b { color: var(--ink); }
#anders .xp__steps button, #anders .xp__steps li.is-at button { color: var(--ink); }
#anders .js .xp__steps button span.d, .js #anders .xp__steps button span.d, #anders .xp__result { color: var(--g4); }
#anders .xp__result b { color: var(--ink); }
#anders .xp__steps button .mono { color: var(--g4); }
#anders .xp__prog i { background: rgba(37, 26, 27, .1); }
#anders .xp__ctrl button { color: var(--ink); border-color: var(--line-strong); }
#anders .xp__stage { box-shadow: 0 0 0 1px var(--soft-line); }

/* Leistungsseiten: Das Problem */
.svc-problem .ed-h2, .svc-problem__list h3 { color: var(--ink); }
.svc-problem__list p { color: var(--g4); }
.svc-problem__list li::before { background: var(--berry); }

/* Fallstudie: Ergebnis */
.case-tags { color: var(--g4); }
.case-tags b { color: var(--ink); }

/* Abschluss-CTA */

/* Footer hell */
.ft, .ft--soft { background: linear-gradient(180deg, #ffffff 0%, #fdf9f1 100%); color: var(--ink); border-top: 1px solid var(--soft-line);
  --line: rgba(37, 26, 27, .1); --line-strong: rgba(37, 26, 27, .22); --g3: #746c68; --g4: #5b534f; --g5: #251a1b; }
.ft h3 { color: var(--g4); }
.ft li a { color: var(--ink); }
.ft li a:hover { color: var(--berry); }
.ft__top p, .ft__contact, .ft__bar, .ft p { color: var(--g4); }
.ft__contact a, .ft__bar a { color: var(--ink); }
.ft .ft-award svg { color: var(--berry); }
.ft ::selection { background: #eadfe5; color: var(--ink); }
.ft :focus-visible { outline-color: var(--berry); }

/* Kleine Akzente, die vorher dunkel waren: jetzt Beere */
.sysmap__core, .award__mark { background: linear-gradient(135deg, #af242f, #781921); }
.award__mark { color: #fff; }

/* ============================================================
   Neue Positionierung: „Wir verbinden, was Unternehmen voranbringt.“ (28.10.2026)
   ============================================================ */
/* Hero: Systemarchitektur */
@keyframes archLit { 0%, 18%, 100% { border-color: var(--soft-line); box-shadow: none; } 6%, 12% { border-color: #b498a8; box-shadow: 0 10px 22px -14px rgba(149, 31, 40, .45); } }

/* Statement */
.statement__h { margin: 0 0 clamp(32px, 4vw, 56px); font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; max-width: 16ch; text-wrap: balance; }
.statement__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--ink); padding-top: 24px; }
.statement__cols p { margin: 0; color: var(--g4); max-width: 34ch; }
.statement__cols b { display: block; color: var(--ink); font-size: var(--fs-h3); font-weight: 500; margin-bottom: 6px; }
.statement__claim { margin: clamp(32px, 4vw, 56px) 0 0; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); line-height: 1.3; letter-spacing: -.02em; max-width: 32ch; color: var(--berry); }
@media (max-width: 760px) { .statement__cols { grid-template-columns: minmax(0, 1fr); } }

/* Kompetenzwelten: drei große, unterschiedlich inszenierte Abschnitte */
.world__vis .hero-live { max-width: 460px; margin-inline: auto; }
.world__vis .hero-live .xp__now { display: none; }

/* Connected Business: Stationenkette */
.chain { position: relative; width: 100%; padding: 32px 16px; }
.chain__track { position: absolute; left: calc(100% / var(--n) / 2 + 16px); right: calc(100% / var(--n) / 2 + 16px); top: 58px; height: 2px; background: #ede3e9; }
.chain__track i { display: block; height: 100%; background: var(--berry); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-out); }
.chain__nodes { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.chain__node { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: var(--fs-s); color: var(--g4); }
.chain__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 1px solid var(--soft-line); color: var(--g4);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.chain__node b { font-weight: 500; line-height: 1.3; }
.chain__node.is-visited .chain__ico { color: var(--berry); border-color: #ddccd6; }
.chain__node.is-at .chain__ico { background: linear-gradient(135deg, #af242f, #781921); color: #fff; border-color: transparent; box-shadow: 0 12px 24px -14px rgba(120, 25, 33, .7); }
.chain__node.is-at b { color: var(--ink); font-weight: 600; }
.connected .xp__stage { min-height: 0; }
@media (max-width: 760px) {
  .chain { padding: 16px; }
  .chain__nodes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .chain__node { flex-direction: row; text-align: left; }
  .chain__track { left: 41px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; }
  .chain__track i { transform-origin: top; transform: scaleY(var(--p, 0)); }
}

/* Award-Band */
.award-band__in { display: grid; justify-items: start; gap: 18px; padding-block: clamp(16px, 2vw, 32px); border-block: 1px solid var(--line); }
.award-band__h { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; max-width: 22ch; }

/* Mega-Menü nach Kompetenzwelten */
.mega__grid--worlds { grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr; }
.mega__wn { margin: 0 0 6px; font-size: .75rem; font-weight: 600; color: var(--berry); font-variant-numeric: tabular-nums; }
.mega__world h3 { margin-top: 0; }
@media (max-width: 1100px) { .mega__grid--worlds { grid-template-columns: minmax(0, 1fr); } .mega__wn { display: none; } }

/* Suche: Gruppen-Überschriften */
.search__group { list-style: none; padding: 14px 16px 4px 20px; font-size: .75rem; font-weight: 600; color: var(--berry); }
.search__group:first-child { padding-top: 6px; }
.search__results--page .search__group { padding-left: 0; }

/* Connected Business: Kette über die volle Breite, Erklärung darunter */
.connected .xp__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.connected .xp__side { max-width: 640px; }
.connected .chain { padding: 40px clamp(16px, 3vw, 40px); }
.connected .chain__ico { width: 60px; height: 60px; border-radius: 18px; }
.connected .chain__track { top: 70px; }
@media (max-width: 760px) { .connected .chain__track { top: 46px; left: 45px; } }

/* Leistungsseiten: Platz im System (statische Kette) */
.chain--static { border: 1px solid var(--soft-line); border-radius: 28px; background: var(--soft-panel); padding: 36px clamp(16px, 3vw, 40px); }
.chain--static .chain__track { top: 62px; background: #eadfe5; }
.chain--static .chain__track i { display: none; }
.chain--static .chain__node:not(.is-at) .chain__ico { opacity: .55; }
.svc-place__more { margin: 18px 0 0; }
@media (max-width: 760px) { .chain--static { padding: 20px 16px; } .chain--static .chain__track { top: 46px; bottom: 46px; left: 42px; } }

/* ============================================================
   Flow & Vertrauen (30.10.2026)
   ============================================================ */
/* Vertrauensleiste direkt unter dem Hero: echte, freigegebene Projektnamen */
.trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3.5vw, 48px); }
.trust__list a { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); font-weight: 600; letter-spacing: -.015em; color: #6f6662; text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .trust__list a:hover { color: var(--berry); } }

/* Einheitlicher Flächen-Rhythmus: getönte Abschnitte alle in derselben Rosé-Familie */
#bekommen { background: var(--soft-panel); border: 1px solid var(--soft-line); margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px); }

/* Sanfte Übergänge: mehr Luft vor Abschnitten, gleichmäßiger Takt */
main > .sec { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(72px, 8vw, 128px); }
main > .sec + .sec { padding-top: clamp(56px, 6vw, 104px); }
main > .sec--soft + .sec, main > #bekommen + .sec, main > .cta { margin-top: clamp(16px, 2vw, 32px); }

/* ============================================================
   milestudio-Muster im ONSET-Stil (02.11.2026)
   ============================================================ */
/* Telefon im Header: direkte Erreichbarkeit als Vertrauenssignal */
/* Schmale Laptops: Kapsel hat Seitenabstand, Navigation etwas enger */
@media (width > 1100px) and (width < 1280px) { .hd__in { gap: 12px; } .nav__item > a, .nav__item > button { padding: 0 7px; } }
@media (width > 1100px) and (width < 1200px) { .hd__in { gap: 8px; } .nav__item > a, .nav__item > button { padding: 0 5px; } .hd__cta { padding: 0 12px; margin-left: 6px; } }


/* Preise direkt an den Leistungslinks */

/* CTA direkt unter dem Ablauf */
.tl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: clamp(32px, 4vw, 48px) 0 0; }
.tl-cta span { color: var(--g4); font-size: var(--fs-m); }

/* Ansprechpartnerin-Karte */
.contact-card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.5vw, 48px);
  border: 1px solid var(--soft-line); border-radius: 32px; background: var(--soft-panel); }
.contact-card__h { margin: 0 0 6px; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; }
@media (max-width: 700px) { .contact-card { grid-template-columns: minmax(0, 1fr); } }

/* FAQ: Überschrift links bleibt beim Lesen stehen */
@media (min-width: 900px) { #faq .blk__h { position: sticky; top: 140px; align-self: start; } }

/* ============================================================
   Team (02.11.2026)
   ============================================================ */
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team__card { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--soft-line); border-radius: 28px; background: var(--soft-panel); display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.team__pic { width: 96px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; display: grid; place-items: center; margin-bottom: 14px; background: linear-gradient(135deg, #af242f, #781921); color: #fff; font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; transition: transform 400ms var(--ease-out); }
.team__pic img { width: 100%; height: 100%; object-fit: cover; }
.team__role { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
.team__name { margin: 0 0 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.025em; font-weight: 500; }
.team__text { margin: 0 0 14px; color: var(--g4); max-width: 52ch; }
@media (hover: hover) and (pointer: fine) {
  .team__card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -24px rgba(37, 26, 27, .3); }
  .team__card:hover .team__pic { transform: rotate(-3deg) scale(1.04); }
}
@media (max-width: 760px) { .team__grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Mehr Leben (02.11.2026): Überschriften decken sich auf, Bilder bewegen sich
   mit dem Scrollen, Lesefortschritt, sanfter Schimmer hinter dem Hero.
   ============================================================ */
/* Überschriften: Maske öffnet sich von unten */
@keyframes headIn { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(-10% 0 -20% 0); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.ed-h2, .statement__h, .award-band__h, .contact-card__h).rv.is-rv { animation: headIn 900ms var(--ease-out) calc(var(--rv-i, 0) * 60ms) backwards; }
}


/* Bilder und Visuals bewegen sich leicht gegen den Scroll (Tiefe) */
@keyframes parY { from { transform: translateY(-5%) scale(1.1); } to { transform: translateY(5%) scale(1.1); } }
@keyframes floatY { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story__media img, .lyn-mood img { animation: parY linear both; animation-timeline: view(); }
    .world__vis .hero-live { animation: floatY linear both; animation-timeline: view(); }
  }
}

/* Sanfter, langsam wandernder Schimmer hinter dem Hero */
@keyframes heroDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, 4%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } }

/* Echte Porträts (02.11.2026) */
.team__photo { margin: 0 0 18px; width: 100%; aspect-ratio: 4 / 5; max-height: 460px; border-radius: 22px; overflow: hidden; background: var(--soft); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .team__card:hover .team__photo img { transform: scale(1.03); } }
.ed-hero__img--photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; }
.ed-hero__img--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

/* Team mit drei Personen */
.team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team__pic--george { background: linear-gradient(135deg, #ce5761, #8e2730); }
.team__card:has(.team__pic) { justify-content: flex-start; }
@media (max-width: 1000px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .team__grid { grid-template-columns: minmax(0, 1fr); } }
/* Ohne Foto: gleich große Fläche wie die Porträts, damit die Karten auf einer Linie stehen */
.team__pic--george { width: 100%; aspect-ratio: 4 / 5; max-height: 460px; border-radius: 22px; margin-bottom: 18px; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* ============================================================
   Kostenlose Digital-Analyse (02.11.2026)
   ============================================================ */
.ana-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.ana-facts li { display: flex; gap: 10px; align-items: center; color: var(--g5); }
.ana-facts svg { color: var(--berry); }
.ana-preview { padding: 28px; border-radius: 28px; border: 1px solid var(--soft-line); background: var(--soft-panel); display: grid; gap: 14px; max-width: 440px; margin-left: auto; }
.ana-preview__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; align-items: center; font-size: var(--fs-s); color: var(--g5); }
.ana-preview__row i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #af242f, #b498a8); width: var(--w); }
.ana-preview p { margin: 6px 0 0; font-size: .75rem; color: var(--g4); }

.ana { max-width: 760px; margin-inline: auto; padding: clamp(22px, 3.5vw, 44px); border: 1px solid var(--soft-line); border-radius: 32px; background: #fff; box-shadow: 0 24px 60px -48px rgba(37, 26, 27, .35); scroll-margin-top: 140px; }
.ana__bar { height: 4px; border-radius: 99px; background: #eee6eb; overflow: hidden; }
.ana__bar i { display: block; height: 100%; background: linear-gradient(90deg, #af242f, #b498a8); transform-origin: left; transform: scaleX(0); transition: transform 400ms var(--ease-out); }
.ana__count { margin: 12px 0 18px; font-size: var(--fs-s); color: var(--g4); }
.ana__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.ana__q { display: block; padding: 0; margin: 0 0 8px; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; outline: none; }
.ana__n { display: block; margin-bottom: 8px; font-size: var(--fs-s); font-weight: 600; color: var(--berry); letter-spacing: 0; }
.ana__hint { margin: 0 0 18px; color: var(--g4); }
.ana__opts { display: grid; gap: 10px; margin-top: 18px; }
.ana__opt { position: relative; display: block; cursor: pointer; }
.ana__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ana__opt span { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--card-line); border-radius: 16px; background: #fff; font-weight: 500;
  transition: border-color 150ms ease, background-color 150ms ease, transform 140ms var(--ease-out); }
.ana__opt span::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d7c4cf; transition: border-color 150ms ease, box-shadow 150ms ease; }
.ana__opt input:checked + span { border-color: var(--berry); background: var(--tint-berry); }
.ana__opt input:checked + span::before { border-color: var(--berry); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--berry); }
.ana__opt input:focus-visible + span { outline: 2px solid var(--berry); outline-offset: 3px; }
.ana__opt:active span { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .ana__opt:hover span { border-color: #dbcad4; } }
.ana__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 18px 0; }
@media (max-width: 600px) { .ana__fields { grid-template-columns: minmax(0, 1fr); } }
.ana .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ana__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.ana__nav [data-ana="next"], .ana__nav [data-ana="send"] { margin-left: auto; }
.ana__msg { min-height: 1.4em; margin: 12px 0 0; font-size: var(--fs-s); color: var(--berry); }
.ana__note { max-width: 760px; margin: 18px auto 0; font-size: var(--fs-s); color: var(--g4); text-align: center; }

/* Ergebnis */
.ana-result { max-width: 900px; margin-inline: auto; outline: none; scroll-margin-top: 140px; }
.ana-res__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; padding: clamp(22px, 3.5vw, 40px); border: 1px solid var(--soft-line); border-radius: 32px; background: var(--soft-panel); }
.ana-res__score { --c: var(--berry); width: 150px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #fff 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), #eee6eb 0); }
.ana-res__score b { font-size: 2.8rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ana-res__score span { font-size: var(--fs-s); color: var(--g4); }
.ana-res__score.is-good { --c: #7a63b8; } .ana-res__score.is-mid { --c: #dc2736; } .ana-res__score.is-low { --c: var(--berry); }
.ana-res__k { margin: 0 0 6px; font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
.ana-res__h { margin: 0 0 10px; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.03em; font-weight: 500; line-height: 1.1; }
.ana-res__head p { margin: 0 0 8px; color: var(--g5); }
.ana-res__sent { font-size: var(--fs-s); color: var(--g4) !important; }
.ana-res__bars { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.ana-res__bars li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 9rem; gap: 14px; align-items: center; font-size: var(--fs-m); }
.ana-res__bar { height: 12px; border-radius: 99px; background: #eee6eb; overflow: hidden; }
.ana-res__bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--berry); }
.ana-res__bars .is-good .ana-res__bar i { background: #7a63b8; } .ana-res__bars .is-mid .ana-res__bar i { background: #dc2736; }
.ana-res__v { color: var(--g4); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ana-res__head { grid-template-columns: minmax(0, 1fr); } .ana-res__bars li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
@media (prefers-reduced-motion: no-preference) { .ana-res__bar i { animation: barIn 900ms var(--ease-out) both; } }
@keyframes barIn { from { width: 0; } }
.ana-res__sub { margin: 40px 0 16px; font-size: var(--fs-h3); font-weight: 500; }
.ana-rec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ana-rec li { padding: 22px; border: 1px solid var(--card-line); border-radius: 22px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.ana-rec__area { font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
.ana-rec h3 { margin: 0; }
.ana-rec p { margin: 0 0 6px; color: var(--g4); font-size: var(--fs-m); }
.ana-rec .mag-link { margin-top: auto; }
@media (max-width: 860px) { .ana-rec { grid-template-columns: minmax(0, 1fr); } }
.ana-res__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Startseiten-Teaser */
.ana-teaser__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; padding: clamp(24px, 3.5vw, 48px); border: 1px solid var(--soft-line); border-radius: 32px; background: var(--soft-panel); }
.ana-teaser__in .ed-h2 { margin-bottom: 12px; }
.ana-teaser__in .ed-intro { margin: 0; }
.ana-teaser__go { justify-self: end; }
@media (max-width: 760px) { .ana-teaser__in { grid-template-columns: minmax(0, 1fr); } .ana-teaser__go { justify-self: start; } }

/* Druck: nur das Audit */
@media print {
  .hd, .ft, .fb, .fx, .bookbar, .bc, .phero, .ana, .ana__note, .ana-res__cta, body::before, body::after, .search { display: none !important; }
  .ana-result { display: block !important; max-width: none; }
  .ana-res__head, .ana-rec li { break-inside: avoid; }
}
/* Fragennummer steht schon über dem Balken: in der Frage nur für Screenreader */
.ana__step:not(.ana__gate) .ana__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ana__nav [hidden], .ana__step[hidden] { display: none !important; }
.ana__nav { flex-wrap: wrap; }

/* Digital-Analyse 2.0: URL-Schritt, Messwerte, Befunde */
.ana__url input { width: 100%; font-size: 1.15rem; padding: 16px 18px; }
.ana__check { margin: 10px 0 0; min-height: 1.4em; font-size: var(--fs-s); color: var(--g4); }
.ana-res__t small { display: block; font-size: .78rem; color: var(--g4); font-weight: 400; }
.ana-res__check { margin-top: 28px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--card-line); border-radius: 24px; background: #fff; }
.ana-res__check h3 { margin: 0 0 14px; overflow-wrap: anywhere; }
.ana-res__check dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
.ana-res__check dt { font-size: var(--fs-s); color: var(--g4); }
.ana-res__check dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ana-res__check dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ana-res__hint { margin: 24px 0 0; font-size: var(--fs-s); color: var(--g4); }
.ana-res__quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ana-res__quick li { position: relative; padding: 12px 16px 12px 40px; border-radius: 16px; background: var(--soft-panel); font-size: var(--fs-m); }
.ana-res__quick li::before { content: ""; position: absolute; left: 16px; top: 1.15em; width: 10px; height: 10px; border-radius: 50%; background: var(--berry); }
.ana-rec .ana-rec__f { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; }
.ana-rec .ana-rec__f li { padding: 0 0 0 16px; border: 0; border-radius: 0; background: none; display: block; position: relative; font-size: var(--fs-s); color: var(--g5); }
.ana-rec .ana-rec__f li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--berry); }
.ana-res__how { margin: 32px 0 0; font-size: var(--fs-s); color: var(--g4); max-width: 70ch; }
@media print { .ana-res__check, .ana-res__quick li { break-inside: avoid; } }

/* Abschlussbereich „go“ (02.11.2026): eine Hauptaktion, Ablauf, Ansprechpersonen, direkter Draht */
.go { padding-block: clamp(48px, 6vw, 96px); }
.go__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 4.5vw, 64px); border-radius: 36px; background: var(--soft-panel); border: 1px solid var(--soft-line); position: relative; overflow: hidden; }
.go__panel::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(closest-side, var(--sky-glow), transparent); pointer-events: none; }
.go__main, .go__side { position: relative; }
.go__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; max-width: 16ch; text-wrap: balance; }
.go__lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--g4); text-wrap: pretty; }
.go__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.go__alt { font-size: var(--fs-m); color: var(--g4); text-decoration: none; }
.go__alt b { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sky-line); text-decoration-thickness: 2px; text-underline-offset: .25em; transition: text-decoration-color 200ms ease; }
@media (hover: hover) { .go__alt:hover b { text-decoration-color: var(--berry); } }
.go__checks { list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--soft-line); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--fs-s); color: var(--g5); font-weight: 500; }
.go__checks li { display: inline-flex; align-items: center; gap: 7px; }
.go__checks .ico { color: var(--berry); flex: none; }
.go__side { align-self: start; background: #fff; border: 1px solid var(--card-line); border-radius: 26px; padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 30px 60px -40px rgba(38, 26, 28, .35); }
.go__side-h { margin: 0 0 18px; font-size: var(--fs-s); font-weight: 600; color: var(--g4); }
.go__steps { list-style: none; margin: 0; padding: 0; counter-reset: go; display: grid; gap: 0; }
.go__steps li { counter-increment: go; position: relative; display: grid; gap: 3px; padding: 0 0 18px 44px; }
.go__steps li::before { content: counter(go); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: var(--sky-ink); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.go__steps li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--card-line); }
.go__steps b { font-weight: 600; color: var(--ink); }
.go__steps span { font-size: var(--fs-s); color: var(--g4); line-height: 1.5; }
.go__people { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 16px 0; border-top: 1px solid var(--card-line); }
.go__people p { margin: 0; font-size: var(--fs-s); color: var(--g4); line-height: 1.45; }
.go__people b { color: var(--ink); font-weight: 600; }
.go__avs { display: flex; flex: none; }
.go__av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sky); color: var(--sky-ink); font-size: .85rem; font-weight: 600; border: 3px solid #fff; }
.go__av + .go__av { margin-left: -12px; }
.go__av img { width: 100%; height: 100%; object-fit: cover; }
.go__direct { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.go__direct a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--card-line); font-size: var(--fs-s); font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: border-color 200ms ease, background-color 200ms ease; }
@media (hover: hover) { .go__direct a:hover { border-color: var(--sky-line); background: var(--sky-soft); } }
@media (max-width: 900px) { .go__panel { grid-template-columns: minmax(0, 1fr); border-radius: 28px; } .go__h { max-width: none; } }
@media (max-width: 480px) { .go__panel { padding: 24px 20px; margin-inline: -6px; } .go__act .btn { width: 100%; justify-content: center; } .go__direct a { flex: 1 1 auto; text-align: center; } }

/* Palette 02.11.2026: früheres Kupfer/Champagner wird Hellblau, damit nur Dunkelrot + Hellblau bleiben */

/* Erd-Palette (02.11.2026): weißer Grund, Creme nur in Flächen, Lila als Markierung */
html, body { background: #fff; }
::selection { background: #c9bbe8; color: #251a1b; }
.go__steps li::before, .steps4__n { background: #c9bbe8 !important; color: #251a1b !important; }
.go__checks .ico, .promises li svg { color: #911e28; }
body::before { background:
  linear-gradient(rgba(37, 26, 27, .04) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgba(37, 26, 27, .04) 1px, transparent 1px) 0 0 / 44px 44px,
  radial-gradient(60% 55% at 78% 8%, rgba(180, 152, 168, .22), transparent 70%),
  radial-gradient(50% 45% at 8% 0%, rgba(201, 187, 232, .10), transparent 70%),
  #fff !important; }

/* ---------- Akzentsystem (02.11.2026): jede Kompetenzwelt hat ihre Farbe ----------
   Brand & Growth = Braun · Commerce & Technology = Mauve · Systems & Automation = Pastell-Lila.
   Mauve und Lila nur als Fläche, Linie, Punkt; für Text die dunklen „-ink“-Töne (Kontrast ≥ 4.5:1). */

/* Kompetenzwelten auf der Startseite */
.world__vis .hero-live { box-shadow: 0 0 0 1px var(--card-line), 0 34px 70px -40px var(--acc); }

/* Hero-Grafik: Knoten in den Weltfarben */

/* Mega-Menü: Weltnummer als Farbmarke */
.mega__wn { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--brown); color: #fff; }
.mega__world:nth-child(2) .mega__wn { background: var(--mauve); color: var(--dark); }
.mega__world:nth-child(3) .mega__wn { background: var(--lila); color: var(--dark); }

/* Preis-Kacheln: Braun, Dunkelbraun, Mauve, Lila */
.prices li:nth-child(2) .prices__ico { background: linear-gradient(135deg, #572025, var(--dark)); }
.prices li:nth-child(3) .prices__ico { background: linear-gradient(135deg, #cbb4c1, #9c7f90); color: var(--dark); box-shadow: 0 10px 20px -10px rgba(156, 127, 144, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.prices li:nth-child(4) .prices__ico { background: linear-gradient(135deg, #ddd2f2, #a996d6); color: var(--dark); box-shadow: 0 10px 20px -10px rgba(169, 150, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Ablauf-Zeitleiste: Linie im Dreiklang, Punkte wechseln die Farbe */
.tl::before { background: linear-gradient(90deg, var(--brown), var(--mauve), var(--lila)); height: 2px; }
.tl li:nth-child(3n+2) .tl__dot { border-color: var(--mauve); }
.tl li:nth-child(3n+3) .tl__dot { border-color: var(--lila); }
.tl li:last-child .tl__dot { background: var(--lila); border-color: var(--lila); }

/* Team: jede Karte mit feiner Farbkante */
.team__card { box-shadow: inset 0 3px 0 var(--brown); }
.team__card:nth-child(2) { box-shadow: inset 0 3px 0 var(--mauve); }
.team__card:nth-child(3) { box-shadow: inset 0 3px 0 var(--lila); }

/* Kleine Akzente */
.svc-combo li + li::before { color: var(--lila-ink); }
.ft { border-top: 4px solid transparent; border-image: var(--trio) 1; }
.go__panel::after { content: ""; position: absolute; width: 420px; aspect-ratio: 1; left: -180px; bottom: -240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 187, 232, .18), transparent); pointer-events: none; }
.go__av:first-child { background: var(--mauve-soft); color: var(--mauve-ink); }
.go__av + .go__av { background: var(--lila-soft); color: var(--lila-ink); }
.go__direct a:hover { border-color: var(--lila) !important; background: var(--lila-soft) !important; }

/* ---------- Themenfarbe je Seite (02.11.2026) ----------
   body.t-brand = Braun/Creme · body.t-commerce = Mauve · body.t-systems = Pastell-Lila.
   Die Akzent-Variable --berry wird je Thema auf einen dunklen, gut lesbaren Ton gesetzt; Flächen und Licht nehmen die helle Variante. */
.t-brand { --tc: var(--brown); --tc-soft: var(--cream); --tc-on: #fff; }
.t-commerce {
  --tc: var(--mauve); --tc-soft: var(--mauve-soft); --tc-on: var(--dark);
  --berry: #6b4d5e; --shadz: #4f3845; --copper: #9c7f90; --copper-text: #4f3845;
  --sky: #efe5ea; --sky-soft: #f7f1f4; --sky-line: #b498a8; --sky-ink: #4f3845; --sky-glow: rgba(180, 152, 168, .42);
  --soft-panel: linear-gradient(165deg, #fff 0%, #faf6f8 45%, #f3eaef 100%); --soft-line: #ebdfe5;
}
.t-systems {
  --tc: var(--lila); --tc-soft: var(--lila-soft); --tc-on: var(--dark);
  --berry: #5a4885; --shadz: #3f3263; --copper: #a996d6; --copper-text: #3f3263;
  --sky: #ebe5f7; --sky-soft: #f5f2fb; --sky-line: #c9bbe8; --sky-ink: #3f3263; --sky-glow: rgba(201, 187, 232, .48);
  --soft-panel: linear-gradient(165deg, #fff 0%, #f8f6fc 45%, #efeaf9 100%); --soft-line: #e6dff4;
}
/* Licht oben auf der Seite in der Themenfarbe */
.t-commerce::before, .t-systems::before { background:
  linear-gradient(rgba(37, 26, 27, .04) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgba(37, 26, 27, .04) 1px, transparent 1px) 0 0 / 44px 44px,
  radial-gradient(62% 58% at 80% 6%, var(--sky-glow), transparent 70%),
  radial-gradient(48% 44% at 6% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
  #fff !important; }
/* Farbstrich über der Seitenüberschrift der Unterseiten */
.phero__h::before { content: ""; display: block; width: 56px; height: 6px; border-radius: 99px; background: var(--tc); margin-bottom: clamp(18px, 2vw, 26px); }
/* Durchgehende Themen-Details */
.t-commerce .tl::before, .t-systems .tl::before { background: var(--tc); }
.t-commerce .tl li .tl__dot, .t-systems .tl li .tl__dot { border-color: var(--tc); }
.t-commerce .tl li:last-child .tl__dot, .t-systems .tl li:last-child .tl__dot { background: var(--tc); border-color: var(--tc); }
.svc-intro__grid { border-top: 2px solid var(--tc); }
.nav__item > a[aria-current="page"], .nav__item > button.is-current { text-decoration-color: var(--tc); text-decoration-thickness: 2px; }
.go__panel { border-color: var(--soft-line); }
.go__steps li::before { background: var(--tc) !important; color: var(--tc-on) !important; }

/* =====================================================================
   Refresh 03.11.2026: Dunkelrot, Bild-Hero, mitlaufende Menüleiste, Story
   ===================================================================== */
.btn { --bg: var(--red); }
@media (hover: hover) { .btn:hover { --bg: #74141e; } }

/* ---------- Menüleiste: blendet beim Runterscrollen aus, beim Hochscrollen ein ---------- */
.hd { transition: translate 380ms var(--spring), opacity 240ms ease; }
/* Hintergrund bleibt beim Scrollen ein Verlauf mit fester Grundfarbe: vorher ersetzte die Kurzschreibweise den Verlauf
   und blendete die Farbe von durchsichtig ein, der Header war dabei kurz durchsichtig (Flackern, 06.11.2026) */
.hd__in { position: relative; transition: box-shadow 300ms ease; }
html.is-scrolled .hd__in { box-shadow: 0 18px 40px -26px rgba(42, 10, 15, .35); background: rgba(255, 255, 255, .9) linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 250, 251, .92)); }
html.is-down .hd:not(.is-menu):not(:focus-within) { translate: 0 calc(-100% - 16px); }

/* ---------- Bild-Hero, vollflächig ---------- */
.hx { position: relative; isolation: isolate; min-height: max(640px, 100svh); margin-top: calc(-1 * var(--hd-real, var(--head-total))); padding-top: calc(var(--hd-real, var(--head-total)) + clamp(24px, 6vh, 80px)); display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden; background: var(--red-ink); }
.hx__media, .hx__shade { position: absolute; inset: 0; margin: 0; }
/* Hintergrund: flach liegende Projektbilder in Reihen, die abwechselnd nach links/rechts laufen */
.hxr { overflow: hidden; perspective: 1600px; background: var(--red-ink); }
.hxr__plane { --t: clamp(200px, 21vw, 360px); --g: clamp(12px, 1.4vw, 22px); position: absolute; left: 50%; top: 50%; display: grid; gap: var(--g); translate: -42% -50%; transform: rotateX(32deg) rotateZ(-16deg); transform-style: preserve-3d; }
.hxr__row { display: flex; width: max-content; will-change: transform; }
.hxr__row:nth-child(odd) { margin-left: calc(var(--t) * -.5); }
.hxr__tile { flex: none; width: var(--t); height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-right: var(--g); border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) {
  .hxr__row { animation: hxrRun var(--d, 90s) linear infinite; }
  .hxr__row:nth-child(even) { animation-direction: reverse; }
  .hx.is-paused .hxr__row { animation-play-state: paused; }
}
@keyframes hxrRun { from { transform: translateX(12.5%); } to { transform: translateX(-12.5%); } }
@media (max-width: 900px) { .hxr__plane { --t: clamp(170px, 46vw, 260px); translate: -50% -46%; } }
.hx__media { z-index: -2; }
.hx__shade { z-index: -1; background:
  linear-gradient(100deg, rgba(42, 10, 15, .92) 0%, rgba(92, 15, 24, .72) 38%, rgba(92, 15, 24, .28) 70%, rgba(42, 10, 15, .1) 100%),
  linear-gradient(0deg, rgba(42, 10, 15, .7) 0%, transparent 34%); }
.hx__in { position: relative; }
.hx__award { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 clamp(20px, 3vh, 32px); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); font-size: var(--fs-s); font-weight: 500; }
.hx__award .ico { color: #f3c9cd; }
.hx__h { margin: 0; max-width: 13ch; font-size: clamp(3rem, 1.4rem + min(5.2vw, 8.4vh), 7rem); line-height: .98; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; color: #fff; }
.hx__h em { font-style: normal; color: #f6c7cc; }
.hx__h .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hx__h .w { opacity: 0; translate: 0 .5em; filter: blur(8px); animation: hxWord 900ms var(--spring) forwards; animation-delay: calc(120ms + var(--i) * 90ms); }
  .hx__sub, .hx__cta, .hx__proof, .hx__award { opacity: 0; animation: hxUp 800ms var(--spring) forwards; }
  .hx__award { animation-delay: 60ms; } .hx__sub { animation-delay: 620ms; } .hx__cta { animation-delay: 760ms; } .hx__proof { animation-delay: 900ms; }
}
@keyframes hxWord { to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes hxUp { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hx__sub { margin: clamp(20px, 3vh, 30px) 0 0; max-width: 40ch; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.hx__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(28px, 4vh, 40px); }
.hx__cta .btn { --bg: #fff; --fg: var(--red-ink); height: 56px; padding: 0 30px; font-size: 1.05rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
@media (hover: hover) { .hx__cta .btn:hover { --bg: #f9eced; } }
.hx__ghost { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; text-decoration: none; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .45); transition: border-color 200ms ease, gap 200ms var(--spring); }
@media (hover: hover) { .hx__ghost:hover { border-color: #fff; gap: 12px; } }
.hx__proof { list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: var(--fs-s); color: rgba(255, 255, 255, .88); }
.hx__proof li { display: inline-flex; align-items: center; gap: 7px; }
.hx__proof .ico { color: #f3c9cd; }
.hx__scroll { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: var(--fs-s); text-decoration: none; opacity: .85; }
.hx__scroll .ico { rotate: 90deg; }
@media (prefers-reduced-motion: no-preference) { .hx__scroll .ico { animation: hxBob 1.8s ease-in-out infinite; } }
@keyframes hxBob { 50% { translate: 0 4px; } }
@media (max-width: 760px) {
  .hx { min-height: 100vh; min-height: 100dvh; }
  .hx__shade { background: linear-gradient(180deg, rgba(42, 10, 15, .35) 0%, rgba(92, 15, 24, .55) 30%, rgba(70, 12, 20, .86) 62%, rgba(42, 10, 15, .96) 100%); }
  .hx__award { font-size: .82rem; }
  .hx__cta .btn { width: 100%; justify-content: center; }
  .hx__scroll { display: none; }
}

/* ---------- Story: vier Kapitel, eine Bühne, die mitspielt ---------- */
.st { padding-block: clamp(80px, 10vw, 160px) clamp(56px, 7vw, 110px); background: linear-gradient(180deg, var(--red-soft), #fff 40%); }
.st__title { margin: 0; max-width: 22ch; font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.st__title em { font-style: normal; color: var(--red); }
.st__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); margin-top: clamp(48px, 7vw, 96px); }
.st__chapters { list-style: none; margin: 0; padding: 0; }
.st__ch { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; opacity: .32; transition: opacity 500ms ease; }
.st__ch:first-child { min-height: 46vh; justify-content: flex-start; }
.st__ch.is-on { opacity: 1; }
.st__n { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: .8rem; font-weight: 600; margin-bottom: 16px; }
.st__ch h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.st__ch p { margin: 0; max-width: 44ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--g4); }
.st__stick { position: sticky; top: calc(var(--head-total) + 24px); height: min(560px, 70vh); align-self: start; }
.st__stage { position: relative; height: 100%; border-radius: 32px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 40px 80px -50px rgba(42, 10, 15, .45); overflow: hidden; container-type: size; }
.st__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(145, 30, 40, .10), transparent 70%); opacity: 0; transition: opacity 700ms ease; }
.st__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.st__stage[data-step="3"] .st__lines, .st__stage[data-step="4"] .st__lines { opacity: 1; }
.st__lines line { stroke: var(--red); stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; transition: stroke-dashoffset 900ms var(--spring); }
.st__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: .4; opacity: 0; padding: 16px 22px; border-radius: 20px; background: var(--red); color: #fff; text-align: center; display: grid; gap: 2px; box-shadow: 0 20px 40px -16px rgba(145, 30, 40, .6); transition: scale 700ms var(--spring), opacity 400ms ease, box-shadow 600ms ease; }
.st__core b { font-weight: 600; } .st__core span { font-size: .8rem; opacity: .8; }
.st__t { --x: var(--x1); --y: var(--y1); --r: var(--r1); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 10px 24px -16px rgba(42, 10, 15, .4); font-size: .9rem; white-space: nowrap;
  translate: calc(var(--x) * 1cqw - 50%) calc(var(--y) * 1cqh - 50%); rotate: var(--r); transition: translate 900ms var(--spring), rotate 900ms var(--spring), border-color 400ms ease; transition-delay: calc(var(--n) * 40ms); }
.st__t .ico { color: var(--red); }
.st__t b { font-weight: 600; }
.st__warn { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #e2a23b; border: 2px solid #fff; transition: scale 300ms var(--spring); }
.st__chip { position: absolute; left: 50%; bottom: 22px; translate: -50% 20px; opacity: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--lila-soft); color: var(--lila-ink); font-size: .9rem; font-weight: 600; white-space: nowrap; transition: translate 600ms var(--spring), opacity 400ms ease; }
.st__bar { position: absolute; left: 22px; right: 22px; top: 18px; height: 3px; border-radius: 3px; background: var(--g1); overflow: hidden; }
.st__bar i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(.25); transition: transform 700ms var(--spring); }
.st__stage[data-step="2"] .st__t { --x: var(--x2); --y: var(--y2); --r: var(--r2); }
.st__stage[data-step="3"] .st__t, .st__stage[data-step="4"] .st__t { --x: var(--x3); --y: var(--y3); --r: var(--r3); }
.st__stage:not([data-step="1"]) .st__warn { scale: 0; }
.st__stage[data-step="2"] .st__bar i { transform: scaleX(.5); }
.st__stage[data-step="3"] .st__bar i { transform: scaleX(.75); }
.st__stage[data-step="4"] .st__bar i { transform: scaleX(1); }
.st__stage[data-step="3"] .st__lines line, .st__stage[data-step="4"] .st__lines line { stroke-dashoffset: 0; }
.st__stage[data-step="3"] .st__core, .st__stage[data-step="4"] .st__core { scale: 1; opacity: 1; }
.st__stage[data-step="4"] .st__core { box-shadow: 0 0 0 10px rgba(145, 30, 40, .12), 0 0 0 22px rgba(145, 30, 40, .06), 0 20px 40px -16px rgba(145, 30, 40, .6); }
.st__stage[data-step="4"]::before { opacity: 1; }
.st__stage[data-step="4"] .st__t { border-color: rgba(145, 30, 40, .35); }
.st__stage[data-step="4"] .st__chip { translate: -50% 0; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .st__stage[data-step="4"] .st__lines line { stroke-dasharray: .06 .05; animation: stFlow 1.6s linear infinite; } }
@keyframes stFlow { to { stroke-dashoffset: -.22; } }
.st__end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: clamp(40px, 6vw, 72px) 0 0; color: var(--g4); font-size: var(--fs-m); }
@media (max-width: 900px) {
  .st__grid { grid-template-columns: minmax(0, 1fr); }
  .st__stick { order: -1; top: calc(var(--head-total) + 8px); height: 300px; z-index: 2; }
  .st__ch, .st__ch:first-child { min-height: 70vh; justify-content: center; }
  .st__t { padding: 7px 10px; font-size: .78rem; gap: 6px; }
  .st__core { padding: 10px 14px; font-size: .85rem; }
}

/* ---------- Leistungen im Überblick: drei Karten ---------- */
.lv__grid { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.lv__card { --acc: var(--red); --acc-ink: var(--red); --acc-soft: var(--red-soft); position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 34px); border-radius: 30px; background: linear-gradient(180deg, var(--acc-soft), #fff 46%); border: 1px solid var(--card-line); overflow: hidden; transition: translate 450ms var(--spring), box-shadow 450ms ease; }
.lv__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acc); }
.lv--commerce { --acc: var(--mauve); --acc-ink: var(--mauve-ink); --acc-soft: var(--mauve-soft); }
.lv--systems { --acc: var(--lila); --acc-ink: var(--lila-ink); --acc-soft: var(--lila-soft); }
@media (hover: hover) { .lv__card:hover { translate: 0 -6px; box-shadow: 0 34px 60px -36px rgba(42, 10, 15, .4); } }
.lv__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--acc); color: #fff; }
.lv--commerce .lv__ico, .lv--systems .lv__ico { color: var(--red-ink); }
.lv__n { margin: 6px 0 0; font-size: var(--fs-s); font-weight: 600; color: var(--acc-ink); }
.lv__h { margin: 0; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; }
.lv__d { margin: 0; color: var(--g4); font-size: var(--fs-m); line-height: 1.55; }
.lv__svcs { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--card-line); display: grid; }
.lv__svcs a { display: flex; align-items: center; gap: 10px; padding: 11px 2px; text-decoration: none; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.lv__svcs li:last-child a { border-bottom: 0; }
.lv__svcs em { margin-left: auto; font-style: normal; font-size: var(--fs-s); color: var(--acc-ink); font-weight: 600; white-space: nowrap; }
.lv__svcs .ico { color: var(--acc-ink); transition: translate 250ms var(--spring); flex: none; }
.lv__svcs span + .ico { margin-left: auto; }
@media (hover: hover) { .lv__svcs a:hover .ico { translate: 4px 0; } }
@media (max-width: 960px) { .lv__grid { grid-template-columns: minmax(0, 1fr); } }

.pg-home main { padding-top: 0 !important; }

/* ---------- Unterseiten als Geschichte: Kapitel-Beschriftung + mitlaufende Kapitelnavigation ---------- */
main { counter-reset: chap; }
section[data-chap] { counter-increment: chap; scroll-margin-top: calc(var(--hd-real, 84px) + 16px); }
html:not(.js) section[data-chap]::before { content: "Kapitel " counter(chap, decimal-leading-zero) "  ·  " attr(data-chap); display: block; box-sizing: border-box; width: 100%; max-width: calc(var(--max) + 2 * var(--edge)); margin: 0 auto clamp(18px, 2.2vw, 28px); padding-inline: var(--edge); font-size: var(--fs-s); font-weight: 600; letter-spacing: .01em; color: var(--berry); white-space: pre; }
.pg-home section[data-chap]::before { display: none; }
section[data-chap].go::before { margin-bottom: 14px; }

.chapnav { position: fixed; z-index: 45; left: 20px; bottom: 20px; font-size: var(--fs-s); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity 300ms ease, translate 400ms var(--spring); }
.chapnav.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.chapnav__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px; border: 1px solid var(--card-line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -24px rgba(42, 10, 15, .45); font: inherit; color: var(--ink); cursor: pointer; }
.chapnav__ring { --p: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tc, var(--red)) calc(var(--p) * 1turn), var(--g1) 0); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chapnav__ring span { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.chapnav__t { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chapnav__t small { color: var(--g4); font-weight: 400; margin-right: 6px; }
.chapnav__list { position: absolute; left: 0; bottom: calc(100% + 10px); min-width: 260px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 24px 60px -30px rgba(42, 10, 15, .45); opacity: 0; translate: 0 8px; scale: .98; transform-origin: bottom left; pointer-events: none; transition: opacity 200ms ease, translate 260ms var(--spring), scale 260ms var(--spring); }
.chapnav.is-open .chapnav__list { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.chapnav__list a { display: flex; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.chapnav__list a span { color: var(--g4); font-variant-numeric: tabular-nums; }
.chapnav__list a[aria-current="true"] { background: var(--sky-soft, var(--red-soft)); font-weight: 600; }
@media (hover: hover) { .chapnav__list a:hover { background: var(--g1); } }
@media (max-width: 899px) { .chapnav { display: none; } }

.chap { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2vw, 24px); font-size: var(--fs-m); font-weight: 600; color: var(--ink); }
.chap span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--berry); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.chap::after { content: ""; flex: 0 1 80px; height: 1px; background: currentColor; opacity: .2; }
.t-commerce .chap span, .t-systems .chap span { background: var(--tc); color: var(--tc-on); }
section[data-chap] .kicker { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .chap { opacity: 0; translate: -14px 0; transition: opacity 600ms ease, translate 700ms var(--spring); }
  .js .chap::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--spring) 200ms; }
  .js section.is-chap .chap { opacity: 1; translate: 0 0; }
  .js section.is-chap .chap::after { transform: scaleX(1); }
}
.bookbar__main { background: var(--red) !important; color: #fff !important; }


/* HTML-Sitemap (/sitemap/) */
.smap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 48px var(--gut); }
.smap__group h2 { margin: 0 0 16px; color: var(--g3); }
.smap__group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.smap__group li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.smap__group a { display: block; font-weight: 500; text-decoration: none; }
.smap__group a:hover, .smap__group a:focus-visible { color: var(--berry); text-decoration: underline; }
.smap__group span { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--g3); line-height: 1.45; }

/* ---------- Startseite 03.11.2026: Paket A + B ---------- */
/* Hero: Überschrift und Auszeichnung sofort sichtbar (LCP), nur der Rest blendet ein */
@media (prefers-reduced-motion: no-preference) { .hx__h .w, .hx__award { opacity: 1; translate: none; filter: none; animation: none; } }

/* Story kompakt: ein Bildschirm statt Scrollstrecke, aktives Kapitel aufgeklappt */
.st { padding-block: clamp(72px, 8vw, 128px); }
.st__grid { align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.st__chapters { display: grid; gap: 6px; }
.st__ch, .st__ch:first-child { min-height: 0; justify-content: flex-start; padding: 16px 20px; border-radius: 20px; cursor: pointer; opacity: .55; transition: opacity 300ms ease, background-color 300ms ease, box-shadow 300ms ease; }
.st__ch.is-on { opacity: 1; background: #fff; box-shadow: 0 18px 40px -30px rgba(42, 10, 15, .35); }
.st__ch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.st__n { margin-bottom: 10px; }
.st__ch h3 { margin-bottom: 0; font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); }
.st__ch p { display: none; margin-top: 8px; font-size: var(--fs-m); }
.st__ch.is-on p { display: block; }
.st__stick { position: static; height: min(480px, 64vh); }
@media (hover: hover) { .st__ch:not(.is-on):hover { opacity: .85; } }
@media (max-width: 900px) { .st__stick { position: static; height: 300px; } .st__ch, .st__ch:first-child { min-height: 0; } }

/* Leistungskarten: Überschrift, Text und Liste stehen auf gleicher Höhe */
.lv__card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 12px; align-content: start; }
.lv__svcs { margin: 0; align-self: start; }

/* Preise: Monatsangabe als eigene Zeile statt Umbruch in der Zahl */
.prices__per { margin-top: -6px; font-size: var(--fs-s); color: var(--g4); }

/* ---------- Startseite 03.11.2026: Paket C ---------- */
/* FAQ: Kontaktkarte unter der Überschrift, mobil hinter den Fragen */
.faq-ask { margin-top: 32px; max-width: 360px; padding: 22px 22px 20px; border: 1px solid var(--card-line); border-radius: 22px; background: var(--soft-panel); }
.faq-ask p { margin: 0 0 14px; color: var(--g4); font-size: var(--fs-m); line-height: 1.5; }
.faq-ask .faq-ask__h { margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.faq-ask .go__direct { padding-top: 0; border-top: 0; }
@media (max-width: 1023px) {
  #faq .grid { display: flex; flex-direction: column; }
  #faq .blk__h { display: contents; }
  #faq .blk__h .h2 { margin-bottom: 32px; }
  .faq-ask { order: 2; max-width: none; }
}

/* Team: Monogramm statt roter Fläche, bis ein Foto von George da ist */
.team__pic--george { background: linear-gradient(160deg, var(--red-soft), #fff 70%); border: 1px solid var(--card-line); color: var(--red); font-weight: 500; letter-spacing: -.02em; }

/* ---------- Kontakt: mehrstufige Anfrage (03.11.2026) ---------- */
.aflow [hidden] { display: none !important; }
.aflow__top { margin-bottom: 32px; }
.aflow__count { margin: 0 0 10px; font-size: var(--fs-s); color: var(--g4); }
.aflow__count b { color: var(--ink); font-weight: 600; }
.aflow__bar { height: 4px; border-radius: 4px; background: var(--g1); overflow: hidden; }
.aflow__bar i { display: block; height: 100%; background: var(--berry); transform-origin: 0 50%; transform: scaleX(.2); transition: transform 400ms var(--spring); }
.aflow__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .aflow__step:not(.is-on) { display: none; }
.aflow__step > legend { padding: 0; margin-bottom: 24px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.aflow__step > legend:focus { outline: none; }
.aflow__hint { display: block; margin-top: 6px; font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; color: var(--g4); }
.aflow__q { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.aflow__q > legend { padding: 0; margin-bottom: 12px; font-size: 1.05rem; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile span { position: relative; display: grid; align-content: center; gap: 2px; height: 100%; min-height: 56px; padding: 14px 18px 14px 50px; border: 1px solid var(--card-line); border-radius: 16px; background: #fff; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.tile span::before { content: ""; position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff center / 12px no-repeat; }
.tile input[type="radio"] + span::before { border-radius: 50%; }
.tile b { font-weight: 600; }
.tiles--opts .tile b { font-weight: 500; }
.tile small { font-size: var(--fs-s); color: var(--g4); }
.tile input:checked + span { border-color: var(--berry); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--berry); }
.tile input[type="checkbox"]:checked + span::before { border-color: var(--berry); background-color: var(--berry); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tile input[type="radio"]:checked + span::before { border-color: var(--berry); background: var(--berry); box-shadow: inset 0 0 0 3px #fff; }
.tile input:focus-visible + span { outline: 2px solid var(--berry); outline-offset: 2px; }
@media (hover: hover) { .tile:hover input:not(:checked) + span { border-color: #d9c4cc; background: #fffafb; } }
.aflow__q.is-err .tile span { border-color: var(--berry); }
.aflow__err { margin: 8px 0 0; font-size: var(--fs-s); color: var(--berry); }
.aflow__err:empty { display: none; }
.aflow__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.aflow__nav [data-back] { order: 2; }
.aflow.is-sent .aflow__top, .aflow.is-sent .aflow__step, .aflow.is-sent .aflow__nav { display: none; }
@media (max-width: 600px) { .tiles { grid-template-columns: minmax(0, 1fr); } .aflow__nav .btn { flex: 1 1 auto; justify-content: center; } }

/* Ghost-Buttons: „.btn { --bg: var(--red) }“ weiter oben überschrieb die Umriss-Variante überall (Altfehler aus dem Original) */
.btn.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-strong); background-image: none; box-shadow: none; }
@media (hover: hover) { .btn.btn--ghost:hover { --bg: var(--ink); --fg: var(--white); border-color: var(--ink); } }

/* ---------- Shopify-Agentur 04.11.2026: Projekte, Preis, Partner, echtes Hero-Bild ---------- */
.phx__shot { position: relative; display: block; border-radius: 28px; overflow: hidden; background: var(--g1); box-shadow: 0 40px 80px -50px rgba(42, 10, 15, .45); text-decoration: none; color: inherit; }
.phx__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.phx__shot-cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); font-size: var(--fs-s); }
.phx__shot-cap .mono { color: var(--g4); font-size: .75rem; }
.phx__shot-cap b { font-weight: 600; }
@media (hover: hover) { .phx__shot img { transition: scale 600ms var(--ease-out); } .phx__shot:hover img { scale: 1.02; } }

.sp-cases { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.sp-case { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--card-line); border-radius: 26px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: translate 250ms var(--spring), box-shadow 250ms ease; }
.sp-case img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-case__b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: clamp(20px, 2.2vw, 28px); }
.sp-case__meta { font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
.sp-case__h { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; }
.sp-case__l { font-weight: 500; }
.sp-case__d { color: var(--g4); font-size: var(--fs-m); line-height: 1.55; }
.sp-case__go { margin-top: auto; padding-top: 10px; font-size: var(--fs-s); font-weight: 600; color: var(--berry); }
@media (hover: hover) { .sp-case:hover { translate: 0 -4px; box-shadow: 0 30px 56px -36px rgba(42, 10, 15, .4); } }
@media (max-width: 760px) { .sp-cases { grid-template-columns: minmax(0, 1fr); } }

.sp-price b { color: var(--ink); font-weight: 600; }

.sp-partner { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 380px; margin-top: 28px; padding: 18px; border: 1px solid var(--card-line); border-radius: 22px; background: var(--soft-panel); }
.sp-partner img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; object-position: 50% 20%; }
.sp-partner p { margin: 0; }
.sp-partner__k { font-size: .78rem; font-weight: 600; color: var(--berry); }
.sp-partner__n { margin-top: 2px !important; font-weight: 600; }
.sp-partner__t { margin-top: 6px !important; font-size: var(--fs-s); line-height: 1.5; color: var(--g4); }
.phx:has(.phx__shot) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
@media (max-width: 960px) { .phx:has(.phx__shot) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Über uns 04.11.2026 ---------- */
/* Zitat: Absatz übernimmt die große Schrift des blockquote (vorher klein und gestaucht) */
.ed-quote blockquote p { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; max-width: none; }
/* Team-Karte mit engem Ausschnitt statt doppeltem Hero-Porträt */
.team__photo--close img { object-fit: cover; object-position: 50% 30%; }

/* ---------- Übrige Leistungsseiten 04.11.2026 ---------- */
/* Nur ein Projekt: Karte über die volle Breite, Bild links, Text rechts */
.sp-cases--one { grid-template-columns: minmax(0, 1fr); }
.sp-cases--one .sp-case:has(img) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sp-cases--one .sp-case img { height: 100%; }
@media (max-width: 760px) { .sp-cases--one .sp-case:has(img) { display: flex; } .sp-cases--one .sp-case img { height: auto; } }
/* Projekt ohne Bild (KI-Lead-Agent): Text-Karte mit großer Kennzahl-Zeile */
.sp-case--text .sp-case__b { padding: clamp(24px, 3vw, 40px); gap: 10px; }
.sp-case--text .sp-case__l { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing: -.02em; line-height: 1.2; max-width: 28ch; }
.sp-case--text .sp-case__d { max-width: 62ch; }
@media (min-width: 761px) {
  .sp-cases--one .sp-case--text .sp-case__b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; }
  .sp-cases--one .sp-case--text .sp-case__meta, .sp-cases--one .sp-case--text .sp-case__h, .sp-cases--one .sp-case--text .sp-case__l { grid-column: 1; }
  .sp-cases--one .sp-case--text .sp-case__d { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .sp-cases--one .sp-case--text .sp-case__go { grid-column: 2; }
}

/* ---------- Referenzen 04.11.2026 ---------- */
/* Filter über der Projektliste */
.ref-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(32px, 4vw, 56px); }
.ref-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.ref-filter button span { font-size: .78em; font-weight: 600; color: var(--g4); }
.ref-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ref-filter button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }
@media (hover: hover) { .ref-filter button:hover { border-color: var(--ink); } }
.story[hidden] { display: none; }
/* Kennzahl statt „AI“-Platzhalter (KI-Lead-Agent) */
.kpi-card { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2vw, 24px); width: 100%; height: 100%; padding: clamp(22px, 4vw, 48px); background: linear-gradient(135deg, #251a1b, #141416); color: #fff; }
.kpi-card__k { font-size: var(--fs-s); font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .62); }
.kpi-card__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px clamp(14px, 2vw, 28px); }
.kpi-card__row > span { display: flex; flex-direction: column; gap: 4px; }
.kpi-card small { font-size: var(--fs-s); color: rgba(255, 255, 255, .55); }
.kpi-card b { font-size: clamp(1.5rem, 1rem + 2vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.kpi-card__row > span:first-child b { color: rgba(255, 255, 255, .5); text-decoration: line-through; text-decoration-thickness: 2px; }
.kpi-card__to { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); color: rgba(255, 255, 255, .45); }
/* „Was wir umgesetzt haben“: zweispaltige Häkchenliste statt leerer Felder */
.sits.sits--check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 0; }
.sits.sits--check li { position: relative; padding: 16px 0 16px 34px; background: none; box-shadow: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.sits.sits--check li::before { content: ""; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--berry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sits.sits--check li span { color: var(--ink); font-size: var(--fs-m); }
@media (max-width: 700px) { .sits.sits--check { grid-template-columns: minmax(0, 1fr); } }
/* Passende Leistungen unter dem Ergebnis */
.case-svcs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-m); }
.case-svcs b { margin-right: 6px; font-weight: 600; }
.case-svcs a { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-weight: 500; transition: border-color 200ms ease; }
@media (hover: hover) { .case-svcs a:hover { border-color: var(--ink); } }
/* Nächstes Projekt als Karte mit Bild */
.case-next__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.case-next__top .kicker { margin: 0; }
.case-next .case-next__a { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 14px clamp(14px, 2vw, 28px) 14px 14px; }
.case-next__m { display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--soft); }
.case-next__m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-next__m .kpi-card { padding: 14px 16px; gap: 6px; }
.case-next__m .kpi-card b { font-size: 1.05rem; }
.case-next__m .kpi-card__k, .case-next__m .kpi-card small { font-size: .7rem; }
.case-next__m .kpi-card__to { font-size: 1rem; }
.case-next__t { display: flex; flex-direction: column; gap: 4px; }
.case-next .case-next__t b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; }
.case-next__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; transition: translate 250ms var(--spring); }
.case-next__go svg { width: 20px; height: 20px; }
.case-next__go svg path { fill: #fff; }
@media (hover: hover) { .case-next__a:hover .case-next__go { translate: 4px 0; } }
@media (max-width: 700px) { .case-next .case-next__a { grid-template-columns: minmax(0, 1fr) auto; } .case-next__m { grid-column: 1 / -1; } }

/* ---------- Lösungen 04.11.2026 ---------- */
/* Schrittnummern im Ablauf: die Lila-Regel (Erd-Palette) machte aus der Zahl einen breiten Balken */
.steps4 .steps4__n { background: none !important; color: var(--berry) !important; }
/* Echtes Projekt statt Platzhalter-Szenario */
.callout.loe-proof { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.loe-proof .loe-proof__h { margin: 8px 0 4px; font-size: var(--fs-h3); }
.loe-proof p { margin: 0 0 12px; }
/* Kennzahl-Karte im Hero (KI-Lead-Agent) */
.phx__shot--kpi .kpi-card { aspect-ratio: 16 / 10; height: auto; padding-bottom: 96px; }
/* Übersicht: passende Leistungen + Projekt je Lösung (über dem Zeilen-Link klickbar) */
.loe-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.loe-meta a, .loe-case a { position: relative; z-index: 1; }
.loe-meta a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); text-decoration: none; font-size: var(--fs-s); font-weight: 500; }
@media (hover: hover) { .loe-meta a:hover { border-color: var(--ink); } }
.loe-case { margin: 12px 0 0; font-size: var(--fs-s); color: var(--g4); }
.loe-case a { color: var(--ink); font-weight: 600; }

/* ---------- Analyse 04.11.2026 ---------- */
/* Ergebnis-Ampel: großer Hebel = Dunkelrot, ausbaufähig = Hellila, stark = Dunkel (vorher war „ausbaufähig“ rot) */
.ana-result .ana-res__score.is-low { --c: #911e28; }
.ana-result .ana-res__score.is-mid { --c: #b3a2de; }
.ana-result .ana-res__score.is-good { --c: #251a1b; }
.ana-result .ana-res__bars li.is-low .ana-res__bar i { background: #911e28; }
.ana-result .ana-res__bars li.is-mid .ana-res__bar i { background: #b3a2de; }
.ana-result .ana-res__bars li.is-good .ana-res__bar i { background: #251a1b; }
.ana-res__cta { flex-wrap: wrap; }
/* Handy: Fragebogen früher sichtbar, Beispiel-Grafik nur ab Tablet */
@media (max-width: 760px) { .ana-sec .ana, .phx .ana-preview { scroll-margin-top: 88px; } .phx:has(.ana-preview) .phx__live { display: none; } }
#analyse-start { scroll-margin-top: 72px; }

/* ---------- Academy 04.11.2026 ---------- */
/* Kursgruppen: Titel + „Interesse vormerken“ links, letzte Karte bei ungerader Zahl volle Breite */
.course-group__side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.course-group__go { display: inline-flex; align-items: center; gap: 8px; color: var(--berry); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.course-group__go .ico { width: 16px; height: 16px; transition: translate 250ms var(--spring); }
@media (hover: hover) { .course-group__go:hover .ico { translate: 3px 0; } }
.courses > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { .course-group__side { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; } }
/* Ablauf: Nummer + Linie statt Verlaufskästen */
#ablauf .steps4 li { background: none; box-shadow: none; border: 0; border-radius: 0; border-top: 2px solid var(--ink); padding: 20px 0 0; }
@media (max-width: 700px) { #ablauf .steps4 { gap: 28px; } }
/* Trainerin */
.acad-trainer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.acad-trainer__img { margin: 0; border-radius: var(--r, 18px); overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.acad-trainer__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acad-trainer__name { margin: 12px 0 14px; color: var(--g4); }
.acad-trainer__name b { color: var(--ink); font-weight: 600; }
.acad-trainer__txt p { max-width: 58ch; }
.acad-trainer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 20px; }
@media (max-width: 760px) { .acad-trainer { grid-template-columns: minmax(0, 1fr); } .acad-trainer__img { max-width: 260px; } }
/* Warteliste: Pflicht-Hinweis Thema, Zähler im Button */
.fld.is-err .chips span { border-color: var(--berry); }
.wl-count { font-weight: 500; opacity: .8; }
#kurse .course-group__go, #warteliste { scroll-margin-top: 72px; }

/* ---------- Insights 04.11.2026 ---------- */
/* Übersicht: Themenzeile statt Schein-Filter, „Erscheint bald“ neben dem Artikel */
.ins-topics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 clamp(32px, 4vw, 56px); color: var(--g4); font-size: var(--fs-s); }
.ins-topics span { font-weight: 600; color: var(--ink); }
.ins-topics b { font-weight: 500; }
.ins-soon { grid-column: span 6; align-self: start; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r, 18px); background: #fff; }
.ins-soon h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.ins-soon ol { list-style: none; margin: 0; padding: 0; }
.ins-soon li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ins-soon li .mono { color: var(--berry); }
.ins-soon li b { font-weight: 500; font-size: var(--fs-l, 1.15rem); line-height: 1.3; letter-spacing: -.01em; }
.ins-soon li > span:last-child { color: var(--g4); font-size: var(--fs-m); }
.ins-soon__cta { margin: 18px 0 0; color: var(--g5); font-size: var(--fs-m); }
.ins-soon__cta a { color: var(--ink); font-weight: 600; }
@media (max-width: 1023px) { .ins-soon { grid-column: 1 / -1; } }
/* Artikel: flaches Titelbild */
.art-cover { aspect-ratio: 4 / 1; }
.art-cover .cover__w { font-size: clamp(3rem, 2rem + 4vw, 6rem); }
@media (max-width: 700px) { .art-cover { aspect-ratio: 5 / 2; } }
/* Artikel: Text links, Inhaltsverzeichnis rechts mitlaufend */
.art-layout .art { grid-column: 1 / 9; }
.art-side { grid-column: 10 / 13; padding-top: 72px; }
.art-side > * { position: sticky; top: 110px; }
.art-toc { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; border-left: 1px solid var(--line); }
.art-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.art-toc li { padding: 5px 0; font-size: var(--fs-s); }
.art-toc a { color: var(--g4); text-decoration: none; transition: color 200ms ease; }
.art-toc a[aria-current] { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .art-toc a:hover { color: var(--ink); } }
.art-side__cta { position: sticky; top: 470px; margin-top: 28px; }
@media (min-width: 1024px) { .phero .phero__ans.toc { display: none; } }
@media (max-width: 1023px) { .art-layout .art { grid-column: 1 / -1; } .art-side { display: none; } }
/* Artikel: eigenes Projekt */
.art .art-proof__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 3vw, 32px); align-items: center; margin-top: 12px; }
.art-proof .kpi-card { border-radius: 14px; padding: 22px; aspect-ratio: 4 / 3; height: auto; }
.art-proof .kpi-card b { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.art .art-proof p { font-size: var(--fs-m); margin: 0 0 10px; }
.art .art-proof .art-proof__h { margin: 0 0 6px; font-size: var(--fs-h3); }
@media (max-width: 700px) { .art .art-proof__in { grid-template-columns: minmax(0, 1fr); } }
/* Artikel: Autorin */
.art-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; margin: 56px 0 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.art .art-author p { margin: 4px 0 8px; font-size: var(--fs-m); }
.art .art-author .art-author__n { margin-top: 6px; }
.art-author__n b { font-weight: 600; }
/* Link kopieren */
.art-copy { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.art-copy .ico { width: 16px; height: 16px; }
/* Lesefortschritt */
#erstes-projekt, .art h2 { scroll-margin-top: 96px; }
@media (max-width: 700px) { .art-author { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; } .art-author img { width: 64px; height: 64px; } }

/* ---------- Suche + 404 04.11.2026 ---------- */
.nf-search { max-width: 560px; margin-top: 28px; }
.nf-or { margin: 24px 0 12px; color: var(--g4); font-size: var(--fs-s); }
.nf-or + .btns { margin-top: 0; }

/* ---------- Geräte-QA 04.11.2026 ---------- */
/* Kontakt (Tablet): Termin-Button in der schmalen Spalte darf umbrechen statt über den Rand zu ragen */
.form__aside .btn { max-width: 100%; white-space: normal; height: auto; min-height: 52px; padding-block: 12px; line-height: 1.25; }
/* Handy: größere Tippflächen ohne Layout-Verschiebung (Innenabstand + gleich großer Gegenrand) */
@media (max-width: 767px) {
  .ft__cols a { display: inline-block; min-width: 44px; padding: 4px 0; margin: -4px 0; }
  .ft__bar a, .ft a[href^="mailto:"], .ft a[href^="tel:"], .form__aside a[href^="mailto:"] { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .ft__bar a { padding-inline: 4px; margin-inline: -4px; }
  .bc a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
}
@media (max-width: 767px) { .mag-link, .tlink, .art-copy, .course-group__go, .toc a, .smap a, .consent a { display: inline-block; padding-block: 10px; margin-block: -10px; } }
/* Links mit Pfeil-Icon bleiben einzeilig: Icon neben dem Text, nicht darunter */
@media (max-width: 767px) { .art-copy, .course-group__go { display: inline-flex; } }

/* ---------- Cookie-Einstellungen 04.11.2026 ---------- */
.ck-list li { margin-bottom: 10px; }
.ck-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 32px; }
.ck-msg { margin: 0; color: var(--g4); font-size: var(--fs-s); }

/* ---------- Platzhalter-Bilder 04.11.2026 (Quellen: Downloads/onset/PLATZHALTER.md) ---------- */
.phone__img--photo { background: #f4f3f1 url(/assets/img/demo-leinenhemd.webp) 50% 45% / cover no-repeat; }
.phone__img--photo .phone__n { background: rgba(255, 255, 255, .85); border-radius: 4px; padding: 1px 4px; }
.kpi-card { background: linear-gradient(135deg, rgba(37, 26, 27, .9), rgba(20, 20, 22, .82)), url(/assets/img/crm-dashboard.webp) 50% 50% / cover no-repeat; }

/* ---------- Gelber Akzent (CI seit 05.11.2026) ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-s, .9rem); font-weight: 600; line-height: 1.2; }
.pill--y { background: var(--yellow); color: var(--yellow-ink); }
.pill--y .ico { color: var(--yellow-ink); }

/* Hero: Glasfläche hinter dem Text (Desktop) + gelbe Akzente */
.hx .hx__award { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); backdrop-filter: none; font-weight: 600; }
.hx .hx__award .ico { color: var(--yellow-ink); }
.hx__proof .ico { color: var(--yellow); }
@media (hover: hover) { .hx__ghost:hover { border-color: var(--yellow); } }
@media (min-width: 901px) {
  /* linke Hälfte als durchgehende Glasfläche, senkrechte Trennlinie in der Mitte */
  .hx::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, .28); pointer-events: none; }
  .hx__glass { max-width: calc(50vw - max(0px, (100vw - var(--max) - 2 * var(--edge)) / 2) - var(--edge) - clamp(32px, 4vw, 64px)); }
  .hx__glass .hx__h { max-width: none; font-size: clamp(2.6rem, 1rem + min(3.6vw, 6.2vh), 4.9rem); }
  .hx__glass .hx__sub { hyphens: none; }
}
/* Hero-Inhalt in der Höhe mittig, Punkte unten rechts */
.hx__in { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Linien-Raster (05.11.2026): Zeilen mit Haarlinien statt Karten, wiederverwendbar ---------- */
.lns__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.lns__h { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; max-width: 16ch; }
.lns__intro { color: var(--g3); font-size: var(--t-body); line-height: 1.6; max-width: 52ch; text-wrap: pretty; }
/* nur Listen: span.ln sind die Zeilen der Hero-Überschriften (sonst Strich über jeder Zeile, Fehler bis 06.11.2026) */
:is(ol, ul).ln { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ln__row { display: grid; grid-template-columns: var(--ln-cols, minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)); gap: 8px clamp(20px, 3vw, 48px); padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--line-strong); align-items: baseline; }
.ln__row--head { padding-block: 14px; font-size: var(--t-small); color: var(--g3); font-weight: 500; }
.ln__c { margin: 0; }
.ln__c--key { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.ln__c--old { color: var(--g3); line-height: 1.55; }
.ln__c--new { color: var(--ink); line-height: 1.55; }
.ln--wandel, .ln--vs { --ln-cols: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.ln--wandel .ln__c--new, .ln--vs .ln__c--new { font-weight: 500; }
.ln__row--sum { align-items: center; border-bottom-color: var(--ink); }
.ln__row--sum .ln__c--new { display: flex; align-items: center; gap: 20px; }
.ln__row--sum .ln__c--new span { color: var(--g3); font-weight: 400; max-width: 34ch; font-size: var(--t-small); line-height: 1.5; }
.ln__num { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ln__row--sum .ln__c--old .ln__num { color: var(--g3); }
.ln__row--sum .ln__c--new .ln__num { color: var(--red); }
.ln--steps { --ln-cols: 56px minmax(0, .9fr) minmax(0, 2fr); }
.ln--steps .ln__c--n { font-size: var(--t-small); color: var(--g3); font-variant-numeric: tabular-nums; padding-top: .45em; }
.ln--steps .ln__c--step { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.ln--steps .ln__c--txt { display: grid; gap: 12px; justify-items: start; color: var(--g4); line-height: 1.6; max-width: 62ch; }
.ln--steps .ln__c--txt p { margin: 0; }
.lns__foot, .lns__claim { margin-top: clamp(24px, 3vw, 40px); font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; letter-spacing: -.01em; }
.lns__claim b { font-weight: 600; }
.lns__note { margin-top: 12px; font-size: var(--t-small); color: var(--g3); }
.lns__cta { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 860px) {
  .lns__head { grid-template-columns: 1fr; align-items: start; }
  .ln__row, .ln--wandel, .ln--vs { --ln-cols: 1fr; }
  .ln__row--head { display: none; }
  .ln:not(.ln--steps) .ln__c[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font-size: .8rem; font-weight: 500; color: var(--g3); margin-bottom: 2px; }
  .ln__row--sum .ln__c--old { display: flex; align-items: baseline; gap: 12px; }
  .ln__row--sum .ln__c--old::before { margin: 0; }
  .ln--steps { --ln-cols: 40px 1fr; }
  .ln--steps .ln__c--txt { grid-column: 2; }
}
.lns { hyphens: none; }

/* ---------- Linien-Raster Teil 2 (05.11.2026): Preise, Link-Listen, FAQ ---------- */
.ln--price > li { display: block; }
.ln--price .ln__row { --ln-cols: minmax(0, .8fr) minmax(0, 1.4fr) 200px 24px; align-items: center; color: inherit; text-decoration: none; transition: background-color 160ms ease; }
.ln--price .ln__c--key { font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; }
.ln--price .ln__c--old { max-width: 46ch; }
.ln__c--price { text-align: right; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln__c--price small { font-size: var(--t-small); font-weight: 400; color: var(--g3); letter-spacing: 0; }
.ln__c--price .ln__per { display: block; }
.ln, .ln *, .ln-links, .lns__intro { hyphens: none; }
.ln__c--go { display: grid; place-items: center end; color: var(--red); }
.ln__c--go .ico, .ln-links .ico { transition: transform 200ms var(--ease-out, ease); }
@media (hover: hover) { .ln--price a.ln__row:hover .ln__c--go .ico, .ln-links a:hover .ico { transform: translateX(4px); } }
.ln--price a.ln__row:focus-visible, .ln-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.lns__sub { margin: clamp(36px, 4vw, 56px) 0 4px; font-size: var(--t-small); font-weight: 500; color: var(--g3); letter-spacing: 0; }
.ln-links { list-style: none; margin: 0; padding: 0; display: grid; column-gap: clamp(20px, 3vw, 48px); }
.ln-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-links a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-strong); color: inherit; text-decoration: none; font-weight: 500; }
.ln-links a span { flex: 1; }
.ln-links a b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ln-links a .ico { color: var(--red); flex: none; }
/* FAQ: Kasten weg, Linien wie oben */
#faq .faq { border-top-color: var(--ink); }
#faq .faq-ask { padding: 0; border: 0; border-radius: 0; background: none; max-width: 360px; }
#faq .faq-ask .ln-links { border-top: 1px solid var(--ink); }
@media (max-width: 860px) {
  .ln--price .ln__row { --ln-cols: minmax(0, 1fr) auto; row-gap: 6px; }
  .ln--price .ln__c--old { grid-column: 1 / -1; grid-row: 2; }
  .ln--price .ln__c--go { display: none; }
  .ln-links--2 { grid-template-columns: 1fr; }
}

/* ---------- Startseite einheitlich (05.11.2026) ----------
   Farben: Ink, Rot, Weiß, Creme als einzige Zweitfläche, Gelb nur als Hinweis-Pill.
   Mauve/Lila nur dort, wo sie die drei Leistungswelten unterscheiden.
   Überschriften: ein H2-Maß (wie .lns__h), keine Farbwörter, keine Überzeilen.
   Flächen und Bilder: Radius 20 px; Struktur über Haarlinien statt Karten. */
:is(#team, #faq, #start) :is(.ed-h2, .h2, .go__h) { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; }
#team .ed-split, #faq .blk__h > .h2 { margin-bottom: clamp(32px, 4vw, 56px); }

/* „Keine klassische Agentur“: flache Creme-Fläche über die volle Breite statt abgerundeter Verlaufs-Insel */
#anders { background: var(--surface-2, #f5f3f3); border: 0; border-radius: 0; margin-inline: 0; }

/* Team: keine Karten mit farbigen Kanten, Foto + Linie + Text */
#team .team__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; transform: none !important; gap: 8px; }
#team .team__photo { border-radius: 20px; margin-bottom: 20px; }
#team .team__role { padding-top: 16px; border-top: 1px solid var(--ink); width: 100%; color: var(--g3); font-weight: 500; }
#team .team__grid { gap: clamp(24px, 3vw, 48px); }

/* Abschluss: Creme-Fläche ohne Lichtflecken, Ablauf als Linien statt Karte mit Kreisen */
#start .go__panel { background: var(--surface-2, #f5f3f3); border: 0; border-radius: 20px; }
#start .go__panel::before, #start .go__panel::after { display: none; }
#start .go__side { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; border-top: 1px solid var(--ink); }
#start .go__side-h { margin: 0; padding: 14px 0; color: var(--g3); font-weight: 500; border-bottom: 1px solid var(--line-strong); }
#start .go__steps li { padding: 16px 0 16px 40px; border-bottom: 1px solid var(--line-strong); }
#start .go__steps li::before { background: none !important; color: var(--g3) !important; width: auto; height: auto; top: 18px; font-weight: 500; font-size: var(--t-small); }
#start .go__steps li::after { display: none; }
#start .go__direct { padding-top: 0; border-top: 0; display: grid; gap: 0; }
#start .go__direct a { border: 0 !important; border-radius: 0; background: none !important; padding: 14px 0; border-bottom: 1px solid var(--line-strong) !important; font-size: inherit; }
#start .go__direct a:hover { color: var(--red); }
#team, #team *, #start, #start * { hyphens: none !important; }
#start .go__direct a { text-align: left; }
#start .go__direct { border-top: 1px solid var(--line-strong); margin-top: 4px; }

/* Logo als Bild (Lockup ONSET.digital aus Wortmarke, 06.11.2026) */
.logo__img { display: block; height: 26px; width: auto; }
@media (max-width: 600px) { .logo__img { height: 22px; } }

/* ---------- Header 06.11.2026: Suche als eigene Kapsel, Mega-Menü per Hover, „bald“ gelb ---------- */
.hd__row { display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--edge)); max-width: var(--max); margin-inline: auto; }
.hd__row > .hd__in { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; margin: 0; }
.hd__in .nav { margin-left: auto; }
@media (max-width: 1100px) { .hd__in .menu-btn { margin-left: auto; } }
.search-btn.hd__search { flex: none; margin: 0; height: 64px; min-width: 64px; padding: 0 22px; gap: 10px; justify-content: center; border-radius: 999px;
  border: 1px solid var(--card-line); background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(250, 250, 251, .88));
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 10px 30px -18px rgba(37, 26, 27, .22); color: var(--ink);
  transition: box-shadow 300ms ease, border-color 160ms ease; }
.hd__search span, .hd__search kbd { display: none; }
html.is-scrolled .hd__search { box-shadow: 0 18px 40px -26px rgba(42, 10, 15, .35); background: rgba(255, 255, 255, .9) linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 250, 251, .92)); }
@media (hover: hover) and (pointer: fine) { .hd__search:hover { border-color: #dbcad4; } }
.search-btn.hd__search { width: 64px; padding: 0; gap: 0; } /* nur die Lupe (06.11.2026) */
@media (max-width: 1100px) { .search-btn.hd__search { height: 56px; width: 56px; min-width: 56px; } .hd__row > .hd__in { height: 56px; } }
.hd.is-menu .hd__search { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Mega-Menü: unsichtbare Brücke über den 8-px-Spalt, damit Hover nicht abreißt */
@media (min-width: 1101px) { .hd .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } }

/* „bald“ an der Academy: gefüllte gelbe Pille */
.badge { background: var(--yellow); color: var(--yellow-ink); border: 0; border-radius: 999px; padding: 2px 8px; font-weight: 600; letter-spacing: .01em; line-height: 1.35; vertical-align: 1px; }

/* Seitenwechsel: Header nicht überblenden (Glas-Snapshot flackerte), sondern ruhig stehen lassen */
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }

/* ---------- Navigation: Unterstrich neu (06.11.2026) ----------
   Vorher teilten sich Pfeil und Unterstrich dasselbe ::after (Linie nur 6 px bei Leistungen/Lösungen)
   und der Abstand war fest 12 px, obwohl das Padding je nach Breite schwankt. Jetzt sitzt die Linie
   am Text (.nav__t), wächst von links ein und läuft nach rechts aus. Aktive Seite: Linie steht. */
.nav__item > a[aria-current="page"], .nav__item > button.is-current { text-decoration: none; }
.nav__t { position: relative; display: inline-block; }
@media (min-width: 1101px) {
  .nav__item > button::after { content: none; }
  .nav__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform 380ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
  .nav__item > a:hover .nav__t::after, .nav__item > button:hover .nav__t::after, .nav__item > button[aria-expanded="true"] .nav__t::after,
  .nav__item > a:focus-visible .nav__t::after, .nav__item > button:focus-visible .nav__t::after { transform: scaleX(1); transform-origin: 0 50%; }
  .nav__item > a[aria-current="page"] .nav__t::after, .nav__item > button.is-current .nav__t::after { transform: scaleX(1); background: var(--tc, var(--red)); }
}
@media (prefers-reduced-motion: reduce) { .nav__t::after { transition: none; } }

/* ---------- Ankündigungsleiste .ann (06.11.2026, Variante „Smart“) ----------
   Oben unsichtbar. Erst tief in der Seite (html.is-deep, ab 640 px) und nur, wenn der Header beim
   Hochscrollen zurückkommt (nicht .is-down), erscheint die dunkle Pille unter der Kapsel. Handy: ein Satz zur Zeit. */
.ann { position: absolute; left: 0; right: 0; top: calc(100% + 10px); pointer-events: none; font-size: var(--fs-s); }
.ann__in { width: max-content; max-width: calc(100% - 2 * var(--edge)); margin-inline: auto; padding: 9px 22px;
  background: #251a1b; color: #f7efe9; border-radius: 999px; box-shadow: 0 18px 40px -20px rgba(37, 26, 27, .6);
  opacity: 0; transform: translateY(-12px); transition: opacity 240ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1); }
html.is-deep:not(.is-down) .ann__in { opacity: 1; transform: none; }
.hd.is-menu .ann { display: none; }
.ann__list { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ann__list li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ann__ico { flex: none; color: #d7c2ce; }
@keyframes annRot { 0% { opacity: 0; transform: translateY(6px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) {
  .ann { font-size: .8125rem; }
  .ann__in { padding: 8px 18px; }
  .ann__list { display: grid; justify-items: center; gap: 0; }
  .ann__list li { grid-area: 1 / 1; }
  .ann__list li + li { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .ann__list li, .ann__list li + li { visibility: visible; opacity: 0; animation: annRot 12s ease infinite; }
    .ann__list li:nth-child(2) { animation-delay: 4s; }
    .ann__list li:nth-child(3) { animation-delay: 8s; }
  }
}
@media print { .ann { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ann__in { transition: none; } }

/* Leistungsseiten „Worum es geht“: Satz groß mit Scroll-Einfärbung, wie „Über ONSET“ auf der Startseite (06.11.2026) */
.svc-intro__answer.svc-intro__ink { max-width: 30ch; font-size: clamp(1.7rem, 1rem + 2.4vw, 3.3rem); line-height: 1.14; letter-spacing: -.035em; font-weight: 500; hyphens: none; text-wrap: initial; }
.svc-intro__ink + .svc-combo { margin-top: clamp(24px, 3vw, 40px); }

/* Leistungsseiten nach geprüftem Audit (06.11.2026): nur der erste Satz groß mit Ink, der Rest als ruhiger Absatz */
.svc-intro__more { margin: clamp(20px, 2.4vw, 32px) 0 0; max-width: 54ch; font-size: var(--t-lead, 1.2rem); line-height: 1.55; color: var(--g4); text-wrap: pretty; }

/* =====================================================================
   Leistungs-Heros (06.11.2026): gemeinsame Tokens .hz*, je Seite eigene Komposition (.hz-shop … .hz-str)
   ===================================================================== */
  /* ---------- Gemeinsame Tokens ---------- */
  .hz { --hz-r: clamp(18px, 2.2vw, 32px); position: relative; padding: 8px 0 clamp(48px, 6vw, 96px); color: var(--ink); }
  .hz__bc { padding-top: 12px; margin-bottom: clamp(28px, 4vw, 56px); }
  .hz__k { display: block; margin: 0 0 16px; font-size: var(--fs-s); font-weight: 600; letter-spacing: .01em; color: var(--red); }
  .hz__h { margin: 0; font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5.4rem); line-height: .98; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; hyphens: none; overflow-wrap: break-word; }
  .hz__h em { font-style: normal; font-family: inherit; color: var(--red); letter-spacing: inherit; }
  .hz__lead { margin: 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.45; color: var(--g4); text-wrap: pretty; }
  .hz__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
  .hz__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 200ms ease; }
  .hz__link:hover { text-decoration-color: currentColor; }
  .hz a:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 6px; }
  .hz__cap { margin-top: 14px; font-size: var(--fs-xs); color: var(--g3); }
  .hz img { display: block; max-width: 100%; height: auto; }
  .btn--light { --bg: #f7efe9; --fg: var(--ink); }
  .btn--light:hover { --bg: var(--yellow); --fg: var(--ink); }
  .hz-miss { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(135deg, #fff7d6 0 12px, #fdf0b8 12px 24px); border: 2px dashed #d6ac16; color: #6b5300; font-size: var(--fs-xs); }
  .hz-miss b { display: block; font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }

  /* 1 · Shopify */
  .hz-shop__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: end; }
  .hz-shop .hz__h { max-width: 14ch; }
  .hz-shop__stage { position: relative; display: block; margin-top: clamp(40px, 5vw, 72px); border-radius: var(--hz-r); overflow: hidden; background: var(--ink); color: #f7efe9; text-decoration: none; }
  .hz-shop__stage img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 55%; }
  .hz-shop__facts { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.2fr 1.6fr .5fr; gap: 24px; padding: 64px clamp(20px, 3vw, 40px) 22px; background: linear-gradient(180deg, transparent, rgba(20, 12, 13, .9) 55%); font-size: var(--fs-s); }
  .hz-shop__facts small { display: block; font-size: var(--fs-xs); color: #b9aea9; margin-bottom: 4px; }

  /* 2 · E-Commerce */
  .hz-ecom { background: #f7efe9; }
  .hz-ecom__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
  .hz-ecom .hz__h { max-width: 12ch; }
  .hz-ecom .hz__lead { margin-top: 24px; }
  .hz-ecom__vis { position: relative; margin: 0; padding: 0 0 clamp(80px, 9vw, 140px); }
  .hz-ecom__main img, .hz-ecom__prod img { width: 100%; object-fit: cover; }
  .hz-ecom__main { border-radius: var(--hz-r); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(37, 26, 27, .55); }
  .hz-ecom__main img { aspect-ratio: 16 / 11; object-position: 0 0; }
  .hz-ecom__prod { position: absolute; right: -2%; bottom: 0; width: 56%; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(37, 26, 27, .5); background: #fff; }
  .hz-ecom__prod img { aspect-ratio: 16 / 9; object-position: 0 72%; }
  .hz-ecom__cap { position: absolute; left: 0; bottom: 6px; max-width: 38%; font-size: var(--fs-xs); color: var(--g4); line-height: 1.45; }
  .hz-ecom__cap b { display: block; color: var(--ink); font-size: var(--fs-s); }

  /* 3 · Branding */
  .hz-brand { background: #251a1b; color: #f7efe9; overflow: hidden; }
  .hz-brand .bc a, .hz-brand .bc li::after, .hz-brand .bc span { color: #b9aea9; }
  .hz-brand .hz__k { color: #e7b9be; }
  .hz-brand .hz__lead { color: #d9cec8; }
  .hz-brand .hz__link { color: #f7efe9; }
  .hz-brand__top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: end; }
  .hz-brand .hz__h { max-width: 15ch; }
  .hz-brand__grid { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(10px, 1.2vw, 18px); }
  .hz-brand__grid li { position: relative; border-radius: 14px; overflow: hidden; background: #3a2a2b; }
  .hz-brand__grid img { width: 100%; height: 100%; object-fit: cover; }
  .hz-brand__grid .g1 { grid-row: span 2; aspect-ratio: 3 / 2.1; }
  .hz-brand__grid .g2, .hz-brand__grid .g3 { aspect-ratio: 4 / 3; }
  .hz-brand__grid .g4 { grid-column: span 2; aspect-ratio: 2.4 / 1; }
  .hz-brand__grid span { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(20, 12, 13, .72); font-size: var(--fs-xs); color: #f7efe9; }

  /* 4 · Webdesign */
  .hz-web__top { display: grid; justify-items: center; text-align: center; }
  .hz-web .hz__h { max-width: 16ch; }
  .hz-web .hz__lead { margin-top: 24px; }
  .hz-web .hz__act { justify-content: center; }
  .hz-web__devices { position: relative; margin: clamp(48px, 6vw, 88px) auto 0; max-width: 1120px; padding-right: clamp(40px, 8vw, 120px); }
  .hz-web__desk { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 50px 90px -60px rgba(37, 26, 27, .55); }
  .hz-web__bar { display: flex; gap: 6px; padding: 12px 14px; background: #f3f1f0; border-bottom: 1px solid var(--card-line); }
  .hz-web__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--g2); }
  .hz-web__desk img { width: 100%; }
  .hz-web__phone { position: absolute; right: 0; bottom: -28px; width: clamp(120px, 20%, 230px); aspect-ratio: 390 / 844; border-radius: 28px; border-width: 3px; padding: 12px; }
  .hz-web .hz__cap { text-align: center; margin-top: 44px; }

  /* 5 · SEO */
  .hz-seo__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
  .hz-seo .hz__h { max-width: 10ch; }
  .hz-seo .hz__lead { margin-top: 24px; }
  .hz-seo__vis { position: relative; margin: 0; padding-bottom: 56px; }
  .hz-seo__shot { width: 100%; border-radius: var(--hz-r); aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
  .hz-seo__serp { position: absolute; left: -8%; bottom: 0; width: min(420px, 78%); display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--card-line); box-shadow: 0 30px 60px -30px rgba(37, 26, 27, .45); font-size: var(--fs-s); }
  .hz-seo__q { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--g2); border-radius: 999px; color: var(--g4); }
  .hz-seo__q i { width: 12px; height: 12px; border: 2px solid var(--g3); border-radius: 50%; flex: none; }
  .hz-seo__res { display: grid; gap: 2px; padding: 4px 2px 0; }
  .hz-seo__res small { color: var(--g3); font-size: var(--fs-xs); }
  .hz-seo__res b { color: #1a3a8f; font-weight: 500; font-size: 1.05rem; }
  .hz-seo__res span { color: var(--g4); }
  .hz-seo .hz__cap { position: absolute; right: 0; bottom: 0; max-width: 44%; text-align: right; }

  /* 6 · Google Ads */
  .hz-ads__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
  .hz-ads .hz__h { max-width: 12ch; }
  .hz-ads .hz__lead { margin-top: 24px; }
  .hz-ads__vis { margin: 0; }
  .hz-ads__card { padding: clamp(18px, 2vw, 28px); border-radius: var(--hz-r); background: #fff; border: 1px solid var(--card-line); box-shadow: 0 40px 80px -60px rgba(37, 26, 27, .5); }
  .hz-ads__q { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--g2); border-radius: 999px; font-size: 1rem; }
  .hz-ads__q i { width: 13px; height: 13px; border: 2px solid var(--g3); border-radius: 50%; flex: none; }
  .hz-ads__res { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 16px; margin-top: 18px; }
  .hz-ads__shop { border: 1px solid var(--card-line); border-radius: 14px; overflow: hidden; font-size: var(--fs-s); }
  .hz-ads__shop img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3f1f0; }
  .hz-ads__shop > span, .hz-ads__text { display: grid; gap: 4px; padding: 12px 14px; }
  .hz-ads small { font-size: var(--fs-xs); color: var(--g3); }
  .hz-ads__text { align-content: start; border: 1px solid var(--card-line); border-radius: 14px; font-size: var(--fs-s); }
  .hz-ads__text b { color: #1a3a8f; font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
  .hz-ads__text span { color: var(--g4); line-height: 1.5; }
  .hz-ads__path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: s; }
  .hz-ads__path li { counter-increment: s; display: grid; gap: 2px; padding: 12px 12px 0 0; font-size: var(--fs-s); }
  .hz-ads__path li::before { content: "0" counter(s); font-size: var(--fs-xs); color: var(--g3); }
  .hz-ads__path span { color: var(--g4); font-size: var(--fs-xs); line-height: 1.4; }
  .hz-ads__path .is-key b { color: var(--red); }

  /* 7 · CRM */
  .hz-crm__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: end; }
  .hz-crm .hz__h { max-width: 13ch; }
  .hz-crm__board { margin: clamp(40px, 5vw, 72px) 0 0; padding: clamp(14px, 1.6vw, 22px); border-radius: var(--hz-r); background: #f3f1f0; }
  .hz-crm__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
  .hz-crm__col { display: grid; align-content: start; gap: 10px; min-height: 220px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .6); }
  .hz-crm__col h3 { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: var(--fs-s); font-weight: 600; }
  .hz-crm__col h3 span { color: var(--g3); font-weight: 500; }
  .deal { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--card-line); font-size: var(--fs-s); }
  .deal span { color: var(--g4); font-size: var(--fs-xs); line-height: 1.4; }
  .deal em { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: var(--fs-xs); color: var(--g3); }
  .deal.is-active { border-color: var(--ink); box-shadow: 0 18px 30px -22px rgba(37, 26, 27, .6); }
  .deal.is-won { border-left: 4px solid var(--red); }
  .task { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-style: normal; font-size: var(--fs-xs); font-weight: 600; justify-self: start; }
  .task.is-wait { background: #f3f1f0; color: var(--g4); font-weight: 500; }

  /* 8 · KI */
  .hz-ki { background: #251a1b; color: #f7efe9; }
  .hz-ki .bc a, .hz-ki .bc li::after, .hz-ki .bc span { color: #b9aea9; }
  .hz-ki .hz__k { color: #e7b9be; }
  .hz-ki .hz__lead { color: #d9cec8; margin-top: 24px; }
  .hz-ki .hz__link { color: #f7efe9; }
  .hz-ki .hz__h { max-width: 17ch; }
  .hz-ki__flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid rgba(247, 239, 233, .22); }
  .hz-ki__flow li { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 18px 0 0; }
  .hz-ki__flow li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #b9aea9; }
  .hz-ki__flow .n { font-size: var(--fs-xs); color: #b9aea9; font-variant-numeric: tabular-nums; }
  .hz-ki__flow b { font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; }
  .hz-ki__flow span:not(.n) { color: #d9cec8; font-size: var(--fs-s); line-height: 1.45; }
  .hz-ki__flow em { justify-self: start; margin-top: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(247, 239, 233, .3); font-style: normal; font-size: var(--fs-xs); color: #d9cec8; }
  .hz-ki__flow .is-human::before { background: var(--yellow); width: 13px; height: 13px; top: -7px; }
  .hz-ki__flow .is-human em { background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 600; }

  /* 9 · Strategie */
  .hz-str__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
  .hz-str .hz__h { max-width: 9ch; font-size: clamp(2.8rem, 1.2rem + 5.6vw, 6.6rem); }
  .hz-str .hz__lead { margin-top: 28px; }
  .hz-str__vis { position: relative; margin: 0; }
  .hz-str__vis img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--hz-r); }
  .hz-str__vis figcaption { margin-top: 14px; font-size: var(--fs-s); color: var(--g4); }
  .hz-str__vis figcaption b { display: block; color: var(--ink); }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .hz-shop__top, .hz-brand__top, .hz-crm__top { grid-template-columns: 1fr; align-items: start; }
    .hz-ads__in, .hz-seo__in, .hz-ecom__in { grid-template-columns: 1fr; }
    .hz-seo__serp { left: 4%; }
    .hz-crm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hz-ki__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  }
  @media (max-width: 860px) {
    .hz-str__in { grid-template-columns: 1fr; }
    .hz-str__vis { max-width: 420px; }
  }
  /* ---------- Handy ---------- */
  @media (max-width: 760px) {
    .hz__h { font-size: clamp(2.1rem, 1.2rem + 4.8vw, 2.9rem); line-height: 1.02; letter-spacing: -.04em; }
    .hz-str .hz__h { font-size: clamp(2.5rem, 1.4rem + 6vw, 3.4rem); }
    .hz__lead { font-size: 1.08rem; }
    .hz__act { gap: 16px; }
    .hz__act .btn { width: 100%; justify-content: center; }
    .hz-shop__stage img { aspect-ratio: 4 / 3.4; object-position: 46% 50%; }
    .hz-shop__facts { position: static; grid-template-columns: 1fr; gap: 10px; padding: 18px 18px 20px; background: var(--ink); }
    .hz-ecom__vis { padding-bottom: 0; }
    .hz-ecom__prod { position: relative; right: auto; width: 82%; margin: -18% 0 0 auto; }
    .hz-ecom__cap { position: static; max-width: none; margin-top: 14px; }
    .hz-brand__grid { grid-template-columns: 1fr 1fr; }
    .hz-brand__grid .g1 { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
    .hz-brand__grid .g4 { grid-column: span 2; aspect-ratio: 3 / 2; }
    .hz-web__top { justify-items: start; text-align: left; }
    .hz-web .hz__act { justify-content: flex-start; }
    .hz-web__devices { padding-right: 0; padding-bottom: 0; }
    .hz-web__phone { position: relative; right: auto; bottom: auto; width: 46%; margin: -30% 4% 0 auto; }
    .hz-web .hz__cap { text-align: left; margin-top: 16px; }
    .hz-seo__vis { padding-bottom: 0; }
    .hz-seo__serp { position: relative; left: auto; width: auto; margin: -14% 12px 0; }
    .hz-seo .hz__cap { position: static; max-width: none; text-align: left; }
    .hz-ads__res { grid-template-columns: 1fr; }
    .hz-ads__shop { display: grid; grid-template-columns: 96px 1fr; align-items: center; }
    .hz-ads__path { grid-template-columns: 1fr 1fr; row-gap: 14px; }
    .hz-crm__cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -4px; }
    .hz-crm__col { flex: 0 0 78%; scroll-snap-align: start; min-height: 0; }
    .hz-ki__flow { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid rgba(247, 239, 233, .22); margin-left: 6px; row-gap: 0; }
    .hz-ki__flow li { padding: 0 0 26px 24px; }
    .hz-ki__flow li::before { top: 4px; left: -5px; }
    .hz-ki__flow .is-human::before { left: -7px; top: 3px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hz__h, .hz__lead, .hz__act { animation: hzUp 700ms var(--ease-out) both; }
    .hz__lead { animation-delay: 80ms; } .hz__act { animation-delay: 160ms; }
    @keyframes hzUp { from { opacity: 0; translate: 0 14px; } }
  }

/* ---------- Startseite: Preise als vier Karten (06.11.2026, gleiche Bildsprache wie „Marke. Shop. System.“) ---------- */
.pc4__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px clamp(24px, 3vw, 48px); align-items: start; margin-bottom: clamp(36px, 4.5vw, 64px); }
.pc4__k { margin: 8px 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.pc4__h { margin: 0; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 400; text-wrap: balance; }
.pc4__intro { margin: 0; align-self: end; color: var(--g4); line-height: 1.55; max-width: 44ch; }
.pc4__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pc4__card { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.pc4__vis { --glow: rgba(145, 30, 40, .2); position: relative; display: grid; align-content: space-between; aspect-ratio: 4 / 4.4; padding: clamp(20px, 2vw, 28px); overflow: hidden; color: var(--ink); border-radius: 4px; background: #fff; border: 1px solid #e7e2df; }
.pc4__cards > li:nth-child(2) .pc4__vis { --glow: rgba(245, 207, 63, .4); }
.pc4__cards > li:nth-child(3) .pc4__vis { --glow: rgba(176, 150, 222, .36); }
.pc4__cards > li:nth-child(4) .pc4__vis { --glow: rgba(145, 30, 40, .16); }
.pc4__vis::after { content: ""; position: absolute; inset: 20% 0 -20% 20%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(24px); }
/* Akzent: erste Karte weinrot */
.pc4__cards > li:first-child .pc4__vis { color: #f7efe9; border-color: transparent;
  background: radial-gradient(120% 90% at 30% 15%, rgba(145, 30, 40, .9), transparent 60%), radial-gradient(90% 80% at 90% 95%, rgba(116, 20, 30, .75), transparent 65%), linear-gradient(160deg, #4a1820, #251a1b 75%); }
.pc4__cards > li:first-child .pc4__vis::after { inset: 0; border-radius: 0; filter: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); }
.pc4__price { position: relative; z-index: 1; display: grid; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: translate 400ms var(--spring); }
.pc4__price small { font-size: var(--fs-s); letter-spacing: 0; color: var(--g4); margin-bottom: 8px; }
.pc4__cards > li:first-child .pc4__price small { color: #d9cec8; }
.pc4__price .pc4__per { margin: 8px 0 0; }
.pc4__chips { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc4__chips li { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #e7e2df; font-size: .78rem; }
.pc4__cards > li:first-child .pc4__chips li { background: rgba(247, 239, 233, .12); border-color: rgba(247, 239, 233, .2); }
.pc4__t { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 500; font-size: 1.05rem; }
.pc4__t .ico { color: var(--red); opacity: 0; translate: -4px 0; transition: opacity 200ms ease, translate 200ms ease; }
.pc4__d { color: var(--g4); font-size: var(--fs-s); line-height: 1.5; max-width: 36ch; }
.pc4__card:hover .pc4__price { translate: 0 -4px; }
.pc4__card:hover .pc4__t .ico, .pc4__card:focus-visible .pc4__t .ico { opacity: 1; translate: 0 0; }
.pc4__card:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 4px; }
.pc4__note { margin: clamp(24px, 3vw, 40px) 0 0; font-size: var(--fs-s); color: var(--g3); }
@media (max-width: 1100px) {
  .pc4__head { grid-template-columns: 1fr; }
  .pc4__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .pc4__vis { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .pc4__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; }
  .pc4__cards > li { flex: 0 0 80%; scroll-snap-align: start; }
  .pc4__vis { aspect-ratio: 1 / 1; }
  .pc4__t .ico { opacity: 1; translate: 0 0; }
}

/* =====================================================================
   Header (06.11.2026): durchgehende HELLE Leiste wie die Framer-Referenz, bewusst kein Dark Mode.
   Logo links, Navigation mittig, rechts Suche · Kontakt · Erstgespräch (dunkle Pille, Hover weinrot).
   Mega-Menü in voller Breite weiß, Übersicht als hellgraue Karte. Klassen: .hd--v2.hd--bar
   ===================================================================== */
.hd.hd--bar { padding-top: 0; background: none; border: 0; --hb-line: #ebe6e4; --hb-mut: var(--g4); }
.hd--bar .hd__bar { position: relative; color: var(--ink); border-bottom: 1px solid var(--hb-line);
  background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  transition: background-color 300ms ease, box-shadow 300ms ease; }
html.is-scrolled .hd--bar .hd__bar { background: rgba(255, 255, 255, .94); box-shadow: 0 14px 34px -26px rgba(37, 26, 27, .35); }
.hd--bar .hd__inner { display: flex; align-items: center; gap: 24px; height: var(--head-h); }
.hd--bar .logo { flex: none; }
@media (min-width: 1101px) {
  .hd.hd--bar .nav { flex: 1 1 auto; margin: 0; display: flex; align-items: center; gap: 2px; }
  .hd.hd--bar .nav > .nav__item:first-child { margin-left: auto; }
  .hd--bar .nav__end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
}
.hd.hd--bar .nav__item > a, .hd.hd--bar .nav__item > button, .hd.hd--bar .menu-btn { color: var(--ink); }
.hd.hd--bar .nav__t::after { background: var(--red); }
html .hd.hd--v2.hd--bar .search-btn { flex: none; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 999px;
  background: none; box-shadow: none; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd.hd--bar .search-btn span, .hd.hd--bar .search-btn kbd { display: none; }
@media (hover: hover) and (pointer: fine) { html .hd.hd--v2.hd--bar .search-btn:hover { background: #f3f1f0; color: var(--red); } }
.hd.hd--bar .hd__cta { min-height: 42px; margin-left: 8px; padding: 0 20px; }
.hd.hd--bar .btn--cream { --bg: var(--ink); --fg: #fff; background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.hd.hd--bar .btn--cream:hover { --bg: var(--red); background: var(--red); border-color: var(--red); }
.hd.hd--bar .hd__search--m { display: none; }

/* Mega-Menü */
@media (min-width: 1101px) {
  .hd.hd--bar .mega { top: 100%; background: #fff; color: var(--ink); border: 0; border-bottom: 1px solid var(--hb-line); border-radius: 0; box-shadow: 0 40px 70px -40px rgba(37, 26, 27, .35); }
  .hd.hd--bar .mega::before { height: 0; }
  .hd.hd--bar .mega__aside { border: 0; padding: clamp(22px, 2vw, 30px); border-radius: 6px; align-self: start; background: #f3f1f0; }
}
.hd.hd--bar .mega h3 { color: var(--g4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hd.hd--bar .mega__wn { display: block; padding: 0; background: none; color: var(--red); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; }
.hd.hd--bar .mega__wn::before { content: "[ "; } .hd.hd--bar .mega__wn::after { content: " ]"; }
.hd.hd--bar .mega li a { color: var(--ink); }
.hd.hd--bar .mega li a small { color: var(--g4); }
.hd.hd--bar .mega li a:hover { border-bottom-color: var(--red); }
.hd.hd--bar .mega__aside .btn { --bg: var(--ink); --fg: #fff; background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.hd.hd--bar .mega__aside .btn:hover { --bg: var(--red); background: var(--red); border-color: var(--red); }

@media (width > 1100px) and (width < 1300px) {
  .hd--bar .hd__inner { gap: 12px; }
  .hd.hd--bar .nav__item > a, .hd.hd--bar .nav__item > button { padding: 0 7px; }
  .hd.hd--bar .hd__cta { padding: 0 16px; margin-left: 4px; }
}
/* Handy-Menü: Vollfläche weiß */
@media (max-width: 1100px) {
  .hd--bar .nav__end { display: block; margin: 0; }
  .hd.hd--bar .hd__find { display: none; }
  .hd.hd--bar .hd__search--m { display: inline-flex; }
  .hd.hd--bar .menu-btn { margin-left: auto; }
  .hd.hd--bar.is-menu .hd__bar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hd.hd--bar.is-menu .nav { top: var(--head-h); background: #fff; color: var(--ink); border-top: 1px solid var(--hb-line); }
  .hd.hd--bar.is-menu .nav__item { border-bottom-color: var(--hb-line); }
  .hd.hd--bar .mega h3 { color: var(--red); }
}

/* =====================================================================
   Leistungsseiten in der neuen CI (06.11.2026, body.svc-ci)
   Labels [ … ] an den H2 (aus data-chap), „Was sich ändert“ als dunkle Bühne mit weinroten Karten,
   „Das passt dazu“ als weinrote Kacheln, „Nächster Schritt“ hellgrau direkt vor dem Footer (auf allen Seiten mit #start.go).
   ===================================================================== */
.svc-ci, .case-ci, body:has(#start.go) { --ci-fg: #f7efe9; --ci-mut: #b9aea9; --ci-acc: #e7b9be; --ci-line: rgba(247, 239, 233, .12);
  --ci-tex: repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px);
  --ci-card: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), radial-gradient(120% 90% at 30% 20%, rgba(145, 30, 40, .85), transparent 60%), radial-gradient(90% 80% at 85% 90%, rgba(116, 20, 30, .7), transparent 65%), linear-gradient(160deg, #4a1820, #2a1b1d 70%); }
.svc-ci h2[data-k]::before, .svc-ci .sec h2[data-k]:not(.cta__h)::before, body:has(#start.go) .sec.go h2[data-k]::before { content: "[ " attr(data-k) " ]"; display: block; position: static; inset: auto; width: auto; height: auto; background: none; border: 0;
  margin: 0 0 18px; font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); opacity: 1; transform: none; animation: none; }
.svc-ci .svc-problem .kicker { display: none; }

/* Was sich ändert: dunkle Bühne */
.svc-ci .svc-problem { background: var(--ci-tex), radial-gradient(60% 70% at 0% 0%, rgba(145, 30, 40, .45), transparent 65%), #1f1516; color: var(--ci-fg); border: 0; border-radius: 0; margin-inline: 0; }
.svc-ci .svc-problem::before, .svc-ci .svc-problem::after { display: none; }
.svc-ci .svc-problem h2 { color: #fff; font-weight: 400; letter-spacing: -.045em; }
.svc-ci .svc-problem__list { counter-reset: pr; gap: 8px; border: 0; }
.svc-ci .svc-problem__list > li { counter-increment: pr; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: clamp(200px, 20vw, 280px);
  padding: clamp(22px, 2vw, 30px); border: 0; border-radius: 4px; background: var(--ci-card); color: var(--ci-fg); overflow: hidden; }
.svc-ci .svc-problem__list > li::before { content: "[ 0" counter(pr) " ]"; position: absolute; top: clamp(22px, 2vw, 30px); left: clamp(22px, 2vw, 30px); width: auto; height: auto; background: none;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ci-acc); }
.svc-ci .svc-problem__list h3 { margin: 0; color: #fff; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.svc-ci .svc-problem__list p { margin: 0; color: #e3d6d1; }

/* Das passt dazu: weinrote Kacheln */
.svc-ci .rel { gap: 8px; border: 0; }
.svc-ci .rel > a, .svc-ci .rel > a + a { min-height: 170px; justify-content: flex-end; padding: 24px; border: 0; border-radius: 4px; background: var(--ci-card); color: var(--ci-fg); box-shadow: none; }
.svc-ci .rel > a .mono { color: var(--ci-acc); margin-bottom: auto; }
.svc-ci .rel > a b { color: #fff; font-weight: 500; }
.svc-ci .rel > a > span:not(.mono) { color: #e3d6d1; }
@media (hover: hover) and (pointer: fine) { .svc-ci .rel > a:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(31, 10, 14, .7); } }

/* Nächster Schritt: dunkel, geht nahtlos in den Footer über; der Footer-Aufruf entfällt hier (sonst doppelt) */
/* Nächster Schritt: hellgraue Fläche über die volle Breite, direkt vor dem dunklen Footer (User 06.11.: nicht alles dunkel) */
body:has(#start.go) .go { margin-bottom: 0; padding-block: clamp(72px, 9vw, 140px); background: #f3f1f0; }
body:has(#start.go) .go__panel, body:has(#start.go) #start .go__panel { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
body:has(#start.go) .go__panel::before, body:has(#start.go) .go__panel::after, body:has(#start.go) #start .go__panel::before, body:has(#start.go) #start .go__panel::after { display: none; }
body:has(#start.go) .go__h { color: var(--ink); font-weight: 400; letter-spacing: -.045em; font-size: var(--fs-h2); line-height: 1.04; max-width: 16ch; hyphens: auto; }
.svc-ci .sec.svc-problem h2[data-k]:not(.cta__h)::before { color: var(--ci-acc); }
body:has(#start.go) footer.fx { margin-top: 0; }
body:has(#start.go) .fx .fx__cta { display: none; }
@media (max-width: 900px) { .svc-ci .svc-problem__list > li { min-height: 180px; } }
body:has(#start.go) #start .chap { display: none; } /* Label [ Nächster Schritt ] ersetzt die Kapitelnummer */

/* =====================================================================
   Referenzen + Fallstudien in der neuen CI (06.11.2026, body.case-ci)
   Hell mit Rhythmus: Labels [ … ], helle Karten, „Das Ergebnis“ als EINE dunkle Akzentbühne. Kein Dark-Mode-Eindruck.
   ===================================================================== */
.case-ci .phero__h::before { display: none; }
.case-ci .kicker, .case-ci .chap { display: block; margin: 0 0 18px; font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.case-ci .kicker::before, .case-ci .chap::before { content: "[ "; }
.case-ci .kicker::after, .case-ci .chap::after { content: " ]"; position: static; flex: none; width: auto; height: auto; background: none; opacity: 1; transform: none; }
.case-ci .chap span { display: none; }
.case-ci h2[data-k]:not(.go__h)::before { content: "[ " attr(data-k) " ]"; display: block; margin: 0 0 18px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.case-ci .ed-h2 { font-weight: 400; letter-spacing: -.04em; }
.case-ci .phero .h1 { font-weight: 400; letter-spacing: -.045em; }

/* Geschichte: helle Karten mit [ 01 ] */
.case-ci .case-chapters { gap: 8px; }
.case-ci .case-chapters li { display: flex; flex-direction: column; gap: 10px; min-height: clamp(220px, 20vw, 280px); padding: clamp(22px, 2vw, 30px); border: 1px solid #e7e2df; border-radius: 6px; background: #fff; }
.case-ci .case-chapters span { margin-bottom: auto; font-size: .75rem; letter-spacing: .1em; color: var(--red); }
.case-ci .case-chapters span::before { content: "[ "; } .case-ci .case-chapters span::after { content: " ]"; }
.case-ci .case-chapters h3 { margin: 18px 0 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 400; letter-spacing: -.03em; }
.case-ci .case-chapters li:last-child { border: 0; background: var(--ci-card); color: var(--ci-fg); }
.case-ci .case-chapters li:last-child span { color: var(--ci-acc); }
.case-ci .case-chapters li:last-child h3 { color: #fff; }
.case-ci .case-chapters li:last-child p { color: #e3d6d1; }

/* Das Ergebnis: dunkle Bühne, volle Breite */
.case-ci .case-result { margin-inline: 0; border: 0; border-radius: 0; color: var(--ci-fg);
  background: var(--ci-tex), radial-gradient(60% 70% at 0% 0%, rgba(145, 30, 40, .45), transparent 65%), #1f1516; }
.case-ci .case-result .chap, .case-ci .case-result .kicker { color: var(--ci-acc); }
.case-ci .case-result .ed-h2 { color: #fff; }
.case-ci .case-result .lead { color: #e3d6d1; }
.case-ci .case-result .case-tags { color: var(--ci-mut); border-top: 1px solid var(--ci-line); padding-top: 24px; }
.case-ci .case-result .case-tags b, .case-ci .case-result .case-svcs b { color: #fff; }
.case-ci .case-result .case-svcs a { color: #fff; border-color: rgba(247, 239, 233, .3); background: rgba(255, 255, 255, .04); }
@media (hover: hover) and (pointer: fine) { .case-ci .case-result .case-svcs a:hover { background: #fff; color: var(--ink); border-color: #fff; } }
.case-ci .case-result + .sec { margin-top: 0; }

/* Nächstes Projekt: helle Karte mit Rand */
.case-ci .case-next__a { background: #fff; border: 1px solid #e7e2df; border-radius: 6px; }
.case-ci .case-next__a b { font-weight: 400; letter-spacing: -.035em; }

/* Übersicht */
.case-ci .soon li { border-radius: 6px; border-style: solid; border-color: #e7e2df; background: #fff; }
.case-ci .ref-filter button { border-color: #e7e2df; }

/* =====================================================================
   Lösungsseiten in der neuen CI (06.11.2026, body.case-ci.lo-ci)
   Basis wie Referenzen (Labels [ … ]). „Die Ausgangslage“ als dunkle Bühne mit weinroten Karten (wie „Was sich ändert“
   auf den Leistungsseiten), Rest hell: Beispiel hellgrau volle Breite, Leistungen + Ablauf als helle Karten.
   ===================================================================== */
.lo-ci em { color: var(--red); font-style: normal; }
.lo-ci .h2 { font-weight: 400; letter-spacing: -.04em; }
.lo-ci .h2::before { display: none; }
/* Ausgangslage */
.lo-ci #ausgangslage { color: var(--ci-fg); background: var(--ci-tex), radial-gradient(60% 70% at 0% 0%, rgba(145, 30, 40, .45), transparent 65%), #1f1516; }
.lo-ci #ausgangslage .chap { color: var(--ci-acc); }
.lo-ci #ausgangslage .h2 { color: #fff; }
.lo-ci #ausgangslage em { color: var(--ci-acc); }
.lo-ci #ausgangslage .lead { color: #e3d6d1; }
.lo-ci #ausgangslage .sits { counter-reset: si; gap: 8px; }
.lo-ci #ausgangslage .sits li { counter-increment: si; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: clamp(190px, 17vw, 240px); padding: clamp(22px, 2vw, 30px);
  border-radius: 4px; background: var(--ci-card); box-shadow: none; }
.lo-ci #ausgangslage .sits li::before { content: "[ 0" counter(si) " ]"; margin-bottom: auto; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ci-acc); }
.lo-ci #ausgangslage .sits b { margin: 0; color: #fff; font-weight: 400; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); letter-spacing: -.03em; line-height: 1.15; }
.lo-ci #ausgangslage .sits span { color: #e3d6d1; }
/* Lösung */
.lo-ci .lst li { border-color: #e7e2df; }
.lo-ci .loe-proof { border-radius: 6px; border: 1px solid #e7e2df; background: #fff; padding: clamp(20px, 2vw, 28px); }
/* Beispiel */
.lo-ci .sec.stage { margin-inline: 0; border-radius: 0; background: #f3f1f0; }
.lo-ci .sec.stage .xp { border-radius: 6px; }
/* Passende Leistungen */
.lo-ci .rel__h { font-weight: 400; letter-spacing: -.03em; }
.lo-ci .rel__h::before { content: "[ Leistungen ]"; display: block; margin-bottom: 14px; color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.lo-ci .rel > a { border-radius: 6px; border: 1px solid #e7e2df; background: #fff; box-shadow: none; }
.lo-ci .rel > a .mono { color: var(--red); }
@media (hover: hover) and (pointer: fine) { .lo-ci .rel > a:hover { border-color: var(--ink); transform: translateY(-3px); } }
/* Ablauf */
.lo-ci .steps4 li { border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e7e2df; }
.lo-ci .steps4__n { width: auto; height: auto; display: block; background: none; color: var(--red); font-size: .75rem; letter-spacing: .1em; }
.lo-ci .steps4__n::before { content: "[ 0"; } .lo-ci .steps4__n::after { content: " ]"; }
.lo-ci .steps4 h3 { font-weight: 400; letter-spacing: -.03em; }
/* Übersicht */
.lo-ci .ed-list__n { color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .1em; }
.lo-ci .ed-list__n::before { content: "[ "; } .lo-ci .ed-list__n::after { content: " ]"; }
.lo-ci .ed-list__t { font-weight: 400; letter-spacing: -.04em; }
/* alte Themenfarben (Mauve/Lila) auf Referenz- und Lösungsseiten zurück auf ONSET-Rot */
body.case-ci, body.svc-ci { --tc: var(--red); --tc-soft: #f3e6e8; --tc-on: #fff;
  --berry: #911e28; --shadz: #a5212c; --copper: #b498a8; --copper-text: #2c1f20;
  --sky: #f3ebec; --sky-soft: #faf6f6; --sky-line: #e7b9be; --sky-ink: #2c1f20; --sky-glow: rgba(231, 185, 190, .4);
  --soft-panel: #f3f1f0; --soft-line: #e7e2df; }
.lo-ci #ausgangslage .sits li, .lo-ci #ausgangslage .sits li:hover { border: 0; }

/* =====================================================================
   Über ONSET in der neuen CI (06.11.2026, body.case-ci.ab-ci)
   Basis wie Referenzen/Lösungen (Labels [ … ], Themenfarben Rot). Team als helle Karten,
   „Woran Sie uns messen können“ = einzige dunkle Bühne mit weinroten Karten.
   ===================================================================== */
.ab-ci .ed-hero__h { font-weight: 400; letter-spacing: -.045em; }
.ab-ci .ed-hero__h2 { color: var(--red); }
.ab-ci .ed-hero__img--photo, .ab-ci .ed-hero__img--photo img { border-radius: 6px; }
.ab-ci .ed-quote { border-block: 1px solid #e7e2df; }
/* Team */
.ab-ci .team__card, .ab-ci .team__card:nth-child(n) { border: 1px solid #e7e2df; border-radius: 6px; background: #fff; box-shadow: none; }
.ab-ci .team__photo { border-radius: 4px; }
.ab-ci .team__role { color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.ab-ci .team__name { font-weight: 400; letter-spacing: -.035em; }
@media (hover: hover) and (pointer: fine) { .ab-ci .team__card:hover { border-color: var(--ink); } }
/* Netzwerk */
.ab-ci .ed-facts div { border-color: #e7e2df; }
/* Versprechen = dunkle Bühne */
.ab-ci #versprechen { color: var(--ci-fg); background: var(--ci-tex), radial-gradient(60% 70% at 0% 0%, rgba(145, 30, 40, .45), transparent 65%), #1f1516; }
.ab-ci #versprechen .chap { color: var(--ci-acc); }
.ab-ci #versprechen .ed-h2 { color: #fff; }
.ab-ci #versprechen .ed-values { gap: 8px; border: 0; }
.ab-ci #versprechen .ed-values li, .ab-ci #versprechen .ed-values li:hover { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: clamp(190px, 17vw, 240px);
  padding: clamp(22px, 2vw, 30px); border: 0; border-radius: 4px; background: var(--ci-card); box-shadow: none; }
.ab-ci #versprechen .ed-values span { margin-bottom: auto; padding: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ci-acc); }
.ab-ci #versprechen .ed-values span::before { content: "[ "; } .ab-ci #versprechen .ed-values span::after { content: " ]"; }
.ab-ci #versprechen .ed-values h3 { margin: 0; color: #fff; font-weight: 400; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); letter-spacing: -.03em; line-height: 1.15; }
.ab-ci #versprechen .ed-values p { color: #e3d6d1; }
.ab-ci .ed-about { row-gap: 8px; } .ab-ci .ed-about > .chap { margin-bottom: 0; }
@media (max-width: 900px) { .ab-ci .ed-about { row-gap: clamp(32px, 5vw, 88px); } .ab-ci .ed-about > .chap { margin-bottom: calc(18px - clamp(32px, 5vw, 88px)); } }

/* =====================================================================
   Kontakt in der neuen CI (06.11.2026, body.case-ci.ko-ci)
   Hell, Formular im Fokus. Einzige dunkle Fläche neben dem Footer: Termin-Box als weinrote Akzentkarte.
   Footer-CTA („Anfrage senden“) entfällt hier, man ist ja schon auf der Anfrage.
   ===================================================================== */
.ko-ci .phero__h::before { content: "[ Kontakt ]"; display: block; position: static; width: auto; height: auto; margin: 0 0 18px; background: none; border-radius: 0;
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ko-ci .phero .h1 em { color: var(--red); font-style: normal; }
/* Formular */
.ko-ci .aflow__count { color: var(--g4); }
.ko-ci .aflow legend { font-weight: 400; letter-spacing: -.03em; }
.ko-ci .tile span { border-color: #e7e2df; border-radius: 6px; }
.ko-ci .tile span::before { border-radius: 3px; }
.ko-ci .tile input[type="radio"] + span::before { border-radius: 50%; }
.ko-ci .tile input:checked + span { border-color: var(--red); background: #fbf4f5; box-shadow: inset 0 0 0 1px var(--red); }
@media (hover: hover) { .ko-ci .tile:hover input:not(:checked) + span { border-color: var(--ink); background: #fff; } }
.ko-ci .fld input, .ko-ci .fld textarea { border-radius: 6px; }
/* Seitenleiste */
.ko-ci .form__aside .mono { display: block; margin: 0 0 14px; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ko-ci .form__aside .mono::before { content: "[ "; } .ko-ci .form__aside .mono::after { content: " ]"; }
.ko-ci .form__aside .callout:first-child { padding: 0; border: 0; background: none; }
.ko-ci .form__aside .lst li::before { content: "[ " counter(l, decimal-leading-zero) " ]"; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--red); }
.ko-ci .form__aside .lst li { grid-template-columns: 64px 1fr; border-top: 1px solid #e7e2df; }
.ko-ci #termin { padding: clamp(22px, 2vw, 30px); border: 0; border-radius: 6px; background: var(--ci-card); color: var(--ci-fg); }
.ko-ci #termin .mono { color: var(--ci-acc); }
.ko-ci #termin p { color: #e3d6d1; }
.ko-ci #termin .muted { color: var(--ci-mut); }
.ko-ci #termin .btn { background: #f7efe9; color: var(--ink); border-color: #f7efe9; }
@media (hover: hover) and (pointer: fine) { .ko-ci #termin .btn:hover { background: #fff; border-color: #fff; } }
/* Footer ohne eigenen CTA */
body.ko-ci .fx .fx__cta { display: none; }

/* =====================================================================
   Insights in der neuen CI (06.11.2026, body.case-ci.in-ci)
   Übersicht + Artikel hell, Lila → ONSET-Rot. Cover = weinrote Akzentkarte, Labels [ … ],
   Kästen (Faustregel, Projekt, Passende Leistung, Erscheint bald) als helle Karten mit feiner Linie.
   ===================================================================== */
.in-ci .phero__h::before { content: "[ Insights ]"; display: block; position: static; width: auto; height: auto; margin: 0 0 18px; background: none; border-radius: 0;
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.in-ci .phero .h1 em { color: var(--red); font-style: normal; }
.in-ci .mono { color: var(--red); }
/* Cover = Weinkarte */
.in-ci .cover { border: 0; border-radius: 6px; background: var(--ci-card); color: #fff; }
.in-ci .cover__k { font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ci-acc); }
.in-ci .cover__k::before { content: "[ "; } .in-ci .cover__k::after { content: " ]"; }
.in-ci .cover__w { font-weight: 400; }
.in-ci .ins__card h3 { font-weight: 400; letter-spacing: -.03em; }
/* Themen + Erscheint bald */
.in-ci .ins-topics span { color: var(--red); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.in-ci .ins-soon { border-color: #e7e2df; border-radius: 6px; background: #fff; box-shadow: none; }
.in-ci .ins-soon h3 { font-weight: 400; letter-spacing: -.03em; }
.in-ci .ins-soon li { border-color: #e7e2df; }
.in-ci .ins-soon li .mono { font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.in-ci .ins-soon li .mono::before { content: "[ "; } .in-ci .ins-soon li .mono::after { content: " ]"; }
/* Artikel */
.in-ci .art h2, .in-ci .art-layout h2 { font-weight: 400; letter-spacing: -.035em; }
.in-ci .callout { border: 1px solid #e7e2df; border-radius: 6px; background: #fff; }
.in-ci .callout > .mono, .in-ci .art-author .mono, .in-ci .art-toc > .mono { display: block; margin-bottom: 10px; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.in-ci .callout > .mono::before, .in-ci .art-author .mono::before, .in-ci .art-toc > .mono::before { content: "[ "; }
.in-ci .callout > .mono::after, .in-ci .art-author .mono::after, .in-ci .art-toc > .mono::after { content: " ]"; }
.in-ci .art-proof .kpi-card { border-radius: 4px; }
.in-ci .art-toc { border-color: #e7e2df; }
.in-ci .art-toc a[aria-current] { color: var(--red); }
.in-ci .art-author { border-color: #e7e2df; }
/* Weiterführend */
.in-ci .rel__h { font-weight: 400; letter-spacing: -.03em; }
.in-ci .rel__h::before { content: "[ Weiterlesen ]"; display: block; margin-bottom: 14px; color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.in-ci .rel > a { border-radius: 6px; border: 1px solid #e7e2df; background: #fff; box-shadow: none; }
.in-ci .rel > a .mono { color: var(--red); }
@media (hover: hover) and (pointer: fine) { .in-ci .rel > a:hover { border-color: var(--ink); transform: translateY(-3px); } }
.in-ci .bc .mono { color: var(--ink); }
.in-ci .art-layout .callout { padding: clamp(20px, 2vw, 28px); }
.in-ci .art-proof { padding: clamp(20px, 2vw, 28px); }

/* =====================================================================
   Digital-Analyse in der neuen CI (06.11.2026, body.case-ci.an-ci)
   Hell, Fragebogen im Fokus. Audit-Vorschau im Kopf = weinrote Akzentkarte. Lila (#7a63b8) raus:
   Ampel jetzt gut = Tinte, mittel = Rosé-Rot, schwach = ONSET-Rot.
   ===================================================================== */
.an-ci .phero__h::before { content: "[ Digital-Analyse ]"; display: block; position: static; width: auto; height: auto; margin: 0 0 18px; background: none; border-radius: 0;
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.an-ci .ana-facts svg { color: var(--red); }
/* Vorschau = Weinkarte */
.an-ci .ana-preview { border: 0; border-radius: 6px; background: var(--ci-card); padding: clamp(24px, 2.4vw, 34px); }
.an-ci .ana-preview__row { color: #e3d6d1; }
.an-ci .ana-preview__row i { border-radius: 2px; background: linear-gradient(90deg, #f7efe9, #e7b9be); }
.an-ci .ana-preview p { color: var(--ci-mut); }
/* Fragebogen */
.an-ci .ana { border-color: #e7e2df; border-radius: 6px; box-shadow: none; }
.an-ci .ana__bar { height: 3px; border-radius: 0; background: #e7e2df; }
.an-ci .ana__bar i { background: var(--red); }
.an-ci .ana__q { font-weight: 400; letter-spacing: -.03em; }
.an-ci .ana__n, .an-ci .ana-res__k, .an-ci .ana-rec__area { color: var(--red); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.an-ci .ana__n::before, .an-ci .ana-res__k::before, .an-ci .ana-rec__area::before { content: "[ "; } .an-ci .ana__n::after, .an-ci .ana-res__k::after, .an-ci .ana-rec__area::after { content: " ]"; }
.an-ci .ana__opt span { border-color: #e7e2df; border-radius: 6px; }
.an-ci .ana__opt span::before { border-color: #cfc6c2; }
.an-ci .ana__opt input:checked + span { border-color: var(--red); background: #fbf4f5; box-shadow: inset 0 0 0 1px var(--red); }
.an-ci .ana__opt input:checked + span::before { border-color: var(--red); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--red); }
@media (hover: hover) { .an-ci .ana__opt:hover input:not(:checked) + span { border-color: var(--ink); } }
.an-ci .ana .fld input, .an-ci .ana__url input { border-radius: 6px; }
/* Ergebnis */
.an-ci .ana-res__head, .an-ci .ana-teaser__in { border-color: #e7e2df; border-radius: 6px; background: #f3f1f0; }
.an-ci .ana-res__h, .an-ci .ana-res__sub, .an-ci .ana-rec h3 { font-weight: 400; letter-spacing: -.03em; }
.an-ci .ana-res__score { background: radial-gradient(closest-side, #f3f1f0 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), #e7e2df 0); }
.an-ci .ana-res__score b { font-weight: 400; }
.an-ci .ana-res__score.is-good { --c: var(--ink); } .an-ci .ana-res__score.is-mid { --c: #c4646e; } .an-ci .ana-res__score.is-low { --c: var(--red); }
.an-ci .ana-res__bar { border-radius: 2px; background: #e7e2df; }
.an-ci .ana-res__bar i { border-radius: 2px; background: var(--red); }
.an-ci .ana-result .ana-res__bars li.is-good .ana-res__bar i { background: var(--ink); } .an-ci .ana-result .ana-res__bars li.is-mid .ana-res__bar i { background: #c4646e; } .an-ci .ana-result .ana-res__bars li.is-low .ana-res__bar i { background: var(--red); }
.an-ci .ana-rec li, .an-ci .ana-res__check { border-color: #e7e2df; border-radius: 6px; }

/* =====================================================================
   Academy in der neuen CI (06.11.2026, body.case-ci.ac-ci) – Bühne/Formular in academy/index.astro.
   Hier nur: Chips mit feiner Ecke, Footer-CTA aus (die Seite hat ihren eigenen Abschluss: Warteliste).
   ===================================================================== */
.ac-ci .cs__form .chips span { border-color: #e7e2df; border-radius: 4px; }
.ac-ci .cs__form .chips input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.ac-ci .cs__form .fld input { border-radius: 6px; }
body.ac-ci .fx .fx__cta { display: none; }

/* =====================================================================
   Suche, Sitemap, 404 in der neuen CI (06.11.2026, body.case-ci.ut-ci + su-ci/sm-ci/nf-ci)
   Roter Strich über der H1 → Label [ … ], H1 400, Gruppentitel als Labels, feine Ecken.
   ===================================================================== */
.ut-ci .phero__h::before { display: block; position: static; width: auto; height: auto; margin: 0 0 18px; background: none; border-radius: 0;
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.su-ci .phero__h::before { content: "[ Suche ]"; }
.sm-ci .phero__h::before { content: "[ Sitemap ]"; }
.nf-ci .phero__h::before { content: "[ Fehler 404 ]"; }
.ut-ci .phero .h1, .ut-ci .phero .display { font-weight: 400; letter-spacing: -.045em; }
.ut-ci .phero em { color: var(--red); font-style: normal; }
/* Suche */
.ut-ci .search-page__form input { border-color: #e7e2df; border-radius: 6px; }
.ut-ci .search-page__form input:focus { border-color: var(--ink); outline: none; }
.ut-ci .search__results--page { padding: 0; border-color: #e7e2df; }
.ut-ci .search__results--page a { padding: 18px 0; border-radius: 0; border-color: #e7e2df; }
.ut-ci .search__results--page a:hover, .ut-ci .search__results--page a.is-active { background: none; }
.ut-ci .search__results--page a.is-active::before { display: none; }
.ut-ci .search__results--page b { font-weight: 400; letter-spacing: -.02em; font-size: 1.1rem; }
.ut-ci .search__results--page small::before { content: "[ "; } .ut-ci .search__results--page small::after { content: " ]"; }
.ut-ci .search__results--page small { color: var(--red); font-weight: 600; letter-spacing: .1em; }
.ut-ci .search__hint { padding-inline: 0; border-color: #e7e2df; }
/* Sitemap */
.sm-ci .smap__group h2.mono { font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.sm-ci .smap__group h2.mono::before { content: "[ "; } .sm-ci .smap__group h2.mono::after { content: " ]"; }
.sm-ci .smap a b, .sm-ci .smap__group li > a { letter-spacing: -.015em; }
.ut-ci .search__results--page .search__group { padding: 22px 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ut-ci .search__results--page .search__group::before { content: "[ "; } .ut-ci .search__results--page .search__group::after { content: " ]"; }
.ut-ci .search__results--page mark { background: #f3e6e8; color: inherit; }

/* =====================================================================
   Leistungen-Übersicht in der neuen CI (07.11.2026, body.case-ci.lv-ci)
   Label statt rotem Strich, Listen-Nummern [ 01 ], Banner-Label steckt seit 07.11. direkt in Banner.astro (alle Seiten).
   ===================================================================== */
.lv-ci .phero__h::before { content: "[ Leistungen ]"; display: block; position: static; width: auto; height: auto; margin: 0 0 18px; background: none; border-radius: 0;
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.lv-ci .phero .h1 { font-weight: 400; letter-spacing: -.045em; }
.lv-ci .ed-list { border-color: var(--ink); }
.lv-ci .ed-list__row { border-color: #e7e2df; }
.lv-ci .ed-list__n { color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .1em; }
.lv-ci .ed-list__n::before { content: "[ "; } .lv-ci .ed-list__n::after { content: " ]"; }
.lv-ci .ed-list__t { font-weight: 400; letter-spacing: -.04em; }
.lv-ci .ed-list__go { color: var(--red); }

/* =====================================================================
   Rechtsseiten in der neuen CI (07.11.2026, body.case-ci.ut-ci.lg-ci) – nur Optik, Inhalte unverändert.
   ===================================================================== */
.lg-ci .phero__h::before { content: "[ Rechtliches ]"; }
.lg-ci .art h2 { font-weight: 400; letter-spacing: -.03em; }
.lg-ci .callout { padding: clamp(20px, 2vw, 28px); border: 1px solid #e7e2df; border-radius: 6px; background: #fff; }
.lg-ci .callout > .mono { display: block; margin-bottom: 10px; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.lg-ci .callout > .mono::before { content: "[ "; } .lg-ci .callout > .mono::after { content: " ]"; }
.lg-ci .ck-list li, .lg-ci .art ul li::marker { color: inherit; }
.lg-ci .art ul li::marker { color: var(--red); }

/* 07.11.: dunkle Heros (Branding, KI) schließen direkt an den Header an, keine helle Lücke */
main:has(> .hz-brand:first-child, > .hz-ki:first-child) { padding-top: 0; }
main > .hz-brand:first-child, main > .hz-ki:first-child { padding-top: 64px; }

/* 07.11.: „Kurz erklärt“ auf Leistungsseiten ohne Linie, Text mittig zentriert */
.svc-ci .svc-intro__grid { display: block; border-top: 0; padding-top: 0; text-align: center; }
.svc-ci .svc-intro__answer.svc-intro__ink, .svc-ci .svc-intro__more { margin-inline: auto; }
.svc-ci .svc-intro__ink + .svc-combo { justify-content: center; }
.svc-ci .svc-intro__answer.svc-intro__ink { text-wrap: balance; }
.svc-ci .svc-intro__more { hyphens: none; text-wrap: balance; }

/* 07.11.: Karten auf dunklen Bühnen neutral statt Weinrot (kein Rot auf Rot) */
.svc-ci .svc-problem__list > li, .lo-ci #ausgangslage .sits li, .ab-ci #versprechen .ed-values li, .ab-ci #versprechen .ed-values li:hover {
  background: linear-gradient(180deg, rgba(247, 239, 233, .06), rgba(247, 239, 233, .015)); border: 1px solid rgba(247, 239, 233, .1); }

/* 07.11.: Flächen bündig – jede Fläche (Bühne, Panel, Schluss) endet exakt an der Inhaltskante des Headers */
:root { --box-m: max(var(--edge), (100% - var(--max)) / 2); --box-p: clamp(20px, 3.6vw, 64px); }
main > :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc) {
  margin-inline: var(--box-m) !important; border-radius: 6px !important; }
main > :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc) > .wrap {
  max-width: none; padding-inline: var(--box-p); }
.fx .wrap { max-width: none !important; padding-inline: calc(max(var(--edge), (100% + 16px - var(--max)) / 2) - 8px) !important; }
/* aufeinanderfolgende Flächen nicht aneinanderkleben */
main > :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc, .svc-ci .lns)
  + :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc, .lns) { margin-top: 12px; }

/* 07.11.: „So läuft es ab“ auf Leistungsseiten als hellgraue Fläche mit Schritten nebeneinander (Abwechslung zur Liste „Das bekommen Sie“) */
.svc-ci main > .lns { margin-inline: var(--box-m); border-radius: 6px; background: #f3f1f0; }
.svc-ci main > .lns > .wrap { max-width: none; padding-inline: var(--box-p); }
.svc-ci .lns .ln--steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; border: 0; counter-reset: st; }
.svc-ci .lns .ln--steps .ln__row { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2vw, 30px); border: 0; border-radius: 4px; background: #fff; min-height: clamp(200px, 18vw, 260px); position: relative; }
.svc-ci .lns .ln--steps .ln__row::after { content: ""; position: absolute; left: clamp(22px, 2vw, 30px); right: clamp(22px, 2vw, 30px); top: clamp(56px, 5vw, 68px); height: 1px; background: var(--line); }
.svc-ci .lns .ln--steps .ln__c--n { padding: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--red); margin-bottom: clamp(18px, 2vw, 28px); }
.svc-ci .lns .ln--steps .ln__c--n::before { content: "[ 0"; } .svc-ci .lns .ln--steps .ln__c--n::after { content: " ]"; }
.svc-ci .lns .ln--steps .ln__c--step { margin-top: 0; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); }
.svc-ci .lns .ln--steps .ln__c--txt { font-size: var(--fs-b); max-width: none; }
.fx { margin-top: 12px !important; }
main:not(:has(> .sec.go:last-of-type)) + .fx, main:not(:has(.sec.go)) ~ .fx { margin-top: clamp(48px, 6vw, 96px) !important; }

/* 07.11.: Über uns – Zitat mittig */
.ed-quote .wrap { text-align: center; }
.ed-quote blockquote { margin-inline: auto; }
.ed-quote blockquote p { text-indent: 0; }

/* 07.11.: saubere Zeilenumbrüche – keine Silbentrennung in Text und Überschriften, ausgeglichene Zeilen */
p, li, dd, dt, blockquote, figcaption, td, th, summary, label, .btn, a { hyphens: manual !important; -webkit-hyphens: manual !important; }
h1, h2, h3, h4, blockquote, .ed-quote blockquote, summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
@media (max-width: 480px) { main h1, main h2, p, li, dd, a, summary, td { hyphens: auto !important; -webkit-hyphens: auto !important; } }

/* 07.11. (2): Hintergründe so breit wie der Footer (8px Rand), Inhalte (Text, Bilder) bleiben auf der Standardbreite = Header-Kante */
:root { --bg-m: 8px; }
main > :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc), .svc-ci main > .lns {
  margin-inline: var(--bg-m) !important; }
main > :is(.sec.sec--soft, .svc-problem, .sec.stage, .sec#passt, #bekommen, #anders, #ausgangslage, #versprechen, .sec.go, section.sv, section.sc) > .wrap, .svc-ci main > .lns > .wrap {
  max-width: none !important; padding-inline: calc(max(var(--edge), (100% + 2 * var(--bg-m) - var(--max)) / 2) - var(--bg-m)) !important; }
@media (min-width: 861px) {
  .bn > .wrap { max-width: none; padding-inline: var(--bg-m); }
  .bn .bn__body { padding-left: calc(max(var(--edge), (100% + 2 * var(--bg-m) - var(--max)) / 2) - var(--bg-m)) !important; max-width: none !important; width: calc(max(var(--edge), (100% + 2 * var(--bg-m) - var(--max)) / 2) - var(--bg-m) + min(660px, 46%)); }
}
/* Showcase-Reihe: eigene Innenkante statt Wrap-Padding (Slider läuft bis an den Flächenrand) */
main > section.sc#buehne > .wrap.sc__tiles { padding-inline: 0 !important; --sc-left: calc(max(var(--edge), (100% + 2 * var(--bg-m) - var(--max)) / 2) - var(--bg-m)); }
main > section.sc#buehne .sc__hero > .wrap.sc__in { max-width: none !important; padding-inline: calc(max(var(--edge), (100% + 2 * var(--bg-m) - var(--max)) / 2) - var(--bg-m)) !important; }
@media (max-width: 480px) { main > .sec.go .go__panel { margin-inline: 0; } }

/* 08.11.: Bewertungen wie Footer – Fläche 8px vom Rand, Inhalt auf Header-Kante */
main > section#stimmen > .wrap { max-width: none; padding-inline: var(--bg-m); }
@media (max-width: 860px) { .bn > .wrap { max-width: none; padding-inline: var(--bg-m); } .bn .bn__body { padding-inline: calc(var(--edge) - var(--bg-m)) !important; } }