/* Feinschliff der Oberflaeche: weniger auf einmal, klarer Einstieg. */

/* Die Reiterleiste lief unter den Sprachwechsel; rechts Platz lassen. */
@media (min-width: 621px) {
    .kopf { padding-right: 6.5rem; }
}

details.weitere > summary, details.kandidaten > summary {
    cursor: pointer; list-style: none; font-size: 0.85rem; color: var(--muted);
    padding: 0.7rem 0; border-top: 1px solid var(--line);
}
details.weitere > summary::-webkit-details-marker,
details.kandidaten > summary::-webkit-details-marker { display: none; }
details.weitere > summary::after, details.kandidaten > summary::after {
    content: "+"; color: var(--leise); margin-left: 0.6rem;
}
details.weitere[open] > summary::after, details.kandidaten[open] > summary::after { content: "–"; }
details.weitere .traditionen { margin-top: 0.8rem; }

/* Die Quintessenz ist der Einstieg: gross genug, um sie zu lesen. */
.quintessenz { font-size: 1.05rem; line-height: 1.6; max-width: 46rem; }

/* Erklaerungen und selten gebrauchte Schalter stehen bereit, ohne den
   ersten Blick zu belegen. */
details.hinweis-aufklapper > summary,
details.mehr-schalter > summary {
    cursor: pointer; list-style: none;
    font-size: 0.82rem; color: var(--leise);
    padding: 0.5rem 0;
}
details.hinweis-aufklapper > summary::-webkit-details-marker,
details.mehr-schalter > summary::-webkit-details-marker { display: none; }
details.hinweis-aufklapper > summary::after,
details.mehr-schalter > summary::after { content: " +"; }
details.hinweis-aufklapper[open] > summary::after,
details.mehr-schalter[open] > summary::after { content: " –"; }
details.mehr-schalter { width: 100%; margin-top: 0.4rem; }
details.mehr-schalter > summary { text-align: center; }
details.mehr-schalter .legende { margin-top: 0.4rem; }

/* ── Inhaltsseite ─────────────────────────────────────────────────────
   Bis heute standen zweiundzwanzig Stilangaben im HTML dieser Seite.
   Sie stehen jetzt hier, einmal, und lassen sich aendern, ohne die
   Vorlage anzufassen. */
.artikel { max-width: var(--lesebreite); }
.artikel .pfadzeile { margin-bottom: 0.4rem; }
.artikel-titel {
    font-size: 1.6rem; font-weight: 400; line-height: 1.25;
    margin-bottom: 0.5rem;
}
.werteleiste { margin: 1.5rem 0; }
.zitat {
    border-left: 2px solid var(--accent); padding-left: 1.2rem;
    margin: 1.5rem 0; font-style: italic; color: var(--muted);
}
.langfassung { margin: 1.5rem 0; }
.abschnitt-kopf.abstand { margin-top: 2.5rem; }
.aufrufe { list-style: none; color: var(--muted); font-size: 0.92rem; padding: 0; }
.aufrufe li { padding: 0.25rem 0; }
.aufrufe .sphaere { color: var(--leise); }
.stellen { color: var(--muted); font-size: 0.92rem; }
.messwerte {
    font-size: 0.88rem; color: var(--muted);
    display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem;
}
.messhinweis { margin-top: 0.8rem; }
a.quellenlink { color: var(--accent); }
details.wortlaut {
    margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem;
}
details.wortlaut > summary {
    cursor: pointer; color: var(--muted); font-size: 0.9rem; list-style: none;
}
details.wortlaut > summary::-webkit-details-marker { display: none; }
details.wortlaut > summary::after { content: " +"; color: var(--leise); }
details.wortlaut[open] > summary::after { content: " –"; }
.wortlaut-text {
    margin-top: 1rem; font-size: 0.88rem; white-space: pre-wrap;
    color: var(--muted); max-height: 30rem; overflow: auto;
}

/* ── Kopfzeile ────────────────────────────────────────────────────────
   Fuenf Wege stehen offen, vier weitere hinter "Mehr". */
