/* ==========================================================================
   SAVA-KI v0.7 – Ergänzungen zu styles.css und v05.css (Stand 20.10.2026)
   Wird NACH v05.css geladen. styles.css, v05.css und script.js bleiben
   unverändert. Teil A: Bausteine aus dem Entwurf v0.6 (ging nie live).
   Teil B: Bausteine und Übersteuerungen aus v0.7 (übersteuert Teil A an
   einigen Stellen, z. B. Zone 3). Farben nur aus den Tokens in styles.css.
   ========================================================================== */

/* ##########################################################################
   TEIL A – aus v0.6
   ########################################################################## */
/* Sticky-Header unter der Statusleiste (iPhone im Querformat, Web-Apps) */
.header { top: env(safe-area-inset-top, 0px); }

/* ---------- Stimmen-Band: Qualitäts-Kicker ---------- */
.quote__kicker { font-size: var(--fs-small); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }

/* ---------- Zwei Abende: der Schritt, um den es geht ---------- */
.day__list li.day__focus { background: var(--green-tint); border: 1px solid var(--green-soft); border-radius: var(--radius-sm); padding: .7rem .8rem; margin-inline: -.8rem; }
.day__list li.day__focus b { color: var(--green); }
.sun-line { margin-top: 2.2rem; text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--ink); text-wrap: balance; }
.time-more { margin-top: 1.6rem; text-align: center; }
.time-more > summary { margin-inline: auto; }
.time-more .agents-more__body { text-align: left; }

/* ---------- Drei Zonen ---------- */
.zones {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.5fr) auto minmax(0, 1fr);
  gap: 1rem; align-items: center;
}
.zones__src { padding: 1.3rem 1.2rem; text-align: center; }
.zones__src::after { background: var(--line); }
.zones__src b { display: block; font-size: 1.08rem; }
.zones__src span { display: block; color: var(--muted); font-size: 1rem; margin-top: .3rem; }
.zones__src .zones__agent { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 700; }
.zones__src .zones__agent small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-small); }

.zones__arrow { color: var(--muted); display: grid; place-items: center; }
.zones__arrow svg { width: 28px; height: 28px; }

