/* ============================================================================
   KI SICHTBARKEIT: Landingpage zum AI Visibility Audit

   Eigenstaendige Anzeigen-Landingpage. Nutzt die Tokens und Grundstile aus
   style.css (Farben, Schrift, .cta-button, Kontaktformular-Status, Footer,
   Cookie-Banner), bringt aber ein eigenes, ruhigeres Layout mit.

   Aufbau: Einstieg mit Beispiel-KI-Antwort, danach Frage, Fakten und
   Aufforderung (eigene Datei: ki-sichtbarkeit-einstieg.css), durchklickbarer
   Beispielreport, Leistungen, Ablauf, Ansprechpartner, Preis und Buchung,
   Fragen.
   Klassen: lp-* fuer die Seite, rp-* fuer den Report.
   ============================================================================ */

.lp {
    --lp-bg: var(--c-navy-800);
    --lp-raised: var(--c-navy-700);
    --lp-deep: var(--c-navy-900);
    --lp-card: #13274b;
    --lp-line: rgba(159, 179, 217, .18);
    --lp-good: #6fd6a2;
    --lp-good-soft: rgba(111, 214, 162, .14);
    --lp-bad: #ff9b91;
    --lp-bad-soft: rgba(255, 155, 145, .14);
    --lp-warn-soft: rgba(255, 201, 71, .14);
    --lp-radius: 14px;
    background: var(--lp-bg);
    color: var(--text-body);
}
.lp p { max-width: none; }
.lp-wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.lp-section { padding-block: clamp(64px, 9vw, 112px); }
.lp-section--raised { background: var(--lp-raised); }
.lp-section--deep { background: var(--lp-deep); }
.lp h1, .lp h2, .lp h3 { color: var(--text-strong); text-align: left; letter-spacing: -0.02em; }
.lp h2 { margin-bottom: 0; }
.lp-kicker { color: var(--accent); font-weight: var(--weight-bold); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.lp-lead { font-size: var(--text-md); color: var(--text-body); max-width: 38rem; }
.lp h2 + .lp-lead { margin-top: var(--space-4); }
.lp a:not(.cta-button) { color: var(--text-strong); text-underline-offset: 3px; }
.lp a:not(.cta-button):hover { color: var(--accent); }

/* ── Kopf ohne Navigation ─────────────────────────────────────────────── */
.lp-top {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--c-navy-900);
    border-bottom: 1px solid rgba(159, 179, 217, .18);
}
.lp-top .lp-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.lp-top__logo img { height: 58px; width: auto; display: block; }
.lp-top__link {
    color: var(--accent);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
}
.lp-top__link:hover, .lp-top__link:focus-visible { background: var(--accent); color: var(--primary-color); }

/* ── 1. Einstieg ──────────────────────────────────────────────────────── */
/* Blaues Licht von oben und ein feines Punktraster, das zu den Rändern hin
   ausläuft. Beides ruhig und ohne Bewegung, Gold bleibt dem Button. */
.av-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 96px);
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(86, 132, 230, .24), transparent 70%),
        linear-gradient(180deg, var(--c-navy-900) 0%, var(--lp-bg) 100%);
}
.av-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(159, 179, 217, .16) 1px, transparent 1px);
    background-size: var(--space-6) var(--space-6);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 30%, transparent 75%);
}
/* Eine zentrierte Spalte. Die Frage darf breit laufen und bricht
   ausgeglichen um, statt in drei schmale Zeilen gequetscht zu werden. */
