/* ===================================================================
   HOME — nur das, was ausschließlich auf der Startseite vorkommt.
   Setzt tokens.css und base.css voraus.
   =================================================================== */

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: center;
    max-width: var(--width-page);
    margin-inline: auto;
    padding: clamp(2rem, 0.5rem + 6vw, 8rem) var(--section-x) var(--space-10);
}

.hero h1 { margin-bottom: var(--space-5); }
.hero h1 .accent { color: var(--accent-dark); }

.hero-lead {
    max-width: 52ch;
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    color: var(--text-light);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Vertrauenssignale als Chips statt als lose Textzeile.
   Umbrechen sauber, statt auf Mobil eine Liste zu bilden. */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-6);
}
.hero-trust li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-light);
    list-style: none;
}
.hero-trust .icon { color: var(--accent-dark); font-weight: 700; }

/* Das Bewertungs-Element. Auf Desktop die große Karte rechts,
   auf Mobil eine kompakte Zeile ÜBER der Headline — dasselbe
   DOM-Element, nur anders angeordnet. */
.hero-visual { display: flex; justify-content: center; }

.hero-badge {
    position: relative;
    overflow: hidden;
    padding: var(--space-7);
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: var(--radius);
    text-align: center;
}
.hero-badge::before {
    content: '';
    position: absolute;
    inset: -50% -50% auto auto;
    width: 100%; height: 100%;
    background: radial-gradient(circle, var(--accent-ring) 0%, transparent 70%);
    pointer-events: none;
}
.hero-badge .stars { font-size: 1.8rem; color: var(--accent); letter-spacing: 0.1em; }
.hero-badge .rating-number { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.hero-badge .rating-text { font-size: var(--text-sm); color: var(--on-primary-70); }

/* ── PROZESS-SCHRITTE ─────────────────────────────────────────── */
.process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-6);
    position: relative;
}
/* Verbindungslinie nur, wenn die drei Schritte tatsächlich
   nebeneinander stehen — sonst hängt sie im Leeren. */
@media (min-width: 55rem) {
    .process::before {
        content: '';
        position: absolute;
        top: 2.5rem;
        left: 16.66%; right: 16.66%;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
    }
}
.step { position: relative; text-align: center; }
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem; height: 5rem;
    margin: 0 auto var(--space-5);
    background: var(--primary);
    color: var(--accent);
    border: 4px solid var(--bg);   /* trennt die Ziffer sauber von der Linie */
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
}
.step h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.step p { max-width: 32ch; margin-inline: auto; font-size: var(--text-sm); color: var(--text-light); }

/* ── ÜBER UNS ─────────────────────────────────────────────────── */
.about-content h2 { margin-bottom: var(--space-5); }
.about-content p { margin-bottom: var(--space-4); color: var(--text-light); }

.about-stats {
    display: grid;
    /* Bewusst fix 2×2 statt auto-fit: bei vier Kacheln ergibt ein
       automatischer Umbruch je nach Spaltenbreite ein schiefes 3+1. */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.stat {
    padding: var(--space-5) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}
.stat-number { display: block; font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; color: var(--accent-dark); }
.stat-label { font-size: var(--text-xs); color: var(--text-light); }

.portrait {
    overflow: hidden;
    background: var(--primary);
    border-radius: var(--radius);
}
.portrait img { width: 100%; min-height: 380px; object-fit: cover; object-position: center 15%; }
.portrait-overlay {
    position: relative;
    margin-top: -4rem;
    padding: var(--space-5) var(--space-6) var(--space-3);
    background: linear-gradient(to top, var(--primary) 40%, rgba(10, 46, 31, 0.8) 70%, transparent 100%);
}
.portrait-overlay h3 { margin-bottom: var(--space-1); color: var(--accent); }
.portrait-overlay .subtitle { font-size: var(--text-sm); color: var(--on-primary-70); }

.portrait-details { padding: var(--space-3) var(--space-6) var(--space-5); background: var(--primary); }
.portrait-details li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--on-primary-70);
    list-style: none;
}
.portrait-details .icon { flex-shrink: 0; color: var(--accent); }


/* ── KONTAKT ──────────────────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-8);
    align-items: start;
}
.contact-info h3 { margin-bottom: var(--space-4); }
.contact-info > p { margin-bottom: var(--space-5); color: var(--text-light); }

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.contact-detail .icon { flex-shrink: 0; width: 1.5rem; text-align: center; }
.contact-detail a { color: var(--primary); font-weight: 500; text-decoration: none; }
.contact-detail a:hover { color: var(--accent-dark); text-decoration: underline; }
.contact-detail .muted { font-size: var(--text-xs); color: var(--text-light); }

.contact-form {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ── AUTOR-BOX ────────────────────────────────────────────────── */
.author-box {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--section-x);
}
.author-box > div {
    padding: var(--space-5);
    background: var(--accent-wash);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.author-box p { font-size: var(--text-sm); color: var(--text-light); }
.author-box strong { color: var(--accent-dark); }

/* ── MOBIL ────────────────────────────────────────────────────── */
/* Nur zwei echte Umbauten bleiben übrig — den Rest erledigen
   clamp() und auto-fit oben. */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding-bottom: var(--space-8);
    }

    /* Die Bewertung wandert über die Headline: sie ist das stärkste
       Argument und war auf Mobil bisher erst nach ~900px Scrollen
       sichtbar. */
    .hero-visual { order: -1; justify-content: flex-start; }

    .hero-badge {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        text-align: left;
    }
    .hero-badge::before { display: none; }
    .hero-badge .stars { font-size: var(--text-base); }
    .hero-badge .rating-number { font-size: var(--text-lg); }
    .hero-badge .rating-text { font-size: var(--text-xs); }

    .hero-lead { font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: var(--space-5); }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-trust { gap: var(--space-2) var(--space-3); }

    .portrait img { min-height: 280px; object-position: center 20%; }
    .portrait-overlay { margin-top: -3rem; }
}