.zones__mid { display: grid; gap: 1rem; }
.zone { padding: 1.3rem 1.4rem 1.5rem; }
.zone__no { font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zone h3 { font-size: 1.2rem; margin: .15rem 0 .35rem; }
.zone p { font-size: 1.02rem; }
.zone__gain { display: block; margin-top: .6rem; font-weight: 700; color: var(--ink); font-size: 1rem; }
.zone--1 { background: var(--blue-soft); border-color: #cfe4f1; }
.zone--1::after { background: var(--blue-bright); }
.zone--1 .zone__no { color: var(--blue); }
.zone--2 { background: var(--yellow-soft); border-color: #efe6a9; border-style: dashed; }
.zone--2::after { background: var(--yellow-bright); }
.zone--2 .zone__no { color: var(--ink); }

.zone--3 { background: var(--accent); border-color: var(--accent); color: #fff; text-align: center; padding: 1.6rem 1.4rem 1.8rem; }
.zone--3::after { background: var(--green-bright); }
.zone--3 .zone__no { color: #cfd4cf; }
.zone--3 .zone__you { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.1; margin: .4rem 0 1rem; }
.zone--3 dl { display: grid; gap: .75rem; }
.zone--3 dt { font-weight: 700; color: #fff; font-size: 1.08rem; }
.zone--3 dd { color: #cfd4cf; font-size: 1rem; }
.zone--3 .zone__gain { color: #fff; border-top: 1px solid rgba(255,255,255,.18); padding-top: .8rem; margin-top: 1.1rem; }

.zones__foot { margin-top: 1.6rem; text-align: center; font-weight: 700; font-size: 1.12rem; color: var(--ink); text-wrap: balance; }
.zones__src-note { margin-top: .4rem; text-align: center; color: var(--muted); font-size: var(--fs-small); }

.lead-pair { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.4rem; margin-top: 2.6rem; align-items: start; }
.lead-pair .box::after { background: var(--green-bright); }
.lead-pair .box:last-child::after { background: var(--blue-bright); }
.lead-pair h3 { margin-bottom: .6rem; }
.lead-pair p + p { margin-top: .8rem; }
.marker { background: var(--yellow-bright); color: var(--ink); font-weight: 700; padding: 0 .25em; border-radius: 3px; font-size: .95em; }

@media (max-width: 1000px) {
  .zones { grid-template-columns: 1fr; gap: .6rem; }
  .zones__arrow { transform: rotate(90deg); }
  .zones__src { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
  .zones__src .zones__agent { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px dashed var(--line); padding-left: 1rem; }
  .lead-pair { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .zones__src { grid-template-columns: 1fr; }
  .zones__src .zones__agent { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: .8rem; }
}

/* ---------- Kennzeichen Zuarbeit / Denkanstöße ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--ink); padding: .2rem .65rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.chip--zu { background: var(--blue-soft); border-color: #cfe4f1; }
.chip--zu::before { background: var(--blue-bright); }
.chip--dk { background: var(--yellow-soft); border-color: #efe6a9; border-style: dashed; }
.chip--dk::before { background: var(--yellow-bright); box-shadow: 0 0 0 1px #c9b800; }
.chip--new { background: var(--red-soft); color: var(--red); font-weight: 700; }
.chip--new::before { display: none; }
.agents-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin-top: 1.2rem; color: var(--muted); font-size: 1rem; }

/* ---------- Agentenkarten ---------- */
.agents-main .tile { gap: .45rem; }
.tile__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .8rem; align-items: center; }
.tile__head { font-weight: 700; color: var(--ink); font-size: 1.08rem; line-height: 1.4; }
.tile__keep { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--muted); }
.tile__keep b { color: var(--ink); }
.agents-group li { display: flex; flex-direction: column; gap: .25rem; }
.agents-group li .chips { margin-top: .2rem; }
.agents-group li .keep { font-size: 1rem; }
.agents-group li .keep b { display: inline; }
.agents-group li .tile__head { font-size: 1.02rem; }

/* ---------- Preise: Stimme und Start-Zeile ---------- */
.price-voice { max-width: 46rem; margin: 0 auto 2.2rem; text-align: center; }
.price-voice .voices__stat { margin-top: 0; }
.price-voice blockquote { margin-top: .8rem; color: var(--muted); font-style: italic; }
.start-line { margin-top: 2rem; }
.start-line .quickfacts { font-weight: 500; color: var(--muted); }
.start-line .quickfacts b { color: var(--ink); }

/* ---------- Schluss: Comic als Zeile ---------- */
.final__comic { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 1.05rem !important; }

/* Fix (auch in v0.5 vorhanden): Fotos behielten ihre Höhe aus dem height-Attribut
   und wurden auf schmalen Bildschirmen verzerrt. */
.hero__media img, .founder img, .day__img img { height: auto; }

/* ##########################################################################
   TEIL B – v0.7
   ########################################################################## */
/* ---------- Hero: Beleg mit 16 Personensymbolen ---------- */
.hero__proof { display: flex; align-items: center; gap: .9rem 1.1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.people { display: grid; grid-template-columns: repeat(8, 16px); gap: 4px; flex: 0 0 auto; }
.people svg { width: 16px; height: 20px; display: block; color: var(--line); }
.people svg.on { color: var(--green-bright); }
.people svg.on.top { color: var(--green); }
.hero__proof p { flex: 1 1 14rem; font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.4; }

/* ---------- Hero: Vertrauenszeile, Termin, Zusatzzeilen ---------- */
.hero__trust { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .35rem; }
.hero__trust li { display: flex; gap: .55rem; align-items: baseline; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.hero__trust li::before { content: "✓"; color: var(--green); font-weight: 800; flex: 0 0 auto; }
.hero__date { margin-top: 1.4rem; font-weight: 700; color: var(--ink); }
.hero__date + .hero__actions { margin-top: .5rem; }
.hero__under { margin-top: .6rem; color: var(--muted); font-size: 1rem; }
.hero__solo { margin-top: .3rem; font-size: 1rem; }
.hero__foot { margin-top: 1rem; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Ihr Alltag: Zeitbalken über den Spalten ---------- */
.tbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line); margin: 1rem 0 .4rem; }
.tbar span { display: block; height: 100%; }
.t-zu { background: var(--red-bright); }        /* Zuarbeit: rot, weil sie wegfallen soll */
.t-be { background: var(--green); }             /* Beurteilen: kräftiges Grün, wie Zone 3 */
.t-ge { background: var(--yellow-bright); }     /* Gegenlesen: Gelb, wie Zone 2 (Denkanstöße) */
.t-frei { background: #b9dcb2; }                /* Feierabend: helles Grün, der erfreuliche Teil */
.tbar-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-small); }
.tbar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: 1.4rem; color: var(--muted); font-size: 1rem; }
.tbar-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.tbar { background: #b9dcb2; }

/* ---------- Drei Zonen: Klammer über Zone 1 und 2 ---------- */
.zones__team { position: relative; text-align: center; font-weight: 800; color: #fff; font-size: 1.15rem; letter-spacing: .01em; padding: .7rem 1rem .75rem; background: var(--accent); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.zones__team span { display: block; font-weight: 500; color: #dfe3df; font-size: 1rem; margin-top: .1rem; }
.zones__team::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 9px solid transparent; border-bottom: 0; border-top-color: var(--accent); }

/* Quelle: nur noch die Unterlagen (die Agenten-Box ist entfallen) */
@media (max-width: 1000px) {
  .zones__src { display: block; text-align: center; }
}

/* ---------- Zone 3 hell und grün statt anthrazit ---------- */
.zone--3 { background: var(--green-tint); border: 2px solid var(--green); color: var(--ink); padding: 1.8rem 1.5rem 2rem; box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.zone--3::after { background: var(--green); }
.zone--3 .zone__no { color: var(--green); }
.zone--3 .zone__you { color: var(--green); }
.zone--3 dt { color: var(--ink); }
.zone--3 dd { color: var(--muted); }
.zone--3 .zone__gain { color: var(--ink); border-top: 1px solid var(--green-soft); }

/* Links in den Einstiegskästen „Für wen“ */
.seg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- v0.7.1: Demo- und Kaufbuttons grün statt anthrazit ----------
   Übersteuert .btn--primary aus styles.css (Header, Hero, Demo-Karte, Agenten,
   Schluss, mobile Leiste, „Jahr buchen“). Kontrast Weiß auf #37853f: 4,6 : 1. */
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: #2c6b33; color: #fff; }

/* Hinweis Rechtsberatung oberhalb der drei Fragen */
.trust__foot--top { margin-top: .6rem; }

/* ---------- v0.7.2: Hero kompakter, Button im ersten Bildschirm ----------
   Beleg und Vertrauenszeile stehen jetzt in der rechten Spalte unter dem Foto.
   Zusätzlicher Button direkt unter der Unterzeile nur auf schmalen Bildschirmen. */
.hero__media .hero__proof { margin-top: 1.2rem; }
.hero__media .hero__trust { margin-top: .9rem; }
.hero__media .hero__foot { margin-top: .7rem; }
.hero__quick { display: none; }
@media (max-width: 1000px) {
  .hero__quick { display: block; margin-top: 1.2rem; }
  .hero__quick span { display: block; margin-top: .45rem; text-align: center; font-weight: 600; color: var(--ink); font-size: 1rem; }
  .hero__media { max-width: none; }
  .hero__media figure { max-width: 18rem; }
}
@media (min-width: 1001px) {
  .hero { padding-top: 1.5rem; }
  .hero__grid { grid-template-columns: 1.3fr 0.7fr; align-items: start; }
  .hero h1 { font-size: clamp(2.1rem, 3.5vw, 2.7rem); }
  .hero__chip { margin-bottom: 1rem; }
  .hero__sub, .hero__points { max-width: 42rem; }
  .hero__sub { margin-top: .9rem; font-size: 1.15rem; }
  .hero__points { margin-top: 1.2rem; gap: .6rem; }
  .hero__points li { font-size: 1.05rem; }
  .hero__date { margin-top: 1.2rem; }
}
@media (max-width: 1000px) {
  .hero { padding-top: 1.2rem; }
  .hero__chip { margin-bottom: .8rem; }
  .hero__sub { margin-top: .7rem; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
  .hero__quick { margin-top: 1rem; }
  .hero__quick .btn { font-size: 1rem; padding: .8rem 1rem; }
}