.lp-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hero__badge {
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(255, 201, 71, .35);
    border-radius: var(--radius-pill);
    background: rgba(255, 201, 71, .08);
    margin-bottom: var(--space-6);
}
.lp .lp-hero h1 { margin: 0 0 var(--space-6); text-align: center; text-wrap: balance; }
.lp-hero .lp-lead { max-width: 42rem; margin: 0 auto var(--space-8); text-wrap: balance; }
.lp-hero .lp-actions { justify-content: center; }
.lp-hero__offer { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-body); text-wrap: balance; }
.lp-hero__assure { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.lp-hero__assure span { white-space: nowrap; }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.lp-textlink { font-weight: var(--weight-bold); text-decoration: none; }
.lp-textlink::after { content: " \2193"; }

/* Beispiel-KI-Antwort unter dem Button: ein helles Chatfenster, wie man es
   von KI-Assistenten kennt. Weiss auf dem dunklen Grund ist der Blickfang und
   sagt ohne Lesen "das ist ein KI-Chat". Frage rechts in grauer Blase,
   Antwort als freier Text, unten ein Eingabefeld (nur Bild). Darunter,
   ueber die Fensterkante gelegt, der Befund. Einmaliges Einblenden
   nacheinander, 16 px Weg, nur ohne Wunsch nach reduzierter Bewegung.
   Eigene Farben, weil die Palette keine helle Flaeche kennt. Kontrast auf
   Weiss: Schrift 17:1, gedaempft 6:1. */
.av-chat {
    --chat-bg: #ffffff;
    --chat-ink: #111827;
    --chat-text: #374151;
    --chat-muted: #5b6472;
    --chat-soft: #f1f3f6;
    --chat-line: #e5e7eb;
    width: 100%;
    max-width: 44rem;
    margin: var(--space-16) 0 0;
    text-align: left;
}
.av-chat__window {
    background: var(--chat-bg);
    color: var(--chat-text);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .5);
    overflow: hidden;
}
/* Kopfzeile als Ueberschrift des Beispiels. Das "koennte" darin ersetzt das
   fruehere Etikett "Beispieldaten". */
.lp .av-chat__bar { margin: 0; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--chat-line); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.35; color: var(--chat-ink); }
.av-chat__body { display: grid; gap: var(--space-6); padding: var(--space-6); font-size: var(--text-base); line-height: 1.6; }
.av-chat__body p { margin: 0; }
.av-chat__q {
    justify-self: end;
    max-width: 80%;
    padding: var(--space-3) var(--space-4);
    border-radius: 22px;
    background: var(--chat-soft);
    color: var(--chat-ink);
}
.av-chat__a { color: var(--chat-text); }
.av-chat__a ol { margin: var(--space-3) 0 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.av-chat__a b { color: var(--chat-ink); }
.av-chat__input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin: 0 var(--space-6) var(--space-8);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border: 1px solid var(--chat-line);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(17, 24, 39, .06);
    font-size: var(--text-sm);
    color: var(--chat-muted);
}
.av-chat__send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chat-ink); color: var(--chat-bg); flex: none; }
/* Befund unter dem Fenster als ganzer Satz, nicht als Etikett: Man soll ihn
   ohne Nachdenken verstehen. Das Ausrufezeichen in Gold zieht den Blick. */
.av-chat__miss {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text-strong);
    text-align: left;
}
.av-chat__miss-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: var(--weight-black);
    line-height: 1;
}
/* Tipp-Punkte: gibt es nur waehrend der Szene. Sie liegen in derselben
   Rasterzelle wie die Antwort, damit beim Wechsel nichts springt. */
.av-chat__typing { display: none; grid-row: 2; grid-column: 1; align-self: start; gap: 5px; padding: var(--space-3) var(--space-4); border-radius: 22px; background: var(--chat-soft); width: fit-content; }
.av-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--chat-muted); }
.av-chat__a { grid-row: 2; grid-column: 1; }

/* Die Szene. Das weisse Fenster steht von Anfang an, nur sein Inhalt kommt
   nacheinander: Frage von rechts wie eine gesendete Nachricht, kurz Tippen,
   Antwort mit den drei Namen einzeln, zuletzt der Satz darunter. Flott,
   zusammen gut zwei Sekunden, damit niemand warten muss. Ausgeloest von
   scroll-reveal.js (.in-view), einmal pro Seitenaufruf. */
