/* digitera. Landingpage v3 · Sections unter dem Hero
 * Gleiche Tokens, Kurven und Bausteine wie der Hero (hero.css): Weiß, Anthrazit, ein Rot als Akzent,
 * Forum Serif für Überschriften und Zahlen, Helvetica für Text, Karten in bg-subtle ohne Linien und Schatten.
 * Bewegung nur, wenn sie erledigte Arbeit zeigt: transform/opacity/blur(≤6px), ease-out, Stagger 70 ms.
 */

:root {
  --sec-y: clamp(96px, 10vw, 144px);
  --head-gap: clamp(40px, 5vw, 64px);
  --radius-card: 28px;   /* Karten, Fenster, Flächen */
  --r-md: 20px;          /* Elemente in Karten */
  --r-sm: 8px;           /* Zellen, Dateien */
  --ink-3: #737373;      /* kleine graue Schrift: 4,7 : 1 auf Weiß (vorher #8E8E8E, 3,3 : 1) */
  --dark: #161617;
  --dark-ink: #F5F5F7;
  --dark-ink-2: #A1A1A6;
  --dark-ink-3: #86868B;
  --klara: #2F6FEB;   /* Cursor-Farbe = Klaras blaues Lichtband */
}

/* ---------- Grundgerüst ---------- */
.wrap { max-width: calc(var(--content-w) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding: var(--sec-y) 0; scroll-margin-top: var(--hdr-h); }
.hero { scroll-margin-top: var(--hdr-h); }
.sec-head { max-width: 780px; margin: 0 auto var(--head-gap); text-align: center; display: flex; flex-direction: column; align-items: center; }

.eyebrow {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--font-text);
}
.h2 {
  margin: 20px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.025em; color: var(--ink);
  text-wrap: balance;
}
.h2 .mute { color: var(--ink-3); }
.h2 .br { display: inline; }
.lead { margin-top: 22px; max-width: 620px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ph { color: var(--ink-3); font-style: normal; }
.card { background: var(--bg-subtle); border-radius: var(--radius-card); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px;
  border-radius: 999px; background: var(--brand-cta); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--lg { height: 54px; padding: 0 30px; font-size: 16px; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); }
.link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #000; }
  .link:hover svg { transform: translateX(3px); }
}

/* ---------- Einblenden beim Scrollen (gleiche Bewegung wie der Hero-Text) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js .rv.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ======================================================================
   1 · Kennzahlen
   ====================================================================== */
