/* ==========================================================================
   RichtIQ – Ergänzungen zum Designsystem (style.css)
   E-Rechnungs-Demo, Formate-Vorschau, Zeitleiste, FAQ, Rechtsseiten
   ========================================================================== */

/* ---------- Hero-Screen: animierte Rechnung ---------- */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); min-width: 300px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); font-size: 13px; font-weight: 600; }
.seg span { position: relative; z-index: 1; text-align: center; padding: 7px 10px; color: var(--muted-dark); transition: color .3s; }
.seg span.on { color: #fff; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 8px; background: var(--iq-grad); box-shadow: 0 8px 20px -8px rgba(168,54,253,.8); transform: translateX(100%); transition: transform .5s var(--ease); }

.scr-panel h5.d-gap { margin-top: 22px; }
.d-input { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); font-size: 14px; transition: border-color .25s, box-shadow .25s; }
.d-input svg { color: var(--muted-dark); flex: none; }
.d-input.focus { border-color: var(--iq-3); box-shadow: 0 0 0 3px rgba(168,54,253,.22); }
.d-input .caret, .qd-prompt .caret { display: inline-block; width: 2px; height: 1em; background: var(--iq-1); margin-left: -6px; opacity: 0; }
.d-input.focus .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.qd-prompt .caret { opacity: 1; margin-left: 2px; }

.d-pos { font-size: 13.5px; }
.pos { display: grid; grid-template-columns: 1fr 64px 92px; gap: 10px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--line-dark); color: #d8d8de; transition: opacity .35s, transform .35s var(--ease); }
.pos > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos span:nth-child(2) { color: var(--muted-dark); font-size: 12.5px; transition: opacity .3s; }
.pos b { text-align: right; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .3s; }
.pos.hide { opacity: 0; transform: translateY(6px); }
.pos.hide-val span:nth-child(2), .pos.hide-val b { opacity: 0; }
.pos-add { display: flex; align-items: center; gap: 6px; padding-top: 12px; font-size: 12.5px; color: var(--muted-dark); }

