/* =============================================================================
   KanzleiVoice — Website Styles
   Palette: Kanzlei-Blau + Kupfer  ·  Mobile-first  ·  keine externen Ressourcen
   ========================================================================== */

/* ---------- Tokens --------------------------------------------------------- */
:root {
  --ink:        #0C1A2B;
  --blue-900:   #0B2A4A;
  --blue-800:   #0E3459;
  --blue-700:   #12466F;
  --blue-500:   #1E6FB8;
  --blue-300:   #7FB2DC;
  --blue-050:   #EEF4FA;

  --copper-700: #8C4E27;
  --copper-600: #A65E2E;
  --copper-500: #C17A3F;
  --copper-300: #E0A876;
  --copper-100: #F3E2D1;

  --paper:      #F7F4EF;
  --white:      #FFFFFF;
  --card:       #FFFFFF;

  --text:       #1B2B3A;
  --text-soft:  #4A5C6B;
  --line:       rgba(12, 26, 43, .12);
  --line-soft:  rgba(12, 26, 43, .07);

  --ring:       var(--copper-500);

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;

  --wrap:       1140px;
  --radius:     16px;
  --radius-sm:  10px;
  --shadow-sm:  0 1px 2px rgba(12, 26, 43, .06), 0 4px 14px rgba(12, 26, 43, .06);
  --shadow-md:  0 8px 30px rgba(12, 26, 43, .12);
  --shadow-lg:  0 24px 60px rgba(11, 42, 74, .22);

  --header-h:   68px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; color: var(--blue-900); margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
figure, blockquote { margin: 0; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Layout helpers -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.25rem); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--paper  { background: var(--paper); }
.section--white  { background: var(--white); }
.section--blue   { background: var(--blue-050); }
.section--dark {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--ink) 100%);
  color: #D9E4EE;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--copper-300); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper-600);
  margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--copper-500); border-radius: 2px; }
.section--dark .eyebrow { color: var(--copper-300); }
.section--dark .eyebrow::before { background: var(--copper-300); }

