/* Wiederverwendbare Bausteine controlling.team.
   Setzt styles/tokens.css voraus.

   Der Basis-Teil (Reset, html, body) ist 1:1 aus den Inline-Bloecken
   uebernommen und am 08.08.2026 als identisch verifiziert. Einzige
   Ausnahme ist die Zeilenhoehe, die ueber --line-body variabel bleibt. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--dark-gray);
    background: var(--light);
    line-height: var(--line-body, 1.7);
    overflow-x: hidden;
}

/* ==========================================================
   ANTWORTBLOCK
   Steht direkt unter der H1 und beantwortet ohne Kontext:
   was, fuer wen, zu welchem Preis. 40 bis 60 Woerter,
   erzwungen von _tools/aeo_check.py.
   Abgesetzt ueber Groesse, Zeilenhoehe und Satzbreite,
   nicht ueber eine eigene Schrift (Gate 1).
   ========================================================== */
.answer-lead {
    font-family: var(--font-read);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.65;
    max-width: var(--measure);
    margin: var(--space-md) 0 var(--space-lg);
    color: var(--dark-gray);
}

.answer-lead strong {
    color: var(--orange-dark);
    font-weight: 600;
}

/* ==========================================================
   HERO-HOOK
   Der animierte Rotations-Hook. War bisher H1, ist jetzt
   semantisch neutral, optisch unveraendert.
   ========================================================== */
.hero-hook {
    font-family: var(--font-serif);
    font-size: clamp(22px, 4.5vw, 36px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark-gray);
    text-align: center;
    margin: 0;
}

/* ==========================================================
   FAKTENTABELLE
   Extrahierbar fuer Crawler, scrollt auf Mobil im eigenen
   Container statt die Seite breit zu machen.
   ========================================================== */
.fact-table-wrap {
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

.fact-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 16px;
}

.fact-table th,
.fact-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(167, 169, 172, 0.35);
    vertical-align: top;
}

.fact-table th {
    font-weight: 600;
    color: var(--dark-gray);
    width: 38%;
}

.fact-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding-bottom: var(--space-sm);
}

/* ==========================================================
   FAQ
   Sichtbarer Text ist die Quelle, das Schema spiegelt ihn.
   Niemals umgekehrt.
   ========================================================== */
.faq {
    max-width: var(--measure);
}

.faq-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(167, 169, 172, 0.35);
}

.faq-item h3 {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--dark-gray);
}

.faq-item p {
    font-family: var(--font-read);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}