/* TalkyPage — Website. Seriös und leicht: klare Flächen, feine Linien, ein warmer Akzent.
   Farben und Maße als Token, siehe docs/grundlagen/10_Marke.md */

@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Farben und Maße als Token. Die Ausschnitte aus dem Kundenbereich (.ui) stehen dunkel, damit man sie nicht für einen
   Teil der Website hält (Tim, 5. November 2026). Die Website selbst ist nur hell (Tim, 6. November 2026). */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F7F6F3;
  --surface: #FFFFFF;
  --line: #E7E4DF;
  --line-strong: #C9C5BE;
  --ink: #1C1936;
  --ink-soft: #57546C;
  --muted: #6C6980;
  --brand: #F0604D;
  --brand-ink: #C4412D;
  --brand-soft: #FFF0EC;
  --dark: #1C1936;
  --on-dark: #FFFFFF;
  --on-dark-soft: #C9C6DA;
  /* Akzente für Symbole: Linie und Fläche */
  --coral: #D9503C; --coral-bg: #FFF0EC;
  --teal: #0E8A7C;  --teal-bg: #E4F5F2;
  --blue: #3462D1;  --blue-bg: #EAF0FD;
  --amber: #A86D12; --amber-bg: #FCF3E1;
  --violet: #6A52C9; --violet-bg: #F1EEFC;
  --rose: #C43F72;  --rose-bg: #FCEBF2;
  --focus: #3462D1;
  --radius: 20px;
  --radius-s: 12px;
  --shadow-s: 0 1px 2px rgb(28 25 54 / .06);
  --shadow: 0 1px 2px rgb(28 25 54 / .05), 0 10px 30px -8px rgb(28 25 54 / .10);
  --stage: 0px; /* Platz, den die Figur neben dem Inhalt braucht */
  --font: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
.ui {
    --bg: #110F1F; --bg-soft: #17152A; --surface: #1C1A31; --line: #2C2945; --line-strong: #45415F;
    --ink: #F4F2FA; --ink-soft: #BAB6CE; --muted: #928EA8;
    --brand-ink: #FF8573; --brand-soft: #2A1A26; --dark: #231F3D;
    --coral: #FF8573; --coral-bg: #2E1C24; --teal: #4FD1BF; --teal-bg: #12292B;
    --blue: #86A6FF; --blue-bg: #18213F; --amber: #F2B654; --amber-bg: #2A2217;
    --violet: #B2A2FF; --violet-bg: #221D3E; --rose: #FF8DB6; --rose-bg: #2E1A2A;
    --focus: #86A6FF;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -8px rgb(0 0 0 / .5);
    color-scheme: dark;
}

@media (min-width: 1100px) { :root { --stage: 280px; } }
@media (min-width: 1400px) { :root { --stage: 340px; } }

/* ── Grundlagen ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 750; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.14rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }
/* Solange die Figur sichtbar ist (html.has-guide), rückt der Inhalt von ihrer Seite ab:
   rechts (lane--right) oder links (lane--left). Vorher nutzt er die volle Breite. */
@media (min-width: 1100px) {
  .lane--right{ transition: padding .45s ease; }
  .has-guide .lane--right { padding-right: calc(var(--stage) + 32px); }
}

.kicker { margin: 0 0 .8rem; font-size: .88rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-ink); }
.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 42rem; }
.head { margin-bottom: 2.6rem; }
.head h2 { max-width: 22ch; }
.fine { font-size: .92rem; color: var(--muted); }
.badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; font-size: .75rem; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; }
.badge--brand { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }

/* ── Knöpfe ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: 12px;
  font: 650 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn .icon { width: 20px; height: 20px; }
.btn--big { padding: 14px 24px; font-size: 1.05rem; }
.btn--small { padding: 8px 14px; font-size: .94rem; }
.btn--primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-s); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgb(28 25 54 / .45); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 1.6rem; }

/* ── Kopfzeile ──────────────────────────────────────────────── */

.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand img { width: 150px; height: auto; }
.mainnav { margin-left: auto; }
.mainnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav a { display: block; padding: 8px 12px; border-radius: 10px; font-weight: 550; font-size: .97rem; color: var(--ink-soft); text-decoration: none; }
.mainnav a:hover { color: var(--ink); background: var(--bg-soft); }
.mainnav__toggle { display: none; }
.langs { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-weight: 650; font-size: .85rem; }
.langs a, .langs span { display: block; padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--muted); }
.langs span { color: var(--ink); background: var(--bg-soft); }
.langs a:hover { color: var(--ink); }

@media (max-width: 999px) {
  .topbar__cta { display: none; }
  .mainnav__toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
  .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; } .burger::after { top: 6px; }
  .mainnav ul { display: none; position: absolute; left: 16px; right: 16px; top: 74px; flex-direction: column; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); }
  .mainnav.is-open ul { display: flex; }
  .topbar__inner { gap: 10px; }
  .brand img { width: 128px; }
}

/* ── Hero ───────────────────────────────────────────────────── */

.hero { position: relative; padding: 64px 0 88px; overflow: clip; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto 35%; height: 120%; z-index: -1;
  background:
    radial-gradient(40% 35% at 55% 40%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(30% 30% at 80% 65%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%),
    radial-gradient(28% 28% at 35% 75%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 70%);
  filter: blur(10px);
}
.hero h1 { max-width: 17ch; }
/* die Stelle, die der Assistent zeigt */

.bubble { margin: 0; max-width: 78%; padding: 9px 13px; font-size: .88rem; line-height: 1.45; border-radius: 14px; }
.bubble--visitor { justify-self: start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble--guide { justify-self: end; background: var(--brand-soft); color: var(--ink); border-bottom-right-radius: 4px; }
@media (max-width: 520px) { .bubble { max-width: 92%; } }

/* Branchen im Hero: Reiter über dem Fenster, beim Wechsel erscheinen die Blasen nacheinander */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hinweis auf den echten Assistenten dieser Seite, er steht unten rechts */

@keyframes shown { 0%, 100% { box-shadow: 0 0 0 2px var(--brand), 0 0 0 7px var(--brand-soft); } 50% { box-shadow: 0 0 0 2px var(--brand), 0 0 0 3px var(--brand-soft); } }
@keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ── Abschnitte ─────────────────────────────────────────────── */

.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card, .tile, .step, .plan{
  padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.card, .plan{ box-shadow: var(--shadow-s); }
.card p, .tile p, .step p{ margin: 0; color: var(--ink-soft); font-size: .98rem; }
.tile { background: transparent; border: 0; padding: 0; }
.ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; }
.ico .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.ico--coral { color: var(--coral); background: var(--coral-bg); }
.ico--teal { color: var(--teal); background: var(--teal-bg); }
.ico--blue { color: var(--blue); background: var(--blue-bg); }
.ico--amber { color: var(--amber); background: var(--amber-bg); }
.ico--violet { color: var(--violet); background: var(--violet-bg); }
.ico--rose { color: var(--rose); background: var(--rose-bg); }
.card:hover { box-shadow: var(--shadow); }

/* Besuche über den Tag */

@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Erscheinen beim Scrollen, nur mit JavaScript */

/* Schritte */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Grußworte */

.step__num { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; font-weight: 700; font-size: .95rem; color: var(--brand-ink); background: var(--brand-soft); border-radius: 50%; }

/* Häkchenlisten */
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.checks .icon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--teal); stroke-width: 2.8; }

/* Branchen */

/* Datenschutz */

/* Integration */

.aside { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; color: var(--ink-soft); font-weight: 550; }
.aside .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--brand-ink); }

/* Talky: Beispielbilder je Bauart */

/* Talky zum Ausprobieren */

/* Wissen: drei Quellen, ein Wissen, eine Antwort mit Quelle */

