/* ==========================================================================
   12db in Zahlen (/12db-in-zahlen/)
   Nur auf dieser Seite geladen. style.css wird in jede Seite inline kopiert -
   seitenspezifische Regeln haetten dort auf allen 150 Seiten Platz gekostet.

   Gestaltungssprache bewusst identisch zu legal.css (Datenschutzerklaerung):
   weiche Radialverlaeufe auf Kartenweiss, Pillen mit 999px, dieselben
   Variablen. Zwei verschiedene "moderne" Sprachen auf einer Website sind
   keine Gestaltung, sondern ein Versehen.
   ========================================================================== */

/* --- Masse dieser Seite --------------------------------------------------
   EIN Innenabstand fuer alle Kaesten. Vorher trug jeder Baustein seinen
   eigenen Wert (16 / 21,6 / 24 / 28 / 32 px nebeneinander gemessen) - das
   liest sich als Unfall, nicht als Raster. Radien kommen aus den globalen
   Variablen; auf dieser Seite gilt durchgehend --radius-lg, auch fuer die
   Hinweisboxen, die global mit --radius-sm deutlich kantiger sind. */
.zahlen-seite {
    --zahlen-pad: 1.5rem;
}

.zahlen-seite .zahlen-puls,
.zahlen-seite .zahlen-balken-liste,
.zahlen-seite .zahlen-fragen > li {
    padding: var(--zahlen-pad);
    border-radius: var(--radius-lg);
}

/* Hinweisboxen bleiben bewusst AUSSERHALB der Kasten-Angleichung darueber:
   Sie folgen der projektweiten Konvention aus style.css - flach (--radius-sm)
   und knapper gepolstert, mit dem 4 px dicken Akzentbalken links. So stehen
   sie auf /amateurfunk/ und ueberall sonst neben runden Kacheln.
   Auf 16 px hochgezogen wirkten sie hier deutlich runder als alles andere,
   weil eine dicke Kante dieselbe Kurve fetter erscheinen laesst. */

/* --- Hinweisboxen im Abschnittskoerper -----------------------------------
   legal.css ist fuer reinen Rechtstext gebaut und kennt die Box-Komponenten
   aus style.css nicht. Drei seiner Regeln greifen hier daneben:

   1. `p:has(> strong:first-child)` setzt JEDEN Absatz als graue Merkmalszeile,
      dessen erstes ELEMENT ein <strong> ist - Textknoten zaehlen bei
      :first-child nicht mit. Auf einer Rechtsseite ("Zweck: ...") ist das
      gewollt, hier traf es normalen Fliesstext und erzeugte Kaesten im Kasten.
   2. Die Ueberschriften-Marker (h3::before) landeten im CTA-Block.
   3. Die Linkfarbe schlug den weissen Knopf der CTA-Box.

   Polster und Radius der CTA-Box kommen aus style.css - sie soll aussehen
   wie auf jeder anderen Seite. Hier stehen nur die Korrekturen. */
.zahlen-seite .legal-section-body p:has(> strong:first-child) {
    padding: 0;
    margin-bottom: 1.15rem;
    border-left: 0;
    border-radius: 0;
    background: none;
}

.zahlen-seite .legal-section-body .box p,
.zahlen-seite .legal-section-body .cta-box p {
    max-width: none;
}

.zahlen-seite .legal-section-body .cta-box {
    margin: 2rem 0 0;
}

.zahlen-seite .legal-section-body .cta-box h3 {
    margin: 0 0 0.5rem;
    padding-left: 0;
    color: #fff;
}

.zahlen-seite .legal-section-body .cta-box h3::before {
    content: none;
}

.zahlen-seite .legal-section-body .cta-box .btn {
    color: var(--primary);
    text-decoration: none;
}

