/* ==========================================================================
   SAVA-KI v0.5 – Ergänzungen zu styles.css (Stand 29.09.2026)
   styles.css bleibt UNVERÄNDERT. Diese Datei wird NACH styles.css geladen
   und enthält nur neue Bausteine sowie wenige, markierte Übersteuerungen.
   ========================================================================== */

/* ---------- Vorschau-Markierungen (vor Go-Live entfernen) ---------- */
/* .ph = Platzhalter, den Torsten füllt (z. B. [DATUM]). Vor Go-Live darf
   kein .ph mehr im HTML stehen (Abnahmekriterium). */
.ph { background: var(--yellow-bright); color: var(--ink); border-radius: 3px; padding: 0 .25em; font-weight: 700; font-style: normal; white-space: nowrap; }

/* ---------- Lesbarkeit 55+ (Analyse B8) ---------- */
/* Übersteuerung: Kleingedrucktes nie unter 15 px, Mobil-Grundschrift 17 px */
@media (max-width: 720px) { :root { --fs-body: 1.0625rem; } }
.btn { min-height: 48px; }
.day__time { font-size: var(--fs-small); } /* war 13,6 px (Abnahme: min. 15 px) */
/* Übersteuerung: Link-/Akzentblau minimal dunkler. #1e7fae lag auf hellen Flächen
   bei 3,9–4,5 : 1, #1b74a0 erreicht überall mindestens 4,55 : 1. */
:root { --blue: #1b74a0; }

/* ---------- Hero ---------- */
/* Fix: Porträt wurde verzerrt. styles.css setzt kein height:auto, die Höhe aus dem
   HTML-Attribut (800) blieb stehen, während die Breite schrumpfte. */
.hero__media img { width: 100%; height: auto; }
.hero__sub { margin-top: 1.1rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); max-width: 34rem; line-height: 1.5; }
.hero__meta { margin-top: .8rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.hero__meta span { color: var(--muted); font-weight: 500; }
.hero__alt { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .7rem; font-size: 1.02rem; }
.hero__alt a { font-weight: 600; }
.solo { margin-top: 1rem; max-width: 34rem; padding: .85rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--blue-bright); border-radius: var(--radius-sm); font-size: 1.02rem; color: var(--muted); }
.solo b { color: var(--ink); }
.solo .mail { color: var(--ink); font-weight: 700; user-select: all; }
.hero__quote { margin-top: 1.5rem; max-width: 34rem; border-left: 3px solid var(--red-bright); padding-left: 1rem; }
.hero__quote p { font-size: 1.05rem; color: var(--ink); font-weight: 500; }
.hero__quote cite { display: block; margin-top: .3rem; font-style: normal; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Stimmen-Band (früh) ---------- */
.voices__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .voices__grid--3 { grid-template-columns: 1fr; } }

/* ---------- Bildunterschrift KI-Bild ---------- */
.ai-note { display: block; margin-top: .35rem; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Perfekt für Sie + Segmente ---------- */
.fit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.fit__list { list-style: none; display: grid; gap: .8rem; }
.fit__list li { display: flex; gap: .8rem; align-items: flex-start; }
.fit__not { margin-top: 1.4rem; color: var(--muted); font-size: 1.02rem; }
.fit__not b { color: var(--ink); }
.seg { display: grid; gap: .9rem; }
.seg .box { padding: 1.1rem 1.3rem; }
.seg .box::after { background: var(--blue-bright); }
.seg b { display: block; color: var(--ink); }
.seg span { color: var(--muted); font-size: 1.02rem; }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } }

/* ---------- Demo-Karte: Zusatzzeilen ---------- */
.demo-card__date { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-top: .4rem; }
.demo-card .solo { margin-inline: auto; text-align: left; }