.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.section__head p { font-size: 1.075rem; color: var(--text-soft); margin-bottom: 0; }
.section--dark .section__head p { color: #B7C6D3; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

/* ---------- Buttons ------------------------------------------------------- */
/* Two solid fills, white text everywhere, guaranteed >= 4.5:1 contrast. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem;
  font-family: var(--font-sans); font-size: .98rem; font-weight: 650;
  line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: 999px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Primary — deep blue on light backgrounds */
.btn--primary { background: var(--blue-800); color: #fff; border-color: var(--blue-800); }
.btn--primary:hover { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }

/* Secondary — solid copper, white text (was the unreadable "ghost") */
.btn--secondary { background: var(--copper-700); color: #fff; border-color: var(--copper-700); }
.btn--secondary:hover { background: var(--copper-600); border-color: var(--copper-600); color: #fff; }

/* Quiet — low-emphasis (e.g. modal close) */
.btn--quiet { background: transparent; color: var(--text); border-color: var(--line); }
.btn--quiet:hover { background: rgba(12,26,43,.06); color: var(--blue-900); border-color: var(--line); }

.btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* On dark (navy) sections: primary becomes copper, secondary becomes a white outline */
.section--dark .btn--primary,
.hero .btn--primary { background: var(--copper-600); border-color: var(--copper-600); color: #fff; }
.section--dark .btn--primary:hover,
.hero .btn--primary:hover { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }
.section--dark .btn--secondary,
.hero .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover { background: #fff; color: var(--blue-900); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 244, 239, .0);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(247, 244, 239, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 26px; color: var(--copper-500); flex: none; }
.brand__word {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em;
  color: var(--blue-900);
}
.brand__word b { font-family: var(--font-sans); font-weight: 800; color: var(--copper-700); }
.site-header.is-stuck .brand__word { color: var(--blue-900); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) {
  padding: .45rem .5rem; border-radius: 8px;
  font-size: .9rem; font-weight: 550; color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:not(.btn):hover { background: rgba(12,26,43,.06); color: var(--blue-900); }
.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }
.header-cta .btn { padding: .55rem .85rem; font-size: .86rem; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--blue-900); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ---------- Hero ------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  color: #E4ECF3;
  background: linear-gradient(165deg, #0B2A4A 0%, #0A2036 55%, #0B1826 100%);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/photos/hero.jpg");
  background-size: cover; background-position: center 30%;
  opacity: .16; filter: grayscale(.4) contrast(1.05);
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .9; }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
.hero__kicker {
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-300); margin: 0 0 .9rem;
}
.hero__title {
  color: #fff;
  font-size: clamp(2.15rem, 6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: .5rem;
}
.hero__title .accent { color: var(--copper-300); }
.hero__lead { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: #C6D3DE; max-width: 40rem; margin-bottom: 1.6rem; }
.hero .btn-row { margin-bottom: 1.4rem; }
.hero__note { font-size: .9rem; color: #93A6B4; }
.hero__note strong { color: #C6D3DE; font-weight: 650; }

/* Hero "live call" card */
.hero__visual { display: none; }
.callcard {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  max-width: 360px; margin-left: auto;
}
.callcard__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.callcard__dot { width: 9px; height: 9px; border-radius: 50%; background: #46D08A; box-shadow: 0 0 0 4px rgba(70,208,138,.2); flex: none; }
.callcard__title { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C6D3DE; }
.callcard__wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 1rem; }
.callcard__wave i { flex: 1; background: linear-gradient(var(--copper-300), var(--copper-500)); border-radius: 3px; opacity: .7; animation: eq 1.7s ease-in-out infinite; }
.callcard__wave i:nth-child(2){animation-delay:.10s} .callcard__wave i:nth-child(3){animation-delay:.20s}
.callcard__wave i:nth-child(4){animation-delay:.30s} .callcard__wave i:nth-child(5){animation-delay:.15s}
.callcard__wave i:nth-child(6){animation-delay:.25s} .callcard__wave i:nth-child(7){animation-delay:.05s}
.callcard__wave i:nth-child(8){animation-delay:.35s} .callcard__wave i:nth-child(9){animation-delay:.18s}
@keyframes eq { 0%,100%{ height: 45%; } 50%{ height: 82%; } }
.callcard__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; }
.callcard__row span { color: #93A6B4; }
.callcard__row b { color: #E4ECF3; font-weight: 650; text-align: right; }
@media (prefers-reduced-motion: reduce) { .callcard__wave i { animation: none; height: 60%; } }

/* Stepper aside */
.stepper__aside {
  display: none;
  place-items: center;
  background: var(--blue-050);
  border-radius: var(--radius-sm);
  min-height: 180px;
}
.phase-num {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 600;
  color: var(--copper-500);
  opacity: .5;
  line-height: 1;
}

/* Trust bar */
.trust {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.6rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem;
}
.trust__item { }
.trust__num { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1; }
.trust__num .u { color: var(--copper-300); }
.trust__label { font-size: .84rem; color: #93A6B4; margin-top: .3rem; }

/* ---------- Challenge cards ---------------------------------------------- */
.thesis {
  display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.thesis__row { display: grid; gap: .2rem; }
.thesis__k { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); }
.thesis__v { color: var(--text); }
.thesis__v strong { color: var(--blue-900); }

.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); margin-bottom: .9rem;
}
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.section--blue .card__icon { background: rgba(255,255,255,.08); color: var(--copper-300); }
.card h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.card p { margin-bottom: 0; color: var(--text-soft); font-size: .99rem; }
.card p + p { margin-top: .6rem; }
.card p .lead-in { color: var(--copper-700); font-weight: 650; }

/* Spotlight + tilt (JS sets --mx/--my, .has-pointer gate) */
.spotlight { transform-style: preserve-3d; }
.has-pointer .spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(170px circle at var(--mx, 50%) var(--my, 0%), rgba(193,122,63,.09), transparent 62%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.has-pointer .spotlight:hover::after { opacity: 1; }
.has-pointer .spotlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(193,122,63,.28); }

/* ---------- Schaubild (#loesung) ---------------------------------------------
   Bild-Export (Herkunft siehe README). Am Desktop breiter als die Textspalte, damit die Schrift im
   Bild lesbar bleibt (bei 1320 px rund 16 px); unter 1000 px die Hochformat-Fassung. */
.schaubild { margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.schaubild img { display: block; width: 100%; height: auto; }
@media (max-width: 999px) {
  .schaubild img { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 1000px) {
  .schaubild {
    --schaubild-breite: min(1320px, calc(100vw - 4rem));
    width: var(--schaubild-breite);
    margin-left: calc((100% - var(--schaubild-breite)) / 2);
  }
}

/* ---------- Mechanism flow -------------------------------------------------- */
.flow { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: flow; }
.flow__step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.2rem 1.2rem 1.2rem 3.4rem; box-shadow: var(--shadow-sm);
}
.flow__step::before {
  counter-increment: flow; content: counter(flow);
  position: absolute; left: 1rem; top: 1.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-700); color: #fff; font-weight: 700; font-size: .9rem;
  font-family: var(--font-sans);
}
.flow__step h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.flow__step p { margin-bottom: 0; font-size: .95rem; color: var(--text-soft); }

/* ---------- Use-case stepper --------------------------------------------- */
.stepper { display: grid; gap: 1.5rem; }
.stepper__tabs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.stepper__tab {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--text-soft);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.stepper__tab .n { font-family: var(--font-sans); font-weight: 800; color: var(--copper-600); }
.stepper__tab:hover { border-color: var(--copper-300); color: var(--blue-900); }
.stepper__tab[aria-selected="true"] { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.stepper__tab[aria-selected="true"] .n { color: var(--copper-300); }

.stepper__panels { position: relative; }
.stepper__panel {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-sm);
}
.stepper__panel[hidden] { display: none; }
.stepper__panel > div { min-width: 0; }
.stepper__panel .phase-tag {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600);
}
.stepper__panel h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: .3rem 0 .5rem; }
.stepper__panel p { color: var(--text-soft); margin-bottom: 0; }
.stepper__examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--blue-050); color: var(--blue-800);
  font-size: .85rem; font-weight: 600;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper-500); }
.stepper__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.stepper__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper-500), var(--copper-300)); transition: width .4s var(--ease); }

/* ---------- Benefits grid --------------------------------------------------- */
.grid-benefits { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.benefit {
  position: relative; overflow: hidden;
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.15rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.benefit svg { width: 22px; height: 22px; stroke-width: 1.75; color: var(--copper-600); flex: none; margin-top: .15rem; }
.benefit h3 { font-size: 1rem; margin-bottom: .15rem; font-family: var(--font-sans); font-weight: 700; color: var(--blue-900); }
.benefit p { margin: 0; font-size: .92rem; color: var(--text-soft); }

/* ---------- Examples (chat) ---------------------------------------------- */
.chat-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.chat-tab {
  padding: .6rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #C6D3DE;
  font-size: .9rem; font-weight: 600;
}
.chat-tab[aria-selected="true"] { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }

.chat {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.8rem);
}
.chat[hidden] { display: none; }
.chat__line { display: flex; gap: .8rem; margin-bottom: 1rem; max-width: 90%; }
.chat__line:last-child { margin-bottom: 0; }
.chat__line.is-ki { }
.chat__line.is-client { flex-direction: row-reverse; margin-left: auto; }
.chat__avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.chat__line.is-ki .chat__avatar { background: var(--copper-500); color: #fff; }
.chat__line.is-client .chat__avatar { background: rgba(255,255,255,.16); color: #E4ECF3; }
.chat__bubble {
  padding: .8rem 1rem; border-radius: 14px; font-size: .96rem; line-height: 1.55;
}
.chat__line.is-ki .chat__bubble { background: rgba(224,168,118,.14); border: 1px solid rgba(224,168,118,.28); color: #EBD9C8; border-bottom-left-radius: 4px; }
.chat__line.is-client .chat__bubble { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #E4ECF3; border-bottom-right-radius: 4px; }
.chat__bubble .who { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: .25rem; }
.chat__bubble em { color: #A9B9C6; font-style: italic; }

/* ---------- Result callout ---------------------------------------------- */
.result {
  display: grid; gap: 1.5rem; align-items: center;
  background: linear-gradient(150deg, var(--blue-900), var(--ink));
  color: #E4ECF3; border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3rem);
}
.result h2, .result h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-family: var(--font-serif); font-weight: 600; margin: .3rem 0 .5rem; }
.result p { color: #B7C6D3; margin-bottom: 0; }

/* ---------- Ergebnis: Raster (links Cockpit „Heute“, rechts Rechner) ---------- */
.ergebnis-grid { display: grid; gap: 1.5rem; align-items: stretch; }

/* ---------- Modal: Testnummer-Erfolg ------------------------------- */
.modal__testnumber {
  display: inline-block; margin: .3rem 0 1rem;
  font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600;
  color: var(--blue-900); text-decoration: none;
  border-bottom: 2px solid var(--copper-500);
}
.modal__testnumber:hover { color: var(--blue-700); }
.modal__testnumber-hint { font-size: .9rem; color: var(--text-soft); margin: .3rem 0 1rem; }
.modal__testnumber-hint a { color: var(--copper-700); font-weight: 650; }

/* ---------- Cookie-/Einwilligungs-Banner --------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  padding: clamp(.8rem, 3vw, 1.1rem);
  background: rgba(247, 244, 239, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(12, 26, 43, .12);
}
.cookie-banner__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem;
}
.cookie-banner__text { margin: 0; flex: 1 1 320px; font-size: .86rem; line-height: 1.55; color: var(--text); }
.cookie-banner__text a { color: var(--blue-700); }
.cookie-banner__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie-banner__actions .btn { padding: .6rem 1.1rem; font-size: .88rem; }
@media (max-width: 520px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; } }
.result__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1rem; }
.result__stat { }
.result__stat b { display: block; white-space: nowrap; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.55rem, 3.6vw, 2.2rem); color: #fff; line-height: 1; }
.result__stat b .u, .result__stat b span { color: var(--copper-300); }
.result__stat > span { display: block; font-size: .82rem; color: #A9B9C6; margin-top: .4rem; }
.result__stat b .u { display: inline; color: var(--copper-300); }

/* ---------- Zeit-Rechner (in .result; Startseite #ergebnis + /brain #problem) ---------- */
.calc__fields { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.calc__field { display: grid; gap: .45rem; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9rem; color: #C6D3DE; font-weight: 550; }
.calc__label output { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: .3rem 0; border-radius: 999px; background: rgba(255,255,255,.18); outline: none; cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--copper-500); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.calc__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--copper-500); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.calc__range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); }
.calc__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--copper-300); outline-offset: 2px; }
.calc__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.calc__opt { padding: .42rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #E4ECF3; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.calc__opt:hover { background: rgba(255,255,255,.12); }
.calc__opt[aria-pressed="true"] { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }
.calc__opt:focus-visible { outline: 3px solid var(--copper-300); outline-offset: 2px; }
.calc__note { font-size: .8rem; color: #A9B9C6; margin-top: 1rem; }
.calc .result__stats { align-self: start; }
@media (min-width: 900px) {
  .result.calc { grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .result.calc .result__stats { grid-template-columns: 1fr; gap: 1.4rem; padding-top: .4rem; }
}
.ergebnis-grid .result.calc { grid-template-columns: 1fr; }
.ergebnis-grid .result.calc .result__stats { grid-template-columns: repeat(2, 1fr); }
.calc__stats-label { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A9B9C6; }
.calc__stats-label + .result__stat { margin-top: -.4rem; }
.calc__stats-label--divider { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- Testimonials ----------------------------------------------- */
.quotes { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.quote {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.75rem 1.6rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.quote::before {
  content: "\201C";
  position: absolute; top: .35rem; left: 1.2rem;
  font-family: var(--font-serif); font-size: 3.4rem; line-height: 1;
  color: var(--copper-300);
}
.quote__stars { color: var(--copper-500); letter-spacing: .18em; font-size: .82rem; margin-bottom: .8rem; }
.quote__text {
  font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.5;
  color: var(--blue-900); margin: 0 0 1.4rem;
}
.quote__who { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.quote__avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--copper-100); color: var(--copper-700);
  font-family: var(--font-sans); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
}
.quote__name { font-family: var(--font-sans); font-weight: 700; font-size: .92rem; color: var(--blue-900); line-height: 1.25; }
.quote__role { display: block; font-size: .82rem; color: var(--text-soft); margin-top: .05rem; }
.quote__meta { display: block; font-size: .78rem; color: var(--text-soft); opacity: .8; margin-top: .1rem; }
.quote__logo { flex: none; width: 42px; height: 42px; border-radius: 8px; object-fit: contain; background: var(--blue-050); padding: 4px; }

/* ---------- Full-width photo band ------------------------------------- */
.photo-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(400px, 40vw, 560px);
}
.photo-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; z-index: -2;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(11,26,43,.94) 0%, rgba(11,26,43,.7) 38%, rgba(11,26,43,.28) 72%, rgba(11,26,43,.12) 100%);
}
.photo-band__inner { padding-block: clamp(2rem, 5vw, 3.25rem); color: #E4ECF3; max-width: 34rem; }
.photo-band__inner h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .5rem; }
.photo-band__inner p { color: #C6D3DE; margin-bottom: 1.1rem; }
.photo-band__inner a { color: var(--copper-300); font-weight: 650; text-decoration: none; }
.photo-band__inner a:hover { text-decoration: underline; }

/* Section image (rounded, in-flow) */
.section-figure { margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
.section-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 7; object-fit: cover; object-position: center 40%;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}

/* ---------- Hörprobe ------------------------------------------------- */
.voice-sample {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  padding: 1rem 1.15rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}
.voice-sample__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: #E4ECF3; font-size: .95rem; }
.voice-sample__label svg { width: 20px; height: 20px; color: var(--copper-300); }
.voice-sample__slot { flex: 1 1 260px; min-width: 220px; }
.voice-sample__player { width: 100%; height: 40px; }
.voice-sample__pending { margin: 0; font-size: .9rem; color: #A9B9C6; }

/* ---------- Recht & Vertraulichkeit ------------------------------------ */
.recht__note {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 46rem;
  font-size: .95rem; color: var(--text-soft);
}
.section--blue .recht__note { color: #3f5468; }

/* ---------- Final-CTA Zusätze ---------------------------------------- */
.final-cta__reassure { color: #93A6B4; font-size: .9rem; margin: 1.1rem auto 0; max-width: 40rem; }
.final-cta__phone { color: #C6D3DE; font-size: .95rem; margin: .5rem auto 0; }
.final-cta__phone a { color: var(--copper-300); font-weight: 650; text-decoration: none; }
.final-cta__phone a:hover { text-decoration: underline; }

/* ---------- Footer-Kontaktzeile ------------------------------------- */
.site-footer__contact { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; font-size: .9rem; }
.site-footer__provider { color: #7D8F9C; }

/* ---------- Founder ---------------------------------------------------- */
.founder { display: grid; gap: 2rem; align-items: center; }
.founder__media { display: flex; justify-content: center; }
.founder__media img {
  width: 100%; max-width: 320px; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.founder h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.founder blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--copper-500); color: var(--text); }

/* ---------- Process -------------------------------------------------- */
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.step__n {
  counter-increment: step; font-family: var(--font-serif); font-size: 1.5rem; color: var(--copper-500);
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem;
}
.step__n::before { content: counter(step, decimal-leading-zero); font-weight: 600; }
.step h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.step p { margin: 0; font-size: .94rem; color: var(--text-soft); }

/* ---------- FAQ ----------------------------------------------------- */
.faq-group + .faq-group { margin-top: 2.5rem; }
.faq-group > h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  margin-bottom: .7rem; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; padding-right: 2.8rem;
  position: relative; font-weight: 650; color: var(--blue-900); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--copper-600); border-bottom: 2px solid var(--copper-600);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 1.2rem 1.15rem; color: var(--text-soft); font-size: .97rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Final CTA --------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.final-cta p { color: #B7C6D3; max-width: 40rem; margin-inline: auto; margin-bottom: 1.6rem; }
.final-cta .btn-row { justify-content: center; }

/* ---------- Team-Karten ------------------------------------------- */
/* Mobile/Tablet: schlichte Karte, Name/Rolle UNTER dem Foto.
   Desktop (>=900px): AURYS-Look mit schwebender Namens-Kachel. */
.team-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.team-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%;
}
.team-card figcaption {
  padding: .65rem .8rem .8rem;
}
.team-card__name { display: block; font-family: var(--font-sans); font-weight: 700; font-size: .88rem; color: var(--blue-900); line-height: 1.25; }
.team-card__role { display: block; margin-top: .1rem; font-size: .76rem; line-height: 1.3; color: var(--copper-700); }

/* ---------- Footer ---------------------------------------------------- */
.site-footer { background: var(--ink); color: #A9B9C6; padding-block: 3rem 2rem; }
.site-footer a { color: #C6D3DE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__top { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.site-footer .brand__word { color: #fff; }
.site-footer .brand__mark { color: var(--copper-300); }
.site-footer__tag { font-size: .9rem; margin-top: .6rem; max-width: 22rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-nav a { font-size: .92rem; }
.site-footer__legal {
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1);
  display: grid; gap: .5rem; font-size: .84rem;
}
.site-footer__legal .links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Footer: Produkte-Spalte (KanzleiVoice + KanzleiBrain) ----- */
.footer-products { display: flex; flex-direction: column; gap: .5rem; }
.footer-products__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7D8F9C; margin-bottom: .2rem; }
.footer-products__item { display: block; font-size: .92rem; color: #C6D3DE; }
.footer-products__item:hover { color: #fff; }
.footer-products__desc { display: block; font-size: .78rem; color: #7D8F9C; margin-top: .1rem; }

/* ---------- Brain-Teaser (index.html) --------------------------------- */
/* Kompakte Hinweis-Sektion (section--tight), aktuell #datev auf der Startseite */
.teaser__inner { max-width: 40rem; }
.teaser__points { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem; }
.teaser__points li { position: relative; padding-left: 1.6rem; font-size: .95rem; font-weight: 550; }
.teaser__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-500); }
.teaser__close { margin: 0; font-weight: 600; }

/* ---------- Modal ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8, 18, 30, .62); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.modal__dialog {
  position: relative; width: 100%; max-width: 460px;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  animation: pop .24s var(--ease);
}
.modal__close {
  position: absolute; top: .7rem; right: .7rem; width: 40px; height: 40px;
  border: none; background: transparent; border-radius: 10px; color: var(--text-soft);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
}
.modal__close:hover { background: rgba(12,26,43,.07); color: var(--blue-900); }
.modal__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); }
.modal h2 { font-size: 1.5rem; margin: .3rem 0 .4rem; }
.modal__intro { font-size: .95rem; color: var(--text-soft); margin-bottom: 1.2rem; }

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .85rem; font-weight: 650; color: var(--blue-900); margin-bottom: .3rem; }
.field input {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .98rem;
  color: var(--text); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus { outline: none; border-color: var(--copper-500); box-shadow: 0 0 0 3px rgba(193,122,63,.18); }
.field input:user-invalid { border-color: #C0392B; }
.field__err { display: none; margin-top: .3rem; font-size: .8rem; color: #C0392B; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input { border-color: #C0392B; }

.modal form .btn { margin-top: .4rem; }
.modal__fineprint { margin-top: .8rem; margin-bottom: 0; font-size: .78rem; color: var(--text-soft); }
.modal__success { text-align: center; padding: 1rem 0; }
.modal__success .check {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: #E7F3EC; color: #1E7A44; display: grid; place-items: center;
}
.modal__success .check svg { width: 28px; height: 28px; }
.modal__success h2 { margin-bottom: .3rem; }
.modal__success p { color: var(--text-soft); font-size: .95rem; }

/* ---------- Toast --------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(1rem);
  z-index: 120; max-width: min(90vw, 30rem);
  background: var(--blue-900); color: #fff; padding: .85rem 1.15rem; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: .92rem;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Reveal on scroll -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Legal pages ---------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.2rem; }
.legal h2 { font-size: 1.2rem; margin-top: 2rem; }
.legal h3 { font-size: 1.02rem; margin-top: 1.4rem; font-family: var(--font-sans); }
.legal p, .legal li { color: var(--text); font-size: .98rem; }
.legal .muted { color: var(--text-soft); font-size: .9rem; }
.legal a { color: var(--blue-700); word-break: break-word; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--blue-700); }
.back-link::before { content: "\2190"; }

/* Simple header for legal pages */
.nav--static { position: static; margin-left: auto; transform: none; background: none; box-shadow: none; padding: 0; max-height: none; border: 0; flex-direction: row; width: auto; }
.nav--static .btn { color: #fff; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid-benefits { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
  .hero__visual { display: block; align-self: center; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(5, 1fr); }
  .flow__step { padding: 3.2rem 1rem 1.1rem; }
  .flow__step::before { top: 1rem; left: 1rem; }
  .stepper { grid-template-columns: 260px 1fr; align-items: start; }
  .stepper__tabs { flex-direction: column; overflow: visible; max-height: none; }
  .stepper__tab { width: 100%; }
  .stepper__panel { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .stepper__aside { display: grid; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
  /* Desktop: AURYS-Look – Foto füllt die Karte, Name als schwebende Kachel */
  .team-card { background: var(--blue-050); border: 0; }
  .team-card img { aspect-ratio: 4 / 5; object-position: center 10%; }
  .team-card figcaption {
    position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
    background: rgba(255,255,255,.97);
    border-radius: 11px; padding: .55rem .85rem;
    box-shadow: 0 8px 22px rgba(12,26,43,.22);
  }
  .team-card__name { font-size: .95rem; }
  .team-card__role { font-size: .8rem; }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .ergebnis-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .result { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 300px 1fr; align-items: center; gap: 2.5rem; }
  .founder--media-right { grid-template-columns: 1fr 300px; }
  .founder--media-right .founder__media { order: 2; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .site-footer__top { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .legal .wrap { padding-inline: 2rem; }
}

@media (min-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .site-footer__top--products { grid-template-columns: 1.4fr .85fr .85fr 1fr; }
}

@media (min-width: 1140px) {
  .nav-toggle { display: none; }
}
/* Desktop-Nav: Mit 8 Links + 2 Buttons (Startseite) war die Leiste 9px breiter als die
   Inhaltsbreite von .wrap – der letzte Button ragte in den Rand (bei 1140px sogar aus dem
   Viewport). Etwas engere Link-Innenabstände lösen das auf allen Desktop-Breiten. */
@media (min-width: 1140px) {
  .nav a:not(.btn) { padding-inline: .36rem; }
  .header-cta { margin-left: .3rem; }
}

/* Mobile / tablet nav panel */
@media (max-width: 1139px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-140%); transition: transform .3s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a:not(.btn) { padding: .8rem .6rem; border-radius: 10px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .header-cta { flex-direction: column; align-items: stretch; margin: .8rem 0 0; gap: .5rem; }
  .header-cta .btn { width: 100%; padding: .85rem 1rem; font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Hinweis unter dem Mechanismus: Der Abschnitt zeigt fuenf Schritte am
   Telefon - dieser Satz macht sichtbar, dass es danach weitergeht, ohne
   die Ausbaustufen doppelt aufzuzaehlen. */
.flow__mehr {
  margin: 1.4rem 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.flow__mehr a { color: var(--copper-700); font-weight: 600; text-decoration: none; white-space: nowrap; }
.flow__mehr a:hover { text-decoration: underline; }

/* =============================================================================
   Neuausrichtung 01.10.2026: Mail und Telefon
   Kupfer = erledigt KanzleiVoice automatisch · Blau = Ihr Team entscheidet
   (gleiche Farblogik wie in der Präsentation).
   ========================================================================== */

/* Haken-Symbol (weiß) für Kupfer-Punkte */
.mailfx__checks li::before,
.mailbox__checks li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: .1rem; border-radius: 50%;
  background: var(--copper-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- Hero: Mail-Verwandlung ---------------------------------------
   Drei Schritte in drei Sekunden: Mail kommt rein → KanzleiVoice bereitet vor
   → Ihre Fachkraft klickt „Senden“. Ohne data-stufe (kein JS) ist alles sichtbar. */
.hero__visual--mail { display: block; margin-top: .4rem; }
.hero__textlink {
  background: none; border: 0; padding: 0; margin: -.2rem 0 1.2rem;
  font: inherit; font-size: .95rem; font-weight: 650; color: var(--copper-300);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer;
}
.hero__textlink:hover { color: #fff; }

.mailfx {
  position: relative; max-width: 450px; margin-inline: auto;
  background: var(--white); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem 1.05rem;
  font-size: .9rem; line-height: 1.45;
}
.mailfx__rail { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; counter-reset: rail; }
.mailfx__rail li { counter-increment: rail; display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; color: var(--text-soft); line-height: 1.2; transition: color .3s var(--ease); }
.mailfx__rail li::before {
  content: counter(rail); flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  background: var(--blue-050); color: var(--blue-700);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.mailfx__rail li.is-aktiv { color: var(--blue-900); }
.mailfx__rail li.is-aktiv::before { background: var(--copper-500); color: #fff; }
.mailfx__rail li.is-fertig::before { content: "\2713"; background: var(--blue-800); color: #fff; }

.mailfx__mail { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem .75rem; background: #FBFAF8; }
.mailfx__kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.mailfx__avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-800); font-size: .68rem; font-weight: 800; }
.mailfx__wer { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mailfx__wer b { font-size: .84rem; color: var(--blue-900); }
.mailfx__wer span { font-size: .73rem; color: var(--text-soft); }
.mailfx__betreff { margin: 0 0 .1rem; font-weight: 700; color: var(--blue-900); font-size: .87rem; }
.mailfx__text { margin: 0; color: var(--text-soft); font-size: .84rem; }
.mailfx__anhaenge { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.mailfx__anhaenge:empty { display: none; }
.mailfx__anhaenge span { font-size: .7rem; padding: .12rem .45rem; border-radius: 6px; background: var(--white); border: 1px solid var(--line); color: var(--text-soft); }
.mailfx__scan {
  position: absolute; inset: 0 0 auto 0; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(193,122,63,0), rgba(193,122,63,.16) 70%, rgba(193,122,63,.5));
  transform: translateY(-110%);
}
.mailfx[data-stufe="2"] .mailfx__scan { animation: mailscan 1s var(--ease) 1; }
@keyframes mailscan { from { transform: translateY(-110%); } to { transform: translateY(260%); } }

.mailfx__checks { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .32rem; }
.mailfx__checks li { display: flex; gap: .45rem; align-items: flex-start; font-size: .82rem; color: var(--text); line-height: 1.35; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mailfx__checks li b { color: var(--blue-900); font-weight: 650; }
/* Platzhalter, solange KanzleiVoice „liest“: graue Balken in genau der Form des späteren
   Inhalts (Text transparent) – kein Leerraum, kein Springen der Karte. */
.mailfx__checks li, .mailfx__checks li b { transition: color .35s var(--ease), background-color .35s var(--ease); border-radius: 6px; }
.mailfx[data-stufe="1"] .mailfx__checks li,
.mailfx[data-stufe="1"] .mailfx__checks li b { color: transparent; background-color: #EDF1F5; }
.mailfx[data-stufe="1"] .mailfx__checks li b { background-color: transparent; }
.mailfx[data-stufe="1"] .mailfx__checks li::before { background: #DCE3EA; }
.mailfx[data-stufe="2"] .mailfx__checks li:nth-child(1), .mailfx[data-stufe="2"] .mailfx__checks li:nth-child(1) b { transition-delay: .35s; }
.mailfx[data-stufe="2"] .mailfx__checks li:nth-child(2), .mailfx[data-stufe="2"] .mailfx__checks li:nth-child(2) b { transition-delay: .6s; }
.mailfx[data-stufe="2"] .mailfx__checks li:nth-child(3), .mailfx[data-stufe="2"] .mailfx__checks li:nth-child(3) b { transition-delay: .85s; }

.mailfx__antwort { margin-top: .75rem; border-radius: 12px; background: var(--blue-050); padding: .7rem .8rem .75rem; transition: background-color .4s var(--ease); }
.mailfx__antwort p, .mailfx__label, .mailfx__dran { transition: color .4s var(--ease), background-color .4s var(--ease); border-radius: 6px; }
.mailfx[data-stufe="1"] .mailfx__antwort,
.mailfx[data-stufe="2"] .mailfx__antwort { background: #F4F6F8; }
.mailfx[data-stufe="1"] .mailfx__antwort :is(p, .mailfx__label, .mailfx__dran),
.mailfx[data-stufe="2"] .mailfx__antwort :is(p, .mailfx__label, .mailfx__dran) { color: transparent; background-color: #E7ECF1; }
.mailfx[data-stufe="1"] .mailfx__senden,
.mailfx[data-stufe="2"] .mailfx__senden { background: #DCE3EA; color: transparent; }
.mailfx[data-stufe="1"] .mailfx__senden svg,
.mailfx[data-stufe="2"] .mailfx__senden svg { opacity: 0; }
.mailfx[data-stufe="1"] .mailfx__checks,
.mailfx[data-stufe="1"] .mailfx__antwort,
.mailfx[data-stufe="2"] .mailfx__antwort { animation: wartepuls 1.3s ease-in-out infinite; }
@keyframes wartepuls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.mailfx__label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-700); margin-bottom: .2rem; }
.mailfx__antwort p { margin: 0 0 .6rem; font-size: .83rem; color: var(--text); }
.mailfx__aktion { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.mailfx__dran { font-size: .74rem; color: var(--text-soft); }
.mailfx__senden {
  border: 0; border-radius: 999px; padding: .5rem 1.05rem; cursor: pointer;
  background: var(--blue-800); color: #fff; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background-color .25s var(--ease);
}
.mailfx__senden svg { width: 15px; height: 15px; }
.mailfx__senden:hover { background: var(--blue-900); }
.mailfx[data-stufe="3"] .mailfx__senden { animation: sendpuls 1.5s ease-in-out infinite; }
.mailfx[data-stufe="4"] .mailfx__senden { background: #1E7A44; animation: none; }
@keyframes sendpuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,52,89,.4); } 50% { box-shadow: 0 0 0 9px rgba(14,52,89,0); } }

/* Zeitvergleich (Hero-Karte und Posteingang-Erklärer) */
.zeit { display: grid; gap: .4rem; }
.mailfx .zeit { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); }
.zeit__zeile { display: grid; grid-template-columns: 7.6rem 1fr 4.6rem; align-items: center; gap: .55rem; font-size: .76rem; color: var(--text-soft); }
.zeit__spur { height: 9px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.zeit__spur i { display: block; height: 100%; width: var(--w, 100%); border-radius: 999px; background: #B9C3CC; transition: width .6s var(--ease); }
.zeit__zeile--kv .zeit__spur i { background: linear-gradient(90deg, var(--copper-600), var(--copper-300)); }
.zeit__zeile b { text-align: right; font-variant-numeric: tabular-nums; color: var(--blue-900); font-weight: 700; }
.zeit__zeile--kv b { color: var(--copper-700); }
.zeit__fazit { margin: .15rem 0 0; font-size: .8rem; font-weight: 700; color: var(--blue-900); }

/* ---------- Am Beispiel einer Mail: interaktiver Posteingang ------------- */
.mailbox { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
.mailbox > * { min-width: 0; }
.mailbox__liste-titel { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 .5rem; }
.mailbox__liste { display: flex; gap: .6rem; overflow-x: auto; padding: .2rem .1rem .5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mailbox__mail {
  flex: none; width: min(78vw, 290px); scroll-snap-align: start; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem .8rem;
  display: grid; gap: .12rem; box-shadow: var(--shadow-sm); color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.mailbox__mail:hover { border-color: var(--copper-300); transform: translateY(-1px); }
.mailbox__mail[aria-selected="true"] { border-color: var(--copper-500); box-shadow: 0 0 0 3px rgba(193,122,63,.2), var(--shadow-sm); }
.mailbox__von { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .76rem; color: var(--text-soft); }
.mailbox__von b { color: var(--blue-900); font-size: .86rem; font-weight: 700; }
.mailbox__betreff { font-weight: 700; color: var(--blue-900); font-size: .92rem; line-height: 1.3; }
.mailbox__vorschau { font-size: .82rem; color: var(--text-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mailbox__tag { justify-self: start; margin-top: .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .16rem .5rem; border-radius: 999px; background: var(--blue-050); color: var(--blue-700); }
.mailbox__tag--fachlich { background: var(--copper-100); color: var(--copper-700); }
.mailbox__tag--werbung { background: #ECEFF2; color: #5B6B78; }

.mailbox__panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.1rem, 3vw, 1.6rem); min-width: 0; }
.mailbox__panel-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin-bottom: 1rem; }
.mailbox__schalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--blue-050); }
.mailbox__schalter button { border: 0; background: transparent; padding: .45rem .95rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--text-soft); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.mailbox__schalter button[aria-pressed="true"] { background: var(--blue-900); color: #fff; }
.mailbox__art { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--copper-700); }
.mailbox__art::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mailbox__art--fachlich { color: var(--blue-700); }
.mailbox__art--ohne { color: #8A5A44; }
.mailbox__titel { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--blue-900); margin: 0 0 .8rem; line-height: 1.25; }
.mailbox__checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.mailbox__checks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .94rem; color: var(--text); line-height: 1.4; animation: einblenden .4s var(--ease) both; }
.mailbox__checks li:nth-child(2) { animation-delay: .08s; } .mailbox__checks li:nth-child(3) { animation-delay: .16s; }
.mailbox__checks li:nth-child(4) { animation-delay: .24s; } .mailbox__checks li:nth-child(5) { animation-delay: .32s; }
.mailbox__antwort { border-radius: 12px; background: var(--blue-050); padding: .85rem 1rem; margin-bottom: 1rem; animation: einblenden .45s var(--ease) .3s both; }
.mailbox__antwort--fachlich { background: var(--copper-100); }
.mailbox__antwort p { margin: 0; font-size: .92rem; color: var(--text); }
.mailbox__label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-700); margin-bottom: .25rem; }
.mailbox__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.1rem; }
.mailbox__dran { font-size: .86rem; font-weight: 650; color: var(--blue-900); }
.mailbox__btn { border: 0; border-radius: 999px; padding: .55rem 1.1rem; background: var(--blue-800); color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; }
.mailbox__btn:hover { background: var(--blue-900); }
.mailbox__btn--leise { background: var(--blue-050); color: var(--blue-800); }
.mailbox__btn--leise:hover { background: #dde8f3; }
.mailbox__btn.is-erledigt { background: #1E7A44; }
.mailbox__kann { font-size: .78rem; color: var(--text-soft); }
.mailbox__schritte { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .1rem; counter-reset: ms; }
.mailbox__schritte li { counter-increment: ms; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .5rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .94rem; animation: einblenden .35s var(--ease) both; }
.mailbox__schritte li::before { content: counter(ms); font-weight: 800; color: #8A5A44; font-size: .85rem; }
.mailbox__schritte li b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 650; }
.mailbox__schritte li:nth-child(2) { animation-delay: .06s; } .mailbox__schritte li:nth-child(3) { animation-delay: .12s; }
.mailbox__schritte li:nth-child(4) { animation-delay: .18s; } .mailbox__schritte li:nth-child(5) { animation-delay: .24s; }
.mailbox__summe { font-size: .92rem; color: var(--text); margin: 0 0 1.1rem; }
.mailbox .zeit { padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.mailbox .zeit__zeile { font-size: .84rem; grid-template-columns: 8.8rem 1fr 5rem; }
.mailbox .zeit__spur { height: 11px; }
.mailbox__fazit { margin-top: clamp(1.4rem, 3vw, 2rem); display: grid; gap: .3rem; }
.mailbox__fazit p { margin: 0; font-size: 1.05rem; color: var(--text); max-width: 46rem; }
.mailbox__fazit strong { color: var(--blue-900); }
.mailbox__fazit small { font-size: .8rem; color: var(--text-soft); }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 900px) {
  .mailbox { grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr); gap: 1.8rem; align-items: start; }
  .mailbox__liste { flex-direction: column; overflow: visible; padding: .2rem 0; }
  .mailbox__mail { width: 100%; }
}

/* ---------- Ergebnis: Cockpit „Heute“ (statt Postfach-Grafik) ---------- */
.kv-heute { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; align-self: start; }
.kv-heute__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; background: var(--blue-900); color: #fff; }
.kv-heute__kopf b { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; }
.kv-heute__kopf span { font-size: .76rem; color: #B7C6D3; }
.kv-heute__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-soft); }
.kv-heute__zahlen div { padding: .65rem .9rem; display: flex; flex-direction: column; line-height: 1.2; }
.kv-heute__zahlen div + div { border-left: 1px solid var(--line-soft); }
.kv-heute__zahlen b { font-family: var(--font-serif); font-size: 1.35rem; color: var(--blue-900); font-weight: 600; }
.kv-heute__zahlen .auto b { color: var(--copper-600); }
.kv-heute__zahlen span { font-size: .72rem; color: var(--text-soft); }
.kv-heute__liste { list-style: none; margin: 0; padding: .3rem .4rem .4rem; }
.kv-heute__row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center;
  padding: .7rem .6rem; border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.kv-heute__row:last-child { border-bottom: 0; }
.kv-heute__row.is-in { opacity: 1; transform: none; }
.kv-heute__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-700); }
.kv-heute__icon svg { width: 18px; height: 18px; }
.kv-heute__icon--auto { background: var(--copper-100); color: var(--copper-700); }
.kv-heute__main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.kv-heute__main b { font-size: .86rem; color: var(--blue-900); line-height: 1.3; }
.kv-heute__main span { font-size: .78rem; color: var(--text-soft); line-height: 1.35; }
.kv-heute__btn { font-size: .76rem; font-weight: 700; padding: .4rem .75rem; border-radius: 999px; background: var(--blue-800); color: #fff; white-space: nowrap; }
.kv-heute__btn--auto { background: var(--copper-100); color: var(--copper-700); }
.kv-heute__fuss { padding: .7rem 1.1rem; font-size: .76rem; color: var(--text-soft); background: #FBFAF8; border-top: 1px solid var(--line-soft); }
@media (max-width: 420px) { .kv-heute__row { grid-template-columns: 30px 1fr; } .kv-heute__btn { grid-column: 2; justify-self: start; } }

/* ---------- Seitenaufbau entlang der Marketing-Thesis (01.10.2026, v2) ---------- */
/* Hypothese + Anti-These */
.these { display: grid; gap: 1.4rem; }
.these__label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-300); margin-bottom: .7rem; }
.these__alt { padding: 1.3rem 1.4rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.these__alt p { margin: 0; color: #B7C6D3; font-size: 1.04rem; }
.these__satz { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.75rem, 3.8vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em; color: #fff; margin: 0 0 1rem; }
.these__satz span { color: var(--copper-300); }
.these__neu p { color: #D9E4EE; }
.these__neu .these__datev { margin: 1.1rem 0 0; padding-left: .9rem; border-left: 3px solid var(--copper-500); font-size: .95rem; color: #A9B9C6; }
@media (min-width: 900px) { .these { grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; } }

/* Diagnose: drei Zahlen + Alternative */
.diagnose { display: grid; gap: 1rem; }
.diagnose__zahl { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem 1.45rem; }
.diagnose__zahl b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.1rem, 5vw, 2.9rem); line-height: 1; color: var(--blue-900); margin-bottom: .65rem; white-space: nowrap; }
.diagnose__zahl span { display: block; color: var(--text-soft); font-size: .98rem; }
.diagnose__alternative { margin-top: 1.2rem; padding: 1.05rem 1.3rem; border-radius: var(--radius); background: var(--copper-100); }
.diagnose__alternative p { margin: 0; color: var(--text); }
.diagnose__alternative strong { color: var(--copper-700); }
@media (min-width: 760px) { .diagnose { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }

/* Cockpit „Heute“ + drei Rollen */
.cockpit-grid { display: grid; gap: 1.6rem; }
.cockpit-punkte { display: grid; gap: 1.2rem; }
.cockpit-punkt { padding-left: 1rem; border-left: 3px solid var(--copper-500); }
.cockpit-punkt h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.cockpit-punkt p { margin: 0; color: var(--text-soft); }
@media (min-width: 900px) { .cockpit-grid { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; align-items: center; } }

/* Cockpit: Umschalter Mitarbeiter / Inhaber + Inhaber-Ansicht */
.cockpit-ansicht { display: grid; gap: .9rem; justify-items: start; min-width: 0; }
.cockpit-ansicht .kv-heute { width: 100%; }
.kv-ueberblick .kv-heute__row { animation: einblenden .4s var(--ease) both; }
.kv-ueberblick .kv-heute__row:nth-child(2) { animation-delay: .07s; } .kv-ueberblick .kv-heute__row:nth-child(3) { animation-delay: .14s; }
.kv-ueberblick .kv-heute__row:nth-child(4) { animation-delay: .21s; } .kv-ueberblick .kv-heute__row:nth-child(5) { animation-delay: .28s; }
.kv-ampel { display: flex; align-items: center; gap: .6rem; padding: .65rem 1.1rem; background: #EEF7F1; color: #1E6B3F; font-size: .84rem; font-weight: 650; border-bottom: 1px solid var(--line-soft); }
.kv-ampel::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2EA05A; box-shadow: 0 0 0 4px rgba(46,160,90,.18); }
.kv-heute__icon--warn { background: #FDECEA; color: #B3412E; }
.kv-heute__btn--leise { background: var(--blue-050); color: var(--blue-800); }
.cockpit-punkt { transition: opacity .3s var(--ease), border-color .3s var(--ease); }
.cockpit-punkte[data-ansicht-aktiv="team"] .cockpit-punkt[data-zu="inhaber"],
.cockpit-punkte[data-ansicht-aktiv="inhaber"] .cockpit-punkt[data-zu="team"] { opacity: .45; border-left-color: var(--line); }
@media (min-width: 900px) { .cockpit-grid { align-items: start; } .cockpit-punkte { padding-top: 3.4rem; } }

/* Ablauf: Startschritt hervorheben (Phase 1) */
.step--start { border-color: rgba(193,122,63,.45); background: linear-gradient(180deg, #FFFFFF, #FBF5EE); }

/* Ablauf: Knopf unter den Schritten */
.ablauf__cta { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Telefon-KI selbst testen (dunkler Beispiele-Abschnitt) ------ */
.voice-test {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-top: clamp(1.4rem, 3vw, 2rem); padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: rgba(224,168,118,.1); border: 1px solid rgba(224,168,118,.32);
}
.voice-test p { margin: 0; color: #D9E4EE; max-width: 38rem; }
.voice-test strong { color: #fff; }

/* Stepper: Knopf im Panel (z. B. Telefon-KI testen) */
.stepper__cta { margin-top: 1.1rem; }

/* Textknopf (öffnet ein Popup, sieht aus wie ein Link) */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; }
.linkbtn:hover { color: var(--blue-900); }

/* Modal: Download-Knopf im Erfolgszustand */
.modal__download { margin: .4rem 0 1rem; }
.final-cta__reassure .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--copper-300); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.final-cta__reassure .linkbtn:hover { color: #fff; }