/* --- Zahlenbloecke im Abschnittskoerper ---------------------------------
   legal.css setzt fuer den Fliesstext eine Lesebreite (68ch) und rueckt
   Listen ein - richtig fuer Text, falsch fuer Kacheln und Balken. Die
   Selektoren dort sind spezifischer als eine einzelne Klasse
   (.legal-section-body ol schlaegt .zahlen-fragen), deshalb muss hier
   dieselbe Tiefe stehen. Ohne diesen Block stehen die Fragen eingerueckt
   und die Karten enden mitten in der Spalte. */
/* padding-left: 0 gilt NUR fuer die Aufzaehlung selbst (weg mit der
   Listeneinrueckung) - nicht fuer die Kaesten. Genau das war hier einmal
   falsch: Die Balkenliste verlor damit ihr linkes Innenpolster und der
   Inhalt klebte an der Kante, waehrend rechts 2 rem standen. */
.legal-section-body .zahlen-fragen {
    max-width: none;
    margin-left: 0;
    padding-left: 0;
}

/* `.legal-section-body li` ist spezifischer als `.zahlen-frage` und setzt
   padding-left: 0.25rem - die Kartenpolster muessen deshalb auf dieser
   Selektortiefe wiederholt werden, sonst klebt der Fragetext am Rand. */
.legal-section-body .zahlen-fragen > li {
    margin-bottom: 0;
    padding: var(--zahlen-pad);
}

.legal-section-body .zahlen-frage-text,
.legal-section-body .zahlen-puls-fuss {
    max-width: none;
}

/* --- Vorspann (ueber der Spaltenaufteilung, volle Breite) ---------------- */
.zahlen-intro {
    margin: 0 0 2.5rem;
}

.zahlen-intro > p:first-child {
    margin-top: 0;
}

