/*
 * Nur für die Verkaufsseiten. Was auch die Verwaltung braucht, steht in theme.css.
 *
 * Aufbau der Startseite nach dem Muster „Hero + Features + CTA“ aus dem
 * Design-System: Aufmacher mit einem Versprechen und einer Handlung, dann der
 * Beweis (was es kann), dann der Weg (drei Schritte), dann der Preis. Der Kaufknopf
 * kommt zweimal vor — oben, solange die Aufmerksamkeit frisch ist, und unten, wenn
 * jemand alles gelesen hat.
 */

/* ------------------------------------------------------------------ Kopfzeile */
header.top {
    position: sticky; top: 0; z-index: 20;
    background: rgba(10, 12, 20, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
header.top .bar { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }

.brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 20px;
    letter-spacing: -.02em; color: var(--text); text-decoration: none;
}
.brand-mark {
    width: 14px; height: 14px; border-radius: 5px;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
}

nav.main { display: flex; gap: var(--s-5); margin-left: auto; }
nav.main a {
    color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
    padding: var(--s-2) 0; transition: color var(--t-fast) ease;
}
nav.main a:hover { color: var(--text); }

.langs { display: flex; gap: var(--s-1); }
.langs a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 32px; padding: 0 var(--s-2);
    font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); text-decoration: none;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.langs a:hover { color: var(--text); border-color: var(--muted); }
.langs a.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* -------------------------------------------------------------- Abschnitte */
section { padding: var(--s-8) 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }
section > .wrap > h2 + .grid,
section > .wrap > h2 + .lead { margin-top: var(--s-5); }

/* Der Aufmacher bekommt oben etwas mehr Luft und keinen Trennstrich. */
section.hero { border-bottom: 0; padding-bottom: var(--s-6); }
.hero .lead { margin-top: var(--s-4); }
.hero .row  { margin: var(--s-6) 0 var(--s-4); }

/* Ein sehr zurückhaltender Schimmer hinter der Überschrift — genug, damit die
   Seite nicht wie ein Blatt Papier wirkt, zu wenig, um abzulenken. */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: -40% 40% 40% -20%;
    background: radial-gradient(closest-side, rgba(255,122,0,.10), transparent 70%);
    pointer-events: none;
}
.hero > .wrap { position: relative; }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-3); margin-bottom: var(--s-4);
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    color: var(--accent-soft); font-size: var(--t-xs); font-weight: 600;
}

/* ----------------------------------------------------------------- Karten */
.card h3 { color: var(--text); }
.card > p:last-child { color: var(--muted); }

.step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-bottom: var(--s-3);
    border-radius: var(--radius-sm); background: var(--surface-high);
    color: var(--accent); font-family: 'Outfit', sans-serif; font-weight: 700;
}

/* ------------------------------------------------------------------ Preis */
.price {
    max-width: 560px; padding: var(--s-6);
    background: linear-gradient(180deg, var(--surface-high), var(--surface));
    border: 1px solid var(--border); border-radius: var(--radius);
}
.price .amount {
    font-family: 'Outfit', sans-serif; font-size: 48px; font-weight: 700;
    letter-spacing: -.03em; line-height: 1;
}
.price ul { margin: var(--s-5) 0; padding: 0; list-style: none; }
.price li {
    position: relative; padding-left: var(--s-6); margin-bottom: var(--s-3);
    color: var(--muted);
}
/* Häkchen als Zeichen, nicht als Farbe — und aus der Vorlesereihenfolge
   genommen, weil es nichts sagt, was der Text nicht schon sagt. */
.price li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--ok); font-weight: 700;
}

/* --------------------------------------------------------------- Fußzeile */
footer.bottom { padding: var(--s-7) 0 var(--s-8); color: var(--muted); }
footer.bottom .links { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-4); }
footer.bottom a { color: var(--muted); text-decoration: none; }
footer.bottom a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------ Rechtstexte */
article.legal { max-width: 70ch; }
article.legal h2 { margin-top: var(--s-7); }
article.legal p, article.legal li { color: var(--muted); }
article.legal ul { padding-left: var(--s-5); }
.draft {
    margin-bottom: var(--s-5); padding: var(--s-4);
    background: rgba(255,186,60,.08); border: 1px solid rgba(255,186,60,.35);
    border-radius: var(--radius-sm); color: var(--accent-soft); font-size: var(--t-sm);
}

/* --------------------------------------------------------------- Telefon */
@media (max-width: 760px) {
    /* Die Abschnittsnavigation fliegt raus statt in der Kopfzeile umzubrechen.
       Die Seite ist kurz genug zum Scrollen; die Sprachwahl bleibt, weil sie
       sich nicht erscrollen lässt. */
    nav.main { display: none; }
    .langs { margin-left: auto; }
    section { padding: var(--s-7) 0; }
    .price { padding: var(--s-5); }
    .price .amount { font-size: 40px; }
    .btn { width: 100%; }          /* Daumenbreite Ziele statt Trefferübungen */
    .row > .btn { flex: 1 1 100%; }
}