.av-chat.av-reveal { opacity: 1; transform: none; transition: none; }
.av-chat {
    --t-tippen: calc(var(--duration-base) + var(--duration-fast));
    --t-antwort: calc(var(--t-tippen) + 2 * var(--duration-base));
    --t-befund: calc(var(--t-antwort) + var(--duration-slow));
}
@media (prefers-reduced-motion: no-preference) {
    .av-chat.av-reveal:not(.in-view) :is(.av-chat__q, .av-chat__a, .av-chat__miss) { opacity: 0; }
    .av-chat.in-view .av-chat__q { animation: av-rechts var(--duration-slow) var(--ease-out) both; }
    .av-chat.in-view .av-chat__typing {
        display: flex;
        animation: av-tippen calc(2 * var(--duration-base)) var(--ease-in-out) var(--t-tippen) both;
    }
    .av-chat.in-view .av-chat__typing span { animation: av-punkt var(--duration-base) var(--ease-in-out) var(--t-tippen) 2 alternate both; }
    .av-chat.in-view .av-chat__typing span:nth-child(2) { animation-delay: calc(var(--t-tippen) + var(--duration-fast) / 2); }
    .av-chat.in-view .av-chat__typing span:nth-child(3) { animation-delay: calc(var(--t-tippen) + var(--duration-fast)); }
    .av-chat.in-view .av-chat__a { animation: av-in var(--duration-slow) var(--ease-out) var(--t-antwort) both; }
    .av-chat.in-view .av-chat__a li { animation: av-in var(--duration-slow) var(--ease-out) both; }
    .av-chat.in-view .av-chat__a li:nth-child(1) { animation-delay: calc(var(--t-antwort) + var(--duration-fast)); }
    .av-chat.in-view .av-chat__a li:nth-child(2) { animation-delay: calc(var(--t-antwort) + 2 * var(--duration-fast)); }
    .av-chat.in-view .av-chat__a li:nth-child(3) { animation-delay: calc(var(--t-antwort) + 3 * var(--duration-fast)); }
    .av-chat.in-view .av-chat__miss { animation: av-in var(--duration-slow) var(--ease-out) var(--t-befund) both; }
}
@keyframes av-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes av-rechts { from { opacity: 0; transform: translateX(24px); } }
/* Ein- und wieder ausblenden, am Ende weg: Danach steht nur die Antwort. */
@keyframes av-tippen { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes av-punkt { from { opacity: .35; transform: none; } to { opacity: 1; transform: translateY(-3px); } }

/* ── Report: gemeinsame Bausteine ─────────────────────────────────────── */
.rp-app { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
/* Einzige Kennzeichnung als Beispiel. Dezent, aber in jedem Bereich sichtbar. */
.rp-tag { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); background: rgba(159, 179, 217, .12); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rp-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-1); }
.rp-bars { display: grid; gap: var(--space-3); }
.rp-bar { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.4rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-strong); }
.rp-bar__track { height: 10px; background: rgba(159, 179, 217, .14); border-radius: 99px; overflow: hidden; display: block; }
.rp-bar__fill { display: block; height: 100%; background: #6f86b3; border-radius: 99px; }
.rp-bar__val { text-align: right; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.rp-bar--you { font-weight: var(--weight-bold); }
.rp-bar--you .rp-bar__fill { background: var(--accent); }
.rp-bar--you .rp-bar__val { color: var(--accent); }
.rp-insight { background: var(--lp-warn-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: var(--space-3) var(--space-4); color: var(--text-strong); font-size: var(--text-sm); }
.rp-pill { font-size: var(--text-xs); font-weight: var(--weight-bold); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rp-pill--bad { background: var(--lp-bad-soft); color: var(--lp-bad); }
.rp-pill--warn { background: var(--lp-warn-soft); color: var(--accent); }
.rp-pill--good { background: var(--lp-good-soft); color: var(--lp-good); }

/* ── 2. Beispielreport ────────────────────────────────────────────────── */
.lp-section--deep .lp-lead { margin-bottom: var(--space-12); }
.rp-app { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 520px; }
.rp-app__nav { background: rgba(7, 20, 38, .45); border-right: 1px solid var(--lp-line); padding: var(--space-6) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.rp-app__brand { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-3) var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--lp-line); }
.rp-app__brand strong { display: block; color: var(--text-strong); font-size: var(--text-sm); }
.rp-app__nav button {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--text-sm);
    color: var(--text-body);
}
.rp-app__nav button:hover { background: rgba(159, 179, 217, .1); }
.rp-app__nav button[aria-selected="true"] { background: var(--accent); color: var(--primary-color); font-weight: var(--weight-bold); }
.rp-app__nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-app__nav small { opacity: .75; }
.rp-app__main { padding: var(--space-8); }
/* Ohne JavaScript stehen alle Bereiche untereinander, mit Abstand. */
.rp-panel { display: grid; gap: var(--space-6); }
.rp-panel + .rp-panel { margin-top: var(--space-12); }
.rp-app.is-tabs .rp-panel + .rp-panel { margin-top: 0; }
.rp-panel[hidden] { display: none; }
.rp-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.rp-panel__head h3 { font-size: var(--text-lg); margin: 0; }
.rp-panel__head p { font-size: var(--text-sm); color: var(--text-muted); }
.rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.rp-box { border: 1px solid var(--lp-line); border-radius: 12px; padding: var(--space-4) var(--space-6); }
.rp-text { color: var(--text-strong); font-size: var(--text-sm); margin-top: var(--space-2); }

.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rp-table th, .rp-table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--lp-line); }
.rp-table thead th { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-bold); text-align: center; }
.rp-table thead th:first-child { text-align: left; }
.rp-table tbody th { text-align: left; font-weight: var(--weight-regular); color: var(--text-strong); }
.rp-table td { text-align: center; width: 88px; }
/* Zelle je Frage und System: in wie vielen von 3 Antworten genannt.
   Gruen heisst zusaetzlich mindestens einmal empfohlen. */