/* --- Aktivitaetsband ("Die letzten sieben Tage") ------------------------- */
.zahlen-puls {
    position: relative;
    overflow: hidden;
    margin: 2rem 0 2.5rem;
    border: 1px solid var(--border);
    background:
        radial-gradient(70rem 24rem at 10% -60%, rgba(37, 99, 235, 0.10), transparent 60%),
        radial-gradient(50rem 20rem at 95% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
        var(--bg-card);
}

.zahlen-puls-kopf {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* Gruener Punkt wie bei .legal-stand - Signal "das hier lebt". */
.zahlen-puls-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.zahlen-puls-reihe {
    display: grid;
    /* Gemessen: "8.204" bei 1.9rem Bold braucht rund 90 px, das laengste
       Label ("Prüfungssimulationen") rund 150 px. 160 px traegt beides. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem 1.5rem;
}

.zahlen-puls-posten {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.zahlen-puls-wert {
    font-size: clamp(1.35rem, 3.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.zahlen-puls-label {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-light);
    /* Wie beim Kachel-Label: "Prüfungssimulationen" misst 162 px, die Spalte
       bei 360 px nur 137 px. Ohne Umbruch schnitt das overflow: hidden der
       Puls-Box das Wortende ab. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.zahlen-puls-fuss {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text-light);
}

/* --- Kachelraster -------------------------------------------------------
   Die Kacheln SIND .stats-card - dieselbe Komponente wie in der
   Rufzeichen-Statistik und im Kennzahlen-Block der Startseite. Hier steht
   nur, was auf dieser Seite abweicht: .stats-cards raestert mit 150 px
   Mindestbreite, das ist fuer Beschriftungen wie "abgeschlossene
   Lerneinheiten" zu schmal (gemessen 240 px noetig). */
.zahlen-kacheln {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

/* Ab dieser Breite drei feste Spalten fuer den Ueberblick: auto-fit legt
   dort vier nebeneinander, und die sechs Kacheln brechen dann als 4 + 2 um.
   Feste Spaltenzahlen sind sonst der Grund fuer waagerechtes Scrollen auf
   Tablets - hier unkritisch, weil die Regel erst ueber 1000 px greift und
   jede Spalte damit mindestens 350 px breit ist. */
@media (min-width: 1000px) {
    .zahlen-kacheln {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Balkenlisten (Erstversuchsquote, Kapitel) -------------------------- */
.zahlen-balken-liste {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.zahlen-balken-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.zahlen-balken-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.zahlen-balken-wert {
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Ampelvarianten von .progress-bar (style.css). Farbe ist nie die einzige
   Information - die Prozentzahl steht immer daneben. */
.zahlen-balken-schwer { background: linear-gradient(90deg, #dc2626, #f97316); }
.zahlen-balken-mittel { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.zahlen-balken-leicht { background: linear-gradient(90deg, #16a34a, #4ade80); }

/* .progress-bar-container bringt margin-bottom: 2rem mit - hier sitzt der
   Balken dicht unter seiner Beschriftung. */
.zahlen-balken {
    margin-bottom: 0;
}

/* --- Klassenkennzeichen (N / E / A / B / V) ----------------------------- */
.zahlen-klasse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.10);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.zahlen-klasse-A { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }
.zahlen-klasse-E { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.zahlen-klasse-N { background: rgba(22, 163, 74, 0.12);  color: #166534; }
.zahlen-klasse-B { background: rgba(37, 99, 235, 0.10);  color: #1d4ed8; }
.zahlen-klasse-V { background: rgba(109, 40, 217, 0.10); color: #6d28d9; }

/* --- Liste der schwersten Fragen ---------------------------------------- */
.zahlen-fragen {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    padding: 0;
    counter-reset: none;
}

.zahlen-frage {
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.zahlen-frage-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

/* .starthere-num ist fuer den Drei-Schritte-Block gebaut und dort 2,25 rem
   gross - als Rangnummer in einer Liste zu wuchtig. Gleiche Masse wie die
   Ziffernkreise der Sprungmarken (.legal-chip span). */
.zahlen-frage-platz {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.78rem;
}

.zahlen-frage-nummer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-light);
}

/* Die Quote wandert ans Zeilenende, damit die Zahlen untereinander stehen
   und sich die zehn Fragen vergleichen lassen, ohne zu suchen. */
.zahlen-frage-quote {
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.zahlen-frage-quote-schwer { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }
.zahlen-frage-quote-mittel { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.zahlen-frage-quote-leicht { background: rgba(22, 163, 74, 0.12);  color: #166534; }

.zahlen-frage-text {
    margin: 0 0 0.9rem;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text);
}

.zahlen-frage-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

/* Farbe und Unterstreichung kommen aus legal.css (.legal-section-body a) -
   der Selektor dort ist spezifischer. Hier bleibt nur die Groesse. */
.zahlen-frage-link {
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Schmale Displays --------------------------------------------------- */
@media (max-width: 768px) {
    .zahlen-seite {
        --zahlen-pad: 1.15rem;
    }

    .zahlen-puls-reihe {
        /* Zwei Spalten statt vier - eine einzelne Spalte macht das Band
           unnoetig hoch, vier quetschen die Labels in drei Zeilen. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem 1rem;
    }

    /* 150 px waren zu wenig: bei 768 px entstanden daraus vier Spalten mit
       121 px Innenraum, in die weder die Zahlen noch die Labels passten.
       185 px ist die gemessene Mindestbreite ("Prüfungssimulationen" 178 px
       bei 0,95 rem) - daraus werden hier drei Spalten statt vier. */
    .zahlen-kacheln {
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
        gap: 0.85rem;
    }

    /* Auf dem Telefon passt die Quote nicht mehr in dieselbe Zeile wie
       Platz, Nummer und Klasse - sie bekommt eine eigene. */
    .zahlen-frage-quote {
        margin-left: 0;
        order: 4;
        width: 100%;
        text-align: center;
    }

    .zahlen-balken-kopf {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    /* Eine Spalte: Zwei lassen hier nur 116 px Innenraum, das laengste Label
       misst 166 px - "Prüfungssimul|ationen" brach mitten im Wort um. */
    .zahlen-kacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }
}