/* ---------- Gegenseite: Tabelle im dunklen Abschnitt ---------- */
.split-table { width: 100%; border-collapse: collapse; margin-top: 2rem; background: rgba(255,255,255,.04); border-radius: var(--radius); overflow: hidden; }
.split-table th, .split-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.split-table th { color: #fff; font-size: 1.02rem; }
.split-table td { color: #cfd4cf; }
.split-table td:last-child { color: #fff; }
.contra__now { margin-top: 1.6rem; font-weight: 700; color: #fff; }
.contra__voice { margin-top: 1.4rem; color: #cfd4cf; font-style: italic; }
.contra__voice cite { display: block; font-style: normal; font-size: var(--fs-small); color: #b8bdb8; margin-top: .2rem; }

/* ---------- Video-Platzhalter ---------- */
.video-ph { margin-top: 2.4rem; max-width: 46rem; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, var(--accent), #48524c); color: #fff; display: grid; place-items: center; text-align: center; padding: 1.5rem; position: relative; }
.video-ph__play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; margin: 0 auto 1rem; }
.video-ph p { color: #e8eae6; max-width: 30rem; }
.video-ph small { display: block; margin-top: .5rem; color: #b8bdb8; font-size: var(--fs-small); }

/* ---------- Agenten: Hauptkarten + Aufklapper ---------- */
.agents-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.agents-main .tile::after { background: var(--blue-bright); }
.agents-main .tile--star::after { background: var(--accent); }
.tile__role { font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.agents-quote { margin-top: 1.6rem; max-width: 46rem; }
.agents-quote p { font-weight: 600; color: var(--ink); }
.agents-quote cite { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-small); margin-top: .25rem; }
.agents-more { margin-top: 1.8rem; }
.agents-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; padding: .75rem 1.2rem; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--card); min-height: 48px; }
.agents-more > summary::-webkit-details-marker { display: none; }
.agents-more > summary .icon { transition: transform .2s ease; }
.agents-more[open] > summary .icon { transform: rotate(45deg); }
.agents-more__body { margin-top: 1.6rem; display: grid; gap: 1.6rem; }
.agents-group h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .8rem; }
.agents-group ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.6rem; }
.agents-group li b { display: block; color: var(--ink); }
.agents-group li span { color: var(--muted); font-size: 1.02rem; }
@media (max-width: 720px) { .agents-main, .agents-group ul { grid-template-columns: 1fr; } }

/* ---------- Drei Fragen (Vertrauensblock) ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.trust .box::after { background: var(--green-bright); }
.trust__q { font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trust__a { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.3; margin: .35rem 0 .8rem; }
.trust .box p { margin-bottom: .7rem; }
.trust ul { list-style: none; display: grid; gap: .55rem; color: var(--muted); font-size: 1.02rem; }
.trust ul b { color: var(--ink); }
.trust__example { margin-top: .9rem; padding: .7rem .9rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .98rem; color: var(--ink); }
.trust__foot { margin-top: 1.6rem; color: var(--muted); font-size: var(--fs-small); max-width: 50rem; }
.law-quote { margin: .7rem 0; padding-left: .9rem; border-left: 3px solid var(--blue-bright); font-style: italic; color: var(--ink); font-size: 1rem; }
@media (max-width: 1000px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Über mich: Fachbeitrag ---------- */
.press { margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--yellow-bright); border-radius: var(--radius-sm); }
.press__kicker { font-size: var(--fs-small); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.press__title { display: block; font-weight: 700; color: var(--ink); font-size: 1.08rem; margin: .2rem 0; }
.press__meta { color: var(--muted); font-size: 1rem; }

/* ---------- Kreisdiagramm Umfrage ---------- */
.survey { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.pie { --pie1: #37853f; --pie2: #5bb153; --pie3: #a9d5a2; --pie4: #d4d8d2; }
.pie-row { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.pie-row svg { width: 190px; max-width: 100%; height: auto; flex: 0 0 auto; }
.pie-legend { list-style: none; display: grid; gap: .45rem; min-width: 0; }
.pie-legend li { display: grid; grid-template-columns: 14px 1fr auto; gap: .6rem; align-items: center; font-size: 1.02rem; }
.pie-legend i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.pie-legend .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-list { display: grid; gap: 1.2rem; }
@media (max-width: 860px) { .survey { grid-template-columns: 1fr; } }

/* ---------- Preise ---------- */
.included { max-width: 50rem; margin: 0 auto 2.4rem; padding: 1.6rem 1.8rem; }
.included::after { background: var(--green-bright); }
.included h3 { margin-bottom: .9rem; }
.included ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.6rem; }
.included li { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted); }
.included li b { color: var(--ink); }
.included .check { width: 22px; height: 22px; margin-top: .14em; }
.price__save { color: var(--green); font-weight: 700; font-size: 1rem; }
.price__buy-note { margin-top: .6rem; text-align: center; color: var(--muted); font-size: var(--fs-small); }
.price-grid .price .btn { margin-top: 1.4rem; }
@media (max-width: 720px) { .included ul { grid-template-columns: 1fr; } }

/* ---------- Start-Schritte (4) ---------- */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .steps--4 { grid-template-columns: 1fr; } }

/* ---------- Comic ---------- */
.comic { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 2rem 2.2rem; }
.comic::after { background: var(--yellow-bright); }
.comic p { color: var(--muted); }
@media (max-width: 720px) { .comic { grid-template-columns: 1fr; } }

/* ---------- Schluss ---------- */
.final { text-align: center; max-width: 44rem; margin-inline: auto; }
.final p { color: var(--muted); margin-top: 1rem; font-size: 1.15rem; }
.final .hero__meta, .final .hero__alt { justify-content: center; }
.final .solo { margin-inline: auto; text-align: left; }

/* ---------- Unterseiten (FAQ, Glossar, Tagung) ---------- */
.page-head { padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 90%); }
.page-head h1 { max-width: 44rem; }
.page-head p { margin-top: 1rem; color: var(--muted); max-width: 46rem; font-size: 1.15rem; }
.toc { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: 1.4rem; }
.toc a { font-weight: 600; font-size: 1rem; text-decoration: none; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); }
.toc a:hover { border-color: var(--accent); }
.faq-cat { margin-top: 3rem; }
.faq-cat:first-child { margin-top: 0; }
.faq-cat > h2 { font-size: 1.45rem; margin-bottom: 1rem; max-width: 50rem; margin-inline: auto; }
.faq__a p, .faq__a ul { margin-bottom: .7rem; }
.faq__a ul { padding-left: 1.2rem; }
.todo { background: var(--yellow-soft); border: 1px dashed var(--yellow); color: var(--ink); border-radius: 4px; padding: 0 .3em; font-size: .92em; }

.gl-search { max-width: 34rem; margin-top: 1.4rem; }
.gl-search input { width: 100%; font: inherit; padding: .8rem 1rem; min-height: 48px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.gl-search input:focus { outline: none; border-color: var(--accent); }
.gl-idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 2rem; }
.gl-idx h3 { font-size: 1rem; margin-bottom: .4rem; }
.gl-idx h3 span { color: var(--muted); font-weight: 500; }
.gl-idx ul { list-style: none; display: grid; gap: .2rem; font-size: 1rem; }
.gl-letter { font-size: 1.8rem; margin: 2.6rem 0 1rem; padding-bottom: .3rem; border-bottom: 2px solid var(--accent); }
.gl-entry { max-width: 50rem; padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gl-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.gl-meta .kat { color: var(--blue); font-weight: 700; }
.gl-entry h3 { font-size: 1.35rem; margin: .3rem 0 .7rem; }
.gl-kurz { background: var(--blue-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; font-weight: 500; margin-bottom: .9rem; }
.gl-lang p, .gl-lang ul { color: var(--muted); margin-bottom: .75rem; }
.gl-lang ul { padding-left: 1.2rem; }
.gl-hinweis { margin-top: .6rem; padding: .7rem .9rem; background: var(--yellow-soft); border: 1px solid var(--yellow); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--ink); }
.gl-siehe { margin-top: .7rem; font-size: 1rem; color: var(--muted); }
.gl-empty { margin-top: 1.2rem; color: var(--muted); }
@media (max-width: 1000px) { .gl-idx { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .gl-idx { grid-template-columns: 1fr; } }

.offer { max-width: 46rem; padding: 1.6rem 1.8rem; }
.offer::after { background: var(--green-bright); }
.tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .tag-grid { grid-template-columns: 1fr; } }

/* ---------- Übersteuerung Hero mobil (v0.5) ----------
   styles.css stellt das Foto auf Tablet/Handy an den Anfang (order:-1). Dann sieht
   der Besucher im ersten Bildschirm nur ein Porträt, keine Überschrift, keinen Button.
   v0.5: Text zuerst, Foto kleiner darunter. */
@media (max-width: 1000px) {
  .hero__media { order: 0; max-width: 18rem; }
}
.hero__chip { border-radius: 14px; }

/* ---------- Rechtsseiten (v0.5): lange Links umbrechen, kein Querscrollen bei 360 px ---------- */
.legal__wrap { overflow-wrap: anywhere; }
.legal h3, .legal h4 { margin: 1.4rem 0 .5rem; }
.legal ul { margin: 0 0 .8rem 1.2rem; color: var(--muted); }