@keyframes drop { to { top: 100%; } }
@media (min-width: 1000px) {
  @keyframes slide { to { left: 100%; } }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Preise */
.billing { display: inline-flex; gap: 4px; margin: -1rem 0 1.8rem; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.billing__opt { padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: 650 .95rem/1.2 var(--font); cursor: pointer; }
.billing__opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.billing__opt[aria-pressed="true"] .badge { background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--bg); }
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan--highlight { border-color: var(--ink); box-shadow: var(--shadow); }
.plan__head { display: flex; align-items: center; justify-content: space-between; }
.plan__head h3 { margin: 0; }
.plan__tagline { margin: 6px 0 0; color: var(--muted); font-weight: 550; font-size: .95rem; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 10px; }
.plan__interval:not([hidden]) { display: contents; }
.price { font-size: 2.5rem; font-weight: 750; letter-spacing: -.035em; line-height: 1; }
.per { color: var(--muted); font-weight: 550; }
.plan__credit { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px; background: var(--bg-soft); border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.plan__credit .icon { flex: none; width: 18px; height: 18px; color: var(--amber); }
.plan .checks { margin-bottom: 24px; }
.plan .btn { margin-top: auto; }
.meta { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-weight: 600; font-size: .95rem; }
.meta .icon { width: 20px; height: 20px; color: var(--blue); }

/* Agenturen */

/* Fragen */
.faq { display: grid; gap: 10px; max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; position: relative; font-weight: 650; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--ink-soft); }

/* Kontakt */

/* Rechtliches */
.legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
address { font-style: normal; margin-bottom: 2rem; line-height: 1.8; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.legal-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 700; color: var(--ink-soft); }

/* Fuß */
.footer { background: #1C1936; color: #FFFFFF; padding: 56px 0 44px; }
.footer__inner { display: grid; gap: 28px; align-items: start; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 2fr 1fr auto; } }
.footer img { width: 170px; height: auto; margin-bottom: 14px; }
.footer p { color: #C9C6DA; margin: 0 0 .3em; }
.footer__by { font-size: .9rem; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 550; }
.footer .langs a { color: #9D99B5; }
.footer .langs span { background: #2E2A4D; color: #FFFFFF; }

/* Hinweis */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); padding: 14px 18px; background: #1C1936; color: #FFFFFF; border-radius: var(--radius-s); box-shadow: var(--shadow); font-weight: 550; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Fassung 3 (5. November 2026): Fakten, Fähigkeiten, Vergleich, Charakter, Handeln, Kontrolle, Partner, Doku ── */

.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark .lead, .section--dark p { color: var(--on-dark-soft); }
.section--dark .kicker { color: #FF9A88; }
.more { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-weight: 650; font-size: .94rem; color: var(--brand-ink); text-decoration: none; }
.more:hover { text-decoration: underline; }
.more span { transition: transform .15s ease; }
.more:hover span { transform: translateX(3px); }
.aside .more { margin: 0 0 0 4px; white-space: nowrap; }

/* Fakten unter dem Hero */

/* Fähigkeiten in Gruppen */

/* Vergleich */
.cmptable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font-size: .97rem; }
.cmptable th, .cmptable td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.cmptable tbody tr:last-child th, .cmptable tbody tr:last-child td { border-bottom: 0; }
.cmptable thead th { font-size: .86rem; font-weight: 700; color: var(--ink-soft); vertical-align: bottom; }
.cmptable tbody th { text-align: left; font-weight: 600; }
.cmptable__us, .cmptable td:last-child { background: var(--brand-soft); }
.cmptable thead .cmptable__us { color: var(--brand-ink); font-size: 1rem; }
.table-wrap { overflow-x: auto; }
@media (max-width: 700px) { .cmptable { font-size: .86rem; } .cmptable th, .cmptable td { padding: 10px 8px; } }

/* Figuren */

/* Charakter-Regler */

/* Baukasten mit großer Figur */

/* Handeln: Formular wird ausgefüllt */

@keyframes typein { from { color: transparent; background: var(--brand-soft); } to { color: var(--ink); } }
@keyframes pressed { 50% { transform: scale(.94); background: var(--brand); } }
.section--soft .tile .more, .tile .more { margin-top: 8px; }

/* Kontrolle: Protokolle und Abrechnung */

/* Schutzprofile */

/* Editor */

@keyframes dragto { from { transform: translate(-260px, -90px); } 70% { transform: translate(6px, 2px); } to { transform: none; } }

/* Partner-Teaser auf der Startseite */

/* Partnerseite */

@keyframes spinin { from { transform: rotate(-30deg) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.jstep { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; }
.jstep__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: var(--bg); background: var(--ink); }
.jstep:last-child .jstep__num { background: var(--brand); }
.jstep h3 { margin-bottom: 4px; }
.jstep p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
select { font: inherit; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); }

/* Doku */

.mainnav a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.docs-hero h1 { max-width: 18ch; }
.docsecs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 800px) { .docsecs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .docsecs { grid-template-columns: repeat(3, 1fr); } }
.docsec { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-s); }
.docsec h2 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; margin-bottom: 12px; }
.docsec h2 .ico { margin: 0; width: 36px; height: 36px; }
.docsec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.docsec a { display: grid; gap: 1px; padding: 9px 10px; margin-inline: -10px; border-radius: 10px; text-decoration: none; }
.docsec a:hover { background: var(--bg-soft); }
.docsec a b { font-weight: 650; }
.docsec a span { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.docs { padding-top: 40px; }
.docs__grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .docs__grid { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; } }
.docnav { font-size: .93rem; }
@media (min-width: 960px) { .docnav { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; } .docnav__fold > summary { display: none; } }
.docnav__home { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; font-weight: 750; text-decoration: none; }
.docnav__home .icon { width: 20px; height: 20px; color: var(--brand-ink); }
.docnav__fold > summary { cursor: pointer; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-weight: 650; }
.docnav ul { list-style: none; margin: 0; padding: 0; }
.docnav__group { margin-bottom: 16px; }
.docnav__group > p { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.docnav__group > p .icon { width: 16px; height: 16px; }
.docnav__group a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; border-left: 2px solid var(--line); border-radius: 0 8px 8px 0; }
.docnav__group a:hover { color: var(--ink); background: var(--bg-soft); }
.docnav__group a[aria-current="page"] { color: var(--brand-ink); border-left-color: var(--brand); background: var(--brand-soft); font-weight: 650; }
.doc { min-width: 0; max-width: 780px; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.doctoc { margin: 18px 0 30px; padding: 16px 20px; background: var(--bg-soft); border-radius: 14px; font-size: .93rem; }
.doctoc p { margin: 0 0 6px; font-weight: 750; }
.doctoc ul { margin: 0; padding-left: 18px; columns: 2 220px; }
.doctoc a { color: var(--ink-soft); }
.prose { font-size: 1.04rem; }
.prose h2 { font-size: 1.55rem; margin: 2.2em 0 .6em; scroll-margin-top: 90px; }
.prose h3 { font-size: 1.15rem; margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--brand-ink); }
.prose code { padding: 1px 6px; font-size: .9em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; }
.prose pre { padding: 16px 18px; overflow-x: auto; background: var(--dark); color: #F4F2FA; border-radius: 14px; font-size: .9rem; }
.prose pre code { padding: 0; background: none; border: 0; color: inherit; }
.prose a { color: var(--brand-ink); }
.callout { display: flex; gap: 12px; margin: 1.4em 0; padding: 16px 18px; background: var(--brand-soft); border-radius: 14px; }
.callout .icon { flex: none; width: 22px; height: 22px; color: var(--brand-ink); margin-top: 2px; }
.callout p { margin: 0 0 .5em; } .callout p:last-child { margin: 0; }
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
.doc-table th { text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--line-strong); font-size: .85rem; }
.doc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doccta { margin-top: 48px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-soft); }
.doccta p { margin: 0; font-weight: 600; }
.doccta .actions { margin: 14px 0 0; }
.docpager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.docpager a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.docpager a:hover { border-color: var(--ink); }
.docpager small { color: var(--muted); }
.docpager__next { text-align: right; }
[hidden] { display: none !important; }
@media (max-width: 700px) { .cmptable { font-size: .78rem; hyphens: auto; } .cmptable th, .cmptable td { padding: 8px 4px; } .cmptable thead th { font-size: .66rem; } .cmptable thead .cmptable__us { font-size: .74rem; } .cmptable tbody th { width: 36%; padding-left: 10px; } }

/* Fassung 3b: Rundgang, kompakte Abschnitte */

/* Sprachwahl mit Flaggen */
.langpick { position: relative; }
.langpick summary { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem; color: var(--ink); }
.langpick summary::-webkit-details-marker { display: none; }
.langpick summary:hover, .langpick[open] summary { border-color: var(--ink); }
.langpick__caret { transition: transform .15s ease; color: var(--muted); }
.langpick[open] .langpick__caret { transform: rotate(180deg); }
.flag { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.langpick__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.langpick__list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--ink); }
.langpick__list a:hover { background: var(--bg-soft); }
.langpick__list a[aria-current] { background: var(--brand-soft); }
.langpick__list .icon { width: 16px; height: 16px; margin-left: auto; color: var(--brand-ink); }
@media (max-width: 999px) { .langpick summary { padding: 7px 9px; } }
.pricecards { margin-top: 26px; }
.rates { display: grid; gap: 8px; margin: 6px 0 14px; }
.rates div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.rates dt { font-weight: 600; font-size: .95rem; }
.rates dd { margin: 0; font-weight: 750; font-size: 1.15rem; white-space: nowrap; text-align: right; }
.rates dd small { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); }