.sec--proof { padding: 40px 0 var(--sec-y); }
.sec--proof .eyebrow { text-align: center; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 40px; }
.proof-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proof-num {
  font-family: var(--font-display); font-size: clamp(52px, 4.8vw, 72px); line-height: 1; letter-spacing: -.03em; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  --ticker-font: var(--font-display); --ticker-size: clamp(52px, 4.8vw, 72px);
}
.proof-label { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.proof-ctx { margin-top: 8px; max-width: 300px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.proof-note { margin-top: 48px; text-align: center; }
.proof-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.proof-meta img, .ap-face, .person-face { border-radius: 50%; object-fit: cover; background: var(--bg-subtle); box-shadow: 0 1px 2px rgba(29,29,31,.08), 0 6px 14px -8px rgba(29,29,31,.28); }
.proof-meta img { width: 24px; height: 24px; }

/* ======================================================================
   2 · Kosten (dunkel, als eingesetzte Fläche)
   ====================================================================== */
.sec--dark { margin: 0 clamp(8px, 1.6vw, 24px); border-radius: var(--radius-card); background: var(--dark); color: var(--dark-ink); }
.sec--dark .eyebrow { color: var(--dark-ink-3); }
.sec--dark .h2 { color: var(--dark-ink); }
.sec--dark .h2 .mute { color: var(--dark-ink-3); }
.sec--dark .lead { color: var(--dark-ink-2); }
.sec--dark .note { color: var(--dark-ink-3); }

.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.cost-cap { font-size: 13px; color: var(--dark-ink-3); margin-bottom: 14px; }
.cost-stack { display: grid; gap: 4px; }
/* Termine im Stil des Apple-Kalenders, dunkle Darstellung */
.cs {
  --c: #0A84FF; --tint: rgba(10,132,255,.20); --txt: #69B4FF;
  position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  height: 30px; padding: 0 10px 0 13px; border-radius: 6px; background: var(--tint); color: var(--txt);
  font-family: var(--font-ios); font-size: 13px; font-weight: 600; letter-spacing: -.01em; overflow: hidden;
}
.cs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--c); }
.cs time { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.cs.c-violet { --c: #BF5AF2; --tint: rgba(191,90,242,.20); --txt: #DC97FF; }
.cs.c-green { --c: #30D158; --tint: rgba(48,209,88,.18); --txt: #63DE83; }
/* Der Stapel baut sich einmal auf, von oben nach unten */
.js .cs { opacity: 0; transform: translateY(-10px) scale(.98); }
.cost-day.is-in .cs { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); transition-delay: calc(240ms + var(--k, 0) * 90ms); }

.calc { display: grid; gap: 14px; margin: 0; }
.calc dt { font-size: 15px; color: var(--dark-ink-2); }
.calc dd { margin: 0; font-size: 17px; color: var(--dark-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-total { display: flex; flex-direction: column; margin-top: 36px; }
.calc-num {
  font-family: var(--font-display); font-size: clamp(52px, 4.8vw, 72px); line-height: 1; letter-spacing: -.03em; color: var(--dark-ink);
  white-space: nowrap; --ticker-ink: var(--dark-ink); --ticker-font: var(--font-display); --ticker-size: clamp(52px, 4.8vw, 72px);
}
.calc-per { margin-top: 12px; font-size: 16px; color: var(--dark-ink-2); }

/* ======================================================================
   3 · Noch jemanden einstellen?
   ====================================================================== */
.hire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hire-card { margin: 0; padding: 40px; display: flex; flex-direction: column; gap: 32px; min-height: 480px; }
.hire-card figcaption { display: flex; flex-direction: column; gap: 10px; }
.card-k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card-t { font-family: var(--font-display); font-size: 28px; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

.loop { --d: 212px; position: relative; width: 100%; max-width: 440px; aspect-ratio: 1.36; margin: auto; }
.loop svg { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); transform: translate(-50%, -50%); overflow: visible; }
.loop circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.loop-st li {
  position: absolute; left: 50%; top: 50%; font-size: 13px; color: var(--ink-2); white-space: nowrap;
  transform: rotate(var(--a)) translate(var(--r, 164px)) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
}
.loop-st li:nth-child(1), .loop-st li:nth-child(4) { --r: 132px; }
.loop-st li::after { content: none; }
.loop-st li::before { content: none; }
/* Punkt kreist langsam: das Rad dreht sich weiter (nur solange sichtbar) */
.loop-dot { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); animation: orbit 14s linear infinite; animation-play-state: paused; }
.loop-dot i { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); }
.loop.is-live .loop-dot { animation-play-state: running; }
@keyframes orbit { to { transform: rotate(360deg); } }

.line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: auto 0; padding: 0; }
.line li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); text-align: center; }
.line-dot { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.line-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); transition: background-color 300ms ease, transform 420ms var(--ease-out); }
.line-dot--end::before { width: 28px; height: 28px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.line-dot--end .ck { position: absolute; inset: 0; }
.line-track { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 13px; height: 2px; background: var(--line-strong); border-radius: 1px; overflow: hidden; }
.line-track i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.line.is-run .line-track i { transform: scaleX(1); transition: transform 1600ms var(--ease-in-out) 200ms; }
.line.is-run li:nth-child(1) .line-dot::before { background: var(--ink); transition-delay: 200ms; }
.line.is-run li:nth-child(2) .line-dot::before { background: var(--ink); transition-delay: 1000ms; }
.line.is-run li { color: var(--ink); transition: color 300ms ease; }

/* ======================================================================
   4 · Programme: ein Fenster, drei Schritte
   ====================================================================== */
.app {
  position: relative; max-width: 880px; margin: 0 auto; border-radius: var(--radius-card); background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgba(0,0,0,.03), 0 30px 60px -30px rgba(29,29,31,.22);
}
.app-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; background: var(--bg-subtle); }
.app-lights { position: absolute; left: 16px; top: 50%; display: flex; gap: 8px; transform: translateY(-50%); }
.app-lights i { width: 11px; height: 11px; border-radius: 50%; background: #DCDCD9; }
.app-file { font-size: 13px; font-weight: 500; color: var(--ink-2); transition: opacity 200ms ease; }
.app-body { position: relative; height: 380px; }
.pane { position: absolute; inset: 0; padding: 28px 36px; opacity: 0; filter: blur(4px); transform: translateY(6px); pointer-events: none;
  transition: opacity 360ms var(--ease-out), filter 360ms var(--ease-out), transform 460ms var(--ease-out); }
.pane.is-on { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }

.sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sheet th { height: 30px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-align: left; }
.sheet td { height: 38px; color: var(--ink); border-top: 1px solid #EFEFED; }
.sheet th:first-child, .sheet td:first-child { width: 32px; color: var(--ink-3); }
.sheet th:nth-child(n+3), .sheet td:nth-child(n+3) { text-align: right; }
.sheet tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.sum-cell { position: relative; }
.sum-cell::after { content: ""; position: absolute; inset: 3px -8px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); background: rgba(29,29,31,.04); opacity: 0; transition: opacity 240ms var(--ease-out); }
.sum-cell.is-sel::after { opacity: 1; }
#sumVal { position: relative; z-index: 1; }

.pane--docx { display: grid; place-items: start center; background: var(--bg-subtle); padding: 24px 24px 0; }
.doc { width: min(100%, 520px); height: 100%; padding: 32px 40px; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.doc p + p { margin-top: 10px; }
.doc-meta { font-size: 11.5px; color: var(--ink-3); }
.doc-h { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 14px !important; }
.doc-total { display: flex; justify-content: space-between; margin-top: 22px !important; padding: 10px 12px; border-radius: 6px; color: var(--ink); background: var(--bg-subtle); transition: background-color 300ms ease, box-shadow 300ms ease; }
.doc-total.is-sel { background: rgba(29,29,31,.04); box-shadow: inset 0 0 0 2px var(--ink); }
.doc-src { font-size: 11.5px; color: var(--ink-3); }

.files-path { font-size: 13px; color: var(--ink-3); }
.files { margin-top: 18px; display: grid; gap: 6px; }
.files li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; height: 46px; padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink); }
.files li span:last-child { font-size: 13px; color: var(--ink-3); }
.f-ic { width: 22px; height: 26px; border-radius: 3px; background: #EDEDEB; position: relative; }
.f-ic::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: #CFCFCC; box-shadow: 0 5px 0 #CFCFCC, 0 10px 0 #CFCFCC; border-radius: 1px; }
.files-new { background: var(--bg-subtle); }
.js .pane--files .files-new { opacity: 0; transform: translateY(-6px); }
.pane--files.is-filed .files-new { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
.files-due { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.files-due .ck { position: relative; inset: auto; width: 24px; height: 24px; flex: none; }

.cursor { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; pointer-events: none;
  transform: translate(420px, 300px); opacity: 0; transition: transform 820ms var(--ease-in-out), opacity 300ms ease; }
.cursor.is-on { opacity: 1; }
.cursor svg { width: 16px; height: 20px; fill: var(--ink); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.cursor img { width: 16px; height: 16px; margin: 16px 0 0 -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }
.cursor b { margin: 16px 0 0 -6px; padding: 2px 8px 2px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }

.app-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.app-steps button { position: relative; width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 18px 24px 20px; text-align: left; color: var(--ink-3); transition: color 200ms ease; }
.app-steps button::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
.app-steps button[aria-pressed="true"] { color: var(--ink); }
.app-steps button[aria-pressed="true"]::before { transform: scaleX(1); }
.app-steps b { font-size: 15px; font-weight: 600; }
.app-steps span { font-size: 13px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .app-steps button:hover { color: var(--ink); } }
.app-steps button:focus-visible { outline-offset: -3px; }

.sys-note { margin: 40px auto 0; max-width: 560px; text-align: center; font-size: 15px; color: var(--ink-2); }

/* ======================================================================
   5 · Team
   ====================================================================== */
.staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.person { padding: 32px; border-radius: var(--radius-card); background: var(--bg-subtle); }
.person-face { display: block; width: 64px; height: 64px; }
.person-name { margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--ink); }
.person-role { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.person-jobs { margin-top: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.person--open { background: none; display: flex; flex-direction: column; }
.person-plus { display: grid; place-items: center; background: var(--bg-subtle); box-shadow: none; color: var(--ink-2); }
.person-plus svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.person-open-t { margin-top: 20px; font-size: 15px; color: var(--ink); }
.person--open .link { margin-top: auto; padding-top: 20px; }


/* ======================================================================
   6 · Kontrolle
   ====================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 104px); align-items: center; }
.split-text .h2 { margin-top: 20px; }
.split-text .lead { max-width: 460px; }

.approvals { padding: 16px; border-radius: var(--radius-card); background: var(--bg-subtle); font-family: var(--font-ios); letter-spacing: -.01em; }
.note-dark {
  display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center;
  padding: 12px 16px 13px 13px; border-radius: 24px; background: rgba(28,28,30,.94); color: #fff;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.45);
}
.ap-list { display: grid; gap: 8px; margin-top: 12px; }
.ap { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; border-radius: var(--r-md); background: #fff; transition: background-color 300ms ease; }
.ap-face { width: 40px; height: 40px; }
.ap-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.ap-d { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.ap-state { display: none; font-size: 12.5px; color: #1F7A38; margin-top: 2px; }
.ap-edit { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.ap-act { position: relative; display: flex; align-items: center; gap: 4px; }
.btn-q, .btn-ok { height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 200ms ease; }
.btn-q { color: var(--ink-2); }
.btn-ok { background: var(--ink); color: #fff; padding: 0 14px; }
.btn-q:active, .btn-ok:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn-q:hover { background: var(--bg-subtle); color: var(--ink); } .btn-ok:hover { background: #000; } }
.ap-ck { position: relative !important; inset: auto !important; display: none; width: 28px; height: 28px; margin-right: 6px; }
.ap.is-ok .btn-q, .ap.is-ok .btn-ok { display: none; }
.ap.is-ok .ap-ck { display: block; }
.ap.is-ok .ap-state { display: block; }
.ap-foot { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); font-family: var(--font-text); letter-spacing: 0; }

/* ======================================================================
   8 · Potenzial
   ====================================================================== */
.ex-branch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pill {
  height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bg-subtle); color: var(--ink-2); font-size: 14px; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.pill:active { transform: scale(.97); }
.pill[aria-checked="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pill[aria-checked="false"]:hover { color: var(--ink); } }
.ex-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.ex-areas { display: grid; gap: 4px; align-content: start; }
.area {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r-md); text-align: left;
  transition: background-color 200ms ease;
}
.area img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.area b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.area span { display: block; font-size: 13px; color: var(--ink-2); }
.area[aria-checked="true"] { background: var(--bg-subtle); }
.area[aria-checked="false"] b { color: var(--ink-2); }
.ex-result { padding: 32px 36px; }
.ex-tasks { display: grid; gap: 16px; min-height: 250px; }
.ex-tasks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
.ex-tasks .t { font-size: 15.5px; color: var(--ink); }
.ex-tasks .h { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-tasks .l { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.ex-tasks.is-swap li { animation: swap 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
.ex-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 36px; }
.ex-foot .side-label { margin-bottom: 8px; }
.ex-sum { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 48px; line-height: 1; letter-spacing: -.03em; color: var(--ink); --ticker-font: var(--font-display); --ticker-size: 48px; }
.ex-bis, .ex-unit { font-family: var(--font-text); font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.ex-foot .note { margin-top: 10px; }

/* ======================================================================
   9 · Sicherheit
   ====================================================================== */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.trust li { display: flex; flex-direction: column; }
.trust svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust b { font-size: 16px; font-weight: 600; color: var(--ink); }
.trust li > span { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ======================================================================
   10 · Ablauf + Gründer
   ====================================================================== */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps li { position: relative; z-index: 1; display: flex; flex-direction: column; }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-subtle); font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background-color 360ms ease, color 360ms ease; }
.steps b { margin-top: 22px; font-size: 16px; font-weight: 600; color: var(--ink); }
.steps li > span:not(.step-n) { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.steps em { margin-top: 12px; font-size: 13px; font-style: normal; color: var(--ink-3); }
.steps-track { position: absolute; top: 17px; left: 36px; right: calc((100% - 64px) / 3 - 0px); height: 2px; background: var(--bg-subtle); z-index: 0; overflow: hidden; }
.steps-track i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.steps.is-run .steps-track i { transform: scaleX(1); transition: transform 1600ms var(--ease-in-out) 200ms; }
.steps.is-run li:nth-child(1) .step-n { background: var(--ink); color: #fff; transition-delay: 150ms; }
.steps.is-run li:nth-child(2) .step-n { background: var(--ink); color: #fff; transition-delay: 950ms; }
.steps.is-run li:nth-child(3) .step-n { background: var(--ink); color: #fff; transition-delay: 1750ms; }

.founder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; margin: clamp(80px, 9vw, 128px) 0 0; }
.founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); background: var(--bg-subtle); }
.founder blockquote { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.founder-name { margin-top: 20px; font-size: 14px; color: var(--ink-2); }

/* ======================================================================
   11 · FAQ
   ====================================================================== */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 0; }
.faq details { padding: 0; }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 17px; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.8px; margin-top: -1px; border-radius: 1px; background: var(--ink-2); transition: transform 260ms var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 24px; max-width: 620px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.faq details[open] p { animation: swap 420ms var(--ease-out) both; }

/* ======================================================================
   12 · Schluss: Lichtschein wie im Hero
   ====================================================================== */
.sec--final { overflow: clip; padding-bottom: calc(var(--sec-y) + 24px); }
.sec--final::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: min(1100px, 160vw); height: 760px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,59,48,.14), rgba(255,59,48,.06) 45%, rgba(255,59,48,0) 100%), radial-gradient(closest-side, rgba(255,120,90,.09), rgba(255,120,90,0) 70%);
  animation: glow-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.final { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final-lead { margin: 28px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.final-num { margin-top: 8px; font-family: var(--font-display); font-size: clamp(88px, 12vw, 168px); line-height: 1; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; --ticker-font: var(--font-display); --ticker-size: clamp(88px, 12vw, 168px); }
.final .note { margin-top: 18px; }
.final-cta { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
.micro { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* ---------- Footer ---------- */
.foot { padding: 72px 0 40px; background: var(--bg-subtle); }
.foot-in { display: grid; grid-template-columns: 1fr auto auto; gap: 48px; align-items: start; }
.foot-claim { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.foot-nav { display: grid; gap: 0; font-size: 14px; color: var(--ink-2); }
.foot-nav a { padding: 11px 0; }
.foot-nav a { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover { color: var(--ink); } }
.foot-base { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Zahlen-Komponente in den Sections: kein Live-Punkt ---------- */
.sec .nt__dot { display: none !important; }

/* ======================================================================
   Tablet + Handy
   ====================================================================== */
@media (max-width: 999px) {
  .hire, .cost, .split, .ex-grid, .founder { grid-template-columns: minmax(0, 1fr); }
  .cost { gap: 56px; }
  .staff { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .founder { max-width: 560px; }
  .founder img { max-width: 360px; }
  .ex-areas { display: flex; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .ex-areas::-webkit-scrollbar { display: none; }
  .area { flex: none; }
}
@media (max-width: 699px) {
  .proof { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .staff { grid-template-columns: minmax(0, 1fr); }
  .hire-card { padding: 28px 24px; min-height: 0; gap: 28px; }
  .card-t { font-size: 24px; }
  .loop { max-width: 340px; }
  .loop { --d: 156px; }
  .loop-st li { font-size: 12px; --r: 120px; }
  .loop-st li:nth-child(1), .loop-st li:nth-child(4) { --r: 102px; }
  .person { padding: 26px 24px; }
  .ex-branch { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .ex-branch::-webkit-scrollbar { display: none; }
  .pill { flex: none; }
  .ex-result { padding: 24px 20px; }
  .ex-tasks { min-height: 0; }
  .ex-foot { flex-direction: column; align-items: stretch; }
  .ex-foot .btn { width: 100%; }
  .ex-sum { font-size: 40px; --ticker-size: 40px; flex-wrap: wrap; }
  .app-body { height: 340px; }
  .pane { padding: 20px 16px; }
  .sheet { font-size: 12px; }
  .sheet th:nth-child(3), .sheet td:nth-child(3), .sheet th:nth-child(4), .sheet td:nth-child(4) { display: none; }
  .doc { padding: 22px 20px; font-size: 12.5px; }
  .app-steps button { padding: 14px 12px 16px; }
  .app-steps button::before { left: 12px; right: 12px; }
  .app-steps span { display: none; }
  .ap { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
  .ap-act { grid-column: 2; justify-content: flex-start; margin-left: -12px; min-height: 34px; }
  .ap.is-ok .ap-act { grid-column: 3; grid-row: 1; margin: 0; }
  .ap.is-ok { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .approvals { padding: 12px; border-radius: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-left: 0; }
  .steps li { padding-left: 56px; }
  .step-n { position: absolute; left: 0; top: 0; }
  .steps b { margin-top: 6px; }
  .steps-track { left: 17px; right: auto; top: 36px; bottom: 60px; width: 2px; height: auto; }
  .steps-track i { transform: scaleY(0); transform-origin: 50% 0; }
  .steps.is-run .steps-track i { transform: scaleY(1); }
  .faq details { padding: 0 20px; }
  .faq summary { font-size: 16px; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .sec--dark .wrap { padding: 0 20px; }
}

/* ---------- Reduzierte Bewegung: Endzustände ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .cs, .js .pane--files .files-new { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .loop-dot, .sec--final::before { animation: none !important; }
  .line-track i, .steps-track i { transform: none !important; }
  .cursor { transition: opacity 200ms ease; }
}

/* ---------- Kopfzeile über der dunklen Section: dunkles Glas statt grauem Band ---------- */
.hdr .wordmark, .hdr-nav a { transition: color 320ms var(--ease-out); }
.hdr.on-dark.is-scrolled { background: rgba(22,22,23,.62); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.hdr.on-dark .wordmark { color: var(--dark-ink); }
.hdr.on-dark .hdr-nav a { color: var(--dark-ink-2); }
@media (hover: hover) and (pointer: fine) { .hdr.on-dark .hdr-nav a:hover { color: var(--dark-ink); } }

/* ======================================================================
   Überarbeitung r2 (Review 26.09.): eine Designsprache mit dem Hero
   ====================================================================== */
/* Kopfzeile über der dunklen Fläche: dunkles Glas nur so breit wie die Fläche */
.hdr.on-dark.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr::before { content: ""; position: absolute; inset: 0 clamp(8px, 1.6vw, 24px); z-index: -1; border-radius: 0 0 14px 14px; background: rgba(22,22,23,.62); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); opacity: 0; transition: opacity 320ms var(--ease-out); pointer-events: none; }
.hdr.on-dark.is-scrolled::before { opacity: 1; }

/* Angebot: mobil erst Titel + ein Knopf, Formular auf Tipp */
.offer-open { display: none; }
@media (max-width: 699px) {
  .offer:not(.is-open) .offer-text, .offer:not(.is-open) .offer-form { display: none; }
  .offer:not(.is-open) .offer-open { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; }
  .offer:not(.is-open) { padding: 22px 18px 16px; }
  .offer:not(.is-open) .offer-title { font-size: 22px; padding: 0 28px; }
}

@media (max-width: 999px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .sec--proof { padding-top: 64px; }
  .proof { gap: 56px; }
  /* Team mobil kompakt: Avatar links, Text rechts */
  .person { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; padding: 20px; }
  .person-face { width: 48px; height: 48px; grid-row: 1 / span 2; }
  .person-name { margin-top: 2px; }
  .person-jobs, .person-open-t, .person--open .link { grid-column: 2; }
  .person-jobs { margin-top: 10px; font-size: 14px; }
  .person-open-t { margin-top: 10px; font-size: 14px; }
  .person--open .link { padding-top: 4px; }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .btn-q, .btn-ok { height: 44px; }
}
@media (max-width: 374px) { .line li { font-size: 11.5px; } }

/* Kosten-Überschrift: zwei klare Zeilen ab Tablet */
@media (min-width: 700px) { .sec--dark .h2 .br { display: block; } }
.sec--dark .sec-head { max-width: 960px; }


/* ======================================================================
   Mobil 26.09. (Owner): Burger statt roter CTA, Angebot verkleinert sich zum Knopf
   ====================================================================== */
.hdr-burger { display: none; }
.mnav { display: none; }
@media (max-width: 899px) {
  .hdr-cta { display: none; }
  .hdr-burger {
    display: grid; place-content: center; gap: 6px; justify-self: end;
    width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; color: var(--ink);
  }
  .hdr-burger span { display: block; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 220ms var(--ease-out); }
  .hdr.menu-open .hdr-burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .hdr.menu-open .hdr-burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .hdr.on-dark:not(.menu-open) .hdr-burger { color: var(--dark-ink); }
  .hdr.menu-open { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9); }
  .hdr.menu-open::before { opacity: 0 !important; }
  .hdr.menu-open .wordmark { color: var(--ink); }

  .mnav {
    display: flex; flex-direction: column; position: fixed; z-index: 39; left: 0; right: 0; top: var(--hdr-h);
    max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto;
    padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
    box-shadow: 0 24px 40px -24px rgba(29,29,31,.25);
    opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out);
  }
  .mnav[hidden] { display: none; }
  .mnav.is-in { opacity: 1; transform: none; }
  .mnav a { padding: 13px 0; font-size: 20px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mnav a.mnav-cta {
    margin-top: 20px; border: 0; border-radius: 999px; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center;
    background: var(--brand-cta); color: #fff; font-size: 16px; font-weight: 600;
  }
  .mnav a.mnav-login { border: 0; text-align: center; font-size: 15px; color: var(--ink-2); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .mnav, .hdr-burger span { transition: none; } }

@media (max-width: 699px) {
  .offer.is-min {
    left: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto;
    padding: 0; background: transparent; box-shadow: none; border-radius: 999px;
  }
  .offer.is-min > :not(.offer-open) { display: none; }
  .offer.is-min .offer-open {
    display: flex; width: auto; height: 48px; margin: 0; padding: 0 22px; border-radius: 999px;
    background: var(--brand-cta); color: #fff; font-size: 15px; font-weight: 600;
    box-shadow: 0 12px 30px -10px rgba(29,29,31,.4);
  }
}

/* Sicherheit 26.09. (Owner): Siegel statt Fließtext, nur belegte Angaben */
.trust .seal {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--line);
  font-size: 14px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; text-align: center; color: var(--ink);
}
.trust li > span.seal { margin-top: 0; color: var(--ink); }
@media (max-width: 699px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .trust .seal { width: 64px; height: 64px; font-size: 12px; margin-bottom: 14px; }
  .trust li > span { font-size: 14px; }
}

/* Rechner im Kosten-Block (Owner 26.09.) */
.cost-calc .cost-cap { margin-bottom: 18px; }
.calc { display: grid; gap: 18px; margin: 0; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; row-gap: 4px; cursor: pointer; }
.calc-lbl { font-size: 15px; color: var(--dark-ink-2); }
.calc-val { font-size: 17px; font-weight: 600; color: var(--dark-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row input[type=range] {
  grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; --p: 50%;
}
.calc-row input[type=range]:focus { outline: none; }
.calc-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--brand) 0, var(--brand) var(--p), rgba(255,255,255,.16) var(--p));
}
.calc-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform 160ms var(--ease-out);
}
.calc-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc-row input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,59,48,.45), 0 2px 10px rgba(0,0,0,.45); }
.calc-row input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.calc-row input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
.calc-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.calc-total { margin-top: 28px; }

/* Sicherheits-Siegel r2: Ring-Schrift, dunkle Mitte, einmaliger Glanz */
.trust .seal { width: 136px; height: 136px; margin-bottom: 22px; border: 0; box-shadow: none; border-radius: 50%; filter: drop-shadow(0 10px 18px rgba(29,29,31,.14)); }
.trust .seal svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; stroke-width: 1; }  /* alte Icon-Regel .trust svg (Kontur) neutralisieren */
.sl-ringtext { font-family: var(--font-text); font-size: 7.6px; font-weight: 500; fill: #98989D; }
.sl-main { font-family: var(--font-text); font-size: 14px; font-weight: 600; letter-spacing: .01em; fill: #fff; }
.sl-ring { transform-origin: 60px 60px; transition: transform 1600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .trust li:hover .sl-ring { transform: rotate(-24deg); } }
.sl-shine { transform-box: view-box; }
.trust li.is-in .sl-shine { animation: sl-shine 1500ms var(--ease-out) calc(400ms + var(--i, 0) * 140ms) 1 both; }
@keyframes sl-shine { from { translate: -40px 0; } to { translate: 190px 0; } }
@media (prefers-reduced-motion: reduce) { .trust li.is-in .sl-shine { animation: none; } .sl-ring { transition: none; } }
@media (max-width: 699px) { .trust .seal { width: 112px; height: 112px; margin-bottom: 16px; } }

/* Kosten-Block r2 (Owner 26.09.): links Ihre Zahlen, rechts das Ergebnis */
.cost { align-items: stretch; }
.cost-in {
  padding: clamp(24px, 3vw, 36px); border-radius: 20px;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cost-in .calc { gap: 26px; }
.cost-in .calc-val { font-size: 18px; }
.cost-out { display: flex; flex-direction: column; justify-content: center; }
.cost-out .calc-total { margin-top: 4px; }
.cost-out .calc-num { font-size: clamp(64px, 6.4vw, 96px); --ticker-size: clamp(64px, 6.4vw, 96px); }
.cost-out .calc-per { margin-top: 16px; font-size: 17px; }
.cost-out .note { margin-top: 20px; max-width: 40ch; }
@media (max-width: 899px) { .cost-out { padding: 0 4px; } }

/* Siegel r3 (Owner 26.09.): zentriert */
.trust li { align-items: center; text-align: center; }

/* Kosten-Block r3 (Owner 26.09.): Regler ohne Karte */
.cost-in { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cost-out .calc-per b { font-weight: 600; color: var(--dark-ink); }

/* ======================================================================
   Rechner r4 (Owner 26.09.): Segment-Regler links, Liquid-Glass-Kennzahlen rechts
   ====================================================================== */
.cost { align-items: center; }
.cost-in .calc { display: grid; gap: 30px; }
.knob-lbl { display: block; font-size: 15px; color: var(--dark-ink-2); }
.knob-num { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.knob-num input {
  font: inherit; font-family: var(--font-display); font-size: 44px; line-height: 1.05; letter-spacing: -.02em; color: var(--dark-ink);
  min-width: 1.4ch; padding: 0 2px; margin-left: -2px; border: 0; border-radius: 6px; background: transparent; font-variant-numeric: tabular-nums;
  border-bottom: 1.5px dashed rgba(255,255,255,.22); -moz-appearance: textfield; appearance: textfield; cursor: text;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.knob-num input::-webkit-outer-spin-button, .knob-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.knob-num input:hover { border-bottom-color: rgba(255,255,255,.5); }
.knob-num input:focus { outline: none; border-bottom-color: var(--brand); background: rgba(255,255,255,.05); }
.knob-unit { font-size: 16px; color: var(--dark-ink-3); }
.seg { display: flex; gap: 4px; width: max-content; max-width: 100%; margin-top: 12px; padding: 4px 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.seg i { width: 8px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background-color 140ms ease, transform 160ms var(--ease-out); }
.seg i.hv { background: rgba(255,255,255,.32); }
.seg i.on { background: #F5F5F7; }
.seg i.edge { background: var(--brand); transform: scaleY(1.22); }
.seg:focus { outline: none; }
.seg:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.knob-hint { margin-top: 22px; font-size: 13px; color: var(--dark-ink-3); }

/* Liquid Glass auf dunkler Fläche: roter Lichtschein dahinter, damit das Glas etwas zu brechen hat */
.cost-out { position: relative; display: grid; gap: 12px; isolation: isolate; }
.cost-out::before {
  content: ""; position: absolute; z-index: -1; inset: 8% -6% 10% 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,59,48,.38), rgba(255,59,48,.10) 60%, transparent);
  filter: blur(40px); pointer-events: none;
}
.cglass {
  position: relative; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04) 45%, rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 50px -24px rgba(0,0,0,.7);
}
.stat-main { padding: 24px 24px 22px; }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stat-cap { font-size: 14px; color: var(--dark-ink-2); }
.info-btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px 0 0; border-radius: 50%; color: var(--dark-ink-2); transition: background-color 160ms ease, color 160ms ease; }
.info-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); color: var(--dark-ink); }
.cost-out .calc-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.cost-out .calc-num { font-size: clamp(56px, 5.6vw, 84px); --ticker-size: clamp(56px, 5.6vw, 84px); }
.cost-out .calc-per { margin-top: 0; font-size: 16px; color: var(--dark-ink-2); }
.cbar { display: flex; height: 8px; margin-top: 18px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
.cbar-a { width: 50%; background: var(--brand); }
.cbar-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--dark-ink-3); }
.cbar-legend b { font-weight: 600; color: var(--dark-ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.dot-a { background: var(--brand); } .dot-b { background: rgba(255,255,255,.3); }
.info-pop[hidden] { display: none; }
.info-pop { position: absolute; z-index: 5; top: 52px; right: 14px; width: min(340px, calc(100% - 28px)); padding: 14px 16px; border-radius: 16px; background: rgba(38,38,40,.82); }
.info-pop p { font-size: 13px; line-height: 1.55; color: var(--dark-ink-2); }
.info-pop b { color: var(--dark-ink); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 18px 18px 16px; }
.stat-val { font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--dark-ink); font-variant-numeric: tabular-nums; --ticker-ink: var(--dark-ink); --ticker-font: var(--font-display); --ticker-size: clamp(30px, 2.6vw, 38px); }
.stat-lbl { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--dark-ink-3); }
@media (max-width: 699px) {
  .knob-num input { font-size: 38px; }
  .seg i { width: 7px; height: 24px; }
  .stat-grid { gap: 8px; }
  .stat { padding: 14px 12px 12px; border-radius: 18px; }
  .stat-lbl { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .seg i { transition: none; } }

/* Liquid Metal r5: Metallrand (Shader) + dunkle Innenfläche 2 px darüber, wie der Liquid-Metal-Button */
.cost-out .cglass:not(.info-pop) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 20px 12px 0 rgba(0,0,0,.08), 0 9px 9px 0 rgba(0,0,0,.12), 0 2px 5px 0 rgba(0,0,0,.15);
  isolation: isolate;
}
.cost-out .cglass:not(.info-pop)::after {
  content: ""; position: absolute; inset: 2px; z-index: 1; border-radius: calc(22px - 2px);
  background: linear-gradient(180deg, #202020 0%, #000 100%);
}
.cost-out .stat::after { border-radius: calc(18px - 2px); }
.lm {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
  background: conic-gradient(from 200deg, #d9d9de, #6e6e73, #f5f5f7, #8e8e93, #d9d9de);   /* statischer Silberrand ohne WebGL */
}
.lm canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; border-radius: inherit; }
.cost-out .cglass > :not(.lm):not(.info-pop) { position: relative; z-index: 2; }
.cost-out .info-pop { z-index: 6; }
.cost-out::before { opacity: .55; }
@media (min-width: 700px) { .cost-out .stat { border-radius: 22px; } .cost-out .stat::after { border-radius: 20px; } }

/* ======================================================================
   Rechner r6 (Owner 26.09.): kompakt, gleiche Balkenlängen, Zahl rechts,
   Summe frei, Kennzahlen in Liquid Glass (nach GlassEffect-Komponente)
   ====================================================================== */
.cost { align-items: start; }
.sec--dark .side-label, .calc-head { color: var(--dark-ink-3); margin: 0 0 20px; }
.cost-in .calc { gap: 22px; }
.knob-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.knob-lbl { font-size: 15px; color: var(--dark-ink-2); cursor: text; }
.knob-num { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; flex: none; cursor: text; }
.knob-num input {
  font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--dark-ink); text-align: right;
  border: 0; background: none; padding: 0; margin: 0; border-radius: 4px; caret-color: var(--brand);
}
.knob-num input:hover { border: 0; }
.knob-num input:focus { outline: none; background: none; border: 0; box-shadow: 0 1px 0 0 var(--brand); }
.knob-unit { font-size: 14px; color: var(--dark-ink-3); }
.knob-edit { width: 13px; height: 13px; margin-left: 2px; fill: none; stroke: var(--dark-ink-3); stroke-width: 1.4; stroke-linejoin: round; opacity: .55; align-self: center; transition: opacity 160ms ease, stroke 160ms ease; }
.knob-num:hover .knob-edit, .knob-num:focus-within .knob-edit { opacity: 1; stroke: var(--dark-ink); }
.seg { width: 100%; max-width: none; gap: 4px; margin-top: 10px; padding: 3px 0; }
.seg i { flex: 1 1 0; width: auto; min-width: 0; height: 22px; border-radius: 3px; }
.seg i.edge { transform: scaleY(1.18); }
.knob-hint { margin-top: 16px; }

.cost-out { gap: 0; }
.cost-out::before { inset: 20% 0 -10% 10%; opacity: .7; }
.calc-head-row { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.calc-head-row .calc-head { margin: 0; }
.calc-head-row .info-btn { margin: -8px -6px -8px 0; }
.cost-out .calc-total { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cost-out .calc-num { font-size: clamp(56px, 5.4vw, 80px); --ticker-size: clamp(56px, 5.4vw, 80px); }
.cost-out .calc-per { font-size: 15px; color: var(--dark-ink-2); }
.info-pop[hidden] { display: none; }
.info-pop { top: 34px; right: -6px; background: rgba(38,38,40,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -12px rgba(0,0,0,.6); }
.stat-grid { margin-top: 26px; }

/* Liquid Glass (Prinzip der GlassEffect-Komponente: Verzerrung + Schleier + Innenkanten-Glanz) */
.lg {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px;
  box-shadow: 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
  transition: transform 700ms cubic-bezier(.175,.885,.32,2.2);
}
.lg::before {   /* Verzerrungsschicht: Hintergrund leicht weich und gebrochen */
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); filter: url(#glass-distortion);
}
.lg::after {    /* Schleier + Innenkanten-Glanz */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255,255,255,.1);
  box-shadow: inset 2px 2px 1px 0 rgba(255,255,255,.35), inset -1px -1px 1px 1px rgba(255,255,255,.25);
}
@media (hover: hover) and (pointer: fine) { .lg:hover { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .lg { transition: none; } .lg:hover { transform: none; } }
.stat { padding: 16px 18px 14px; }
.stat-val { font-size: clamp(28px, 2.4vw, 34px); --ticker-size: clamp(28px, 2.4vw, 34px); }
.stat-lbl { color: var(--dark-ink-2); }
@media (max-width: 899px) { .cost-out { margin-top: 8px; } }
@media (max-width: 699px) {
  .knob-num input { font-size: 26px; }
  .seg i { height: 20px; }
  .stat { padding: 13px 12px 12px; border-radius: 18px; }
}

/* ======================================================================
   Rechner r7 (Owner 26.09.)
   ====================================================================== */
/* Regler: Einheit links neben der Zahl, Zahl bündig mit dem Balkenende, kein Fokus-Rot */
.knob-num { gap: 8px; }
.knob-num input:focus { box-shadow: none; background: none; }
.knob-num input { caret-color: auto; }
.knob-num input::selection { background: rgba(255,255,255,.22); }
/* Balken: feiner (40 Segmente), 2 px Lücke, außen stärker gerundet wie im Referenz-Screenshot */
.seg { gap: 2px; padding: 4px 0; }
.seg i { height: 26px; border-radius: 1.5px; }
.seg i:first-child { border-radius: 6px 1.5px 1.5px 6px; }
.seg i:last-child { border-radius: 1.5px 6px 6px 1.5px; }
.seg i.edge { transform: scaleY(1.12); }
@media (max-width: 699px) { .seg { gap: 1.5px; } .seg i { height: 24px; } }

/* Ergebnis rechtsbündig; ⓘ klein links neben der Überschrift, Tooltip beim Überfahren */
.cost-out { text-align: right; }
.calc-head-row { justify-content: flex-end; gap: 8px; margin-bottom: 18px; }
.cost-out .calc-total { align-items: flex-end; }
.tip { position: relative; display: inline-flex; }
.calc-head-row .info-btn { width: 18px; height: 18px; margin: 0; color: var(--dark-ink-3); opacity: .8; }
.calc-head-row .info-btn svg { width: 15px; height: 15px; stroke-width: 1.4; }
.calc-head-row .info-btn:hover, .calc-head-row .info-btn:focus-visible { background: none; color: var(--dark-ink); opacity: 1; }
.tip-box {
  position: absolute; z-index: 10; bottom: calc(100% + 10px); right: -12px; width: 300px; padding: 12px 14px; border-radius: 12px;
  text-align: left; font-size: 12.5px; line-height: 1.5; color: var(--dark-ink-2);
  background: rgba(38,38,40,.96); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 32px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 160ms ease, transform 180ms var(--ease-out);
}
.tip-box b { color: var(--dark-ink); font-weight: 600; }
.tip:hover .tip-box, .tip:focus-within .tip-box { opacity: 1; transform: none; }
@media (max-width: 699px) { .tip-box { width: min(280px, 80vw); } }

/* Kennzahlen zentriert */
.stat { text-align: center; }

/* Cursor-Licht im dunklen Block (ersetzt den festen Schein) */
.cost-out::before { display: none; }
#kosten { position: relative; overflow: hidden; isolation: isolate; }
#kosten > .wrap { position: relative; z-index: 1; }
.glow {
  position: absolute; z-index: 0; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity 600ms ease; will-change: transform;
  background: radial-gradient(closest-side, rgba(255,59,48,.30), rgba(255,59,48,.10) 55%, transparent);
  filter: blur(30px); animation: glow-hue 14s ease-in-out infinite alternate;
}
#kosten.glow-on .glow { opacity: 1; }
@keyframes glow-hue { from { filter: blur(30px) hue-rotate(0deg); } to { filter: blur(30px) hue-rotate(28deg); } }
/* Touch / reduzierte Bewegung: ruhiger Schein hinter den Kennzahlen */
#kosten.glow-static .glow { opacity: .8; left: auto; right: 12%; top: auto; bottom: 18%; margin: 0; width: 460px; height: 460px; animation: none; transform: none; }

/* Kopfzeile r3 (Owner 26.09.): helles Glas blendet stufenlos in dunkles Glas, je weiter die dunkle Fläche darunter liegt */
.hdr.is-scrolled, .hdr.on-dark.is-scrolled {
  background: rgba(255,255,255, calc(.58 * (1 - var(--dk, 0))));
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  transition: none;
}
.hdr.is-scrolled::before, .hdr.on-dark.is-scrolled::before { opacity: var(--dk, 0); transition: none; }
.hdr .wordmark, .hdr .hdr-nav a, .hdr-burger { transition: color 240ms ease; }

/* Kopfzeile r4: harte, mitlaufende Kante statt Überblendung – dunkles Glas nur, wo die dunkle Fläche darunter liegt */
.hdr.is-scrolled, .hdr.on-dark.is-scrolled {
  background: linear-gradient(to bottom,
    rgba(255,255,255,.58) 0, rgba(255,255,255,.58) var(--dt, 100%),
    transparent var(--dt, 100%), transparent calc(100% - var(--db, 0px)),
    rgba(255,255,255,.58) calc(100% - var(--db, 0px)));
}
.hdr.is-scrolled::before, .hdr.on-dark.is-scrolled::before {
  opacity: 1; clip-path: inset(var(--dt, 100%) 0 var(--db, 0px) 0);
}

/* ======================================================================
   Rechner r8 (Owner 26.09.): flache Karten wie „Noch jemanden einstellen?", nur dunkel;
   Summe + Beschriftung eng beieinander; rechte Spalte unten bündig; Cursor-Schein ruhiger, nur Primärrot
   ====================================================================== */
.cost { align-items: end; }
.cost-out { align-self: end; }
.cost-out .calc-total { gap: 0; }
.cost-out .calc-num { line-height: .92; }
.cost-out .calc-per { margin-top: 10px; font-size: 15px; color: var(--dark-ink-3); }
.calc-head-row { margin-bottom: 14px; }
.stat-grid { gap: 8px; margin-top: 28px; }
.sec--dark .stat {
  padding: 22px 16px 20px; border-radius: var(--radius-card); background: rgba(255,255,255,.06);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center;
}
.sec--dark .stat-val { font-size: clamp(30px, 2.6vw, 38px); --ticker-size: clamp(30px, 2.6vw, 38px); }
.sec--dark .stat-lbl { margin-top: 6px; font-size: 13px; color: var(--dark-ink-3); }
@media (max-width: 699px) { .sec--dark .stat { padding: 16px 8px 14px; border-radius: 20px; } .stat-grid { gap: 6px; } }

.glow {
  width: 380px; height: 380px; margin: -190px 0 0 -190px;
  background: radial-gradient(closest-side, rgba(255,59,48,.16), rgba(255,59,48,.05) 60%, transparent);
  filter: blur(24px); animation: none;
}
#kosten.glow-static .glow { width: 380px; height: 380px; opacity: .7; }
.knob-hint { line-height: 1.5; font-size: 13px; }

/* ======================================================================
   Rechner r9 (Owner 26.09.): Überschriften auf einer Linie, Summe optisch gekoppelt, Schein wirklich im Hintergrund
   ====================================================================== */
/* Spalten gleich hoch: Überschriften oben auf einer Linie, Ergebnis unten bündig mit dem letzten Balken */
.cost { align-items: stretch; }
.cost-out { display: flex; flex-direction: column; align-self: stretch; }
.cost-out .calc-total { margin-top: auto; }
.cost-in .calc-head { margin: 0 0 20px; line-height: 16px; }
.calc-head-row { height: 16px; margin: 0 0 20px; align-items: center; }
.calc-head-row .calc-head { line-height: 16px; }
.cost-out .calc-total { padding-top: 24px; }

/* Summe: unsichtbaren Maskenrand der Zahlen-Komponente (≈ .42 em unter der Grundlinie) ausgleichen,
   dann 14 px bis zur Beschriftung, 32 px bis zu den Karten */
.cost-out .calc-num { margin-bottom: -.42em; }
.cost-out .calc-per { margin-top: 8px; line-height: 1.4; }
.stat-grid { margin-top: 30px; }

/* Schein liegt hinter allem: Flächen darüber deckend statt halbtransparent */
.seg i { background: #373738; }
.seg i.hv { background: #5E5E60; }
.seg i.on { background: #F5F5F7; }
.seg i.edge { background: var(--brand); }
.sec--dark .stat { background: #242425; }

/* Tooltip knapp als Liste */
.tip-box { width: 248px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; }
.tip-box b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .02em; }
.tip-list { display: grid; gap: 3px; }
.tip-list span { display: block; padding-left: 12px; position: relative; }
.tip-list span::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--dark-ink-3); }

/* ======================================================================
   Rechner r10 (Owner 26.09.): Hinweiszeile raus, mobil zentriert, ganze Pixel-Lücken, Kopfzeile ohne Eckenrundung
   ====================================================================== */
@media (max-width: 699px) { .seg { gap: 2px; } }
@media (max-width: 899px) {
  .cost-in .calc-head { text-align: center; }
  .cost-out { text-align: center; }
  .calc-head-row { justify-content: center; }
  .cost-out .calc-total { align-items: center; padding-top: 0; }
  .cost-out { margin-top: 40px; }
  .tip-box { right: 50%; transform: translate(50%, 4px); }
  .tip:hover .tip-box, .tip:focus-within .tip-box { transform: translate(50%, 0); }
}
/* Kopfzeile über der dunklen Fläche: dunkles Glas über die volle Breite, ohne Rundung */
.hdr::before { inset: 0; border-radius: 0; }

/* Angebot verkleinert (Owner 26.09.): Karte bleibt unten, nur der Knopf wie im Formular; Chevron statt Kreuz */
.offer.is-min, .offer.is-min:not(.is-open) {
  padding: 12px; background: #fff; border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(29,29,31,.28);
}
.offer.is-min > :not(.offer-open) { display: none; }
.offer.is-min .offer-open, .offer.is-min:not(.is-open) .offer-open {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 0; padding: 0;
  border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; box-shadow: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.offer.is-min .offer-open:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .offer.is-min .offer-open:hover { background: #000; } }
.offer-x svg { stroke-width: 2.2; }
@media (max-width: 699px) {
  .offer.is-min, .offer.is-min:not(.is-open) { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
}

/* ======================================================================
   3 · Einstellen r2 (Owner 26.09.): Kreislauf mit sechs Stationen vs. Lernkurve, gemeinsamer „Wissen im Betrieb“-Verlauf
   ====================================================================== */
.hire-card { gap: 24px; }
.cyc { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1; margin: 8px auto 0; }
.cyc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cyc-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.cyc-arc { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke 300ms ease; }
.cyc.is-bad .cyc-arc { stroke: var(--brand); }
.cyc-sd { fill: var(--bg-subtle); stroke: var(--line-strong); stroke-width: 1.5; transition: fill 300ms ease, stroke 300ms ease; }
.cyc-sd.is-past { fill: var(--ink); stroke: var(--ink); }
.cyc-sd.is-on { fill: var(--ink); stroke: var(--ink); }
.cyc.is-bad .cyc-sd.is-on { fill: var(--brand); stroke: var(--brand); }
.cyc-head { fill: var(--ink); stroke: var(--bg-subtle); stroke-width: 3; transition: fill 300ms ease; }
.cyc.is-bad .cyc-head { fill: var(--brand); }
.cyc-st { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.cyc-st li {
  position: absolute; font-size: 13px; line-height: 1; color: var(--ink-3); white-space: nowrap; cursor: default;
  padding: 6px 4px; border-radius: 6px; transition: color 240ms ease;
}
.cyc-st li.st-c { transform: translate(-50%, -50%); }
.cyc-st li.st-r { transform: translate(0, -50%); }
.cyc-st li.st-l { transform: translate(-100%, -50%); }
.cyc-st li.is-on { color: var(--ink); font-weight: 600; }
.cyc-st li.is-bad.is-on { color: var(--brand-ink); }
.cyc-st li:focus-visible { outline: 2px solid var(--ink); }
.cyc-mid { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 6px; pointer-events: none; }
.cyc-n { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
.cyc-t { font-family: var(--font-display); font-size: 24px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); transition: color 300ms ease; }
.cyc.is-bad .cyc-t { color: var(--brand-ink); }
.cyc-d { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }

/* Gemeinsamer Verlauf „Wissen im Betrieb“ */
.kn { margin-top: auto; }
.kn-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kn-v { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-svg { display: block; width: 100%; height: 64px; margin-top: 8px; overflow: visible; }
.kn-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kn-area { fill: rgba(29,29,31,.06); }
.kn-head { fill: var(--ink); }
.hire-card:not(.hire-card--us) .kn-line { stroke: var(--ink-3); }
.hire-card:not(.hire-card--us) .kn-area { fill: rgba(255,59,48,.07); }
.kn--us .kn-area { fill: rgba(48,209,88,.12); }
.kn--us .kn-line { stroke: #1F9D45; }
.kn--us .kn-head { fill: #1F9D45; }

/* Rechts: Linie oben, darunter die Korrekturen, die dauerhaft gelernt werden */
.hire-card--us .line { margin: 12px 0 0; }
.learn { position: relative; display: grid; gap: 8px; min-height: 124px; margin-top: 8px; align-content: start; }
.fix {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  font-size: 13px; opacity: 0; transform: translateY(-8px) scale(.98);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.fix.is-in { opacity: 1; transform: none; }
.fix.is-out { opacity: 0; transform: translateY(6px); }
.fix-k { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.fix-t { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #1F9D45; opacity: 0; transition: opacity 240ms ease; }
.fix-ok .ck { position: relative; width: 18px; height: 18px; }
.fix.is-done .fix-ok { opacity: 1; }
.fix.is-done .fix-k { color: var(--ink-3); }
.fix:not(:first-child) { opacity: .55; }
@media (max-width: 699px) {
  .cyc { max-width: 290px; }
  .cyc-st li { font-size: 12px; }
  .cyc-t { font-size: 21px; }
  .fix { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .fix { transition: none; } }
@media (max-width: 699px) { .cyc { max-width: 236px; margin-top: 16px; margin-bottom: 8px; } .cyc-t { font-size: 19px; } .cyc-d { font-size: 11.5px; } .cyc-mid { width: 58%; } }

/* 3 · Einstellen r3 (Owner 26.09., Konzept nach Referenz, zurückhaltend):
   links die gewohnte Welt hell und flach, rechts digitales Personal dunkel und leicht angehoben */
.hire { align-items: stretch; }
.hire-card--us {
  background: linear-gradient(165deg, #242426 0%, #111112 55%, #050506 100%);
  color: var(--dark-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 50px -28px rgba(0,0,0,.45), 0 10px 20px -12px rgba(0,0,0,.18);
}
.hire-card--us .card-k { color: var(--dark-ink-3); }
.hire-card--us .card-t { color: var(--dark-ink); }
/* Linie auf Dunkel */
.hire-card--us .line li { color: var(--dark-ink-3); }
.hire-card--us .line.is-run li { color: var(--dark-ink); }
.hire-card--us .line-dot::before { background: rgba(255,255,255,.22); }
.hire-card--us .line.is-run li:nth-child(1) .line-dot::before, .hire-card--us .line.is-run li:nth-child(2) .line-dot::before { background: #F5F5F7; }
.hire-card--us .line-dot--end::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.hire-card--us .line-track { background: rgba(255,255,255,.16); }
.hire-card--us .line-track i { background: #F5F5F7; }
/* Korrekturen auf Dunkel */
.hire-card--us .fix { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hire-card--us .fix-t { color: var(--dark-ink); }
.hire-card--us .fix-k { color: #FF6961; }
.hire-card--us .fix.is-done .fix-k { color: var(--dark-ink-3); }
.hire-card--us .fix-ok { color: #30D158; }
/* Wissenskurve rechts: Systemgrün auf Dunkel */
.hire-card--us .kn-top { color: var(--dark-ink-3); }
.hire-card--us .kn-v { color: var(--dark-ink); }
.kn--us .kn-line { stroke: #30D158; }
.kn--us .kn-head { fill: #30D158; }
.kn--us .kn-area { fill: rgba(48,209,88,.14); }
/* Links bewusst ruhiger: Kurve und Kreis gedämpft, Rot bleibt der einzige Akzent */
.hire-card:not(.hire-card--us) .kn-v { color: var(--ink-2); }

/* ======================================================================
   3 · Einstellen r4 (Owner 26.09.): ruhiger, mehr Luft, Korrekturen als Animated List, 24/7 als Zeitstempel
   ====================================================================== */
.hire { gap: 16px; }
.hire-card { padding: clamp(32px, 3.4vw, 48px); gap: 0; min-height: 600px; }
.hire-card figcaption { gap: 12px; }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hpill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.hpill--live { color: var(--dark-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hpill--live i { width: 7px; height: 7px; border-radius: 50%; background: #30D158; box-shadow: 0 0 0 0 rgba(48,209,88,.5); animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(48,209,88,0); } }

/* Kreis: nur noch Station + Zähler, dünner, ruhiger */
.cyc { max-width: 300px; margin: 40px auto 0; }
.cyc-ring { stroke-width: 1; }
.cyc-arc { stroke-width: 1.5; }
.cyc-sd { r: 3.5; }
.cyc-st li { font-size: 12.5px; }
.cyc-mid { gap: 8px; width: 56%; }
.cyc-t { font-size: 26px; }

/* Animated List */
.alist { display: grid; gap: 10px; margin-top: 40px; min-height: 222px; align-content: start; }
.al {
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 18px; transform-origin: 50% 0;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.al-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(48,209,88,.16); }
.al-ic svg { width: 20px; height: 20px; fill: none; stroke: #30D158; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.al-b { display: grid; gap: 3px; min-width: 0; }
.al-b b { font-size: 14px; font-weight: 500; color: var(--dark-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-b span { font-size: 12.5px; color: var(--dark-ink-3); font-variant-numeric: tabular-nums; }
.al:nth-child(2) { opacity: .7; }
.al:nth-child(3) { opacity: .45; }

/* Wissenskurven: gleiche Höhe, gleiche Lage unten in beiden Karten */
.kn { margin-top: auto; padding-top: 36px; }
.kn-svg { height: 56px; }
@media (max-width: 699px) {
  .hire-card { min-height: 0; }
  .cyc { margin-top: 28px; }
  .alist { margin-top: 28px; min-height: 206px; }
  .al { padding: 12px 14px; }
  .al-b b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hpill--live i { animation: none; } }

/* Liste: feste Höhe für genau drei Einträge (68 px + 10 px Abstand), der vierte blendet innerhalb aus → Kartenhöhe bleibt konstant */
.alist { display: block; position: relative; height: calc(3 * 68px + 2 * 10px); min-height: 0; overflow: hidden; }
.alist .al { height: 68px; box-sizing: border-box; margin-bottom: 10px; }
@media (max-width: 699px) { .alist { height: calc(3 * 64px + 2 * 10px); min-height: 0; } .alist .al { height: 64px; } }

/* Wissen im Betrieb r5 (Owner 26.09., Variante B): statische Säulen gleiten, Führungspunkt bei 80 %, randlos */
.hire-card { --pad: clamp(32px, 3.4vw, 48px); padding: var(--pad); padding-bottom: 0; overflow: hidden; }
.kn { margin-top: auto; padding-top: 36px; }
.kn-ch { position: relative; height: 96px; margin: 18px calc(-1 * var(--pad)) 0; }
.kn-ch svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.kn-b { fill: #CFCFCB; }
.kn-b.is-zero { fill: #E2E2DF; }
.kn-b.is-head { fill: var(--ink); }
.kn-b.is-future { fill: #E9E9E6; }
.kn-dot { fill: var(--ink); stroke: var(--bg-subtle); stroke-width: 2.5; transition: fill 240ms ease; }
.kn-halo { fill: var(--ink); opacity: 0; }
.kn-ch.is-drop .kn-dot, .kn-ch.is-drop .kn-b.is-head { fill: var(--brand); }
/* Dunkle Karte: Grün, ältere Säulen ruhiger */
.kn--us .kn-b { fill: rgba(48,209,88,.42); }
.kn--us .kn-b.is-zero { fill: rgba(255,255,255,.10); }
.kn--us .kn-b.is-head { fill: #30D158; }
.kn--us .kn-b.is-future { fill: rgba(255,255,255,.08); }
.kn--us .kn-dot { fill: #30D158; stroke: #0b0b0c; }
.kn--us .kn-halo { fill: #30D158; transform-box: fill-box; transform-origin: center; animation: kn-halo 2.4s ease-out infinite; }
@keyframes kn-halo { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kn--us .kn-halo { animation: none; } }
@media (max-width: 699px) { .kn-ch { height: 84px; } }
@media (max-width: 699px) { .cyc { max-width: 236px; } }   /* nach r4: Handy-Kreis wieder kleiner, damit die Beschriftungen passen */

/* ======================================================================
   3 · Einstellen r6 (Owner 26.09.): Bento-Raster, Überschriften über den Karten
   Variante 1 (2 × 2): Kreislauf | Korrekturen, darunter beide Wissenskurven nebeneinander
   Variante 2: links Kreislauf + Wissen als zwei Kacheln, rechts eine hohe dunkle Karte
   ====================================================================== */
.bento {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 16px;
  grid-template-areas: "hL hR" "cyc list" "knO knN";
}
.bh--old { grid-area: hL; } .bh--new { grid-area: hR; }
.b-cyc { grid-area: cyc; } .b-kno { grid-area: knO; }
.b-list { grid-area: list; } .b-knn { grid-area: knN; }
.bh { display: grid; gap: 12px; padding: 0 4px 16px; }
.bh-t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bh .hpill--live { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }

.bc { --pad: clamp(28px, 3vw, 40px); position: relative; overflow: hidden; padding: var(--pad); border-radius: var(--radius-card); }
.bc--dark {
  background: linear-gradient(165deg, #242426 0%, #111112 60%, #070708 100%); color: var(--dark-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 44px -28px rgba(0,0,0,.45);
}
.b-cyc { display: grid; place-items: center; min-height: 420px; }
.b-cyc .cyc { margin: 0 auto; }
.b-kno, .b-knn { padding-bottom: 0; }
.bento .kn { margin: 0; padding: 0; }
.bento .kn-ch { height: 104px; margin: 22px calc(-1 * var(--pad)) 0; }
.b-list { display: flex; flex-direction: column; }
.b-list .kn-top { margin: 0; }
.b-list .alist { margin-top: auto; padding-top: 20px; }

/* Variante 1: rechte Kacheln einzeln (Wrapper ohne eigene Box) */
.bento[data-layout="1"] .b-us { display: contents; }

/* Variante 2: rechts eine hohe Karte über beide Reihen */
.bento[data-layout="2"] { grid-template-areas: "hL hR" "cyc us" "knO us"; }
.bento[data-layout="2"] .b-us {
  grid-area: us; display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden;
  background: linear-gradient(165deg, #242426 0%, #111112 60%, #070708 100%); color: var(--dark-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 44px -28px rgba(0,0,0,.45);
}
.bento[data-layout="2"] .b-us .bc--dark { background: none; box-shadow: none; border-radius: 0; }
.bento[data-layout="2"] .b-knn { margin-top: auto; }
.bento[data-layout="2"] .b-list .alist { margin-top: 28px; }

@media (max-width: 899px) {
  .bento, .bento[data-layout="2"] { grid-template-columns: 1fr; grid-template-areas: "hL" "cyc" "knO" "hR" "list" "knN"; }
  .bento[data-layout="2"] { grid-template-areas: "hL" "cyc" "knO" "hR" "us"; }
  .bh--new { padding-top: 32px; }
  .b-cyc { min-height: 0; }
}
/* Bento-Feinschliff: Liste ohne Innenabstand (feste Höhe bleibt für drei Einträge), Überschriften oben bündig */
.bento .b-list .alist { padding-top: 0; margin-top: auto; }
.bento .b-list .kn-top { margin-bottom: 24px; }
.bento .bh { align-self: start; }

/* Bento r7 (Owner 26.09., Variante 1 gewählt): Titel unten an den Kacheln, Bezeichnung + Plakette in der Kachel,
   innen aneinanderstoßende Ecken klein, Punkt ohne Puls auf der Säulenspitze */
.bento { row-gap: 6px; }
.bento .bh { align-self: end; padding: 0 4px 18px; }
.bento .bh-t { margin: 0; }
.bc-top { position: relative; z-index: 1; }
.b-cyc { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.b-cyc .cyc { margin: 28px auto 8px; }
.b-list .bc-top { margin-bottom: 24px; }
.bh .hpill--live { color: var(--dark-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bc .hpill--live { color: var(--dark-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
/* Ecken: außen wie überall (28 px), wo oben und unten aneinanderstoßen nur 10 px */
.b-cyc, .b-list { border-radius: var(--radius-card) var(--radius-card) 10px 10px; }
.b-kno, .b-knn { border-radius: 10px 10px var(--radius-card) var(--radius-card); }
.kn-halo { display: none; }
.kn--us .kn-dot { stroke: #0b0b0c; }
.kn-dot { stroke-width: 2; }
@media (max-width: 899px) {
  .bento { row-gap: 6px; }
  .bh--new { padding-top: 40px; }
}

/* Bento r8 (Owner 26.09.): getauscht – Spaltenüberschriften zentriert darüber, Aussage-Satz oben in der Kachel,
   Kreis unten angesetzt wie die Liste rechts */
.bento .bh { text-align: center; padding-bottom: 18px; }
.bc-top { align-items: flex-start; }
.bc-t { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.bc--dark .bc-t { color: var(--dark-ink); }
.bc-top .hpill { margin-top: 2px; flex: none; }
.b-cyc .cyc { margin: auto auto 0; }

/* Mitteilungen im iOS-Stil r9 (Owner 26.09.) + gleiche Maße wie der Kreis links (300 px) */
.bento .alist { height: 300px; }
.bento .alist .al { height: calc((300px - 2 * 10px) / 3); }
.al {
  grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 22px;
  background: rgba(58,58,60,.55); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.al-av { position: relative; width: 40px; height: 40px; }
.al-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.al-app {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; box-shadow: 0 0 0 2px #1c1c1e;
}
.al-app svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.al-app--mail { background: linear-gradient(#3CA0FF, #0A6CFF); }
.al-app--cal { background: linear-gradient(#FF6A5F, #FF3B30); }
.al-app--sheet { background: linear-gradient(#3FC36A, #1F9D45); }
.al-app--doc { background: linear-gradient(#5B8CFF, #2B5FE8); }
.al-app--ledger { background: linear-gradient(#A58BFF, #7A5AF0); }
.al-b { display: grid; gap: 2px; min-width: 0; }
.al-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.al-h b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--dark-ink); }
.al-h time { font-size: 13px; color: var(--dark-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-t { font-size: 14px; line-height: 1.35; color: rgba(245,245,247,.86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-ic { display: none; }
@media (max-width: 899px) {
  .bento .alist { height: calc(3 * 84px + 2 * 10px); }
  .bento .alist .al { height: 84px; }
}
/* ältere Regel „.al-b span“ (12,5 px grau) neutralisieren */
.al-b .al-t { font-size: 14px; color: rgba(245,245,247,.86); }
.al-b .al-h { font-size: inherit; color: inherit; }
.al:nth-child(2) { opacity: .82; } .al:nth-child(3) { opacity: .6; }

/* Bento r10 (Owner 26.09.): echtes 2×2 – innen überall 10 px Ecken und 6 px Fugen, außen 28 px;
   mehr Luft unter dem Titel; Mitteilungen kompakter */
.bento { column-gap: 6px; }
.b-cyc  { border-radius: var(--radius-card) 10px 10px 10px; }
.b-list { border-radius: 10px var(--radius-card) 10px 10px; }
.b-kno  { border-radius: 10px 10px 10px var(--radius-card); }
.b-knn  { border-radius: 10px 10px var(--radius-card) 10px; }
.bento .bc-top { margin-bottom: 44px; }
.bento .b-list .bc-top { margin-bottom: 44px; }
.bento .alist { height: calc(3 * 76px + 2 * 10px); }
.bento .alist .al { height: 76px; padding: 10px 14px; }
@media (max-width: 899px) {
  .bento { column-gap: 0; }
  .b-cyc, .b-list { border-radius: var(--radius-card) var(--radius-card) 10px 10px; }
  .b-kno, .b-knn { border-radius: 10px 10px var(--radius-card) var(--radius-card); }
  .bento .bc-top { margin-bottom: 32px; }
}

/* Kreislauf r11 (Owner 26.09.): Stoppuhr-Fläche vom Mittelpunkt, ohne Zähler, 7 Stationen inkl. „Ausfälle“ */
.cyc-fill { fill: rgba(29,29,31,.055); transition: fill 300ms ease; }
.cyc.is-bad .cyc-fill { fill: rgba(255,59,48,.08); }
.cyc-n { display: none; }
/* Kreis und Mitteilungen optisch bündig (Owner 26.09.): sichtbarer Kreis = 260 px (Beschriftung oben bis unten),
   Liste gleich hoch; der leere Rand unter dem Kreis (26 px) wird ausgeglichen */
@media (min-width: 900px) {
  .b-cyc .cyc { margin-bottom: -26px; }
  .bento .alist { height: 260px; }
  .bento .alist .al { height: 80px; }
}

/* Kreislauf r12 (Owner 26.09.): noch nicht erreichte Punkte hellgrau gefüllt statt umrandet; keine Hover-Wirkung */
.cyc-sd { fill: var(--line-strong); stroke: none; }
.cyc-sd.is-past, .cyc-sd.is-on { fill: var(--ink); }
.cyc.is-bad .cyc-sd.is-on { fill: var(--brand); }
.cyc-st li { cursor: default; pointer-events: none; }

/* Titel rechts: ein Teil primär, der andere sekundär (Vergleich a/b) */
.bc--dark #usTitle .t1 { color: var(--dark-ink-3); }   /* Owner: „Einmal eingelernt.“ sekundär, Nutzen primär */
.bc--dark #usTitle .t1, .bc--dark #usTitle .t2 { transition: color 200ms ease; }
/* „Wissen im Betrieb“ oben bündig mit der Prozentzahl (Versalhöhen auf einer Linie) */
.bento .kn-top { align-items: flex-start; }
.bento .kn-top > span:first-child { margin-top: 5px; }
#usTitle { max-width: none; }
#usTitle .t1, #usTitle .t2 { display: block; }

/* Summe im Rechner (Owner 26.09.): Primärfarbe, mit Minus – das ist Geld, das jedes Jahr abfließt */
.cost-out .calc-num { color: var(--brand); --ticker-ink: var(--brand); }

/* v4 Schluss: Kosten pro Monat aus dem Rechner, rot wie die Summe oben */
.final-num--eur { color: var(--brand); --ticker-ink: var(--brand); font-size: clamp(64px, 10vw, 150px); --ticker-size: clamp(64px, 10vw, 150px); }

/* Angebot (Owner 26.09. (2)): Desktop = X schließt, mobil = Chevron verkleinert zur sticky Knopf-Karte */
.offer-x .ox-ch { display: none; }
@media (max-width: 699px) { .offer-x .ox-x { display: none; } .offer-x .ox-ch { display: inline; } }
@media (min-width: 700px) { .offer.is-min { display: none; } }

/* v5: Statement unter dem Bento – Muster wie „Einmal eingelernt.“: erster Teil leise, zweiter Teil trägt */
.hire-state { max-width: 760px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; text-wrap: balance;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.02em; }
.hire-state .t1, .hire-state .t2 { display: block; }
.hire-state .t1 { color: var(--ink-3); }
.hire-state .t2 { color: var(--ink); }
/* v5: Fachwissen je Stelle, eine leise Zeile */
.person-know { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.person-know svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
@media (max-width: 699px) { .person-know { grid-column: 2; margin-top: 10px; } }
/* Labor-Umschalter (nur lokal) */
.lab-sw { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; font-size: 13px; color: var(--ink-3); }
.lab-sw > span { margin-right: 6px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.lab-sw a { padding: 6px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.lab-sw a.is-on { background: var(--ink); color: #fff; box-shadow: none; }

/* Owner 26.09.: mobil gleicher Abstand über „Digitales Personal“ wie über „Neueinstellung“ (Lead → Titel 54 px) */
@media (max-width: 899px) { .bento .bh--new { margin-top: 48px; padding-top: 0; } }

/* =====================================================================
   v5 · Personal als Stellenbeschreibung (Owner 26.09.): kompakt, Bento-Raster wie „Einstellen“
   6 px Abstand, außen 28 / innen 10 Radius; Kopf: Porträt links, Name/Stelle, 24/7 rechts
   ===================================================================== */
.staff--spec { gap: 6px; }
.staff--spec .person { display: flex; flex-direction: column; padding: 28px; border-radius: 10px; }
.staff--spec .person:nth-child(1) { border-top-left-radius: 28px; }
.staff--spec .person:nth-child(3) { border-top-right-radius: 28px; }
.staff--spec .person:nth-child(4) { border-bottom-left-radius: 28px; }
.staff--spec .person:nth-child(6) { border-bottom-right-radius: 28px; }
.p-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.staff--spec .person-face { width: 56px; height: 56px; }
.staff--spec .person-name { margin: 0; font-size: 17px; line-height: 1.25; }
.staff--spec .person-role { margin-top: 2px; font-size: 14px; }
.p-live { align-self: start; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.p-spec { margin: 24px 0 0; display: grid; gap: 12px; }
.p-spec > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.p-spec dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.p-spec dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.p-apps { display: flex; gap: 6px; align-items: center; align-self: center; }
.p-apps img { width: 22px; height: 22px; object-fit: contain; }
/* Ihre Stelle: die ganze Karte ist der Knopf zur Potenzialanalyse */
.staff--spec .person--open { padding: 0; background: var(--bg-subtle); transition: background-color 200ms ease; }
.p-open { flex: 1; display: flex; flex-direction: column; padding: 28px; color: inherit; text-decoration: none; cursor: pointer; border-radius: inherit; }
.p-open .p-head { grid-template-columns: 56px minmax(0, 1fr); }
.staff--spec .person-plus { background: #fff; color: var(--ink-2); transition: background-color 200ms ease, color 200ms ease; }
.staff--spec .person-open-t { margin-top: 24px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.p-cta { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--brand-ink, var(--brand)); }
.p-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .p-cta { color: var(--ink); transition: color 200ms ease; }
  .staff--spec .person--open:hover { background: #EDEDEB; }
  .person--open:hover .person-plus { background: var(--brand); color: #fff; }
  .person--open:hover .p-cta { color: var(--brand-ink, var(--brand)); }
  .person--open:hover .p-cta svg { transform: translateX(3px); }
}
.p-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.person--open:active .p-open { transform: scale(.99); }
/* Zwei Spalten: Ecken neu verteilen */
@media (max-width: 999px) {
  .staff--spec .person:nth-child(n) { border-radius: 10px; }
  .staff--spec .person:nth-child(1) { border-top-left-radius: 28px; }
  .staff--spec .person:nth-child(2) { border-top-right-radius: 28px; }
  .staff--spec .person:nth-child(5) { border-bottom-left-radius: 28px; }
  .staff--spec .person:nth-child(6) { border-bottom-right-radius: 28px; }
}
/* Eine Spalte: oben und unten rund, dazwischen 10 */
@media (max-width: 699px) {
  .staff--spec .person, .staff--spec .person--open { display: flex; padding: 22px 20px; }
  .staff--spec .person--open { padding: 0; }
  .p-open { padding: 22px 20px; }
  .staff--spec .person:nth-child(n) { border-radius: 10px; }
  .staff--spec .person:first-child { border-top-left-radius: 28px; border-top-right-radius: 28px; }
  .staff--spec .person:last-child { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
  .p-head { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .p-open .p-head { grid-template-columns: 48px minmax(0, 1fr); }
  .staff--spec .person-face { width: 48px; height: 48px; grid-row: auto; }
  .p-spec { margin-top: 18px; gap: 10px; }
  .p-spec > div { grid-template-columns: 80px minmax(0, 1fr); }
  .p-spec dd { font-size: 14px; }
  .staff--spec .person-open-t { margin-top: 16px; font-size: 14px; }
}

.p-jobs span { display: block; }
.p-cal { width: 22px; height: 22px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08);
  display: grid; grid-template-rows: 8px 1fr; justify-items: center; overflow: hidden; line-height: 1; font-family: var(--font-ui); }
.p-cal b { font-size: 5.5px; font-weight: 700; color: #FF3B30; padding-top: 2.5px; letter-spacing: .02em; }
.p-cal em { font-style: normal; font-size: 11px; font-weight: 500; color: #1D1D1F; margin-top: -1px; }
@media (max-width: 699px) { .p-spec > div { grid-template-columns: 94px minmax(0, 1fr); } .p-spec dt { white-space: nowrap; } }

/* =====================================================================
   v5 · Sicherheits-Plaketten im Stil von Langdock (Owner 26.09.): graphitfarbene Scheiben, feine helle Zeichen
   Eigene Zeichnungen, kein fremdes Logo; SOC 2 haben wir nicht → AVV nach Art. 28 an dieser Stelle
   ===================================================================== */
.trust--tb .tb { display: block; width: 136px; height: 136px; margin-bottom: 22px; border-radius: 50%; filter: drop-shadow(0 14px 22px rgba(29,29,31,.18)); transition: transform 400ms var(--ease-out); }
.trust--tb .tb svg { width: 100%; height: 100%; display: block; fill: none; stroke: none; font-family: var(--font-ui); }
@media (hover: hover) and (pointer: fine) { .trust--tb li:hover .tb { transform: translateY(-3px); } }
@media (max-width: 699px) { .trust--tb .tb { width: 112px; height: 112px; margin-bottom: 16px; } }

/* =====================================================================
   v5 · Footer nach Vorbild Langdock: Marke + Vertrauenszeilen links, drei Spalten rechts, Rechtliches unten
   ===================================================================== */
.foot--lg { padding: 80px 0 36px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px 32px; align-items: start; }
.foot-trust { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.foot-trust li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.foot-trust b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.foot-trust small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.ft-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ft-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-ic--dark { background: #1D1D1F; color: #fff; }
.ft-ic--eu { background: #2F55D4; color: #FFD500; }
.ft-ic--eu svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.ft-ic--grey { background: #E3E3E1; color: var(--ink); }
.foot-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--ink); }
.foot-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot-more:hover svg { transform: translateX(3px); } }
.foot-loc { display: flex; align-items: center; gap: 8px; margin-top: 40px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.foot-loc i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.foot-addr { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.foot-col { display: grid; gap: 2px; font-size: 15px; }
.foot-col h6 { margin: 0 0 10px; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.foot-col a { padding: 6px 0; color: var(--ink); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover, .foot-bottom a:hover { color: var(--ink-2); } }
.foot-bottom { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 64px; font-size: 14px; color: var(--ink-3); }
.foot-bottom nav { display: flex; gap: 20px; }
.foot-bottom a { color: var(--ink); transition: color 160ms ease; }
.foot-bottom .foot-claim { margin: 0 0 0 auto; }
@media (max-width: 999px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-grid .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 699px) {
  .foot--lg { padding: 56px 0 32px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .foot-bottom { gap: 12px 20px; margin-top: 48px; }
  .foot-bottom .foot-claim { margin: 0; width: 100%; }
}
.ft-ic--eu svg { width: 30px; height: 30px; }

/* Plaketten 1:1 nach Langdock-Vorlage (Owner 26.09.): flache Scheibe #3D3D3D, keine Schatten */
.trust--tb .tb { filter: none; }

/* =====================================================================
   v5 (Owner 26.09., ruhiger): Personal ohne 24/7 und Programme; „Ihre Stelle“ leer, beim Überfahren dunkel, ohne Rot
   ===================================================================== */
.p-head { grid-template-columns: 56px minmax(0, 1fr); }
.staff--spec .person--open { background: transparent; }
.staff--spec .person-plus { background: var(--bg-subtle); color: var(--ink-2); }
.p-cta, .person--open:hover .p-cta { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .p-cta { color: var(--ink); }
  .staff--spec .person--open:hover { background: var(--ink); }
  .person--open:hover .person-name, .person--open:hover .p-cta { color: #fff; }
  .person--open:hover .person-role, .person--open:hover .person-open-t { color: rgba(255,255,255,.66); }
  .person--open:hover .person-plus { background: rgba(255,255,255,.12); color: #fff; }
}
.person--open .person-name, .person--open .person-role, .person--open .person-open-t, .person--open .p-cta { transition: color 200ms ease; }
@media (max-width: 699px) { .p-head { grid-template-columns: 48px minmax(0, 1fr); } }

/* Überschrift: zweiter Satz sekundär */
.h2 .h-soft { color: var(--ink-3); }

/* =====================================================================
   v5 · So starten Sie: drei Karten im Bento-Raster (6 px, außen 28 / innen 10) + CTA
   ===================================================================== */
.steps--cards { gap: 6px; }
.steps--cards .steps-track { display: none; }
.steps--cards li { padding: 28px; border-radius: 10px; background: var(--bg-subtle); }
.steps--cards li:first-child { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
.steps--cards li:last-child { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.steps--cards .step-n { position: static; background: #fff; transition: background-color 400ms ease, color 400ms ease; }
.steps--cards em { margin: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; font-style: normal; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.steps--cards b { margin-top: 28px; font-size: 17px; }
.steps--cards li { padding-left: 28px; }
.steps-cta { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
@media (max-width: 699px) {
  .steps--cards { grid-template-columns: minmax(0, 1fr); }
  .steps--cards li, .steps--cards li:first-child, .steps--cards li:last-child { padding: 22px 20px; border-radius: 10px; }
  .steps--cards li:first-child { border-top-left-radius: 28px; border-top-right-radius: 28px; }
  .steps--cards li:last-child { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
  .steps--cards b { margin-top: 20px; }
}

/* =====================================================================
   v5 · Schluss mit Video: bildschirmfüllend, gespiegelt (Wand rechts), CTA rechts auf dunkler Fläche
   ===================================================================== */
.sec--video { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 96px 0; background: #0B0B0C; color: #fff; isolation: isolate; }
.sec--video::before { display: none; }
.final-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); z-index: -2; }
.final-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 70%); }
.final--video { width: 100%; align-items: flex-start; text-align: left; padding-left: max(var(--gutter), 52%); }
.final--video .chip-claim { color: rgba(255,255,255,.8); }
.final--video .final-lead { color: #fff; }
.final--video .final-num { color: var(--brand); }
.final--video .note { color: rgba(255,255,255,.7); }
.final--video .final-cta { align-items: flex-start; }
.final--video .micro { color: rgba(255,255,255,.6); }
@media (max-width: 809px) {
  .sec--video { align-items: flex-end; padding: 120px 0 56px; }
  .final-shade { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 75%); }
  .final--video { padding-left: var(--gutter); }
}
/* Schluss mit Video: Claim-Chip als dunkles Glas, Zahl passend zur rechten Spalte */
.final--video .chip-claim { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.final--video .final-num, .final--video .final-num--eur { font-size: clamp(56px, 7vw, 112px); --ticker-size: clamp(56px, 7vw, 112px); }

/* Personal (Owner 26.09.): kurze Vorstellung in Ich-Form, Fachwissen als ruhige Chips unten */
.p-intro { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.p-chips { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.p-chips em { margin-right: 4px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.p-chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 699px) { .p-intro { margin-top: 16px; font-size: 14.5px; } .p-chips { padding-top: 16px; } }

/* =====================================================================
   v5 · Beweis nach Vorbild sanalabs.com: Kennzahlen in Spalten mit Haarlinien, darunter Zitat-Karussell
   ===================================================================== */
.sec--proof2 .sec-head { margin-bottom: 0; }
.pstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 64px 0 0; padding: 0; list-style: none; }
.pstats li { display: flex; flex-direction: column; padding: 4px 28px 6px; border-left: 1px solid var(--line); }
.pstats li:first-child { border-left: 0; padding-left: 0; }
.ps-k { font-size: 15px; font-weight: 500; color: var(--ink); }
.ps-n { margin-top: 28px; font-family: var(--font-display); font-size: clamp(48px, 4.6vw, 68px); line-height: 1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; --ticker-font: var(--font-display); --ticker-size: clamp(48px, 4.6vw, 68px); }
.ps-l { margin-top: 16px; font-size: 16px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }

.pq { margin-top: 72px; }
.pq-track { display: flex; gap: 16px; margin: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(var(--gutter), calc((100vw - var(--content-w)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--content-w)) / 2)); }
.pq-track::-webkit-scrollbar { display: none; }
.pq-card { position: relative; flex: 0 0 clamp(280px, 30vw, 420px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; padding: 30px 30px 28px; isolation: isolate; background: #2A2A2C; color: #fff; }
.pq-card:nth-child(1) { background: #1F2320; } .pq-card:nth-child(2) { background: #E9E7E3; } .pq-card:nth-child(3) { background: #2B3036; }
.pq-card:nth-child(4) { background: #3A3733; } .pq-card:nth-child(5) { background: #232325; }
.pq-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pq-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 60%, rgba(0,0,0,.38) 100%); }
.pq--light { color: var(--ink); }
.pq--light::after { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 62%, rgba(255,255,255,.55) 100%); }
.pq-q { margin: 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.42; letter-spacing: -.01em; font-weight: 400; text-wrap: pretty; }
.pq-who { display: grid; gap: 2px; font-size: 15px; line-height: 1.35; }
.pq-who span { opacity: .72; }
.pq-who b { font-weight: 500; }
/* Fortschritt: aktiver Punkt wird zur Linie, die sich über 6 s füllt; daneben Pause */
.pq-ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 36px; }
.pq-dots { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--bg-subtle); }
.pq-dot { position: relative; width: 8px; height: 8px; padding: 0; border-radius: 999px; background: #D2D2D0; overflow: hidden; cursor: pointer; transition: width 360ms var(--ease-out), background-color 200ms ease; }
.pq-dot.is-on { width: 56px; background: #D2D2D0; }
.pq-dot i { position: absolute; inset: 0; background: var(--ink); border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; }
.pq-dot.is-on i { transform: scaleX(1); }
.pq-pause { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-subtle); color: var(--ink); cursor: pointer; transition: background-color 160ms ease; }
.pq-pause svg { width: 16px; height: 16px; fill: currentColor; }
.pq-ic-play, .pq.is-paused .pq-ic-pause { display: none; }
.pq.is-paused .pq-ic-play { display: block; }
@media (hover: hover) and (pointer: fine) { .pq-pause:hover, .pq-dots:hover { background: #EDEDEB; } }
.pq-dot:focus-visible, .pq-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sec--proof2 .proof-note { margin-top: 28px; text-align: center; }
@media (max-width: 999px) {
  .pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .pstats li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 699px) {
  .pstats { margin-top: 44px; }
  .pstats li { padding: 0 0 0 16px; }
  .pstats li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ps-n { margin-top: 16px; }
  .ps-l { font-size: 14.5px; }
  .pq { margin-top: 48px; }
  .pq-card { flex-basis: 80vw; padding: 24px 22px 22px; border-radius: 24px; }
  .pq-q { font-size: 17px; }
}

/* =====================================================================
   v5 · Kennzahlen als Karten im Bento-Raster (wie Personal): 6 px, außen 28 / innen 10, Branche zentriert darunter
   ===================================================================== */
.pstats--cards { gap: 6px; margin-top: 56px; }
.pstats--cards li, .pstats--cards li:first-child { padding: 0; border: 0; display: flex; flex-direction: column; }
.ps-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px 30px; border-radius: 10px; background: var(--bg-subtle); }
.pstats--cards li:first-child .ps-card { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
.pstats--cards li:last-child .ps-card { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }
.pstats--cards .ps-n { margin: 0; }
.ps-n small { margin-left: .3em; font-size: .64em; letter-spacing: -.02em; color: var(--ink-2); }
.pstats--cards .ps-l { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.pstats--cards .ps-k { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.pq-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; scroll-behavior: auto; }
@media (hover: hover) and (pointer: fine) { .pq-track { cursor: grab; } }
.pq-img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 999px) {
  .pstats--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .pstats--cards li:nth-child(3), .pstats--cards li:nth-child(n) { border-left: 0; padding-left: 0; }
  .pstats--cards li .ps-card { border-radius: 10px; }
  .pstats--cards li:nth-child(1) .ps-card { border-top-left-radius: 28px; }
  .pstats--cards li:nth-child(2) .ps-card { border-top-right-radius: 28px; }
  .pstats--cards li:nth-child(3) .ps-card { border-bottom-left-radius: 28px; }
  .pstats--cards li:nth-child(4) .ps-card { border-bottom-right-radius: 28px; }
}
@media (max-width: 699px) {
  .pstats--cards { margin-top: 40px; column-gap: 6px; row-gap: 16px; }
  .ps-card { padding: 26px 12px 22px; }
  .pstats--cards .ps-l { font-size: 13.5px; }
  .pstats--cards .ps-k { margin-top: 10px; font-size: 12px; }
}

/* =====================================================================
   v5 · Footer dunkel und schlicht (Owner 26.09.): Marke + Claim, drei Vertrauenszeilen, drei Spalten, nur © unten
   ===================================================================== */
.foot--dark { background: #0B0B0C; color: var(--dark-ink); padding: 72px 0 32px; border-top: 1px solid rgba(255,255,255,.06); }
.foot--dark .wordmark { color: #fff; }
.foot--dark .brand-mark { filter: invert(1) brightness(1.1); }
.foot--dark .foot-claim { margin: 12px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.foot--dark .foot-trust { margin-top: 36px; gap: 14px; }
.foot--dark .foot-trust li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.foot--dark .ft-ic { width: 36px; height: 36px; }
.foot--dark .ft-ic svg { width: 18px; height: 18px; }
.foot--dark .ft-ic--eu svg { width: 24px; height: 24px; }
.foot--dark .ft-ic--dark, .foot--dark .ft-ic--grey { background: rgba(255,255,255,.08); color: #fff; }
.foot--dark .foot-trust b { font-size: 14px; color: #fff; }
.foot--dark .foot-trust small { font-size: 13px; color: rgba(255,255,255,.5); }
.foot--dark .foot-col h6 { color: rgba(255,255,255,.45); font-size: 13px; }
.foot--dark .foot-col a { color: rgba(255,255,255,.86); font-size: 14.5px; }
@media (hover: hover) and (pointer: fine) { .foot--dark .foot-col a:hover { color: #fff; } }
.foot--dark .foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: rgba(255,255,255,.45); }

/* „Grow back time.“ im Schluss: Liquid Glass */
.final--video .chip-claim { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 26px -10px rgba(0,0,0,.55); }
.final--video .chip-claim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); mix-blend-mode: screen; }
/* Trennlinie unten nur so breit wie der Inhalt */
.foot--dark .foot-bottom { border-top: 0; padding-top: 0; }
.foot--dark .foot-bottom p { width: 100%; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }

/* =====================================================================
   v5 (Owner 26.09., mehr Luft): Personal-Karten atmen; „Ihre Stelle“ – Hover auf dem Link selbst, alles im selben Takt
   ===================================================================== */
.staff--spec { gap: 8px; }
.staff--spec .person { padding: 36px 36px 32px; }
.p-head { gap: 16px; }
.p-intro { margin-top: 28px; line-height: 1.55; }
.p-chips { padding-top: 28px; }
.staff--spec .person--open { padding: 0; background: transparent !important; }
.p-open { padding: 36px 36px 32px; transition: background-color 220ms var(--ease-out); }
.p-open .person-name, .p-open .person-role, .p-open .person-open-t, .p-open .p-cta, .p-open .person-plus { transition: color 220ms var(--ease-out), background-color 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .staff--spec .person--open:hover { background: transparent !important; }
  .person--open:hover .p-open { background: var(--ink); }
}
@media (max-width: 699px) {
  .staff--spec .person, .p-open { padding: 26px 22px 24px; }
  .p-intro { margin-top: 18px; }
  .p-chips { padding-top: 18px; }
}

/* =====================================================================
   v5 · Schluss positiv: Avatare, „Stellen Sie Ihr digitales Personal ein.“, +Std. zurück; nahtlos in den Footer
   ===================================================================== */
.final-faces { display: flex; align-items: center; margin: 0; }
.final-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-left: -10px; box-shadow: 0 0 0 2.5px #0B0B0C; background: #222; }
.final-faces img:first-child { margin-left: 0; }
.final-faces span { margin-left: 14px; font-size: 14px; color: rgba(255,255,255,.66); }
.final--video .final-lead { margin-top: 24px; font-size: clamp(30px, 3.2vw, 46px); }
.final--video .final-num--hrs { margin-top: 18px; color: #fff; --ticker-ink: #fff; font-size: clamp(56px, 6.4vw, 104px); --ticker-size: clamp(56px, 6.4vw, 104px); }
.final-num--hrs .nt__label { color: rgba(255,255,255,.6); }
.final--video .note { margin-top: 14px; max-width: 420px; }
.final-video { transform-origin: 50% 40%; will-change: transform; }
.final--video { will-change: transform, opacity; }
/* nahtlos: unten läuft das Bild ins Footer-Schwarz aus, keine Kante */
.final-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 28%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,12,0), #0B0B0C 92%); }
.foot--dark { border-top: 0; margin-top: -1px; }
@media (max-width: 809px) { .final-faces img { width: 38px; height: 38px; } .final-faces span { display: none; } }

/* =====================================================================
   v5 · Sicherheit nach Karten-Prinzip (Owner 26.09.): vier dunkle Karten wie im Einstellen-Bento, 6 px, außen 28 / innen 10
   ===================================================================== */
.trust--tb { gap: 6px; margin-top: 8px; }
.trust--tb li { padding: 40px 28px 36px; border-radius: 10px; color: var(--dark-ink);
  background: linear-gradient(165deg, #242426 0%, #111112 60%, #070708 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 44px -28px rgba(0,0,0,.45); }
.trust--tb li:first-child { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
.trust--tb li:last-child { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }
.trust--tb .tb { width: 120px; height: 120px; margin-bottom: 26px; }
.trust--tb b { color: #fff; }
.trust--tb li > span:not(.tb) { color: var(--dark-ink-3); font-size: 14.5px; }
@media (max-width: 999px) {
  .trust--tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust--tb li:nth-child(n) { border-radius: 10px; }
  .trust--tb li:nth-child(1) { border-top-left-radius: 28px; } .trust--tb li:nth-child(2) { border-top-right-radius: 28px; }
  .trust--tb li:nth-child(3) { border-bottom-left-radius: 28px; } .trust--tb li:nth-child(4) { border-bottom-right-radius: 28px; }
}
@media (max-width: 699px) {
  .trust--tb { gap: 6px; }
  .trust--tb li { padding: 28px 14px 24px; }
  .trust--tb .tb { width: 88px; height: 88px; margin-bottom: 18px; }
  .trust--tb b { font-size: 14px; }
  .trust--tb li > span:not(.tb) { font-size: 12.5px; }
}
.final--video .final-lead { font-size: clamp(28px, 2.7vw, 40px); max-width: 560px; text-wrap: balance; }
.final--video .note { max-width: 460px; text-wrap: balance; }

/* CTAs auf dunklem Grund: weiß mit dunkler Schrift */
.hdr.on-dark .hdr-cta, .sec--dark .btn, .sec--video .btn { background: #fff; color: #1D1D1F; }
@media (hover: hover) and (pointer: fine) { .hdr.on-dark .hdr-cta:hover, .sec--dark .btn:hover, .sec--video .btn:hover { background: #E8E8ED; } }
.hdr-cta { transition: background-color 240ms ease, color 240ms ease, transform 160ms var(--ease-out); }

/* =====================================================================
   v5 · Schluss aufgeräumt (Owner 26.09.): breitere Textspalte, klare Abfolge
   Avatare → Überschrift (2 Zeilen) → Stunden-Zeile mit Erklärung daneben → CTA
   ===================================================================== */
.final--video { padding-left: max(var(--gutter), 46%); }
.final--video .final-faces { margin-bottom: 4px; }
.final--video .final-lead { margin-top: 28px; max-width: 620px; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.final-gain { display: flex; align-items: center; gap: 24px; margin-top: 36px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); max-width: 620px; width: 100%; }
.final-gain .final-num--hrs { margin: 0; font-size: clamp(48px, 4.6vw, 76px); --ticker-size: clamp(48px, 4.6vw, 76px); color: #fff; --ticker-ink: #fff; flex: none; }
.final-gain-t { margin: 0; max-width: 250px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.7); text-wrap: pretty; }
.final--video .final-cta { margin-top: 36px; }
@media (max-width: 809px) {
  .final--video { padding-left: var(--gutter); }
  .final--video .final-lead { font-size: clamp(30px, 8vw, 40px); margin-top: 20px; }
  .final-gain { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; padding: 16px 0; }
  .final-gain-t { max-width: none; font-size: 14px; }
  .final--video .final-cta { margin-top: 28px; }
}

/* ---------- QA-Befunde Beweis-Section (unabhängige Prüfung 26.09.) ---------- */
.pstats--cards .ps-card { flex: 1; }                                   /* gleich hohe Karten, Branchen auf einer Linie */
.pq-who span { opacity: 1; color: rgba(255,255,255,.85); }             /* Kontrast Rolle */
.pq--light .pq-who span { color: rgba(29,29,31,.72); }
.pq-card::after { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 58%, rgba(0,0,0,.6) 100%); }
.pq--light::after { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 62%, rgba(255,255,255,.62) 100%); }
.pq-q { margin-bottom: 24px; }
@media (min-width: 700px) and (max-width: 1099px) { .pq-card { flex-basis: clamp(300px, 36vw, 420px); } }
/* Punkte: 8 px sichtbar, 24 px Trefferfläche */
.pq-dot { height: 24px; background: none; overflow: visible; }
.pq-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: 999px; background: #D2D2D0; }
.pq-dot i { top: 8px; bottom: auto; height: 8px; left: 0; right: 0; }
.pq-dot.is-on { background: none; }
.pq-dot[hidden] { display: none; }
.pq-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 28px; }
@media (max-width: 399px) { .pstats--cards .ps-n { font-size: 40px; --ticker-size: 40px; } }
/* Klassische Scrollleisten (Windows): Karten exakt an der Inhaltskante */
.pq-track { padding: 0 max(var(--gutter), calc((100vw - var(--sbw, 0px) - var(--content-w)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--sbw, 0px) - var(--content-w)) / 2)); }

/* =====================================================================
   v5 · So starten Sie als Roadmap-Karte (Owner 26.09., Layout nach Vorlage „Roadmap“):
   eine große Karte, Etikett oben links, darunter Schritt-Pills, durchgehende Linie mit Ring-Punkten und Pfeil, Titel + Dauer, Text
   ===================================================================== */
.road { position: relative; padding: 36px 44px 56px; border-radius: var(--radius-card); background: var(--bg-subtle); }
.road-tag, .road-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); background: #fff; box-shadow: 0 1px 2px rgba(29,29,31,.06), inset 0 0 0 1px var(--line); white-space: nowrap; }
.road-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 96px 0 0; padding: 0; list-style: none; }
.road-list li { display: flex; flex-direction: column; align-items: flex-start; }
.road-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 22px 0 0; border-radius: 50%; background: var(--bg-subtle); box-shadow: inset 0 0 0 1.5px #B9B9B6; }
.road-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #B9B9B6; transition: background-color 400ms ease; }
.road-list b { margin-top: 24px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.road-list b em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.road-list p { margin: 10px 0 0; max-width: 320px; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* Linie auf Höhe der Punkte (Pill 32 + 22 Abstand + 7 = Mitte), vom ersten Punkt bis zum Pfeil rechts */
.road-line { position: absolute; left: 7px; right: 0; top: 61px; height: 1px; background: #CFCFCC; transform-origin: 0 50%; }
.road-line::after { content: ""; position: absolute; right: -1px; top: -3.5px; border-left: 7px solid #B9B9B6; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.road-line i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.steps.is-run .road-line i, .road.is-run .road-line i { transform: scaleX(1); transition: transform 1800ms var(--ease-in-out) 200ms; }
.road.is-run li .road-dot::after { background: var(--ink); transition-delay: calc(200ms + var(--k) * 700ms); }
.road.is-run li .road-dot { box-shadow: inset 0 0 0 1.5px var(--ink); transition: box-shadow 400ms ease calc(200ms + var(--k) * 700ms); }
@media (prefers-reduced-motion: reduce) { .road-line i { transform: scaleX(1); } .road-dot::after { background: var(--ink); } }
@media (max-width: 899px) {
  .road { padding: 28px 24px 36px; }
  .road-list { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 44px; padding-left: 30px; }
  .road-list li { position: relative; }
  .road-dot { position: absolute; left: -30px; top: 9px; margin: 0; }
  .road-list b { margin-top: 14px; }
  .road-line { left: 7px; right: auto; top: 16px; bottom: 16px; width: 1px; height: auto; }
  .road-line::after { display: none; }
  .road-line i { transform: scaleY(0); transform-origin: 50% 0; }
  .road.is-run .road-line i { transform: scaleY(1); }
}

/* Footer (Owner 26.09.): ohne Bildmarke, Claim direkt unter dem Schriftzug, unten ohne Linie, © zentriert */
.foot--dark .foot-claim { margin-top: 6px; }
.foot--dark .foot-bottom { justify-content: center; }
.foot--dark .foot-bottom p { width: auto; padding-top: 0; border-top: 0; text-align: center; }

/* =====================================================================
   v5 · Drei Schritte, schlicht (Owner 26.09.): keine Karte, Linie oben mit Punkten,
   Eyebrow „Schritt n“, Titel in der Display-Schrift, Dauer als Pill, kurzer Text – wie Bento-Titel und Pills der Seite
   ===================================================================== */
.road--clean { padding: 0; background: none; border-radius: 0; margin-top: 8px; }
.road--clean .road-list { margin: 0; gap: 48px; }
.road--clean .road-list li { position: relative; padding-top: 34px; }
.road--clean .road-dot { position: absolute; left: 0; top: 0; margin: 0; width: 12px; height: 12px; background: var(--bg, #fff); box-shadow: inset 0 0 0 1.5px #C4C4C1; }
.road--clean .road-dot::after { inset: 3px; }
.road--clean .road-line { top: 5.5px; left: 6px; right: 0; background: var(--line); }
.road--clean .road-line::after { border-left-color: #C4C4C1; }
.road-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.road-t { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.road-d { margin-top: 14px; }
.road--clean p { margin: 16px 0 0; max-width: 300px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.road--clean.is-run .road-line i { transition-duration: 1600ms; }
.steps-cta { margin-top: 56px; }
@media (max-width: 899px) {
  .road--clean .road-list { padding-left: 32px; gap: 40px; }
  .road--clean .road-list li { padding-top: 0; }
  .road--clean .road-dot { left: -32px; top: 3px; }
  .road--clean .road-line { left: 6px; top: 9px; bottom: 30px; width: 1px; height: auto; right: auto; }
  .road-t { margin-top: 10px; font-size: 26px; }
}
/* Footer: Vertrauen in drei ruhigen Zeilen */
.foot-trust--min { gap: 12px !important; margin-top: 32px !important; }
.foot-trust--min li { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 12px !important; font-size: 14px; color: rgba(255,255,255,.72); }
.foot-trust--min .ft-ic { width: 30px; height: 30px; }
.foot-trust--min .ft-ic svg { width: 15px; height: 15px; }
.foot-trust--min .ft-ic--eu svg { width: 20px; height: 20px; }
.road-list .road-t { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 899px) { .road-list .road-t { margin-top: 10px; font-size: 26px; } }
.foot-trust--min li span:last-child { white-space: nowrap; }

/* Dauer-Pill in die Eyebrow-Zeile: spart eine Zeile */
.road-top { display: flex; align-items: center; gap: 12px; }
.road-top .road-d { margin: 0; }

/* =====================================================================
   v5 · Navigation (Best Practice): Reihenfolge wie die Seite, 5 Punkte, aktiver Abschnitt markiert, weiches Springen
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.hdr-nav a { position: relative; }
.hdr-nav a.is-active { color: var(--ink); }
.hdr-nav a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(.4); transition: opacity 220ms ease, transform 220ms var(--ease-out); }
.hdr-nav a.is-active::after { opacity: 1; transform: none; }
.hdr.on-dark .hdr-nav a.is-active { color: var(--dark-ink); }
.mnav a.is-active { color: var(--ink); font-weight: 600; }
@media (max-width: 1099px) and (min-width: 900px) { .hdr-nav { gap: 22px; } }
@media (min-width: 900px) and (max-width: 1023px) { .hdr-nav a[href="#ablauf"] { display: none; } }

/* =====================================================================
   v5 · Mobil (Owner 26.09.): Überschriften links, „Ihre Stelle“ dunkel, Kennzahlen als geschlossener Block,
   feste CTA-Leiste unten statt Angebotskarte. Desktop bleibt unverändert.
   ===================================================================== */
.mcta { display: none; }
@media (max-width: 699px) {
  /* Überschriften + Einleitungen linksbündig (das Statement unter dem Bento bleibt zentriert) */
  .sec-head { align-items: flex-start; text-align: left; margin-left: 0; margin-right: 0; }
  .sec--proof .eyebrow { text-align: left; }
  .copy { align-items: flex-start; text-align: left; }
  .bento .bh { text-align: left; }
  /* „Ihre Stelle“ immer dunkel */
  .staff--spec .person--open .p-open { background: var(--ink); }
  .person--open .person-name, .person--open .p-cta { color: #fff; }
  .person--open .person-role, .person--open .person-open-t { color: rgba(255,255,255,.66); }
  .staff--spec .person--open .person-plus { background: rgba(255,255,255,.12); color: #fff; }
  .staff--spec .person--open { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
  /* feste CTA-Leiste, bündig am unteren Rand */
  .mcta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
  .mcta-btn { display: flex; width: 100%; height: 50px; font-size: 16px; }
  .offer { display: none !important; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* Kennzahlen 2 × 2: obere Branchen über, untere unter den Karten → ein geschlossener Block mit 6 px Fugen */
@media (max-width: 999px) {
  .pstats--cards { row-gap: 6px; }
  .pstats--cards li:nth-child(-n+2) { flex-direction: column-reverse; }
  .pstats--cards li:nth-child(-n+2) .ps-k { margin: 0 0 10px; }
  .pstats--cards li:nth-child(n+3) .ps-k { margin: 10px 0 0; }
}
@media (max-width: 699px) {
  .staff--spec .person.person--open { padding: 0; }
  .cost-in .calc-head { text-align: left; }
}