.d-side { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.d-sum { font-size: 13.5px; }
.d-sum div { display: flex; justify-content: space-between; padding: 5px 0; color: #d8d8de; }
.d-sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
.d-sum .total { margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; align-items: center; }
.d-sum .total b { font-size: 19px; background: var(--iq-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d-hint { margin-top: 14px; transition: opacity .4s, transform .4s var(--ease); }
.d-hint.off { opacity: 0; transform: translateY(6px); }
.d-send { margin-top: auto; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; cursor: default; transition: transform .15s, background .2s, color .2s; }
.d-side .d-send { margin-top: 18px; }
.d-send.press { transform: scale(.96); background: var(--iq-3); color: #fff; }

.d-done { position: absolute; inset: 0; z-index: 3; border-radius: 14px; background: #141418; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.d-done.show { opacity: 1; }
.done-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--iq-grad); color: #fff; box-shadow: var(--iq-glow); transform: scale(.4); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-done.show .done-ic { transform: scale(1); }
.d-done > b { margin-top: 16px; font-size: 17px; letter-spacing: -.02em; }
.d-done ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: #d8d8de; text-align: left; }
.d-done li { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); }
.d-done li svg { color: #3ddc84; }
.d-done.show li { opacity: 1; transform: none; }
.d-done.show li:nth-child(1) { transition-delay: .25s; }
.d-done.show li:nth-child(2) { transition-delay: .45s; }
.d-done.show li:nth-child(3) { transition-delay: .65s; }
.done-time { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted-dark); }
.done-time b { color: #fff; font-weight: 500; }

/* ---------- So geht's ---------- */
.feat-lead { margin-top: 20px; font-size: 1.05rem; }
.qd-lines.cust .qd-line { grid-template-columns: 46px 1fr auto; }
.qd-line small { display: block; font-size: 11.5px; color: var(--muted-dark); margin-top: 2px; }
.qd-line.hl { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; background: rgba(168,54,253,.16); box-shadow: inset 0 0 0 1px rgba(214,106,252,.45); }
.qd-lines.cust .qd-line b { font-size: 11.5px; font-weight: 500; font-family: var(--font-mono); color: var(--iq-1); }

/* ---------- Formate (dunkle Sektion) ---------- */
.fmt-list li { cursor: pointer; transition: opacity .3s; opacity: .5; outline: none; }
.fmt-list li:hover, .fmt-list li:focus-visible { opacity: .8; }
.fmt-list li.on { opacity: 1; }
.fmt-list li.rv:not(.in) { opacity: 0; }
.fmt-list b small { font-weight: 400; font-size: 13px; color: var(--muted-dark); margin-left: 6px; }
.fmt-list em { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: var(--iq-1); margin: 2px 0 4px; }
.fmt-list li.on .n { color: #fff; }

.fmt-stage { position: relative; flex: 1; min-height: 430px; margin: 20px 0 16px; }
.paper, .xml { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; max-width: 420px; border-radius: 16px; transition: transform .6s var(--ease), opacity .45s; }
.paper { z-index: 2; background: #fff; color: var(--ink); padding: 26px 26px 22px; font-size: 13.5px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.paper-head b { font-size: 15px; }
.paper-head small { display: block; color: var(--muted); font-size: 12px; }
.paper-head img { width: 42px; height: auto; }
.paper-to { margin-top: 22px; }
.paper-to small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.paper-to span { font-weight: 600; }
.paper-title { margin-top: 18px; font-weight: 800; font-size: 19px; letter-spacing: -.025em; }
.paper-title span { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.paper-lines { margin-top: 12px; border-top: 1px solid var(--line); }
.paper-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.paper-lines b, .paper-sum b { font-variant-numeric: tabular-nums; }
.paper-sum { display: flex; justify-content: space-between; margin-top: 12px; font-weight: 700; }
.paper-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 7px 12px; border-radius: 999px; background: var(--iq-soft); color: var(--iq-deep); font-size: 12.5px; font-weight: 600; transition: opacity .3s, transform .3s var(--ease); }
.paper-badge.off { opacity: 0; transform: translateY(4px); }
.xml { z-index: 1; margin: 0; background: #1a1a20; border: 1px solid var(--line-dark); color: #d8d8de; padding: 22px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.8; white-space: pre; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); opacity: 0; }
.xml .t { color: #c69bff; }
.xml .v { color: #fff; background: rgba(168,54,253,.35); border-radius: 3px; padding: 0 2px; }
.fmt-stage[data-fmt="zugferd"] .paper { transform: translate(-12px, -4px); }
.fmt-stage[data-fmt="zugferd"] .xml { opacity: 1; transform: translate(34px, 40px) rotate(3deg) scale(.92); }
.fmt-stage[data-fmt="xr"] .paper { opacity: 0; transform: translate(-30px, 20px) rotate(-3deg) scale(.92); }
.fmt-stage[data-fmt="xr"] .xml { opacity: 1; transform: none; z-index: 3; }
.fmt-stage[data-fmt="pdf"] .xml { opacity: 0; transform: translateY(20px) scale(.9); }
.fmt-sugg { margin: 0; justify-content: center; }
.fmt-sugg button { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--muted-dark); transition: all .25s; }
.fmt-sugg button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.fmt-sugg button.on { background: var(--iq-grad); border-color: transparent; color: #fff; }

/* ---------- Zeitleiste (3 Schritte) ---------- */
.flow-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.flow-3 .step p { max-width: 32ch; }
#pflicht .foot-note { margin-top: 48px; font-size: 13px; }

/* ---------- Alles dabei ---------- */
.extras { margin-top: 64px; }
.extras div { background: #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.extras div:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(120,30,200,.35); }

/* ---------- Fragen ---------- */
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.faq-grid .lead { margin-top: 22px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2) center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .35s var(--ease), background-color .25s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--iq-soft); }
.faq details p { margin: 0; padding: 0 56px 24px 0; color: var(--muted); }
.faq details[open] p { animation: fadeUp .4s var(--ease); }

/* ---------- Rechtliche Seiten ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; padding: 170px 0 80px; }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; bottom: -60%; width: 70%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, rgba(168,54,253,.4), transparent); }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(60% 80% at 80% 100%, #000, transparent); -webkit-mask-image: radial-gradient(60% 80% at 80% 100%, #000, transparent); }
.page-hero .wrap, .legal .wrap { max-width: 860px; }
.crumb { font-size: 13.5px; color: var(--muted-dark); margin: 0 0 18px; }
.crumb a { color: var(--iq-1); }
.page-hero h1 { margin: 16px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.page-hero .lead { margin-top: 18px; color: var(--muted-dark); }
.legal { padding: 80px 0 120px; }
.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 26px 30px; margin-bottom: 56px; }
.toc .eyebrow { margin-bottom: 14px; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 36px; font-size: 15px; }
.toc li { break-inside: avoid; margin-bottom: 7px; }
.toc a:hover { color: var(--iq-deep); }
.legal section { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.legal section:first-of-type { border-top: 0; padding-top: 0; }
.legal h2 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); letter-spacing: -.03em; line-height: 1.15; }
.legal h3 { margin: 24px 0 8px; font-size: 17px; letter-spacing: -.01em; }
.legal p, .legal li { color: #44444d; }
.legal p { margin: 0; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 12px 0; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--iq-3); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--iq-deep); text-decoration: underline; text-decoration-color: rgba(124,31,224,.3); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: currentColor; }
.address { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.address > div { border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px 26px; }
.address .eyebrow { margin-bottom: 12px; }
.address p { color: var(--ink); }
.box { border: 1px solid var(--line); border-left: 3px solid var(--iq-3); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--paper-2); padding: 16px 20px; margin: 14px 0; }
.box .eyebrow { font-size: 11px; margin-bottom: 6px; }
.box p { font-size: 15px; }
.stand { margin-top: 32px !important; font-size: 13.5px; color: var(--muted) !important; }
.footer.slim { padding-top: 70px; }
.footer.slim .f-mega { margin-top: 50px; }

.scr-body { min-height: 500px; }
.page-hero h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .seg { min-width: 0; }
  .flow-3 { grid-template-columns: 1fr; gap: 32px; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 680px) {
  .scr-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .seg { font-size: 12px; }
  .pos { grid-template-columns: 1fr 50px 78px; gap: 8px; font-size: 12.5px; }
  .chat-in { padding: 18px; }
  .fmt-stage { min-height: 420px; }
  .paper { padding: 20px; font-size: 12.5px; }
  .xml { font-size: 9.5px; padding: 16px; }
  .fmt-stage[data-fmt="zugferd"] .paper { transform: none; }
  .fmt-stage[data-fmt="zugferd"] .xml { transform: translate(14px, 36px) rotate(2deg) scale(.94); }
  .extras { margin-top: 48px; }
  .faq summary { font-size: 1.05rem; }
  .faq details p { padding-right: 0; }
  .page-hero { padding: 130px 0 56px; }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .scr-body { min-height: 0; }
  .legal { padding: 56px 0 90px; }
  .toc ol { columns: 1; }
  .address { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fmt-list li.rv:not(.in) { opacity: .5; }
}

/* ---------- Hero-Video: Mitte hinter dem Text ruhiger ---------- */
.hero-media::after {
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(168,54,253,.28), transparent 70%),
    radial-gradient(50% 46% at 50% 46%, rgba(10,10,12,.82), rgba(10,10,12,.35) 70%, transparent 100%),
    linear-gradient(180deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.45) 45%, rgba(10,10,12,.8) 100%);
}
.hero-media video { filter: blur(1.5px); transform: scale(1.02); }

/* ==========================================================================
   NEUTRAL: Lila nur noch im Logo
   ========================================================================== */
:root {
  --iq-1: #ffffff;
  --iq-2: #16161a;
  --iq-3: #16161a;
  --iq-deep: #16161a;
  --iq-soft: #efeff2;
  --iq-grad: linear-gradient(#16161a, #16161a);
  --iq-glow: 0 20px 50px -20px rgba(10,10,12,.45);
}
::selection { background: var(--ink); color: #fff; }
.iq, .fade-ink, .dark .fade-ink, .hero .fade-ink, .pill b span, .qd-total b, .d-sum .total b, .tp-dot {
  background: none !important; -webkit-text-fill-color: currentColor; color: inherit; font-style: normal;
}
.eyebrow::before { background: #b4b3bd; }
.dark .eyebrow::before { background: #6b6b75; }

/* Buttons: Pfeil-Kreis neutral */
.btn-primary .arrow { background: #fff; color: var(--ink); }
.hero .btn-primary .arrow { background: var(--ink); color: #fff; }
.btn-primary:hover, .btn-light:hover { box-shadow: 0 18px 40px -18px rgba(10,10,12,.55); }

/* Hero */
.hero-media::after {
  background:
    radial-gradient(50% 46% at 50% 46%, rgba(10,10,12,.78), rgba(10,10,12,.35) 70%, transparent 100%),
    linear-gradient(180deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,.45) 45%, rgba(10,10,12,.82) 100%);
}
.hero-trust svg { color: #fff !important; }
.hero .pill:hover { border-color: rgba(255,255,255,.5); }
.screen-stage::before { background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent); }
.screen { background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 40%, rgba(255,255,255,.16)); box-shadow: 0 80px 140px -60px rgba(0,0,0,.7); }
.scr-side a.on i { border-color: #fff; background: rgba(255,255,255,.25); }
.seg-thumb { background: #fff; box-shadow: none; }
.seg span.on { color: var(--ink); }
.d-input.focus { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.d-input .caret, .qd-prompt .caret { background: #fff; }
.d-sum .total b { color: var(--ink); }
.scr-tip i, .qd-prompt .spark, .scene-note i { background: #fff; color: var(--ink); }
.done-ic { background: #fff; color: var(--ink); box-shadow: none; }
.d-send.press { background: #d8d8de; color: var(--ink); }

/* Funktionen-Bühne */
.feat-stage { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 40%, rgba(255,255,255,.14)); box-shadow: 0 60px 120px -50px rgba(0,0,0,.55); }
.feat-stage-in::before { background: radial-gradient(60% 50% at 70% 100%, rgba(255,255,255,.07), transparent 70%); }
.feat-tag { color: #d8d8de; }
.qd-total b { color: var(--ink); font-size: 16px; }
.g-track .g2 { background: #4a4a52; color: #fff; }
.g-track .ghost { border-color: rgba(255,255,255,.4); color: #d8d8de; background: rgba(255,255,255,.05); }
.qd-lines.fibu .qd-line { grid-template-columns: 70px 1fr auto 96px; }
.qd-lines.fibu em.st { font-style: normal; justify-self: end; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: #c9c9d2; }
.qd-lines.fibu em.st.ok { background: rgba(61,220,132,.14); color: #6ee7a8; }
.qd-lines.fibu em.st.warn { background: rgba(255,176,32,.14); color: #ffc65c; }

/* Dunkle Sektion */
.ai::before { background: radial-gradient(circle, rgba(255,255,255,.06), transparent 60%); }
.ai-list .n { color: #9a9aa6; }
.chat { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 40%, rgba(255,255,255,.14)); box-shadow: 0 60px 120px -40px rgba(0,0,0,.6); }
.xml .t { color: #9a9aa6; }
.xml .v { background: rgba(255,255,255,.14); }
.fmt-sugg button.on { background: #fff; color: var(--ink); }

/* Rest */
.extras div:hover { box-shadow: 0 30px 60px -30px rgba(10,10,12,.3); }
.cta::before { background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,.04) 50%, transparent); }
.f-mega em { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; }
.f-col a:hover { color: #fff; }
.page-hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent); }
.legal a { text-decoration-color: rgba(10,10,12,.3); }
.crumb a { color: #fff; }

/* ==========================================================================
   FARBAKZENTE – Signalfarben je Modul (kein Blau, Lila nur im Logo)
   Orange = Aufträge · Petrol = Plantafel · Grün = Rechnungen/E-Rechnung
   Koralle = Buchhaltung · Gelb = Stammdaten/Hinweise
   ========================================================================== */
:root {
  --c-orange: #f26b1d; --c-orange-soft: #fff1e8;
  --c-teal:   #0f9d8f; --c-teal-soft:   #e3f6f3;
  --c-green:  #1f9d55; --c-green-soft:  #e6f6ec;
  --c-coral:  #e5484d; --c-coral-soft:  #fdecec;
  --c-yellow: #e5a400; --c-yellow-soft: #fff6dc;
}
/* Eyebrows: farbige Raute je Abschnitt */
.eyebrow::before { background: var(--acc, var(--c-orange)) !important; }
#funktionen { --acc: var(--c-orange); }
#e-rechnung { --acc: var(--c-green); }
#vorteile   { --acc: var(--c-teal); }
#fragen     { --acc: var(--c-yellow); }
#start      { --acc: var(--c-orange); }
.page-hero  { --acc: var(--c-orange); }
.legal .toc, .legal .address, .legal .box { --acc: var(--c-orange); }
.box { border-left-color: var(--c-orange) !important; }

/* Hero */
.hero .pill b { background: var(--c-green); color: #fff; }
.hero-trust svg { color: #5fd38d !important; }
.scr-side a:nth-of-type(2) i { border-color: var(--c-orange); }
.scr-side a:nth-of-type(3) i { border-color: var(--c-teal); }
.scr-side a:nth-of-type(4) i { border-color: var(--c-green); background: rgba(31,157,85,.35) !important; }
.scr-side a:nth-of-type(5) i { border-color: var(--c-yellow); }
.scr-side a:nth-of-type(6) i { border-color: var(--c-coral); }
.scr-side a i { opacity: 1 !important; }
.scr-tip i { background: var(--c-green) !important; color: #fff !important; }
.done-ic { background: var(--c-green) !important; color: #fff !important; box-shadow: 0 14px 30px -12px rgba(31,157,85,.8) !important; }
.seg-thumb { background: #fff; }

/* Laufband: Sterne wechseln die Farbe */
.marquee-track span::after { background: none !important; -webkit-text-fill-color: currentColor; }
.marquee-track span:nth-child(5n+1)::after { color: var(--c-orange); }
.marquee-track span:nth-child(5n+2)::after { color: var(--c-teal); }
.marquee-track span:nth-child(5n+3)::after { color: var(--c-green); }
.marquee-track span:nth-child(5n+4)::after { color: var(--c-coral); }
.marquee-track span:nth-child(5n+5)::after { color: var(--c-yellow); }

/* Funktionen: jede Zeile ihre Farbe */
.feat-item:nth-child(1) { --fc: var(--c-orange); }
.feat-item:nth-child(2) { --fc: var(--c-teal); }
.feat-item:nth-child(3) { --fc: var(--c-green); }
.feat-item:nth-child(4) { --fc: var(--c-coral); }
.feat-item.on .n { color: var(--fc) !important; font-weight: 500; }
.feat-item .bar i { background: var(--fc) !important; }
.feat-item .n { position: relative; }
.feat-item.on .t::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--fc); margin-right: 12px; vertical-align: 3px; transform: rotate(45deg); }
#funktionen .feat-tag { color: var(--c-orange); border-color: rgba(242,107,29,.35); }
#funktionen[data-scene="1"] .feat-tag { color: #3fd0c0; border-color: rgba(15,157,143,.45); }
#funktionen[data-scene="2"] .feat-tag { color: #5fd38d; border-color: rgba(31,157,85,.45); }
#funktionen[data-scene="3"] .feat-tag { color: #ff8a8d; border-color: rgba(229,72,77,.45); }
.scene:nth-of-type(1) .qd-prompt .spark { background: var(--c-orange) !important; color: #fff !important; }
.scene:nth-of-type(1) .qd-total b { color: var(--c-orange) !important; }
.g-track .w:first-child { box-shadow: inset 4px 0 0 var(--c-teal); }
.g-track .g2 { background: var(--c-teal) !important; }
.g-track .ghost { border-color: rgba(63,208,192,.6) !important; color: #3fd0c0 !important; }
.scene:nth-of-type(2) .scene-note i { background: var(--c-teal) !important; color: #fff !important; }
.inv-flow span svg { color: #5fd38d; }
.scene:nth-of-type(4) .qd-total b { color: var(--c-coral) !important; }

/* E-Rechnung (dunkel): Nummern farbig */
#e-rechnung .ai-list li:nth-child(1) .n { color: #5fd38d; }
#e-rechnung .ai-list li:nth-child(2) .n { color: #3fd0c0; }
#e-rechnung .ai-list li:nth-child(3) .n { color: #ffc34d; }
.fmt-sugg button.on { background: var(--c-green) !important; color: #fff !important; }
.paper-badge { background: var(--c-green-soft) !important; color: var(--c-green) !important; }
.chat-head small::before { background: #5fd38d !important; box-shadow: 0 0 10px #5fd38d !important; }

/* Vorteile: Symbole in farbigen Kacheln */
.extras div svg { width: 48px; height: 48px; padding: 11px; border-radius: 14px; margin-bottom: 20px !important; }
.extras div:nth-child(1) svg { color: var(--c-orange); background: var(--c-orange-soft); }
.extras div:nth-child(2) svg { color: var(--c-teal);   background: var(--c-teal-soft); }
.extras div:nth-child(3) svg { color: var(--c-green);  background: var(--c-green-soft); }
.extras div:nth-child(4) svg { color: var(--c-coral);  background: var(--c-coral-soft); }
.extras div:nth-child(1):hover { box-shadow: 0 30px 60px -30px rgba(242,107,29,.45) !important; }
.extras div:nth-child(2):hover { box-shadow: 0 30px 60px -30px rgba(15,157,143,.45) !important; }
.extras div:nth-child(3):hover { box-shadow: 0 30px 60px -30px rgba(31,157,85,.45) !important; }
.extras div:nth-child(4):hover { box-shadow: 0 30px 60px -30px rgba(229,72,77,.45) !important; }

/* Fragen: offenes Plus in Gelb */
.faq details[open] summary::after { background-color: var(--c-yellow-soft) !important; }
.faq summary:hover { color: #000; }

/* CTA: warmer Schimmer statt grau */
.cta::before { background: radial-gradient(closest-side, rgba(242,107,29,.28), rgba(229,72,77,.10) 50%, transparent) !important; }
.cta .eyebrow { color: #ffb68a !important; }
.btn-light .arrow { background: var(--c-orange); color: #fff; }
.hero .btn-primary .arrow { background: var(--c-orange); color: #fff; }
.btn-primary .arrow { background: var(--c-orange); color: #fff; }

/* ==========================================================================
   FLIESSENDE ÜBERGÄNGE – keine harten Kanten zwischen Hell und Dunkel
   ========================================================================== */
.marquee-sec { border-block: 0 !important; }
.trades { border-block: 0 !important; background: linear-gradient(180deg, #fff 0%, var(--paper-2) 22%, var(--paper-2) 78%, #fff 100%) !important; }

/* Hero: Dunkel läuft unten weich ins Weiß */
.hero-media { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); background: var(--ink); }
.hero::before { content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: max(680px, 100svh); background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, #fff 100%); }

/* Dunkle Sektion: oben und unten weich ein- und ausblenden */
.sec.dark.ai { background: linear-gradient(180deg, #fff 0px, var(--ink) 200px, var(--ink) calc(100% - 200px), #fff 100%) !important; padding: 220px 0 !important; }
.sec.dark.ai::after { -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent) !important; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent) !important; }

/* Footer: weicher Einstieg */
.footer { background: linear-gradient(180deg, #fff 0px, var(--ink) 220px) !important; padding-top: 240px !important; }
.footer.slim { padding-top: 240px !important; }

/* Rechtsseiten: dunkler Kopf läuft aus */
.page-hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 60%, #fff 100%) !important; padding-bottom: 140px !important; }
.page-hero .lead { color: #c9c9d2; }
.legal { padding-top: 20px !important; }
@media (max-width: 680px) {
  .sec.dark.ai { padding: 150px 0 !important; background: linear-gradient(180deg, #fff 0px, var(--ink) 130px, var(--ink) calc(100% - 130px), #fff 100%) !important; }
  .footer, .footer.slim { padding-top: 170px !important; background: linear-gradient(180deg, #fff 0px, var(--ink) 150px) !important; }
}

/* ---------- „IQ“ immer kursiv + Slogan ---------- */
.iq-i { font-style: italic; letter-spacing: inherit; padding-right: 0; }
.f-mega em { font-style: italic; }
.f-slogan { font-family: var(--font-display); font-weight: 800; font-size: 26px !important; letter-spacing: -.03em; color: #fff !important; margin: 22px 0 0 !important; }
.f-slogan + p { margin-top: 10px !important; }

/* ==========================================================================
   Orange → Lila (Website)
   ========================================================================== */
:root { --c-orange: #9b3cf5; --c-orange-soft: #f4ebff; }
.cta::before { background: radial-gradient(closest-side, rgba(168,54,253,.32), rgba(214,106,252,.10) 50%, transparent) !important; }
.cta .eyebrow { color: #d9a6ff !important; }
#funktionen .feat-tag { color: #c98bff; border-color: rgba(168,54,253,.45); }
.extras div:nth-child(1):hover { box-shadow: 0 30px 60px -30px rgba(155,60,245,.45) !important; }


/* ==========================================================================
   v4 – nur Lila, Grün, Weiß, helles Grafit · weiche Übergänge (ease-in-out)
   ========================================================================== */
:root {
  --ink: #26272d; --ink-2: #303138; --ink-3: #3a3b43;
  --c-purple: #9b3cf5; --c-purple-soft: #f4ebff; --c-purple-light: #c98bff;
  --c-green: #1f9d55; --c-green-soft: #e6f6ec; --c-green-light: #5fd38d;
  --c-orange: var(--c-purple); --c-orange-soft: var(--c-purple-soft);
  --c-teal: var(--c-green); --c-teal-soft: var(--c-green-soft);
  --c-coral: var(--c-purple); --c-coral-soft: var(--c-purple-soft);
  --c-yellow: var(--c-green); --c-yellow-soft: var(--c-green-soft);
  --fade: 340px;
}
body { color: #1c1d22; }

/* Abschnitts-Farben */
#funktionen { --acc: var(--c-green); }
#e-rechnung { --acc: var(--c-green-light); }
#vorteile   { --acc: var(--c-purple); }
#fragen     { --acc: var(--c-purple); }
#start      { --acc: var(--c-purple-light); }
.marquee-track span:nth-child(odd)::after  { color: var(--c-purple) !important; }
.marquee-track span:nth-child(even)::after { color: var(--c-green) !important; }

/* Helle Bereiche: durchgehend weiß, keine Flächenwechsel */
.trades { background: #fff !important; }
.extras div { border-color: #ececf1 !important; }
.extras div:nth-child(odd) svg  { color: var(--c-purple) !important; background: var(--c-purple-soft) !important; }
.extras div:nth-child(even) svg { color: var(--c-green) !important;  background: var(--c-green-soft) !important; }
.extras div:hover { box-shadow: 0 30px 60px -30px rgba(38,39,45,.28) !important; }
.faq details[open] summary::after { background-color: var(--c-purple-soft) !important; }

/* Hero: weich ins Weiß */
.hero::before { background: linear-gradient(180deg, rgba(38,39,45,1.000) 0%, rgba(38,39,45,0.987) 8.1%, rgba(38,39,45,0.951) 15.5%, rgba(38,39,45,0.896) 22.5%, rgba(38,39,45,0.825) 29%, rgba(38,39,45,0.741) 35.3%, rgba(38,39,45,0.648) 41.2%, rgba(38,39,45,0.550) 47.1%, rgba(38,39,45,0.450) 52.9%, rgba(38,39,45,0.352) 58.8%, rgba(38,39,45,0.259) 64.7%, rgba(38,39,45,0.175) 71%, rgba(38,39,45,0.104) 77.5%, rgba(38,39,45,0.049) 84.5%, rgba(38,39,45,0.013) 91.9%, rgba(38,39,45,0.000) 100%) !important; top: calc(max(680px, 100svh) - var(--fade) - 120px) !important; height: calc(var(--fade) + 120px) !important; }
.hero::after { content: ""; position: absolute; z-index: -3; left: 0; right: 0; top: 0; height: calc(max(680px, 100svh) - var(--fade) - 119px); background: var(--ink); }
.hero-media { background: var(--ink) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade) - 120px), rgba(0,0,0,.6) calc(100% - 200px), transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade) - 120px), rgba(0,0,0,.6) calc(100% - 200px), transparent 100%) !important; }
.hero-media::after {
  background:
    radial-gradient(50% 46% at 50% 46%, rgba(38,39,45,.78), rgba(38,39,45,.3) 70%, transparent 100%),
    linear-gradient(180deg, rgba(38,39,45,.55) 0%, rgba(38,39,45,.4) 50%, rgba(38,39,45,.7) 100%) !important;
}

/* Dunkle Sektion: oben und unten weich */
.sec.dark.ai {
  background:
    linear-gradient(180deg, rgba(38,39,45,0.000) 0%, rgba(38,39,45,0.013) 8.1%, rgba(38,39,45,0.049) 15.5%, rgba(38,39,45,0.104) 22.5%, rgba(38,39,45,0.175) 29%, rgba(38,39,45,0.259) 35.3%, rgba(38,39,45,0.352) 41.2%, rgba(38,39,45,0.450) 47.1%, rgba(38,39,45,0.550) 52.9%, rgba(38,39,45,0.648) 58.8%, rgba(38,39,45,0.741) 64.7%, rgba(38,39,45,0.825) 71%, rgba(38,39,45,0.896) 77.5%, rgba(38,39,45,0.951) 84.5%, rgba(38,39,45,0.987) 91.9%, rgba(38,39,45,1.000) 100%) top / 100% var(--fade) no-repeat,
    linear-gradient(180deg, rgba(38,39,45,1.000) 0%, rgba(38,39,45,0.987) 8.1%, rgba(38,39,45,0.951) 15.5%, rgba(38,39,45,0.896) 22.5%, rgba(38,39,45,0.825) 29%, rgba(38,39,45,0.741) 35.3%, rgba(38,39,45,0.648) 41.2%, rgba(38,39,45,0.550) 47.1%, rgba(38,39,45,0.450) 52.9%, rgba(38,39,45,0.352) 58.8%, rgba(38,39,45,0.259) 64.7%, rgba(38,39,45,0.175) 71%, rgba(38,39,45,0.104) 77.5%, rgba(38,39,45,0.049) 84.5%, rgba(38,39,45,0.013) 91.9%, rgba(38,39,45,0.000) 100%) bottom / 100% var(--fade) no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% calc(100% - 2 * var(--fade) + 2px) no-repeat,
    #fff !important;
  padding: calc(var(--fade) - 40px) 0 !important;
}
.ai::before { background: radial-gradient(circle, rgba(155,60,245,.12), transparent 60%) !important; }
#e-rechnung .ai-list li .n { color: var(--c-green-light) !important; }
.chat { background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 40%, rgba(155,60,245,.25)) !important; }

/* Footer: weicher Einstieg */
.footer, .footer.slim { background: linear-gradient(180deg, rgba(38,39,45,0.000) 0%, rgba(38,39,45,0.013) 8.1%, rgba(38,39,45,0.049) 15.5%, rgba(38,39,45,0.104) 22.5%, rgba(38,39,45,0.175) 29%, rgba(38,39,45,0.259) 35.3%, rgba(38,39,45,0.352) 41.2%, rgba(38,39,45,0.450) 47.1%, rgba(38,39,45,0.550) 52.9%, rgba(38,39,45,0.648) 58.8%, rgba(38,39,45,0.741) 64.7%, rgba(38,39,45,0.825) 71%, rgba(38,39,45,0.896) 77.5%, rgba(38,39,45,0.951) 84.5%, rgba(38,39,45,0.987) 91.9%, rgba(38,39,45,1.000) 100%) top / 100% var(--fade) no-repeat, linear-gradient(var(--ink), var(--ink)) 0 calc(var(--fade) - 1px) / 100% 100% no-repeat, #fff !important; padding-top: calc(var(--fade) + 40px) !important; }

/* Rechtsseiten: Kopf läuft weich aus */
.page-hero { background: linear-gradient(180deg, rgba(38,39,45,1.000) 0%, rgba(38,39,45,0.987) 8.1%, rgba(38,39,45,0.951) 15.5%, rgba(38,39,45,0.896) 22.5%, rgba(38,39,45,0.825) 29%, rgba(38,39,45,0.741) 35.3%, rgba(38,39,45,0.648) 41.2%, rgba(38,39,45,0.550) 47.1%, rgba(38,39,45,0.450) 52.9%, rgba(38,39,45,0.352) 58.8%, rgba(38,39,45,0.259) 64.7%, rgba(38,39,45,0.175) 71%, rgba(38,39,45,0.104) 77.5%, rgba(38,39,45,0.049) 84.5%, rgba(38,39,45,0.013) 91.9%, rgba(38,39,45,0.000) 100%) bottom / 100% var(--fade) no-repeat, linear-gradient(var(--ink), var(--ink)) top / 100% calc(100% - var(--fade) + 1px) no-repeat !important; padding-bottom: calc(var(--fade) - 60px) !important; }

/* CTA: helles Grafit, lila Schimmer */
.cta { background: var(--ink) !important; }
.cta::before { background: radial-gradient(closest-side, rgba(155,60,245,.32), rgba(31,157,85,.10) 55%, transparent) !important; }

/* Buttons: Pfeil-Kreis lila */
.btn-primary .arrow, .hero .btn-primary .arrow, .btn-light .arrow { background: var(--c-purple) !important; color: #fff !important; }

/* ---------- Funktionen: nur Grün, Aussagen statt Software-Nachbau ---------- */
.feat-item { --fc: var(--c-green) !important; }
#funktionen .feat-tag, #funktionen[data-scene] .feat-tag { color: var(--c-green-light) !important; border-color: rgba(95,211,141,.4) !important; }
.stmt-stage .feat-stage-in { background: var(--ink) !important; }
.stmt-stage .feat-stage-in::before { background: radial-gradient(70% 60% at 85% 100%, rgba(31,157,85,.28), transparent 70%) !important; }
.stmt-stage { background: linear-gradient(160deg, rgba(95,211,141,.45), rgba(255,255,255,.06) 40%, rgba(255,255,255,.12)) !important; box-shadow: 0 60px 120px -50px rgba(38,39,45,.5) !important; }
.stmt { position: relative; width: 100%; max-width: 480px; color: #fff; text-align: left; }
.stmt-big { position: absolute; right: -10px; top: -70px; font-family: var(--font-display); font-weight: 800; font-size: 200px; line-height: 1; letter-spacing: -.06em;
  background: linear-gradient(180deg, rgba(95,211,141,.28), rgba(95,211,141,0) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }
.stmt-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-green-light); }
.stmt-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c-green-light); transform: rotate(45deg); }
.stmt-h { position: relative; margin: 22px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.04; letter-spacing: -.04em; }
.stmt-facts { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.stmt-facts li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #d6d6dd; font-size: 16px; }
.stmt-facts li::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--c-green-light); }
.scene .stmt > * { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.scene:not(.on) .stmt > * { opacity: 0; transform: translateY(14px); }
.scene.on .stmt .stmt-h { transition-delay: .08s; }
.scene.on .stmt .stmt-facts { transition-delay: .16s; }
@media (max-width: 900px) { .stmt-big { font-size: 130px; top: -40px; } .stmt-h { font-size: 1.8rem; } .stmt-facts li { font-size: 14.5px; padding: 11px 0; } }

/* Hero-Screen + E-Rechnung: nur Grün/Lila */
.scr-side a:nth-of-type(n) i { border-color: rgba(255,255,255,.35) !important; background: transparent !important; }
.scr-side a.on i { border-color: var(--c-green-light) !important; background: rgba(31,157,85,.35) !important; }
@media (max-width: 680px) { :root { --fade: 220px; } }

/* ==========================================================================
   v5 – E-Rechnung als abgerundete Karte (kein Übergang), Vorteile redaktionell
   ========================================================================== */
.sec.dark.ai {
  background: #fff !important; padding: 40px 0 !important; color: #fff;
}
.sec.dark.ai::before, .sec.dark.ai::after { display: none !important; }
.sec.dark.ai > .wrap.ai-grid {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); border-radius: 36px; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
}
.sec.dark.ai > .wrap.ai-grid::before {
  content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -260px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,60,245,.22), transparent 62%);
}
.sec.dark.ai > .wrap.ai-grid::after {
  content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; left: -240px; bottom: -300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,157,85,.16), transparent 62%);
}

.vorteile-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; margin-top: 64px; }
.vt { position: relative; padding-top: 28px; }
.vt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, #e3e3ea, transparent); }
.vt::after { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 3px; border-radius: 3px; background: var(--c-purple); transition: width .5s var(--ease); }
.vt:nth-child(even)::after { background: var(--c-green); }
.vt:hover::after { width: 72px; }
.vt-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: #9a9aa6; }
.vt h3 { margin: 18px 0 0; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.15; font-weight: 800; }
.vt p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 1080px) { .vorteile-list { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 680px) {
  .vorteile-list { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .sec.dark.ai { padding: 16px 0 !important; }
  .sec.dark.ai > .wrap.ai-grid { border-radius: 26px; width: calc(100% - 20px); }
}

/* Hover-Strich läuft komplett durch */
.vt::after { transition: width .6s var(--ease) !important; }
.vt:hover::after { width: 100% !important; }

/* ===== Inhalt v6: Außerdem drin, Umstieg, Herkunft ===== */
.mehr { background: #fff; }
.mehr-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 64px; align-items: end; }
.mehr-head .eyebrow, .mehr-head .h2 { grid-column: 1; }
.mehr-head .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
.mehr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; }
.mehr-col { position: relative; padding: 30px 30px 32px; border-radius: 26px; background: linear-gradient(180deg, var(--paper-2) 0%, rgba(245,245,247,0) 100%); }
.mehr-k { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6c6c78; }
.mehr-col:nth-child(2) .mehr-k { color: var(--c-purple); }
.mehr-col:nth-child(1) .mehr-k, .mehr-col:nth-child(3) .mehr-k { color: var(--c-green); }
.mehr-col ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.mehr-col li { display: flex; align-items: baseline; gap: 14px; font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.35; }
.mehr-col li::before { content: ""; flex: none; width: 16px; height: 2px; border-radius: 2px; background: currentColor; opacity: .25; transform: translateY(-4px); }

.umstieg { background: linear-gradient(180deg, #fff 0%, var(--paper-2) 30%, var(--paper-2) 70%, #fff 100%); }
.steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(31,157,85,0), var(--c-green) 12%, var(--c-purple) 88%, rgba(155,60,245,0)); opacity: .5; }
.steps li { position: relative; }
.st-n { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px -14px rgba(20,20,30,.35); font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--ink); position: relative; }
.steps li:first-child .st-n { color: var(--c-green); }
.steps li:last-child .st-n { color: var(--c-purple); }
.steps h3 { margin: 26px 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; }
.steps p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 34ch; }
.herkunft { margin: 96px auto 0; max-width: 760px; text-align: center; }
.herkunft-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8b95; }
.herkunft p { margin: 16px 0 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.55; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }

@media (max-width: 960px) {
  .mehr-head { grid-template-columns: 1fr; }
  .mehr-head .lead { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .mehr-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .steps { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
  .steps::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(31,157,85,0), var(--c-green) 12%, var(--c-purple) 88%, rgba(155,60,245,0)); }
  .steps li { padding-left: 84px; }
  .st-n { position: absolute; left: 0; top: 0; }
  .steps h3 { margin-top: 12px; }
  .herkunft { margin-top: 64px; }
}

/* ===== Geräte: Tablet & Handy ===== */
.geraete { background: linear-gradient(180deg, #fff 0%, var(--paper-2) 35%, var(--paper-2) 75%, #fff 100%); overflow: hidden; }
.ger-head { text-align: center; max-width: 860px; margin: 0 auto; }
.ger-head .eyebrow { justify-content: center; }
.ger-head .lead { margin: 22px auto 0; }
.dev { margin: 0; position: relative; background: linear-gradient(160deg, #3a3b42, #26272d 55%, #1f2025); box-shadow: 0 50px 90px -40px rgba(20,20,30,.55), 0 20px 40px -24px rgba(20,20,30,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.dev img { display: block; width: 100%; height: auto; background: #f5f5f7; }
.dev-tablet { border-radius: 34px; padding: 14px; }
.dev-tablet img { border-radius: 22px; }
.dev-phone { border-radius: 50px; padding: 11px; }
.dev-phone img { border-radius: 40px; }
.dev-phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 30%; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #111214; z-index: 2; }
.ger-stage { position: relative; margin: 72px auto 0; max-width: 1180px; display: flex; justify-content: center; align-items: flex-end; }
.ger-c { width: 78%; z-index: 1; }
.ger-l, .ger-r { width: 20%; z-index: 2; position: absolute; bottom: -40px; }
.ger-l { left: 0; transform: rotate(-3deg); }
.ger-r { right: 0; transform: rotate(3deg); }
.ger-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1080px; margin: 96px auto 0; }
.ger-caps div { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); text-align: center; }
.ger-caps span { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--c-green); margin-bottom: 8px; }
.ger-caps div:nth-child(2) span { color: var(--c-purple); }
.ger-split { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; margin-top: 140px; }
.ger-txt h3 { margin: 16px 0 0; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.ger-txt p { margin: 18px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 44ch; }
.ger-facts { margin-top: 26px !important; }
.ger-facts li { color: var(--ink) !important; }
.ger-tab2 { transform: perspective(1800px) rotateY(-8deg) rotateX(2deg); transform-origin: left center; transition: transform 1s var(--ease); }
.ger-tab2:hover { transform: perspective(1800px) rotateY(-3deg) rotateX(1deg); }
@media (max-width: 960px) {
  .ger-stage { margin-top: 48px; padding-bottom: 30px; }
  .ger-c { width: 100%; }
  .ger-l, .ger-r { width: 30%; bottom: -30px; }
  .ger-l { left: 0; } .ger-r { right: 0; }
  .dev-tablet { border-radius: 22px; padding: 8px; } .dev-tablet img { border-radius: 14px; }
  .dev-phone { border-radius: 30px; padding: 6px; } .dev-phone img { border-radius: 24px; }
  .dev-phone::before { top: 12px; height: 12px; }
  .ger-caps { grid-template-columns: 1fr; gap: 18px; margin-top: 72px; }
  .ger-split { grid-template-columns: 1fr; gap: 40px; margin-top: 90px; }
  .ger-tab2 { transform: none; }
}

/* ===== Cookie-Hinweis ===== */
.ck { position: fixed; left: 24px; bottom: 24px; z-index: 9999; max-width: 460px; display: flex; align-items: center; gap: 18px; padding: 18px 18px 18px 22px; border-radius: 22px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 30px 60px -28px rgba(20,20,30,.45), 0 0 0 1px rgba(20,20,30,.06); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ck.on { opacity: 1; transform: none; }
.ck-txt { font-size: 14px; line-height: 1.5; color: var(--muted); }
.ck-txt strong { color: var(--ink); font-weight: 800; }
.ck-txt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-purple); text-underline-offset: 3px; }
.ck-ok { flex: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--ink); padding: 12px 20px; border-radius: 999px; transition: background .25s, transform .25s var(--ease); }
.ck-ok:hover { background: var(--c-green); transform: translateY(-1px); }
.ck-ok:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 3px; }
@media (max-width: 600px) {
  .ck { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .ck-ok { width: 100%; }
}
.ck { max-width: 520px; }
.ck-btns { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ck-no { flex: none; border: 1px solid rgba(20,20,30,.18); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: transparent; padding: 11px 20px; border-radius: 999px; transition: border-color .25s, transform .25s var(--ease); }
.ck-no:hover { border-color: var(--ink); transform: translateY(-1px); }
.ck-no:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 3px; }
@media (max-width: 600px) { .ck-btns { flex-direction: row; } .ck-btns button { flex: 1; width: auto; } }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }

/* ===== Kontakt ===== */
.kontakt { background: #fff; }
.kontakt-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.kontakt-info .lead { margin-top: 22px; }
.kontakt-wege { display: grid; gap: 14px; margin-top: 40px; }
.kontakt-wege a { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; transition: color .25s; }
.kontakt-wege a:hover { color: var(--c-green); }
.kontakt-wege span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8a8b95; margin-bottom: 4px; }
.kform { background: var(--paper-2); border-radius: 30px; padding: 34px; display: grid; gap: 16px; box-shadow: 0 40px 80px -50px rgba(20,20,30,.35); }
.kf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kf { display: grid; gap: 7px; }
.kf > span, .kf-anliegen legend { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6c6c78; }
.kf input, .kf textarea { width: 100%; font: inherit; font-size: 15.5px; color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 14px; padding: 13px 15px; box-shadow: 0 1px 2px rgba(20,20,30,.05); transition: border-color .2s, box-shadow .2s; }
.kf textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
.kf input:focus, .kf textarea:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 4px rgba(155,60,245,.12); }
.kf .ungueltig, .kf input.ungueltig, .kf textarea.ungueltig { border-color: var(--c-purple); background: #fbf7ff; }
.kf-anliegen { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kf-anliegen legend { margin-bottom: 9px; }
.kf-anliegen label { cursor: pointer; }
.kf-anliegen input { position: absolute; opacity: 0; pointer-events: none; }
.kf-anliegen span { display: inline-block; padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: #45464f; box-shadow: 0 1px 2px rgba(20,20,30,.05); transition: background .25s, color .25s; }
.kf-anliegen input:checked + span { background: var(--ink); color: #fff; }
.kf-anliegen input:focus-visible + span { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.kf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kf-check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.kf-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-green); }
.kf-check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c-purple); text-underline-offset: 3px; }
.kf-check.ungueltig span { color: #6a28b0; }
.kf-send { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; font: inherit; }
.kf-send[disabled] { opacity: .6; cursor: wait; }
.kf-hinweis { margin: 0; font-size: 13px; color: #8a8b95; }
.kf-meld { padding: 14px 18px; border-radius: 14px; background: #f3eafe; color: #5b2a91; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.status-hero { min-height: 72vh; display: flex; align-items: center; }
.status-hero .lead { max-width: 52ch; }
.status-klein { margin-top: 18px; font-size: 14.5px; color: rgba(255,255,255,.6); }
.status-klein a { color: #fff; }
.status-actions { margin-top: 40px; justify-content: flex-start; }
@media (max-width: 960px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 40px; }
  .kform { padding: 22px; border-radius: 24px; }
  .kf-reihe { grid-template-columns: 1fr; }
  .kf-send { justify-self: stretch; justify-content: center; }
}

/* ===== v7: Abstände, Responsive, Lila im Funktions-Panel ===== */
.sec { padding: clamp(84px, 8vw, 120px) 0; }
.features { height: 210vh; }
.geraete { padding-top: clamp(40px, 5vw, 72px) !important; }
.ger-split { margin-top: clamp(80px, 9vw, 120px); }
.ger-caps { margin-top: clamp(64px, 7vw, 88px); }
.mehr-grid { margin-top: clamp(40px, 5vw, 56px); }
.kontakt { padding-bottom: clamp(72px, 7vw, 100px); }
.cta-sec { padding-bottom: clamp(56px, 6vw, 80px) !important; }

/* Funktions-Panel: Zahl, Schimmer und Akzente in Lila */
.stmt-big { background: linear-gradient(180deg, rgba(181,122,248,.34), rgba(181,122,248,0) 80%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.stmt-stage .feat-stage-in::before { background: radial-gradient(70% 60% at 85% 100%, rgba(155,60,245,.30), transparent 70%) !important; }
.stmt-stage { background: linear-gradient(160deg, rgba(181,122,248,.45), rgba(255,255,255,.06) 40%, rgba(255,255,255,.12)) !important; }
#funktionen .feat-tag, #funktionen[data-scene] .feat-tag { color: #c49bfa !important; border-color: rgba(181,122,248,.45) !important; }
.stmt-kicker { color: #c49bfa !important; }
.stmt-kicker::before, .stmt-facts li::before { background: #b57af8 !important; }

@media (max-width: 900px) {
  .features { height: 190vh; }
}
@media (max-width: 680px) {
  .sec { padding: 72px 0; }
  .feat-head-m { padding-top: 72px !important; }
  .geraete { padding-top: 32px !important; }
  .ger-split { margin-top: 64px; }
  .ger-caps { margin-top: 56px; }
  .kontakt { padding-bottom: 64px; }
}

/* Hero-Überschrift: richtIQe in Lila mit Swoosh, Handwerk mit Verlauf */
.hero h1 .h-iq { background: linear-gradient(100deg, #b57af8 0%, #9b3cf5 55%, #7c2fd0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; }
.hero h1 .h-iq em { -webkit-text-fill-color: transparent; }
.hero h1 .h-fade { background: linear-gradient(100deg, #fff 0%, #fff 35%, #d9b8fc 75%, #b57af8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero h1 .swoosh-word .swoosh { bottom: -.12em; height: .2em; }

/* Footer: kürzerer Übergang, weniger Leerraum */
.footer, .footer.slim { --fade: 200px; padding-bottom: 32px !important; }
.f-mega { margin-top: 56px !important; font-size: clamp(4rem, 16vw, 14rem) !important; }
.cta .lead { color: rgba(255,255,255,.72) !important; }
@media (max-width: 680px) { .footer, .footer.slim { --fade: 140px; } .f-mega { margin-top: 40px !important; } }

/* Anrufen statt Anmelden */
.nav-cta .nav-tel { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-cta .nav-tel span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8a8b95; }
.nav-cta .nav-tel:hover { color: var(--c-green); }
@media (max-width: 1080px) { .nav-cta .nav-tel span { display: none; } }
.m-menu .m-tel { font-weight: 700; }
.m-menu .btn { padding: 10px 10px 10px 24px !important; gap: 14px; font-size: 16px; align-self: flex-start; }

/* ===== v10: IQ lila, Hero weiß, Umstieg neu ===== */
.hero h1 .h-iq { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hero h1 .h-iq em.iq-i { color: #b57af8 !important; -webkit-text-fill-color: #b57af8 !important; }
.hero h1 .h-fade { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* IQ in Überschriften, Slogans und Eyebrows lila */
h1 em.iq-i, h2 em.iq-i, .h2 em.iq-i, h3 em.iq-i, .f-slogan em.iq-i, .eyebrow em.iq-i { color: #9b3cf5; -webkit-text-fill-color: #9b3cf5; }
.dark h2 em.iq-i, .cta h2 em.iq-i, .cta .eyebrow em.iq-i, .footer em.iq-i, .page-hero em.iq-i { color: #b57af8 !important; -webkit-text-fill-color: #b57af8 !important; }
.f-mega em { -webkit-text-fill-color: transparent !important; }

/* Umstieg */
.um-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: end; }
.um-head .lead { margin: 0; justify-self: end; }
.um-track { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; counter-reset: none; }
.um-track::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-green), #9b3cf5); opacity: .25; }
.um-track::after { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-green), #9b3cf5); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.um-track.in::after { transform: scaleX(1); }
.um-card { position: relative; z-index: 1; background: #fff; border-radius: 26px; padding: 26px 28px 30px; box-shadow: 0 30px 60px -40px rgba(20,20,30,.35), 0 1px 2px rgba(20,20,30,.04); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.um-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(20,20,30,.45); }
.um-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.um-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #fff; background: var(--c-green); box-shadow: 0 0 0 6px #fff, 0 8px 20px -8px rgba(31,157,85,.7); }
.um-card:nth-child(2) .um-n { background: #6c4bd8; box-shadow: 0 0 0 6px #fff, 0 8px 20px -8px rgba(108,75,216,.7); }
.um-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8b95; }
.um-card h3 { margin: 26px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.um-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.um-card ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid #efeff3; display: grid; gap: 10px; }
.um-card li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.um-card li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--c-green); }
.um-card:nth-child(2) li::before { background: #6c4bd8; }
.um-ziel { background: radial-gradient(90% 80% at 100% 100%, rgba(155,60,245,.35), transparent 70%), var(--ink); color: #fff; }
.um-ziel .um-n { background: #9b3cf5; box-shadow: 0 0 0 6px var(--ink), 0 8px 24px -6px rgba(155,60,245,.9); }
.um-ziel .um-tag { color: #c49bfa; }
.um-ziel p { color: rgba(255,255,255,.72); }
.um-ziel ul { border-top-color: rgba(255,255,255,.1); }
.um-ziel li { color: #fff; }
.um-ziel li::before { background: #b57af8; }
.um-ziel em.iq-i { color: #c49bfa; }
.um-track .um-card { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .5s var(--ease); }
.um-track.in .um-card { opacity: 1; transform: none; }
.um-track.in .um-card:nth-child(2) { transition-delay: .15s, .15s, 0s; }
.um-track.in .um-card:nth-child(3) { transition-delay: .3s, .3s, 0s; }
.um-track.in .um-card:hover { transform: translateY(-6px); transition-delay: 0s; }
.um-track.rv { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .um-head { grid-template-columns: 1fr; }
  .um-head .lead { justify-self: start; }
  .um-track { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .um-track::before, .um-track::after { left: 47px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-green), #9b3cf5); }
  .um-track::after { transform-origin: top; transform: scaleY(0); }
  .um-track.in::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .um-track .um-card, .um-track::after { transition: none; opacity: 1; transform: none; } }