.rp-cell { display: inline-block; min-width: 2.6em; padding: 2px 6px; border-radius: 6px; font-style: normal; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--accent); background: var(--lp-warn-soft); }
.rp-cell--rec { color: var(--lp-good); background: var(--lp-good-soft); }
.rp-cell--no { color: var(--text-muted); background: transparent; font-weight: var(--weight-regular); }
.rp-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-xs); color: var(--text-muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }

.rp-sources { display: grid; gap: var(--space-3); }
.rp-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--lp-line); border-radius: 10px; }
.rp-source b { color: var(--text-strong); }
.rp-source small { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--text-sm); }

.rp-todo { list-style: none; counter-reset: m; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.rp-todo li { counter-increment: m; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 72px; border: 1px solid var(--lp-line); border-radius: 12px; }
.rp-todo li::before { content: counter(m); position: absolute; left: var(--space-4); top: var(--space-4); width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--primary-color); font-weight: 800; display: grid; place-items: center; }
.rp-todo h4 { color: var(--text-strong); font-size: var(--text-base); margin-bottom: var(--space-1); }
.rp-todo p { font-size: var(--text-sm); }
.rp-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ── 3. Leistungen ────────────────────────────────────────────────────── */
.lp-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.lp-cols article { border-top: 2px solid var(--accent); padding-top: var(--space-4); }
.lp-cols h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }

/* ── 4. Ablauf ────────────────────────────────────────────────────────── */
.lp-steps { list-style: none; counter-reset: s; padding: 0; margin: var(--space-12) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.lp-steps li { counter-increment: s; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: var(--space-8); }
.lp-steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lp-warn-soft); color: var(--accent); font-weight: 800; margin-bottom: var(--space-4); }
.lp-steps h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.lp-steps em { display: block; font-style: normal; font-weight: var(--weight-bold); color: var(--accent); font-size: var(--text-sm); margin-bottom: var(--space-2); }

/* ── 5. Person ────────────────────────────────────────────────────────── */
.lp-person { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--lp-radius); }
.lp-person blockquote { margin: var(--space-2) 0 var(--space-6); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.35; font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.lp-person__who { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.lp-person__who strong { color: var(--text-strong); font-size: var(--text-base); }

/* ── 6. Preis und Buchung ─────────────────────────────────────────────── */
.lp-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.lp-price { background: var(--lp-deep); border: 1px solid var(--lp-line); border-radius: 18px; padding: var(--space-8); position: sticky; top: 100px; }
.lp-price h2 { font-size: var(--text-xl, 1.6rem); margin-bottom: var(--space-4); }
.lp-price__num { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--text-strong); letter-spacing: -0.03em; }
.lp-price__num small { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; margin-left: var(--space-2); }
/* Bedingung und künftiger Preis in zwei ruhigen Zeilen unter der 500:
   oben die Bedingung hell, darunter die Folge leiser. */
.lp .lp-price__later { display: grid; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-body); }
.lp-price__later span:first-child { color: var(--text-strong); font-weight: var(--weight-bold); }
.lp-price ul { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-2); color: var(--text-strong); }
.lp-price li { position: relative; padding-left: 28px; }
.lp-price li::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--lp-warn-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffc947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.lp-price__note { border-top: 1px solid var(--lp-line); padding-top: var(--space-4); font-size: var(--text-sm); display: grid; gap: var(--space-3); }
.lp-price__note p { margin: 0; }