.kopf nav { display: flex; flex-wrap: wrap; align-items: baseline; }
.kopf details.mehr { display: inline-block; position: relative; margin-left: 1.2rem; }
.kopf details.mehr > summary {
    cursor: pointer; list-style: none; color: var(--muted); font-size: 0.85rem;
}
.kopf details.mehr > summary::-webkit-details-marker { display: none; }
.kopf details.mehr > summary::after { content: " ›"; }
.kopf details.mehr[open] > summary { color: var(--ink); }
.kopf details.mehr .mehr-inhalt {
    position: absolute; right: 0; top: 1.6rem; z-index: 20;
    display: flex; flex-direction: column; gap: 0.5rem;
    background: var(--paper); border: 1px solid var(--line);
    padding: 0.7rem 1rem; min-width: 9rem;
}
.kopf details.mehr .mehr-inhalt a { margin-left: 0; }
@media (max-width: 640px) {
    .kopf details.mehr { margin-left: 0; }
    .kopf details.mehr .mehr-inhalt { position: static; border: 0; padding: 0.4rem 0; }
}

/* ── Tabellen auf dem Telefon ─────────────────────────────────────────
   Drei bis vier Spalten in einer Breite von 390 Pixeln quetschten die
   Traditionsnamen auf zwei Buchstaben je Zeile. Unter 640 Pixeln wird
   jede Zeile zu einem kleinen Block, und die Spaltennamen stehen als
   Beschriftung davor (data-spalte). */
@media (max-width: 640px) {
    .vergleichstabelle thead { position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vergleichstabelle tr {
        display: block; border-bottom: 1px solid var(--line);
        padding: 0.5rem 0;
    }
    .vergleichstabelle td {
        display: flex; justify-content: space-between; gap: 1rem;
        border: 0; padding: 0.12rem 0; text-align: right;
    }
    .vergleichstabelle td:first-child {
        color: var(--ink); text-align: left; display: block;
    }
    .vergleichstabelle td[data-spalte]::before {
        content: attr(data-spalte); color: var(--leise);
        font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
        text-align: left; flex: 0 0 auto;
    }
    .vergleichstabelle td:first-child[data-spalte]::before { display: none; }
}

/* ── Die Oberflaeche spricht serifenlos ───────────────────────────────
   Alles, was die Seite ueber sich selbst sagt, steht in der zweiten
   Schrift: Navigation, Beschriftungen, Zahlen, Tabellen, Schalter. Die
   Serife bleibt dem vorbehalten, was gelesen wird. So sieht man auf
   einen Blick, was Inhalt ist und was Gestell. */
.kopf, .kopf nav, .fuss, .meta, .hinweis, .filterleiste, .feinfilter,
.legende, .schalter, .wertmarke, .vergleichstabelle, .blaettern,
.zahl, .leistenname, .werkzeug, .zustand, .kennzahlen, .sprachwechsel,
details > summary {
    font-family: var(--sans);
}
.vergleichstabelle th {
    font-size: 0.74rem; color: var(--leise);
}
.vergleichstabelle td { font-size: 0.9rem; }

/* Mehr Luft zwischen den Abschnitten, weniger Enge im Text. */
section { margin-bottom: 1rem; }
.erklaerung { line-height: 1.7; }
.eintrag { padding: 1.15rem 0; }
.eintrag h3 { font-size: 1.05rem; line-height: 1.35; }

/* Die Kopfzeile traegt die Marke groesser als die Reiter, sonst steht
   der Name gleichrangig neben Werkzeugen. */
.marke { font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
         letter-spacing: -0.01em; }
.kopf nav a { font-size: 0.88rem; }

/* Der Slogan ist das Erste, was jemand liest: er darf atmen. */
.slogan { line-height: 1.35; }

/* ── Der Weg zur Seite ────────────────────────────────────────────────
   Von einer Detailseite fuehrte bisher kein Schritt zurueck ausser der
   Reiterleiste. */
.brotkrumen { font-family: var(--sans); font-size: 0.8rem; margin: 0 0 1.4rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap;
                 gap: 0.3rem 0.5rem; padding: 0; margin: 0; }
.brotkrumen li + li::before { content: "› "; color: var(--leise); }
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--accent); }
.brotkrumen [aria-current] { color: var(--leise); }