/* Ausschnitte aus dem Kundenbereich (src/ui.mjs): Design des Kundenbereichs, auf das Wesentliche gekürzt */
.ui { margin: 0; width: 100%; max-width: 560px; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgb(28 25 54 / .05), 0 24px 48px -20px rgb(28 25 54 / .22); overflow: hidden; font-size: .9rem; line-height: 1.45; text-align: left; }
.ui--wide { max-width: 640px; }
.ui__bar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.ui__bar b { margin-left: auto; color: var(--ink); font-weight: 650; }
.ui__body { display: grid; gap: 10px; padding: 18px; }
.ui-h { margin: 6px 0 0 !important; font-weight: 700; font-size: .82rem; color: var(--ink) !important; }
.ui-note, .ui-stat { margin: 0 !important; font-size: .82rem; color: var(--muted) !important; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ui-chip { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .8rem; color: var(--ink-soft); background: var(--surface); }
.ui-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ui-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; }
.ui-seg span { padding: 4px 10px; border-radius: 7px; font-size: .76rem; font-weight: 650; color: var(--muted); }
.ui-seg span.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(28 25 54 / .15); }
.ui-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--bg-soft); white-space: nowrap; }
.ui-badge--ok { color: var(--teal); background: var(--teal-bg); }
.ui-badge--warn { color: var(--amber); background: var(--amber-bg); }
.ui-btn { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font-weight: 650; font-size: .82rem; color: var(--ink); background: var(--surface); }
.ui-btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ui-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.ui-field { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--surface); }
.ui-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-top small { color: var(--muted); font-size: .8rem; }
.ui-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; }
.ui-label { font-size: .78rem; color: var(--muted); }
.ui-who { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ui-who img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: var(--bg-soft); }
.ui-who b { display: block; font-size: 1.05rem; } .ui-who small { color: var(--muted); }
.ui-who .ui-badge { margin-left: auto; }
.ui-design { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.ui-figure { border-radius: 14px; background: radial-gradient(70% 60% at 50% 70%, color-mix(in srgb, var(--brand) 14%, var(--bg-soft)), var(--bg-soft)); overflow: hidden; display: grid; align-items: end; }
.ui-figure img { width: 100%; height: auto; }
.ui-swatches { display: flex; gap: 6px; }
.ui-sw { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.ui-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.ui-sw--white { background: #F4F3F0; } .ui-sw--slate { background: #3A3F47; } .ui-sw--navy { background: #1E3A5F; } .ui-sw--sand { background: #E4C068; }
.ui-sw--teal { background: #1FA391; } .ui-sw--coral { background: #E76F51; } .ui-sw--amber { background: #F1A33C; } .ui-sw--rose { background: #C43F72; } .ui-sw--blue { background: #3462D1; }
.ui-upload { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px dashed var(--line-strong); border-radius: 10px; color: var(--ink-soft); font-weight: 600; }
.ui-upload .icon { width: 16px; height: 16px; }
.ui-place { position: relative; height: 210px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); overflow: hidden; }
.ui-page { display: grid; gap: 8px; padding: 18px; }
.ui-page i { display: block; height: 9px; width: 70%; border-radius: 5px; background: var(--line); }
.ui-page i:first-child { height: 14px; width: 45%; background: var(--line-strong); }
.ui-page i.s { width: 40%; }
.ui-place__talky { position: absolute; right: 18px; bottom: 0; width: 70px; height: 92px; overflow: hidden; outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: 10px 10px 0 0; }
.ui-place__talky img { width: 100%; height: auto; }
.ui-place__tag { position: absolute; right: 104px; bottom: 12px; padding: 3px 9px; font-size: .74rem; font-weight: 700; color: var(--bg); background: var(--ink); border-radius: 7px; }
.ui-kv { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ui-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.ui-kv span { color: var(--muted); }
.ui-search { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); font-size: .82rem; }
.ui-search .icon { width: 15px; height: 15px; }
.ui-tree { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ui-tree > .icon { flex: none; width: 16px; height: 16px; color: var(--brand-ink); }
.ui-tree > span:not(.ui-seg) { flex: 1; min-width: 0; font-weight: 600; }
.ui-tree small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); }
.ui-tree--1 { padding-left: 18px; } .ui-tree--2 { padding-left: 36px; }
.ui-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ui-doc > .icon { flex: none; width: 20px; height: 20px; color: var(--amber); }
.ui-doc > span:nth-child(2) { flex: 1; }
.ui-doc b { display: block; } .ui-doc small { color: var(--muted); font-size: .8rem; }
.ui-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: var(--brand); } .ui-bar .p75 { width: 75%; }
.ui-claims { display: grid; gap: 8px; }
@media (min-width: 520px) { .ui-claims { grid-template-columns: 1fr 1fr; } }
.ui-claims div { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.ui-claims small { color: var(--muted); font-size: .76rem; } .ui-claims b { font-size: 1.02rem; }
.ui-formfields { display: grid; gap: 6px; }
.ui-formfield { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; }
.ui-formfield > span:first-child { flex: 1; font-weight: 600; }
.ui-group { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; }
.ui-goal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ui-goal > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; }
.ui-goal .icon { width: 16px; height: 16px; color: var(--brand-ink); }
.ui-conv { display: grid; grid-template-columns: 1.1fr .7fr .8fr 1.2fr 1fr; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.ui-conv .ui-badge { justify-self: start; }
.ui-num { font-weight: 700; text-align: right; }
.ui-conv.is-open { border-bottom: 0; }
.ui-summary{ margin: 0 0 6px; padding: 11px 12px; border-radius: 10px; background: var(--bg-soft); font-size: .84rem; }
.ui-summary small { display: block; margin-top: 6px; color: var(--muted); }
.ui-radio { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ui-radio i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); }
.ui-radio.is-on { border-color: var(--ink); } .ui-radio.is-on i { border: 5px solid var(--ink); }
.ui-radio b { display: block; } .ui-radio small { color: var(--muted); }
.ui-balance { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: radial-gradient(90% 90% at 0% 0%, var(--brand-soft), var(--bg-soft) 70%); }
.ui-balance small { color: var(--muted); } .ui-balance b { font-size: 1.9rem; letter-spacing: -.02em; } .ui-balance span { font-weight: 650; color: var(--ink-soft); }
.ui-ledger { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ui-ledger small { display: block; color: var(--muted); font-size: .76rem; }
.ui-ledger b.plus { color: var(--teal); }
.ui-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: .8rem; font-weight: 650; color: var(--muted); background: var(--bg-soft); }
.ui-steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .72rem; background: var(--surface); }
.ui-steps i .icon { width: 12px; height: 12px; }
.ui-steps .is-done i { color: var(--teal); } .ui-steps .is-on { color: var(--ink); background: var(--brand-soft); } .ui-steps .is-on i { background: var(--ink); color: var(--bg); }
.ui-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-fig { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.ui-fig img { width: 70px; height: 78px; object-fit: cover; object-position: 50% 10%; border-radius: 10px; background: var(--bg-soft); }
.ui-fig small { color: var(--muted); font-size: .74rem; }
.ui-fig.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.ui-code { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--dark); color: #F2EFFF; font: 500 .78rem/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; }
.ui-doc-wrap { margin: 1.4em 0 1.8em; display: grid; }
.ui-doc-wrap .ui { justify-self: start; }
@media (max-width: 520px) { .ui-design { grid-template-columns: 1fr; } .ui-conv { grid-template-columns: 1fr .7fr .8fr; } .ui-conv > :nth-child(n+4) { display: none; } }

/* Schalter hell/dunkel */
.ui { color: var(--ink); }

/* Fassung 3c: ruhiger. Charakter als Zweispalter, Vertrauen mit Seitenleiste, Rundgang in der Einrichtung */

.cmsline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.cmsline p { margin: 0; font-weight: 700; }

/* Fassung 3d: zum Überfliegen. Auf einen Blick, Versprechen, Überschriften als Aussagen */
.head h2 { max-width: 24ch; }
.head .lead { font-size: 1.12rem; }

/* Fassung 3e: Referenz, Termin, dunkler Datenschutz, ehrliche Stufen, mehr Farbe */

.cmptable thead .cmptable__us { background: var(--brand); color: #fff; }
.section--trust .head h2, .section--trust h3 { color: var(--on-dark); }
.section--trust .tiers2 p{ color: var(--on-dark-soft); }
.section--trust .more { color: #FF9A88; }
.section--trust .ico--teal { background: rgb(79 209 191 / .15); color: #7FE3D3; }
.section--trust .ico--blue { background: rgb(134 166 255 / .15); color: #A9BFFF; }
.section--trust .ico--coral { background: rgb(255 133 115 / .15); color: #FF9A88; }
.section--trust .ico--violet { background: rgb(178 162 255 / .15); color: #C8BCFF; }
.tiers2 { display: grid; gap: 22px; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgb(255 255 255 / .12); }
@media (min-width: 900px) { .tiers2 { grid-template-columns: 1fr 1.2fr; gap: 40px; } }
.tiers2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tiers2 .tier--next { opacity: .8; }
.booking { display: grid; gap: 20px; max-width: 760px; }
.booking__start { display: grid; gap: 14px; justify-items: start; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.booking__start p { margin: 0; color: var(--ink-soft); }
.person { display: flex; align-items: center; gap: 14px; }
.person b { display: block; font-size: 1.1rem; } .person small { color: var(--muted); }
.booking__mail { font-size: .92rem; }
.booking.is-open .booking__start { display: none; }
.booking__frame { min-height: 720px; background: var(--surface); border-radius: 22px; border: 1px solid var(--line); overflow: hidden; }
.booking__alt { margin: 0; font-size: .92rem; }

/* Der Talky bedient die Website (Abschnitt #act) */

@keyframes tap { 0% { opacity: 0; transform: translate(-60px, 120px) scale(1); } 50% { opacity: 1; transform: none scale(1); } 70% { transform: scale(.75); } 100% { opacity: 0; transform: scale(1); } }

/* ── Fassung 4 (6. November 2026): Startseite als Weg, docs/website/01_Kunden-Plan.md ─────────────── */

/* Hero mit dem echten Talky als Baustein (A04h): links Botschaft und Adressfeld, rechts der Talky */

/* Vorschau anfordern: ein großes Feld, danach die E-Mail */
.req { display: grid; gap: 12px; max-width: 40rem; margin: 1.8rem 0 0; }
.req__row { display: flex; flex-wrap: wrap; gap: 10px; }
.req__url { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-s); }
.req__url:focus-within { border-color: var(--ink); }
.req__url .icon { flex: none; color: var(--muted); }
.req input { width: 100%; min-width: 0; font: 500 1.02rem/1.3 var(--font); color: var(--ink); background: transparent; border: 0; outline: none; }
.req__url input { padding: 15px 0; }
.req--big .req__url input { font-size: 1.1rem; }
.req__go { flex: 0 0 auto; }
.req__fields { display: grid; gap: 10px; }
@media (min-width: 640px) { .req__fields { grid-template-columns: 1fr 1fr; } }
.req__fields label { display: grid; gap: 4px; font-size: .88rem; font-weight: 650; color: var(--ink-soft); }
.req__fields input { padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; }
.req__fields input:focus { border-color: var(--ink); }
.req [aria-invalid="true"], .req__url:has([aria-invalid="true"]) { border-color: var(--brand-ink); }
.req__more .fine { margin: 8px 0 0; }
.req__more[hidden] { display: none; }
.req__msg { margin: 0; min-height: 0; font-weight: 600; color: var(--brand-ink); }
.req__msg:empty { display: none; }
.req__below { margin: 0; font-size: .93rem; color: var(--muted); }
.req__done { padding: 18px 20px; border-radius: 16px; background: var(--teal-bg); }
.req__done b { display: flex; align-items: center; gap: 8px; color: var(--teal); font-size: 1.1rem; }
.req__done p { margin: 6px 0 0; color: var(--ink); }
.req.is-done .req__row, .req.is-done .req__more, .req.is-done .req__below { display: none; }

/* Kennen Sie das? Drei Szenen als Karten */
.painlist .tile { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.painlist h3 { font-size: 1.12rem; }

/* Bald */
.soonline { max-width: 52rem; margin: 14px auto 0; color: var(--ink-soft); text-align: center; font-size: .95rem; }
.soonline .badge { margin: 0 4px 0 0; }

/* Für alle: sieben Verben */
.verbs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .verbs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verbs { grid-template-columns: repeat(4, 1fr); } }
.verb { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; align-content: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.verb .ico { grid-row: 1 / span 2; margin: 0; }
.verb b { font-size: 1.02rem; } .verb span:last-child { color: var(--ink-soft); font-size: .93rem; line-height: 1.4; }

/* Gesichter */
.faces { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .faces { grid-template-columns: repeat(4, 1fr); } }
.face { display: grid; gap: 10px; justify-items: center; }
.face__img { width: 100%; height: 260px; overflow: hidden; border-radius: var(--radius); background: radial-gradient(70% 60% at 50% 70%, color-mix(in srgb, var(--brand) 14%, var(--bg-soft)), var(--bg-soft)); }
.face__img img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.face__img--video img { object-fit: cover; object-position: top; }
.face b { font-size: 1rem; }

/* Zitat in der Referenz */

/* Vergleich in Worten */
.cmptable--text td { font-size: .93rem; color: var(--ink-soft); }
.cmptable--text td.cmptable__us { color: var(--ink); font-weight: 650; }
.cmptable--text td.cmptable__us .icon { display: inline-block; width: 16px; height: 16px; margin: 0 6px -3px 0; color: var(--teal); }

/* Kontrolle auf dunkel */
.promises4 .tile h3 { color: #fff; }
.section--trust .ico--amber { background: rgb(242 182 84 / .15); color: #F2B654; }
.section--trust .ico--rose { background: rgb(255 141 182 / .15); color: #FF8DB6; }

/* Drei Schritte, darunter die Baukästen */
.step { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cmsline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 26px 0 0; color: var(--muted); font-size: .92rem; }
.cmsline b { font-weight: 650; color: var(--ink-soft); }

/* Schluss: Adressfeld und Termin nebeneinander */
.final { background: radial-gradient(80% 120% at 0% 0%, var(--brand-soft), var(--bg) 60%); }
.final__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .final__grid { grid-template-columns: 1.3fr 1fr; gap: 48px; } }
.final h2 { max-width: 20ch; }
.final .booking__start { box-shadow: var(--shadow-s); }

/* Unterseiten */
.hero--page { padding: 64px 0 40px; }
.hero--page h1 { max-width: 20ch; }
.jump { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--ink-soft); background: var(--surface); }
.jump a:hover { color: var(--ink); border-color: var(--ink); }
.section--trust .tile h3 { color: #fff; }

/* Branchen: so klingt es */
.example { display: grid; gap: 28px; align-items: start; }
@media (min-width: 950px) { .example { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.example__points { gap: 22px; margin-top: 18px; }
.example__points .tile { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; }
.example__points .ico { grid-row: 1 / span 2; margin: 0; }
.example__points p { margin: 0; color: var(--ink-soft); }
.example__chat { display: grid; gap: 10px; padding: 22px; }
.example__chat .bubble { max-width: 88%; font-size: .97rem; }

/* Fußzeile mit Überschriften */
.footer__h { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9D99B5; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr auto; } }
.plans + .fine { margin-top: 18px; }
.footer__links a { text-decoration: none; } .footer__links a:hover { text-decoration: underline; }
@media (max-width: 560px) { .req__go { flex: 1 1 100%; } }

/* ── Fassung 4b (Tim, 6. November 2026: Richtung B): Bühne, Film, Zahlen, vorher/nachher ─────────────── */
.stage, .stats { padding: 88px 0; position: relative; overflow: clip; }
.big-h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: .4em; }
.big-h1 span, .big-h2 span { color: var(--brand); }
.big-h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; margin-bottom: 1.2em; }
.big-h2--center { text-align: center; margin-inline: auto; }

/* Der Film */

@keyframes film-k-wave { 0%, 100% { height: 5px; } 50% { height: 13px; } }

/* Zeitplan, 14 s: Frage, Stelle zeigen, ausfüllen, Ja, gesendet */

@keyframes film-k-l1 { 0%, 3% { opacity: 0; transform: translateY(10px); } 6%, 24% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes film-k-l2 { 0%, 25% { opacity: 0; transform: translateY(10px); } 28%, 45% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; } }
@keyframes film-k-l3 { 0%, 46% { opacity: 0; transform: translateY(10px); } 49%, 68% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; } }
@keyframes film-k-l4 { 0%, 69% { opacity: 0; transform: translateY(10px); } 72%, 84% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; } }
@keyframes film-k-scroll { 0%, 24% { transform: none; } 32%, 96% { transform: translateY(-104px); } 100% { transform: none; } }
@keyframes film-k-p2 { 0%, 28% { box-shadow: none; } 32%, 96% { box-shadow: 0 0 0 2px var(--brand), 0 0 0 8px var(--brand-soft); } 100% { box-shadow: none; } }
@keyframes film-k-p2n { 0%, 24% { color: inherit; } 27%, 96% { color: var(--brand-ink); font-weight: 700; } }
@keyframes film-k-d0 { 0%, 50% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes film-k-d1 { 0%, 56% { opacity: 0; } 58%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes film-k-d2 { 0%, 62% { opacity: 0; } 64%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes film-k-p5 { 0%, 78% { transform: none; } 80% { transform: scale(.92); } 83%, 100% { transform: none; } }
@keyframes film-k-p6 { 0%, 82% { opacity: 0; transform: scale(.8); } 85%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes film-k-talking { 0%, 26% { opacity: 0; } 28%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }

/* Hero B: Bühne, dunkel, alles in der Mitte */
.stage { background: radial-gradient(70% 60% at 50% 0%, #3A2234, #1C1936 70%); color: #fff; padding: 72px 0 96px; }
.stage__inner { display: grid; justify-items: center; text-align: center; }
.stage .big-h1 { color: #fff; }
.stage__pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); font-weight: 650; margin-bottom: 1.4rem; }
.stage__pill .icon { color: #FF9A88; width: 18px; height: 18px; }
.stage .req { margin: .8rem auto 2.6rem; justify-items: center; }
.stage .req__below { color: #C9C6DA; }
.stage .btn--primary { background: var(--brand); color: #fff; }

.ba { background: var(--bg-soft); }

/* Vorher/nachher B: ein Rahmen mit Schieber */
.ba { background: var(--bg); }

/* Zahlen B: Karten */
.stats { background: var(--bg-soft); padding: 64px 0; }
.stats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats__list { grid-template-columns: repeat(5, 1fr); } }
.stats__list li { display: grid; gap: 6px; padding: 24px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.stats__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); }
.stats__list b { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.stats__list span:last-child { color: var(--ink-soft); font-weight: 600; }

/* Bühne: Kopf der Seite */
.stage { padding: 64px 0 96px; }
.stage__lead { max-width: 40rem; margin: 0 auto; font-size: 1.18rem; color: #C9C6DA; }
.stage .req { margin: 1.8rem auto .6rem; width: min(100%, 40rem); }
.stage .req__url { border-color: transparent; }
.stage .req__more label span, .stage .req__more .fine, .stage .req__more a { color: #C9C6DA; }
.stage .req__msg { color: #FFB3A6; }
.stage .req__done { text-align: left; }
.stage__talk { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 40px; padding: 8px 16px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: transparent; color: #fff; font: 650 .98rem/1.2 var(--font); cursor: pointer; }
.stage__talk:hover { background: rgb(255 255 255 / .08); }
.stage__talk .icon { width: 18px; height: 18px; color: #FF9A88; }
.stage__pill { color: #fff; }

/* Vorher/nachher */

.ba .soonline { margin-top: 30px; }

/* Für alle: große Wörter auf dunkel */
.everyone .big-h2 { color: #fff; }
.verbs { gap: 14px; margin: 1.6rem 0 18px; }
.everyone .verb { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); padding: 20px; }
.everyone .verb b { color: #fff; font-size: 1.25rem; }
.everyone .verb span:last-child { color: #C9C6DA; }
.verb__ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(255 133 115 / .15); color: #FF9A88; }
.verb--teal .verb__ico { background: rgb(79 209 191 / .15); color: #7FE3D3; }
.verb--blue .verb__ico { background: rgb(134 166 255 / .15); color: #A9BFFF; }
.verb--amber .verb__ico { background: rgb(242 182 84 / .15); color: #F2B654; }
.verb--violet .verb__ico { background: rgb(178 162 255 / .15); color: #C8BCFF; }
.verb--rose .verb__ico { background: rgb(255 141 182 / .15); color: #FF8DB6; }

/* Kontrolle: große Karten */
.promises4 .tile { padding: 26px; border-radius: 22px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); }
.promises4 .ico { width: 56px; height: 56px; border-radius: 16px; }
.promises4 .ico .icon { width: 28px; height: 28px; }
.promises4 h3 { font-size: 1.3rem; }

/* Schritte: große Ziffern */
.step__num { width: 52px; height: 52px; font-size: 1.5rem; font-weight: 800; background: var(--brand); color: #fff; }
.step h3 { font-size: 1.3rem; }

/* Schluss als zweite Bühne */
.final { background: radial-gradient(70% 80% at 0% 0%, #3A2234, #1C1936 70%); color: #fff; }
.final h2 { color: #fff; }
.final .lead { color: #C9C6DA; }
.final .req__url { border-color: transparent; }
.final .req__below, .final .req__more label span, .final .req__more .fine, .final .req__more a { color: #C9C6DA; }
.final .btn--primary { background: var(--brand); color: #fff; }
.final .booking__start { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); }
.final .booking__start p, .final .person small { color: #C9C6DA; }
.final .booking__start .btn--secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.final .booking__mail a { color: #fff; }

/* Branchen: Kopf des Beispiels */
.example__talky { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.example__talky img { width: 44px; height: auto; }
.person__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.everyone .big-h2 { margin-bottom: .5em; }
.final { background: radial-gradient(70% 80% at 0% 0%, #3A2234, #262046 70%); }
/* Unterseiten mit demselben dunklen Kopf wie die Startseite */
.hero--page { background: radial-gradient(70% 60% at 50% 0%, #3A2234, #1C1936 70%); color: #fff; padding: 64px 0 56px; }
.hero--page h1 { color: #fff; }
.hero--page .lead, .hero--page > .wrap > .fine { color: #C9C6DA; }
.hero--page .kicker { color: #FF9A88; }
.hero--page .jump a { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .2); color: #fff; }
.hero--page .billing { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.hero--page .billing__opt { color: #C9C6DA; }
.hero--page .billing__opt[aria-pressed="true"] { background: #fff; color: #1C1936; }
.hero--page .plans { color: var(--ink); }
@media (max-width: 560px) { .stats__list b { font-size: 2.2rem; } }
@media (max-width: 560px) {
  .stats__list { grid-template-columns: 1fr; gap: 8px; }
  .stats__list li { grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; padding: 14px 18px; }
  .stats__list li b { font-size: 2rem; }
}

.face__img--own img { object-fit: contain; object-position: bottom; }

/* Ohne und mit Talky: ein Weg, der sich am Ende in zwei Ausgänge teilt */
.ba__title { max-width: 24ch; }
.ba__grid { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 900px) { .ba__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ba__card { padding: 26px 28px 30px; border-radius: 28px; }
.ba__card--without { background: #EEECF2; }
.ba__card--with { background: var(--brand); color: #fff; }
.ba__label { margin: 0 0 22px; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ba__card--without .ba__label { color: #6C6980; }
.ba__card--with .ba__label { color: #FFE3DD; }
.ba__flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ba__flow > li + li::before { content: "→"; font-size: 1.6rem; opacity: .5; margin-right: 12px; }
.ba__flow > li { display: flex; align-items: center; }
.ba__step > .ba__ico + b { margin-top: 10px; }
.ba__step { flex-direction: column; text-align: center; max-width: 9rem; }
.ba__step + li { position: relative; }
.ba__flow > li.ba__step + li.ba__step::before, .ba__flow > li.ba__step + li.ba__ends::before { position: absolute; left: -34px; top: 22px; }
.ba__flow > li.ba__step + li.ba__step, .ba__flow > li.ba__step + li.ba__ends { margin-left: 34px; }
.ba__ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; }
.ba__ico .icon { width: 36px; height: 36px; }
.ba__card--without .ba__ico { background: #fff; color: #6C6980; }
.ba__card--with .ba__ico { background: #fff; color: var(--brand); }
.ba__step b, .ba__end b { font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ba__card--without b { color: #5E5A72; }
.ba__ends { flex-direction: column; align-items: stretch !important; gap: 4px; }
.ba__flow > li.ba__ends::before { top: 50% !important; transform: translateY(-50%); }
.ba__end { display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 16px; background: #fff; }
.ba__end .icon { width: 24px; height: 24px; flex: none; }
.ba__card--without .ba__end { color: #5E5A72; }
.ba__card--with .ba__end { color: var(--brand); }
.ba__card--with .ba__end b { color: var(--ink); }
.ba__ends em { font-style: normal; font-weight: 700; font-size: .85rem; text-align: center; opacity: .75; }
.soonline { display: flex; gap: 10px; align-items: center; justify-content: center; max-width: 52rem; margin: 26px auto 0; color: var(--ink-soft); font-weight: 600; text-align: center; }
.soonline .icon { flex: none; color: var(--brand); }
@media (max-width: 640px) { .ba__flow { flex-direction: column; } .ba__flow > li + li::before { content: "↓"; position: static !important; margin: 0 0 6px; transform: none; } .ba__flow > li { flex-direction: column; } .ba__flow > li.ba__step + li { margin-left: 0 !important; } }
.ba__end b { white-space: nowrap; }

/* Gesichter und die Randnotiz „Übrigens“ (beim Aufräumen am 6. November versehentlich verloren, wiederhergestellt) */
.face__img--video img { object-fit: cover; object-position: 50% 42%; }
.face--anim { cursor: default; }
.btw { display: flex; gap: 18px; align-items: center; max-width: 46rem; margin: 34px 0 0; padding: 18px 22px; border-radius: 18px; background: var(--bg-soft); border: 1px dashed var(--line-strong); }
.btw img { flex: none; width: 70px; height: auto; }
.btw p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.btw__kicker { font-weight: 800; color: var(--brand-ink) !important; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem !important; }
.btw__title { font-weight: 700; color: var(--ink) !important; font-size: 1.02rem !important; margin: 2px 0 4px !important; }
.btw .more { margin-top: 6px; }

/* Ihr Wissen: Liste links, Ausschnitte aus dem Kundenbereich rechts */
.know { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .know { grid-template-columns: 1fr 1fr; gap: 48px; } }
.know__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.know__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.know__list .ico { margin: 0; }
.know__list h3 { margin: 4px 0 2px; }
.know__list p { margin: 0; color: var(--ink-soft); }
.know__shot { display: grid; gap: 16px; }
.trust__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; }
.trust__links .more { margin: 0; }

/* Das Gespräch im Kopf der Seite: ein Protokoll, das langsam nach oben läuft (site.js setzt .is-live, .on, .speaking
   und die Verschiebung über die CSSOM). Ohne JavaScript oder mit reduzierter Bewegung steht alles da und lässt sich
   scrollen */

.talk__view { position: relative; height: 360px; margin-top: 44px; overflow: auto; align-self: start;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 100%); }
.talk__log { list-style: none; margin: 0; padding: 56px 0 26px; display: grid; gap: 16px; transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); }
.talk__line { display: grid; gap: 4px; }
.talk__who { display: inline-flex; gap: 7px; align-items: center; justify-self: start; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.talk__who .icon { width: 15px; height: 15px; }
.talk__line--visitor .talk__who { color: #6C6980; }
.talk__line--talky .talk__who { color: var(--brand-ink); }
.talk__wave { display: inline-flex; gap: 2px; align-items: center; height: 14px; opacity: 0; transition: opacity .2s ease; }
.talk__wave i { width: 3px; height: 4px; border-radius: 2px; background: currentColor; animation: talk-bar .7s ease-in-out infinite; }
.talk__wave i:nth-child(2) { animation-delay: .1s; } .talk__wave i:nth-child(3) { animation-delay: .25s; } .talk__wave i:nth-child(4) { animation-delay: .05s; } .talk__wave i:nth-child(5) { animation-delay: .3s; }
.talk__line.speaking .talk__wave { opacity: 1; }
@keyframes talk-bar { 0%, 100% { height: 3px; } 50% { height: 13px; } }
.talk__text { margin: 0; font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 650; line-height: 1.45; }
.talk__line--visitor .talk__text { color: var(--ink); }
.talk__line--talky .talk__text { color: var(--brand-ink); }
.talk__do { justify-self: start; display: inline-flex; gap: 7px; align-items: center; margin: 4px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--teal-bg); color: var(--teal); font-size: .86rem; font-weight: 750; }
.talk__do .icon { width: 16px; height: 16px; }
.talk__listen { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 .95rem/1.2 var(--font); cursor: pointer; box-shadow: var(--shadow); }
.talk__listen:hover, .talk__listen[aria-pressed="true"] { background: var(--brand); }
.talk__listen .icon { width: 18px; height: 18px; }
@media (max-width: 759px) { .talk__view { height: 300px; margin-top: 40px; } .talk__listen { top: 12px; right: 12px; } }

/* Wo die KI arbeitet: Tabelle mit Sprachmodell und Ihren Daten */
.tiertable { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: .95rem; }
.tiertable thead th { padding: 0 14px 4px; text-align: left; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9D99B5; }
.tiertable tbody th, .tiertable td { padding: 12px 14px; background: rgb(255 255 255 / .06); border-top: 1px solid rgb(255 255 255 / .12); border-bottom: 1px solid rgb(255 255 255 / .12); text-align: left; vertical-align: middle; }
.tiertable tbody th { border-left: 1px solid rgb(255 255 255 / .12); border-radius: 14px 0 0 14px; }
.tiertable td:last-child { border-right: 1px solid rgb(255 255 255 / .12); border-radius: 0 14px 14px 0; }
.tiertable tbody th b { display: block; color: #fff; }
.tiertable tbody th em { display: inline-block; margin-top: 4px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #F2B654; background: rgb(242 182 84 / .12); }
.tiertable tbody th em.now { color: #7FE3D3; background: rgb(79 209 191 / .14); }
.tiertable td { color: #fff; font-weight: 600; }
.tiertable td .icon { display: inline-block; width: 15px; height: 15px; margin: 0 6px -2px 0; color: #7FE3D3; }
.tiertable .tier--next th, .tiertable .tier--next td:nth-child(2) { opacity: .8; }
.face__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3, .1, .2, 1); }
.face__track img { flex: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Entwurf: der Talky auf einer Website (siteDemo). Eine kleine, glaubwürdige Website im Browserfenster */

.is-shown { box-shadow: 0 0 0 3px #F0604D, 0 0 0 10px rgb(240 96 77 / .18) !important; animation: ds-pulse 1.6s ease-in-out infinite; }
@keyframes ds-pulse { 50% { box-shadow: 0 0 0 3px #F0604D, 0 0 0 16px rgb(240 96 77 / .08); } }
/* der Talky auf der Website, unten rechts, mit Untertitel */

/* Entwurf 2: Handy mit schlichter Website links, Gespräch rechts, Scheinwerfer auf das Gezeigte */
.pdemo { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; width: min(100%, 980px); margin: 0 auto; padding: 30px; text-align: left; background: #fff; border-radius: 28px; box-shadow: 0 40px 120px -30px rgb(240 96 77 / .45); }
@media (min-width: 820px) { .pdemo { grid-template-columns: 300px 1fr; gap: 44px; padding: 34px 44px; } }
.pdemo .talk__listen { top: 18px; right: 18px; }
.pdemo__view { height: 520px; margin-top: 30px; }
.pdemo.is-live .talk__view { overflow: hidden; }
.pdemo.is-live .talk__line { opacity: 0; transition: opacity .3s ease; }
.pdemo.is-live .talk__line.on { opacity: 1; }
.pdemo.is-live .talk__text > span { opacity: 0; transition: opacity .18s ease; }
.pdemo.is-live .talk__text > span.on { opacity: 1; }
.pdemo.is-live .talk__do { opacity: 0; transform: scale(.92); transition: opacity .3s ease, transform .3s ease; }
.pdemo.is-live .talk__do.on { opacity: 1; transform: none; }
/* das Handy */
.ph { justify-self: center; width: 280px; height: 570px; padding: 12px; border-radius: 44px; background: #1C1936; box-shadow: 0 30px 60px -20px rgb(28 25 54 / .55), inset 0 0 0 2px #3A3656; }
.ph__screen { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FBF8F3; color: #2A2620; }
.ph__url { display: flex; gap: 5px; align-items: center; justify-content: center; height: 34px; padding-top: 6px; font-size: .74rem; font-weight: 600; color: #4A4659; background: #F1EFEB; }
.ph__url .icon { width: 11px; height: 11px; color: #0E8A7C; }
.ph__page { position: absolute; inset: 34px 0 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .5s ease; }
.ph__page.is-on { opacity: 1; }
.ph__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1F3A4A; color: #F5EBDD; font-family: Georgia, serif; font-size: 1rem; }
.ph__burger { display: grid; gap: 3px; } .ph__burger i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.ph__scroll { flex: 1; overflow: hidden; padding: 0 0 120px; }
.ph__hero { padding: 34px 18px 28px; background: linear-gradient(160deg, rgb(31 58 74 / .15), rgb(31 58 74 / .7)), linear-gradient(180deg, #F2B66B 0%, #E07A4F 45%, #6E4B6E 70%, #22465A 72%, #1C3A4B 100%); color: #fff; }
.ph__hero h4 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; line-height: 1.15; }
.ph__hero--small { padding: 22px 18px 18px; }
.ph__card { margin: 14px 14px 0; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #EAE3D8; transition: opacity .4s ease, filter .4s ease, box-shadow .4s ease, transform .4s ease; }
.ph__card h5 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 1.02rem; }
.ph__card p { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin: 2px 0; font-size: .86rem; }
.ph__card p .icon { width: 14px; height: 14px; color: #0E8A7C; flex: none; }
.ph__card p .icon + span { margin-right: auto; }
.ph__form label { display: grid; gap: 2px; margin-bottom: 7px; }
.ph__form small { font-size: .7rem; color: #6A6156; }
.ph__form i { display: block; height: 30px; padding: 5px 9px; border: 1px solid #CFC6B8; border-radius: 6px; font-style: normal; font-size: .86rem; background: #FFFDF9; white-space: nowrap; overflow: hidden; }
.ph__btn { display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 6px; background: #E9A23B; color: #1F2A30; font-weight: 700; font-size: .86rem; transition: transform .15s; }
.ph__btn.is-pressed { transform: scale(.93); background: #C7841F; }
.ph__sent { display: none !important; margin-top: 8px !important; color: #0E8A7C; font-weight: 700; }
.ph__sent.on { display: flex !important; }
/* Scheinwerfer: der Rest wird blass, das Gezeigte hebt sich ab */
.ph__scroll.is-spot > *:not(.is-shown) { opacity: .28; filter: grayscale(.8); }
.ph__card.is-shown { transform: scale(1.03); box-shadow: 0 0 0 3px #F0604D, 0 14px 30px -10px rgb(240 96 77 / .45); }
/* der Talky auf der Website, unten rechts im Handy */
.ph__talky { position: absolute; right: 8px; bottom: 6px; z-index: 3; width: 78px; }
.ph__talky img { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .3)); }
.ph__ring { position: absolute; left: 50%; bottom: 16px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; box-shadow: 0 0 0 0 rgb(240 96 77 / .5); z-index: -1; }
.pdemo[data-speaker="talky"] .ph__ring { animation: ph-ring 1.2s ease-out infinite; }
@keyframes ph-ring { from { box-shadow: 0 0 0 0 rgb(240 96 77 / .5); } to { box-shadow: 0 0 0 26px rgb(240 96 77 / 0); } }
@media (max-width: 819px) { .pdemo__view { height: 320px; margin-top: 0; } }
/* Die Besucherin spricht: der Talky hört zu (Mikrofon mit Pegel über ihm), ihre Zeile im Protokoll ist hervorgehoben */
.ph__listen { position: absolute; right: 4px; bottom: 100%; margin-bottom: 4px; display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border-radius: 999px; background: #1C1936; color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.ph__listen .icon { width: 13px; height: 13px; color: #7FE3D3; }
.ph__listen .talk__wave { opacity: 1; color: #7FE3D3; }
.pdemo[data-speaker="visitor"] .ph__listen { opacity: 1; transform: none; }
.pdemo[data-speaker="visitor"] .ph__ring { animation: ph-ring-listen 1.4s ease-out infinite; }
@keyframes ph-ring-listen { from { box-shadow: 0 0 0 0 rgb(79 209 191 / .55); } to { box-shadow: 0 0 0 22px rgb(79 209 191 / 0); } }
.pdemo .talk__line--visitor.speaking { margin: -6px -10px; padding: 6px 10px; border-radius: 12px; background: #F1EFF5; }
.pdemo .talk__line--visitor.speaking .talk__who { color: var(--ink); }
.pdemo .talk__line.speaking .talk__wave { opacity: 1; }
@media (max-width: 819px) { .pdemo .talk__listen { position: static; justify-self: center; } }

/* ── Die Geschichte der Warteseite (A10g §3.6): acht Szenen, je eine Animation, startet mit .is-on ─────── */
.big-h1--small { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 22ch; margin-inline: auto; }
.stage--story { padding-bottom: 72px; }
.story { position: relative; width: min(100%, 860px); margin: 18px auto 0; padding: 30px 30px 22px; text-align: center; background: #fff; color: var(--ink); border-radius: 28px; box-shadow: 0 40px 120px -30px rgb(240 96 77 / .45); }
.story__slides { list-style: none; margin: 0; padding: 0; display: grid; }
.st { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.st.is-on { opacity: 1; visibility: visible; }
.st__stage { position: relative; height: 300px; display: grid; place-items: center; margin-bottom: 18px; }
.st__title { margin: 0 0 6px; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.st__sub { margin: 0 auto; max-width: 34rem; color: var(--ink-soft); }
.story__nav { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.story__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: width .3s, background .3s; }
.story__dot[aria-current="true"] { width: 28px; border-radius: 6px; background: var(--brand); }
.story.is-still .story__slides { gap: 40px; } .story.is-still .st { grid-area: auto; opacity: 1; visibility: visible; } .story.is-still .story__nav { display: none; }
.st .icon { width: 18px; height: 18px; flex: none; }
@keyframes st-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes st-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes st-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes st-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes st-down { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-glow { 50% { box-shadow: 0 0 0 18px rgb(240 96 77 / .12), 0 0 60px 10px rgb(240 96 77 / .25); } }
.st:not(.is-on) * { animation: none !important; }
.story:not(.is-still) .st-stag { opacity: 0; }

/* 1 Lesen: Seiten erscheinen nacheinander, der Talky leuchtet, der Zähler steigt */
.st-read { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; width: 100%; max-width: 640px; }
.st-read__pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; justify-items: end; }
.st-read__pages li { display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 650; font-size: .9rem; }
.st-read__pages .icon { color: var(--brand); }
.is-on .st-read__pages li { animation: st-left .5s ease forwards; }
.is-on .st-d0 { animation-delay: .2s !important; } .is-on .st-d1 { animation-delay: .7s !important; } .is-on .st-d2 { animation-delay: 1.2s !important; }
.is-on .st-d3 { animation-delay: 1.7s !important; } .is-on .st-d4 { animation-delay: 2.2s !important; } .is-on .st-d5 { animation-delay: 2.7s !important; }
.st-read__talky { position: relative; width: 140px; }
.st-read__talky img { position: relative; z-index: 1; width: 100%; height: auto; }
.st-read__glow { position: absolute; inset: 20% 10% 10%; border-radius: 50%; background: radial-gradient(circle, rgb(240 96 77 / .25), transparent 70%); }
.is-on .st-read__glow { animation: st-glow 1.4s ease-in-out infinite; }
.st-read__count { display: grid; justify-items: start; margin: 0; text-align: left; }
.st-read__num { display: grid; }
.st-read__num b { grid-area: 1 / 1; font-size: 4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--brand); opacity: 0; }
.st-read__count small { font-weight: 700; color: var(--ink-soft); }
.is-on .st-n0 { animation: st-num 7.5s .2s forwards; } .is-on .st-n1 { animation: st-num 7.5s 1.4s forwards; }
.is-on .st-n2 { animation: st-num 7.5s 2.6s forwards; } .is-on .st-n3 { animation: st-in .4s 3.8s forwards; }
@keyframes st-num { 0% { opacity: 0; } 2%, 15% { opacity: 1; } 17%, 100% { opacity: 0; } }
.story.is-still .st-n3 { opacity: 1; }

/* 2 Widerspruch: zwei Karten, die Preise leuchten rot, ≠, dann die Meldung */
.st-clash { position: relative; height: 100%; padding-bottom: 50px; display: flex; gap: 18px; align-items: center; justify-content: center; width: 100%; }
.st-clash__card { display: grid; gap: 4px; min-width: 190px; padding: 18px 20px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); text-align: left; }
.st-clash__card small { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 700; }
.st-clash__card span { font-weight: 650; }
.st-clash__card b { justify-self: start; font-size: 2rem; letter-spacing: -.02em; padding: 0 6px; border-radius: 8px; }
.is-on .st-clash__card--0 { animation: st-left .6s .2s both; } .is-on .st-clash__card--1 { animation: st-right .6s .6s both; }
.is-on .st-clash__card b { animation: st-red .6s 1.6s both; }
@keyframes st-red { to { color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand); } }
.st-clash__ne { font-size: 2.6rem; font-weight: 800; color: var(--brand); }
.is-on .st-clash__ne { animation: st-pop .5s 2.1s both; }
.st-clash__mail { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
.st-clash__mail .icon { color: #F2B654; }
.is-on .st-clash__mail { animation: st-down .5s 3s both; }
.story:not(.is-still) .st-clash__mail { opacity: 0; }

/* 3 Auf dem Laufenden: der Preis auf der Seite ändert sich, er liest nach */
.st-learn { display: flex; gap: 26px; align-items: center; justify-content: center; }
.st-learn__page { width: 280px; padding: 0 0 16px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; text-align: left; }
.st-learn__bar { display: flex; gap: 5px; padding: 9px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.st-learn__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.st-ghost { height: 9px; margin: 12px 14px 0; border-radius: 6px; background: var(--line); width: 70%; }
.st-ghost--s { width: 45%; }
.st-learn__row { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 14px 0; padding: 10px 12px; border-radius: 10px; background: #fff; font-weight: 700; }
.st-learn__row b { display: grid; justify-items: end; }
.st-learn__row s { grid-area: 1 / 1; color: var(--muted); }
.st-learn__row em { grid-area: 1 / 1; font-style: normal; color: var(--brand-ink); opacity: 0; }
.is-on .st-learn__row s { animation: st-strike .5s 1s forwards; }
.is-on .st-learn__row em { animation: st-in .4s 1.6s forwards; }
@keyframes st-strike { to { opacity: 0; transform: translateY(-10px); } }
.st-learn__sync { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.st-learn__sync .icon { width: 30px; height: 30px; }
.is-on .st-learn__sync .icon { animation: st-spin 1s 1.8s 2 linear; }
.st-learn__done { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--teal-bg); color: var(--teal); font-weight: 750; }
.is-on .st-learn__done { animation: st-pop .5s 3.4s both; }
.story:not(.is-still) .st-learn__done { opacity: 0; }

/* 4 Kontrolle: der Seitenbaum, zwei Schalter springen um */
.st-control { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: min(100%, 460px); }
.st-control__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 650; }
.st-control__row > span:first-child { display: inline-flex; gap: 8px; align-items: center; } .st-control__row .icon { color: var(--brand); }
.st-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-size: .8rem; }
.st-seg i { padding: 4px 9px; border-radius: 7px; font-style: normal; font-weight: 700; color: var(--muted); }
.st-seg--on .st-seg__on{ background: var(--ink); color: #fff; }
.is-on .st-seg--to-off .st-seg__on, .is-on .st-seg--to-know .st-seg__on { animation: st-deact .3s var(--fd) forwards; }
.is-on .st-seg--to-off .st-seg__off, .is-on .st-seg--to-know .st-seg__know { animation: st-act .3s var(--fd) forwards; }
.st-f2 { --fd: 1.8s; } .st-f3 { --fd: 2.8s; }
@keyframes st-act { to { background: var(--brand); color: #fff; } }
@keyframes st-deact { to { background: transparent; color: var(--muted); } }
.is-on .st-control__row--flip { animation: st-dim .4s calc(var(--fd, 0s) + .1s) forwards; }
.st-control__row--flip:has(.st-f2) { --fd: 1.8s; } .st-control__row--flip:has(.st-f3) { --fd: 2.8s; }
@keyframes st-dim { to { border-color: var(--brand); background: var(--brand-soft); } }

/* 5 Sprachen: 50+ in der Mitte, Grüße rundherum */
.st-langs { position: relative; width: 520px; max-width: 100%; height: 290px; }
.st-langs img { position: absolute; left: 50%; bottom: 0; width: 120px; height: auto; transform: translateX(-50%); }
.st-langs__big { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); font-size: 4.6rem; font-weight: 800; letter-spacing: -.05em; color: var(--brand); }
.is-on .st-langs__big { animation: st-pop .6s .2s both; }
.st-langs__w { position: absolute; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: var(--ink); color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.st-w0 { left: 2%; top: 14%; } .st-w1 { right: 4%; top: 10%; } .st-w2 { left: 8%; top: 44%; } .st-w3 { right: 6%; top: 42%; } .st-w4 { left: 0; top: 74%; }
.st-w5 { right: 0; top: 72%; } .st-w6 { left: 22%; top: 2%; } .st-w7 { right: 22%; top: 0; } .st-w8 { left: 18%; top: 88%; } .st-w9 { right: 16%; top: 88%; }
.st-langs__w:nth-child(odd) { background: var(--brand); }
.is-on .st-langs__w { animation: st-pop .45s both; }
.is-on .st-w0 { animation-delay: .7s !important; } .is-on .st-w1 { animation-delay: 1s !important; } .is-on .st-w2 { animation-delay: 1.3s !important; } .is-on .st-w3 { animation-delay: 1.6s !important; }
.is-on .st-w4 { animation-delay: 1.9s !important; } .is-on .st-w5 { animation-delay: 2.2s !important; } .is-on .st-w6 { animation-delay: 2.5s !important; } .is-on .st-w7 { animation-delay: 2.8s !important; }
.is-on .st-w8 { animation-delay: 3.1s !important; } .is-on .st-w9 { animation-delay: 3.4s !important; }

/* 6 Formular: Felder füllen sich, Rückfrage, Ja, gesendet */
.st-form { display: flex; gap: 22px; align-items: center; justify-content: center; text-align: left; }
.st-form__card { display: grid; gap: 7px; width: 240px; padding: 16px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.st-form__card label { display: grid; gap: 2px; } .st-form__card small { font-size: .72rem; color: var(--muted); font-weight: 650; }
.st-form__card i { display: block; height: 32px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-style: normal; font-weight: 650; overflow: hidden; white-space: nowrap; }
.st-form__card em { display: inline-block; font-style: normal; clip-path: inset(0 100% 0 0); }
.is-on .st-t0 { animation: st-type .6s .3s steps(8) forwards; } .is-on .st-t1 { animation: st-type .6s 1s steps(8) forwards; } .is-on .st-t2 { animation: st-type .6s 1.7s steps(8) forwards; }
@keyframes st-type { to { clip-path: inset(0 0 0 0); } }
.story.is-still .st-form__card em { clip-path: none; }
.st-form__btn { justify-self: start; margin-top: 4px; padding: 7px 14px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; }
.is-on .st-form__btn { animation: st-press .3s 4s; }
@keyframes st-press { 50% { transform: scale(.92); background: var(--brand); } }
.st-form__sent { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0 0; color: var(--teal); font-weight: 750; }
.is-on .st-form__sent { animation: st-in .4s 4.3s both; }
.st-form__talk { display: grid; gap: 10px; width: 230px; }
.st-form__ask, .st-form__yes { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; border-radius: 16px; font-weight: 700; }
.st-form__ask { background: var(--brand); color: #fff; border-bottom-left-radius: 4px; }
.st-form__yes { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.is-on .st-form__ask { animation: st-in .4s 2.4s both; } .is-on .st-form__yes { animation: st-in .4s 3.3s both; }
.story:not(.is-still) .st-form__sent, .story:not(.is-still) .st-form__ask, .story:not(.is-still) .st-form__yes { opacity: 0; }

/* 7 Vor dem Klick: alles aus, ein Klick, er wacht auf */
.st-privacy { display: flex; gap: 30px; align-items: center; justify-content: center; }
.st-privacy__off { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-privacy__off li { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 700; }
.st-privacy__off .icon { color: var(--brand); }
.st-privacy__talky { position: relative; width: 130px; }
.st-privacy__talky img { position: relative; z-index: 1; width: 100%; height: auto; filter: grayscale(1) brightness(.85); }
.is-on .st-privacy__talky img { animation: st-wake .5s 2.6s forwards; }
@keyframes st-wake { to { filter: none; } }
.st-privacy__ring { position: absolute; inset: 25% 10% 5%; border-radius: 50%; }
.is-on .st-privacy__ring { animation: st-glow 1.4s 2.8s ease-in-out infinite; }
.st-privacy__hand { position: absolute; z-index: 2; left: 70%; top: 70%; width: 22px; height: 22px; border-radius: 50%; background: rgb(28 25 54 / .85); box-shadow: 0 0 0 6px rgb(28 25 54 / .15); opacity: 0; }
.is-on .st-privacy__hand { animation: st-tap 1.6s 1s forwards; }
@keyframes st-tap { 0% { opacity: 0; transform: translate(80px, 60px); } 50% { opacity: 1; transform: none; } 70% { transform: scale(.7); } 100% { opacity: 0; transform: scale(1.4); } }
.st-privacy__on { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--teal-bg); color: var(--teal); font-weight: 750; }
.is-on .st-privacy__on { animation: st-pop .5s 3s both; }
.story:not(.is-still) .st-privacy__on { opacity: 0; }

/* 8 Gleich fertig: die Mail kommt, drei Dinge zum Ausprobieren */
.st-ready { display: flex; gap: 30px; align-items: center; justify-content: center; text-align: left; }
.st-ready__mail { display: grid; justify-items: center; gap: 8px; width: 190px; padding: 22px 16px; border-radius: 18px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
.st-ready__mail > .icon { width: 34px; height: 34px; color: #FF9A88; }
.st-ready__mail b { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 8px; background: rgb(255 255 255 / .1); letter-spacing: .2em; }
.is-on .st-ready__mail { animation: st-fly .8s .2s both; }
@keyframes st-fly { from { opacity: 0; transform: translate(-80px, -40px) rotate(-12deg); } to { opacity: 1; transform: none; } }
.st-ready__tries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-ready__tries li { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.05rem; }
.st-ready__tries .icon { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--teal-bg); color: var(--teal); }
.is-on .st-ready__tries li { animation: st-in .4s both; }
.is-on .st-r0 { animation-delay: 1.2s !important; } .is-on .st-r1 { animation-delay: 1.9s !important; } .is-on .st-r2 { animation-delay: 2.6s !important; }
@media (max-width: 640px) {
  .st__stage { height: 340px; }
  .st-read { grid-template-columns: 1fr; gap: 8px; } .st-read__pages { justify-items: center; grid-template-columns: 1fr 1fr; } .st-read__talky { display: none; }
  .st-clash { flex-direction: column; gap: 8px; } .st-clash__mail { top: auto; bottom: -6px; }
  .st-learn, .st-form, .st-privacy, .st-ready { flex-direction: column; gap: 12px; }
  .st-learn__sync { display: none; } .st-langs__w { font-size: .8rem; }
}

/* Der Stand der Vorschau: auffällig, immer in Bewegung (Drehkreis, Streifen im Balken), fünf Schritte als Punkte */
.sstat { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; width: min(100%, 860px); margin: 8px auto 0; padding: 16px 22px; text-align: left; border-radius: 20px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); color: #fff; }
.sstat__spin { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgb(255 255 255 / .18); border-top-color: var(--brand); animation: st-spin 1s linear infinite; }
.sstat.is-done .sstat__spin { animation: none; border-color: #4FD1BF; }
.sstat__text { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.sstat__bar { position: relative; display: block; height: 10px; margin: 8px 0 4px; border-radius: 999px; background: rgb(255 255 255 / .14); overflow: hidden; }
.sstat__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--brand) 0 10px, #FF8A78 10px 20px); background-size: 28px 28px; transition: width .6s ease; animation: sstat-stripes .8s linear infinite; }
.sstat.is-done .sstat__bar i { background: #4FD1BF; animation: none; }
@keyframes sstat-stripes { to { background-position: 28px 0; } }
.sstat__note { color: #C9C6DA; }
.sstat__steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.sstat__steps li { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.sstat__steps li.is-done { background: #4FD1BF; }
.sstat__steps li.is-now { background: var(--brand); animation: sstat-pulse 1s ease-in-out infinite; }
@keyframes sstat-pulse { 50% { box-shadow: 0 0 0 6px rgb(240 96 77 / .3); } }
@media (max-width: 640px) { .sstat { grid-template-columns: auto 1fr; } .sstat__steps { display: none; } }
@media (prefers-reduced-motion: reduce) { .sstat__spin, .sstat__bar i, .sstat__steps li.is-now { animation: none; } }

/* A10g: der Editor der Vorschau zum Selbermachen. Links das Bild der Startseite im Rahmen (Rechner 1440 breit,
   Handy 390), darauf der Talky; rechts die Wahl. Positionen setzt site.js über die CSSOM (--s ist der Maßstab) */
.stage--try { padding: 36px 0 72px; }
.stage--try .big-h1 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
@media (min-width: 761px) { .stage--try .big-h1 { white-space: nowrap; } }
.try { display: grid; justify-items: center; text-align: center; gap: 10px; }
.try__shooting { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 24px; border-radius: 20px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); text-align: left; }
.try__shooting b { display: block; font-size: 1.15rem; }
.try__shooting small { display: block; color: #C9C6DA; }
.try__host { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / .12); font-weight: 600; font-size: .9rem; }
.try__failed { max-width: 40rem; margin-top: 12px; padding: 24px; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; }
.try__failed h2 { margin: 0 0 8px; font-size: 1.3rem; }
.try__failed .req { margin-top: 12px; }
.try__editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto 1fr; gap: 10px 24px; width: 100%; margin-top: 18px; text-align: left; align-items: start; }
/* Umschalter über dem Bild, das Bild und die Leiste beginnen auf einer Höhe (Tim, 7. November 2026) */
.try__view { display: contents; }
.try__devices { grid-column: 1; grid-row: 1; }
.try__frame { grid-column: 1; grid-row: 2; }
.try__note { grid-column: 1; grid-row: 3; }
.try__panel { grid-column: 2; grid-row: 2 / span 2; }
.try__devices { display: inline-flex; justify-self: start; padding: 4px; gap: 4px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.try__device { border: 0; padding: 8px 16px; border-radius: 999px; background: transparent; color: #fff; font: 600 .95rem/1 var(--font); cursor: pointer; }
.try__device[aria-pressed="true"] { background: #fff; color: var(--ink); }
.try__frame { position: relative; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgb(0 0 0 / .35); border: 6px solid #2B2846; touch-action: none; }
.try__frame[data-device="phone"] { width: min(100%, 360px); justify-self: center; border-width: 10px; border-radius: 36px; }
.try__shot { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* der Talky in seiner Box wie beim Starter (widget/loader): Figur unten bündig, Namensschild bei 14 % von unten */
.try__talky { --s: 1; --accent: var(--teal); position: absolute; cursor: grab; touch-action: none; user-select: none; outline: none; }
.try__talky.is-dragging { cursor: grabbing; }
.try__fig { position: absolute; inset: 0; }
.try__fig img, .try__fig canvas, .try__fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; }
.try__fig [hidden] { display: none; }
.try__talky.is-video .try__fig img, .try__talky.is-video .try__fig video { object-fit: cover; object-position: 50% 18%; border-radius: calc(20px * var(--s)); border: max(2px, calc(3px * var(--s))) solid var(--accent); box-sizing: border-box; box-shadow: 0 10px 30px rgb(28 25 54 / .22); }
.try__label { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; font: 600 max(11px, calc(14px * var(--s)))/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; background: var(--accent); padding: max(6px, calc(10px * var(--s))) max(10px, calc(16px * var(--s))); border-radius: 999px; box-shadow: 0 6px 20px rgb(28 25 54 / .22); pointer-events: none; }
/* der Rahmen zum Verschieben, die Ecken zum Skalieren */
.try__sel { position: absolute; inset: -4px; border: 2px dashed rgb(255 255 255 / .95); outline: 1px dashed rgb(28 25 54 / .7); outline-offset: -3px; border-radius: 6px; pointer-events: none; }
.try__sel i { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 3px; pointer-events: auto; box-sizing: border-box; }
.try__sel [data-corner="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.try__sel [data-corner="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.try__sel [data-corner="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.try__sel [data-corner="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.try__frame[data-device="phone"] .try__sel { display: none; }
.try__frame[data-device="phone"] .try__talky { cursor: default; }
.try__talky:focus-visible .try__sel { border-color: #FFD54A; }
.try__listen.is-on { border-color: var(--ink); background: var(--bg-soft, #F6F4F0); }
.try__note { color: #C9C6DA; margin: 0; }
.try__note [hidden] { display: none; }
.try__panel { display: grid; gap: 16px; padding: 22px; border-radius: 20px; background: var(--surface); color: var(--ink); }
.try__panel fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.try__panel legend, .try__field > span { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.try__sets { grid-template-columns: repeat(3, 1fr); }
.try__sets legend { grid-column: 1 / -1; }
.try__set { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); cursor: pointer; text-align: center; }
.try__set:has(input:checked) { border-color: var(--ink); background: var(--bg-soft, #F6F4F0); }
.try__set:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.try__set input { position: absolute; opacity: 0; pointer-events: none; }
.try__setimg { display: block; width: 72px; height: 82px; }
.try__setimg img { width: 100%; height: 100%; object-fit: contain; }
.try__setimg.is-video img { object-fit: cover; border-radius: 12px; }
.try__settext b { display: block; font-size: .95rem; }
.try__settext small { display: block; color: var(--muted); font-size: .8rem; }
.try__field { display: grid; gap: 4px; }
.try__field input { padding: 12px 14px; font: 500 1rem/1.3 var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; }
.try__field input:focus { border-color: var(--ink); outline: none; }
.try__field input[aria-invalid="true"] { border-color: var(--brand-ink, var(--brand)); }
.try__swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.try__swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.try__swatch[aria-pressed="true"] { border-color: var(--surface); box-shadow: 0 0 0 3px var(--ink); }
.try__custom { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.try__custom input { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.try__voice { display: grid; gap: 8px; justify-items: start; }
.try__voice .try__field { justify-self: stretch; }
.try__field select { padding: 12px 14px; font: 500 .95rem/1.3 var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; min-width: 0; }
.try__listen { padding: 11px 14px; }
.try__go { display: grid; gap: 6px; }
.try__go[hidden], .try__mail[hidden] { display: none; }
.try__go .fine { margin: 0; text-align: center; }
.try__mail { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.try__mail h2 { margin: 12px 0 0; font-size: 1.15rem; }
.try__mail p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.try__mail .req__msg { color: var(--brand-ink, var(--brand)); font-weight: 600; }
.try__check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.try__check input { margin-top: 3px; width: 18px; height: 18px; }
.try__check:has([aria-invalid="true"]) { color: var(--brand-ink, var(--brand)); }
[data-try-edit-msg] { color: var(--brand-ink, var(--brand)); font-weight: 600; margin: 0; }
.sstat.is-failed .sstat__spin { animation: none; border-color: var(--brand); }
.sstat.is-failed .sstat__bar, .sstat.is-failed .sstat__steps { visibility: hidden; }
@media (max-width: 960px) { .try__editor { grid-template-columns: 1fr; } .try__panel { grid-column: 1; grid-row: auto; } }
@media (max-width: 760px) {
  .try__devices, .try__panel .try__colours { display: none; }
  .try__frame[data-device="phone"] { width: min(100%, 300px); }
}

/* A10g, 7 November 2026 (Tim: like the customer area, smaller and "lecker"): the editor in the scale of the
   customer area (14 px, 34 px controls) and with the material of Kompass in TalkyPage's colour (apps/app/src/
   material.css): one spring for what moves, gloss on what lies, a ring on what is chosen, a lift under the hand. */
.try { --try-ease: cubic-bezier(.34, 1.5, .64, 1); --try-glow: color-mix(in srgb, var(--brand) 50%, transparent); }
.try__editor { grid-template-columns: minmax(0, 1fr) 300px; gap: 10px 20px; }
.try__frame { box-shadow: 0 30px 70px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06), 0 0 60px -20px var(--try-glow); }
.try__devices { padding: 3px; gap: 2px; }
.try__device { padding: 6px 14px; font-size: .85rem; transition: background .15s, color .15s, transform .2s var(--try-ease); }
.try__device:hover:not([aria-pressed="true"]) { transform: translateY(-1px); background: rgb(255 255 255 / .08); }
.try__device[aria-pressed="true"] { box-shadow: 0 1px 3px rgb(0 0 0 / .25); animation: try-pop .25s var(--try-ease); }
.try__note { font-size: .85rem; }

.try__panel {
  gap: 12px; padding: 16px; border-radius: 16px; font-size: 14px;
  background: linear-gradient(180deg, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 40%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 24px 50px -24px rgb(0 0 0 / .5);
}
.try__panel legend, .try__field > span { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; color: var(--ink-soft, var(--ink)); }
.try__panel fieldset { gap: 6px; }
.try__sets { gap: 6px; }
.try__set { padding: 6px 4px; gap: 2px; border-radius: 12px; border: 1.5px solid var(--line); background: linear-gradient(180deg, rgb(255 255 255 / .7), transparent 60%), var(--bg-soft, var(--surface)); transition: transform .2s var(--try-ease), box-shadow .2s ease, border-color .15s; }
.try__set:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgb(28 25 54 / .45); }
.try__set:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 70%, transparent); background: linear-gradient(180deg, rgb(255 255 255 / .8), transparent 60%), color-mix(in srgb, var(--brand) 9%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent), 0 10px 20px -12px var(--try-glow); animation: try-pop .25s var(--try-ease); }
.try__setimg { width: 56px; height: 62px; }
.try__settext b { font-size: 13px; }
.try__settext small { font-size: 11px; }
.try__field input, .try__field select { height: 34px; padding: 0 10px; font-size: 14px; border-radius: 9px; border-width: 1px; transition: border-color .15s, box-shadow .2s ease; }
.try__field input:hover:not(:focus), .try__field select:hover:not(:focus) { border-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong)); }
.try__field input:focus, .try__field select:focus { border-color: color-mix(in srgb, var(--brand) 70%, var(--line-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; }
.try__voice { gap: 6px; }
.try__listen { height: 32px; padding: 0 12px; font-size: 13px; }
.try__listen .icon { width: 16px; height: 16px; }
.try__listen.is-on { border-color: color-mix(in srgb, var(--brand) 70%, transparent); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); animation: try-breathe 1.6s ease-in-out infinite; }
.try__swatches { gap: 6px; }
.try__swatch { width: 26px; height: 26px; border-width: 2px; transition: transform .2s var(--try-ease), box-shadow .2s ease; }
.try__swatch:hover { transform: scale(1.14); }
.try__swatch[aria-pressed="true"] { transform: scale(1.06); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 75%, transparent), 0 6px 12px -6px var(--try-glow); }
.try__custom { font-size: 12.5px; }
.try__custom input { width: 28px; height: 28px; }
.try__panel .btn { transition: transform .2s var(--try-ease), box-shadow .2s ease, background .15s, border-color .15s; }
.try__panel .btn:hover { transform: translateY(-1px); }
.try__panel .btn:active { transform: translateY(1px) scale(.97); transition-duration: .06s; }
.try__go .btn--primary, .try__mail .btn--primary { padding: 10px 16px; font-size: .95rem; background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 60%), var(--brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 18px -8px var(--try-glow); }
.try__go .btn--primary:hover, .try__mail .btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 12px 24px -8px var(--try-glow); }
.try__go .fine, .try__mail p, .try__check { font-size: 12.5px; }
.try__mail h2 { font-size: 1rem; }
.try__sel { transition: inset .2s var(--try-ease); }
.try__talky:hover .try__sel { border-color: #fff; }
.try__talky.is-dragging .try__fig { filter: drop-shadow(0 18px 18px rgb(0 0 0 / .3)); }
@keyframes try-pop { from { transform: scale(.94); opacity: .4; } }
@keyframes try-breathe { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .try *, .try *::before { animation: none !important; transition: none !important; } }
/* the selection is small: faces of more Talkys, overlapping and fading out, and one line */
.try__more { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; margin: -4px 0 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.try__more b { color: var(--ink); font-weight: 700; }
.try__faces { display: inline-flex; flex: none; align-items: center; }
.try__fade { display: inline-flex; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.try__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--surface); background: var(--bg-soft, var(--surface)); margin-left: -9px; box-shadow: 0 2px 6px rgb(28 25 54 / .18); transition: transform .2s var(--try-ease); }
.try__faces img:first-child { margin-left: 0; }
.try__faces i { margin-left: -6px; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.try__more:hover .try__faces img { transform: translateY(-2px); }
.try__more-text { grid-column: 1 / -1; }