.lp-form { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 18px; padding: var(--space-8); }
.lp-form h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.lp-form__intro { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-6); }
.lp-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.lp-form legend { color: var(--text-strong); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-row--plz { grid-template-columns: 1fr 2fr; }
.lp-field { display: grid; gap: 6px; margin-bottom: var(--space-3); }
.lp-field[hidden] { display: none; }
.lp-field label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.lp-field input, .lp-field select, .lp-field textarea {
    width: 100%; min-width: 0;
    font: inherit; font-size: var(--text-base);
    padding: 12px 14px;
    background: var(--c-navy-900);
    color: var(--text-strong);
    border: 1px solid rgba(159, 179, 217, .45);
    border-radius: 9px;
}
.lp-field input::placeholder, .lp-field textarea::placeholder { color: #8a99ad; }
.lp-field input:focus-visible, .lp-field select:focus-visible, .lp-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-optional { margin-bottom: var(--space-3); font-size: var(--text-sm); }
.lp-optional summary { cursor: pointer; color: var(--text-strong); font-weight: var(--weight-bold); }
.lp-optional[open] summary { margin-bottom: var(--space-3); }
.lp-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); margin: var(--space-2) 0 var(--space-4); cursor: pointer; }
.lp-check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.lp-form .cta-button { display: block; width: 100%; text-align: center; font-size: var(--text-md); }
.lp-form .cta-button:disabled { opacity: .7; cursor: wait; }
.lp-small { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; }
/* Leistungsbeschreibung sichtbar vor Haekchen und Button. */
.lp-terms { margin: var(--space-2) 0 var(--space-4); padding: var(--space-4); display: grid; gap: var(--space-3); font-size: var(--text-xs); line-height: 1.6; background: rgba(7, 20, 38, .45); border-radius: 10px; }
.lp-terms dt { color: var(--text-strong); font-weight: var(--weight-bold); }
.lp-terms dd { margin: 0; color: var(--text-body); }

/* ── 7. Fragen ────────────────────────────────────────────────────────── */
.lp-faq { max-width: 52rem; margin-top: var(--space-8); }
.lp-faq details { border-bottom: 1px solid var(--lp-line); padding-block: var(--space-4); }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); color: var(--text-strong); font-weight: var(--weight-bold); font-size: var(--text-md); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin-top: var(--space-3); max-width: 44rem; }

/* ── Breakpoints ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .lp-offer, .lp-person { grid-template-columns: minmax(0, 1fr); }
    .rp-app { grid-template-columns: minmax(0, 1fr); }
    /* Alle fuenf Reiter sichtbar, notfalls in zwei Zeilen. Gerade
       "Massnahmen" darf nicht ausserhalb des Bildes liegen. */
    .rp-app__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--lp-line); padding: var(--space-3); }
    .rp-app__brand { display: none; }
    .rp-app__nav button { white-space: nowrap; }
    .rp-app__nav small { display: none; }
    .lp-cols { grid-template-columns: 1fr 1fr; }
    .lp-steps { grid-template-columns: minmax(0, 1fr); }
    .lp-price { position: static; }
    .lp-person img { max-width: 220px; }
}
@media (max-width: 600px) {
    .lp-top__logo img { height: 46px; }
    .lp-actions .cta-button { width: 100%; text-align: center; }
    .av-chat { margin-top: var(--space-12); }
    .av-chat__bar, .av-chat__body { padding-inline: var(--space-4); }
    .av-chat__body { font-size: var(--text-sm); }
    .av-chat__input { margin-inline: var(--space-4); }
    .rp-app__main { padding: var(--space-4); }
    .rp-bar { grid-template-columns: 6.8rem minmax(0, 1fr) 2.9rem; font-size: var(--text-xs); }
    .rp-grid2, .lp-cols, .lp-row { grid-template-columns: minmax(0, 1fr); }
    .lp-row--plz { grid-template-columns: 1fr 2fr; }
    .rp-table { table-layout: fixed; }
    .rp-table th, .rp-table td { padding-inline: 2px; }
    .rp-table thead th:first-child, .rp-table tbody th { width: auto; font-size: var(--text-xs); padding-right: var(--space-2); }
    .rp-table thead th:not(:first-child), .rp-table td { width: 3.4rem; }
    .rp-table thead th { font-size: .62rem; }
    .rp-cell { min-width: 0; padding: 2px 4px; font-size: var(--text-xs); }
    .rp-todo li { padding-left: 64px; }
    .lp-form, .lp-price { padding: var(--space-6) var(--space-4); }
}