/* ============================================================
   CANVARISMA – FARBKLIMA
   ============================================================
   Wird von templates/parts.php nach verzeichnis.css und
   artikel.css geladen und überschreibt deren Variablen.

   LEITGEDANKE: Das Portal ist die Galeriewand, nicht das Bild.

   Das mitgelieferte Thema ist Tech/Dark – Navy, Neon-Cyan und
   Purple, mit Leuchtschatten und 12–20 px Radien. Für ein Portal,
   auf dem Kunstmotive gezeigt und besprochen werden, ist das
   die falsche Umgebung: Eine bunte Oberfläche konkurriert mit
   den Motiven, und ein Neon-Glow um eine Karte, in der ein
   Aquarell besprochen wird, macht die Beschreibung unglaubwürdig.

   Deshalb hier:
     Grundfläche  gebrochenes Weiß statt Reinweiß – Galerien
                  streichen nicht weiß, sondern gebrochen, damit
                  helle Bildpartien nicht grau wirken
     Struktur     ein einziger tiefer Blauton – er trägt die
                  dunklen Flächen UND die Überschriften
     Hervorhebung Messing – die Farbe von Rahmenprofil und
                  Wandschild. Die einzige zweite Farbe.
     Radien       klein statt rund, Kanten statt Kacheln
     Schatten     neutral und flach; keine Leuchteffekte

   ZWEI FARBEN, KEINE DRITTE (Überarbeitung 31.08.2026)
   Die erste Fassung setzte die Variablen richtig, ließ aber die
   fest verdrahteten Farben des mitgelieferten Themas stehen:
   Kopfleiste auf Schiefer, Fuß auf fast Schwarz, Hero auf
   Anthrazit mit zwei Radialverläufen in Cyan und Purple und
   einem Punktraster darüber; Logo, Menü- und Suchknopf auf
   blauem Verlauf; die Haken in den Prüflisten auf Grün.
   Nebeneinander waren das fünf Farbfamilien. Jetzt ist alles
   Dunkle derselbe Blauton, jede Handlungsfläche Messing, und
   Grün kommt nur noch vor, wo es etwas bedeutet.

   KONTRASTE (WCAG 2.1)
   Auf hellem Grund, gemessen gegen --light #F2F1ED:
     --primary-text  #1B3A5C  10,3:1
     --accent-text   #6B5334   6,4:1
     --text-medium   #57544E   6,9:1
     --medium-gray   #6B6862   5,0:1
   Auf der dunklen Wand, gemessen am gebauten Portal gegen die
   Mitte des Hero-Verlaufs (#102B45):
     Fließtext und Überschrift  #F3F0E9  12,7:1
     Wandschild                 #D9BE8C   8,1:1
     Haken in der Zusagenliste  #C4A674   6,2:1
     Weiß auf dem Messingknopf           6,2:1
     Unterzeile im Logo                  5,7:1
   Alle über der Grenze von 4,5:1 für normalen Text.

   ACHTUNG bei tools/qualitaet.php: Das Werkzeug liest die
   Vorgabewerte aus verzeichnis.css, nicht die Überschreibungen
   von hier. Seine Kontrasttabelle beschreibt also das
   mitgelieferte Thema, nicht dieses. Die Werte oben sind am
   gebauten Portal gemessen.

   Die Akzentfarbe selbst kommt aus den Einstellungen
   (site_accent) und wird von parts.php in einem inline :root
   NACH dieser Datei gesetzt. Sie steht dort auf dem Messington.
   ============================================================ */

:root {

    /* ---- Struktur: ein einziger tiefer Blauton ---- */
    --primary:       #1B3A5C;
    --primary-light: #2E5A85;
    --primary-dark:  #12283F;
    --secondary:     #4A6B8A;

    /* ---- Hervorhebung: Messing, Farbe von Rahmen und Schild ----
       Wird durch site_accent aus den Einstellungen bestätigt;
       hier stehen die Ableitungen für Flächen und Ränder. */
    --accent:        #8C6D46;
    --accent-light:  #A88860;
    --accent-dark:   #6B5334;

    /* ---- Dunkle Wand für Kopf, Hero und Fuß ----
       War Anthrazit (#16161A). Das mitgelieferte Thema setzt aber
       die Kopfleiste auf Schiefer (#0F172A) und den Fuß auf fast
       Schwarz (#020617) – drei verschiedene Dunkeltöne übereinander,
       und keiner davon gehört zur Palette. Jetzt EIN Blauton für
       alle drei Flächen, tief genug für weiße Schrift und hell
       genug, um als Farbe erkennbar zu sein.
       --navy trägt zugleich die Überschriften auf hellem Grund:
       14,5:1 auf der Grundfläche. */
    --navy:          #102A44;
    --navy-light:    #1A3E5F;

    /* ---- Grundflächen: Galerie-Weiß und Passepartout ---- */
    --white:         #FFFFFF;
    --off-white:     #FAFAF8;
    --light:         #F2F1ED;
    --light-gray:    #D9D7D0;
    --medium-gray:   #6B6862;
    --text-dark:     #16161A;
    --text-medium:   #57544E;

    /* ---- Statusfarben, entsättigt auf das übrige Klima ---- */
    --success:       #3F7A5C;
    --warning:       #9A7328;
    --danger:        #A2543F;

    /* ---- Textsichere Ableitungen ---- */
    --primary-text:  #1B3A5C;
    --accent-text:   #6B5334;
    --success-text:  #2F5F46;
    --warning-text:  #7A5A1E;
    --danger-text:   #8A4634;
    --on-accent:     #FFFFFF;

    /* ---- Verläufe ----
       Der Hero ist eine beleuchtete Wand: oben etwas heller, unten
       tiefer. Kein Farbwechsel im Verlauf – ein Verlauf, der die
       Farbe wechselt, sieht nach Verlauf aus; einer, der nur die
       Helligkeit wechselt, sieht nach Licht aus.
       --gradient-neon trägt im Thema die Handlungsflächen: Logo,
       Suchknopf, Menüknopf. Der stand auf Blau und war damit die
       zweite Farbe neben dem Messing. Jetzt Messing – dann hat die
       Seite eine Struktur- und eine Handlungsfarbe, nicht drei. */
    --gradient-hero: linear-gradient(180deg, #16385A 0%, #102B45 62%, #0C2138 100%);
    --gradient-neon: linear-gradient(180deg, #8A6B41 0%, #765A33 100%);
    --gradient-glow: linear-gradient(135deg, rgba(16,42,68,.05) 0%, rgba(140,109,70,.05) 100%);

    /* ---- Schatten: neutral und flach statt cyan-getönt ---- */
    --shadow:        rgba(22,22,26,.055);
    --shadow-strong: rgba(22,22,26,.11);

    /* ---- Leuchteffekte abschalten ---- */
    --glow-primary:  0 0 0 1px rgba(27,58,92,.10);
    --glow-accent:   0 0 0 1px rgba(140,109,70,.14);

    /* ---- Kanten statt Kacheln ---- */
    --border-radius:    4px;
    --border-radius-lg: 6px;

    /* ------------------------------------------------------------
       ARTIKELBAUSTEINE
       Merkkästen, Schrittlisten, Gegenüberstellungen und die
       Glossar-Kurzantwort kamen mit einem festen Indigo (#4338CA)
       und bläulichen Grautönen. Beides gehört zum mitgelieferten
       Thema und nicht hierher. Die Bausteine übernehmen jetzt
       dieselbe Palette wie der Rest der Seite.

       Kontraste gegen --a-akzent-bg #F2F1ED:
         --a-akzent-text #1B3A5C  10,3:1
         --a-ink-soft    #57544E   6,9:1
       ------------------------------------------------------------ */
    --a-line:         #D9D7D0;
    --a-line-2:       #C4C1B8;
    --a-ink:          #16161A;
    --a-ink-soft:     #57544E;
    --a-ink-2:        #3A3833;
    --a-indigo:       #1B3A5C;
    --a-akzent-bg:    #F2F1ED;
    --a-akzent-linie: #DAD4C6;
    --a-akzent-text:  #1B3A5C;
    --a-akzent-tief:  #16161A;
    --a-flaeche:      #FAFAF8;
    --a-flaeche-2:    #F2F1ED;
}

/* ------------------------------------------------------------
   KURZANTWORT IM GLOSSAR
   Trägt die eigentliche Auskunft und ist der Absatz, den ein
   Sprachmodell übernimmt. Sie bekommt eine kräftige Kante links
   statt einer farbigen Füllfläche – Tafel statt Kasten.
   ------------------------------------------------------------ */
.gl-answer {
    border-radius: 2px;
    border-width: 1px;
    border-left-width: 3px;
}
.gl-mark {
    background: rgba(140,109,70,.16);
    color: var(--a-ink);
    border-radius: 2px;
}

/* ------------------------------------------------------------
   GRUNDFLÄCHE
   Der Rumpf steht in verzeichnis.css auf Reinweiß. Auf einem
   Portal, das Bilder bespricht, ist gebrochenes Weiß richtiger:
   Es nimmt hellen Bildpartien nicht die Leuchtkraft.
   ------------------------------------------------------------ */
body {
    background: var(--off-white);
}

/* ------------------------------------------------------------
   TYPOGRAFIE
   DM Sans liegt bei und bleibt. Geändert wird nur die Führung:
   etwas engere Überschriften, Versalien mit Sperrung für
   Rubriken – das Schriftbild von Wandschildern.
   ------------------------------------------------------------ */
h1, h2, h3 {
    letter-spacing: -.015em;
}
h1 {
    font-weight: 600;
}
.eyebrow,
.badge,
.gl-answer-label,
.section-label {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ------------------------------------------------------------
   PASSEPARTOUT FÜR BILDER
   Ein Motiv im Fließtext bekommt einen hellen Innenabstand und
   eine feine Kante – die Rahmung zitiert, was auf dem Portal
   besprochen wird, und trennt Motiv von Oberfläche. Ohne diese
   Trennung sitzt ein Bild mit hellem Rand unsichtbar auf der
   Seite und wirkt wie ein Ausschnitt statt wie ein Werk.
   ------------------------------------------------------------ */
.artikel-inhalt img,
.article-body img,
.a-figure img {
    background: var(--white);
    padding: clamp(.6rem, 2.2vw, 1.4rem);
    border: 1px solid var(--light-gray);
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--shadow), 0 10px 26px -18px var(--shadow-strong);
}

/* ------------------------------------------------------------
   FAKTENTABELLE „AUF EINEN BLICK“
   Im Glossar trägt sie die eigentliche Auskunft. Sie bekommt
   deshalb feine Linien statt einer Füllfläche: eine Tafel, kein
   Kasten. Die Bezeichnung links steht in Versalien, der Wert
   rechts in Ziffernbreite, damit Maße untereinander stehen.
   ------------------------------------------------------------ */
.gl-facts {
    border-top: 2px solid var(--text-dark);
    border-bottom: 1px solid var(--light-gray);
}
.gl-facts li {
    border-bottom: 1px solid var(--light-gray);
}
.gl-facts li:last-child {
    border-bottom: none;
}

/* Die Tabelle kommt aus kunst.canvarisma.de und trägt dort kein
   Layout, das hier mitgeliefert würde. Ohne diese Regeln steht sie
   als nackte Tabelle mit zusammengeschobenen Spalten da. */
table.facts {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4rem 0 1.8rem;
    border-top: 2px solid var(--text-dark);
    border-bottom: 1px solid var(--light-gray);
    font-size: .95rem;
}
table.facts caption {
    caption-side: top;
    text-align: left;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--medium-gray);
    padding: 0 0 .55rem;
}
table.facts tr {
    border-bottom: 1px solid var(--light-gray);
}
table.facts tr:last-child {
    border-bottom: none;
}
/* WICHTIG: background zurücksetzen. `.prose th` in verzeichnis.css
   setzt var(--navy) als Fläche – richtig für den Spaltenkopf einer
   Datentabelle mit weißer Schrift, falsch für einen Zeilenkopf.
   Ohne diese Zeile steht die gedämpfte Beschriftung auf fast
   schwarzem Grund und ist unlesbar. */
table.facts th[scope="row"] {
    background: transparent;
    width: 38%;
    text-align: left;
    vertical-align: top;
    padding: .6rem .9rem .6rem 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--medium-gray);
    line-height: 1.45;
}
table.facts td {
    padding: .6rem 0;
    vertical-align: top;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

/* Auf schmalen Anzeigen untereinander, aber mit Abstand zwischen den
   Paaren - sonst liest sich die Tabelle als eine lange Liste. */
@media (max-width: 30rem) {
    table.facts th[scope="row"],
    table.facts td {
        display: block;
        width: auto;
        padding: 0;
    }
    table.facts th[scope="row"] {
        padding-top: .7rem;
    }
    table.facts td {
        padding-bottom: .7rem;
    }
}

/* ------------------------------------------------------------
   NAME-WERT-PAARE IM FLIESSTEXT
   artikel.css bringt kein dl-Styling mit. Die aus den
   info-Beiträgen übernommenen Materialkarten arbeiten aber mit
   Paaren (Oberfläche, Wirkung, Gewicht, Haltbarkeit), und
   semantisch ist dafür eine Definitionsliste richtig – keine
   Tabelle, weil es keine Matrix ist.
   ------------------------------------------------------------ */
.a-card dl,
.prose dl {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: .3rem .9rem;
    margin: .8rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
}
.a-card dt,
.prose dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--medium-gray);
    padding-top: .12rem;
}
.a-card dd,
.prose dd {
    margin: 0;
    color: var(--text-dark);
}
@media (max-width: 26rem) {
    .a-card dl,
    .prose dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }
    .a-card dd,
    .prose dd {
        margin-bottom: .55rem;
    }
}

/* ------------------------------------------------------------
   KARTEN
   Statt Schlagschatten eine feine Kante. Beim Überfahren wandert
   die Kante auf den Messington, statt dass die Karte anhebt –
   ruhiger und auf einer Seite mit vielen Karten weniger unruhig.
   ------------------------------------------------------------ */
.a-card {
    background: var(--surface, #FFFFFF);
    border-radius: 3px;
    border-top-width: 2px;
}
.card,
.gl-card,
.listing-card,
.blog-card {
    border: 1px solid var(--light-gray);
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.card:hover,
.gl-card:hover,
.listing-card:hover,
.blog-card:hover {
    border-color: var(--accent);
    box-shadow: none;
    transform: none;
}

/* ============================================================
   DIE DUNKLE WAND – Kopf, Hero und Fuß als eine Fläche
   ============================================================
   Das mitgelieferte Thema setzt seine dunklen Flächen einzeln und
   fest verdrahtet: Kopfleiste rgba(15,23,42), Hero über
   --gradient-hero, Fuß #020617. Wer nur die Variable ändert,
   ändert eine von dreien – übereinander stehen dann drei
   verschiedene Dunkeltöne, und genau das liest sich als
   Zusammengesetztes statt als Entwurf.

   Hier ist alles Dunkle derselbe Blauton. Was darauf liegt, ist
   entweder Schrift (gebrochenes Weiß) oder Messing. Zwei Farben,
   keine dritte.
   ============================================================ */

/* ---- Kopfleiste: oberer Rand derselben Wand ---- */
.header {
    background: rgba(16,42,68,.96);
    border-bottom: 1px solid rgba(196,166,116,.28);
}

/* ---- Beleuchtung statt Nebel ----
   Das Thema legte zwei Radialverläufe in Cyan und Purple über den
   Hero und darüber ein Punktraster in #38BDF8. Beides ist die
   Bildsprache einer Softwareseite. An seine Stelle tritt, was in
   einem Saal tatsächlich passiert: Licht von oben, unten etwas
   Schatten. Nur Helligkeit, keine zweite Farbe. */
.hero::before,
.page-hero::before,
.cta-section::before {
    background:
        radial-gradient(120% 75% at 50% -10%, rgba(255,246,230,.10) 0%, transparent 62%),
        radial-gradient(100% 60% at 50% 118%, rgba(4,14,26,.35) 0%, transparent 60%);
}
.hero::after {
    background-image: none;             /* Punktraster */
}

/* Die Schrift auf der Wand ist nicht reinweiß, sondern gebrochen –
   derselbe Ton wie die Grundfläche. Reinweiß auf Tiefblau flirrt an
   den Kanten. */
.hero,
.page-hero,
.cta-section {
    color: #F3F0E9;
}

/* ---- Das Wandschild über der Überschrift ----
   Trug festes Cyan und lief als Pille mit 30 px Radius; danach als
   Messingkasten. Ein Wandschild ist aber keine Pille und kein
   Kasten, sondern eine Zeile mit einer Linie darunter. Heller
   Messington auf der Wand: 7,1:1. */
.hero-badge,
.hero .badge,
.page-hero .badge {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(196,166,116,.45);
    border-radius: 0;
    padding: 0 .2rem .5rem;
    color: #D9BE8C;
    font-size: .72rem;
    letter-spacing: .2em;
    backdrop-filter: none;
}

/* Das hervorgehobene Wort in der Hauptüberschrift läuft über
   --gradient-neon. Der trägt jetzt die Handlungsflächen und wäre
   hier zu dunkel; deshalb ein eigener, hellerer Messingverlauf. */
.hero h1 .gradient-text {
    background: linear-gradient(135deg, #D9BE8C 0%, #EBD9BC 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Deutsche Überschriften bestehen aus langen Zusammensetzungen.
   Bei -1,5 px Sperrung stoßen die Buchstaben in „Wandbilder" und
   „Zackenaufhänger" aneinander. */
.hero h1,
.page-hero h1 {
    letter-spacing: -.02em;
    font-weight: 600;
}
.hero-sub,
.page-hero-tagline {
    opacity: .82;
    max-width: 58ch;
}

/* ---- Die sechs Zusagen unter der Überschrift ----
   Standen als Flexzeile mit Umbruch: drei Zeilen zu 2–2–2, jede
   anders lang, alle mittig. Das liest sich wie ein Textblock, der
   umgebrochen ist, nicht wie eine Liste. Zwei feste Spalten,
   linksbündig, gleiche Grundlinie.
   Die Haken standen in --success-text, einem Grün. Es ist die
   einzige Stelle im ganzen Portal, an der Grün vorkommt – und es
   bedeutet hier nichts. Jetzt Messing. */
.usp-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 2.75rem;
    max-width: 760px;
    margin: 0 auto 2.75rem;
    text-align: left;
}
.usp-item {
    align-items: baseline;
    gap: .55rem;
    line-height: 1.5;
}
.usp-item .usp-check {
    color: #C4A674;
    font-weight: 400;
    font-size: .95em;
}
@media (max-width: 620px) {
    .usp-strip { grid-template-columns: 1fr; }
}

/* ---- Suchfeld ----
   Rand und Fokusring standen auf Cyan, das Symbol war ein Emoji.
   Ein Emoji als Bedienzeichen ist auf jedem Gerät ein anderes Bild
   und in keinem Fall Teil des Entwurfs – es kommt aus der
   Schriftart des Betriebssystems. Ersetzt durch eine gezeichnete
   Lupe in Messing. */
.search-bar {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(196,166,116,.34);
    border-radius: 3px;
}
.search-bar:focus-within {
    border-color: #C4A674;
    box-shadow: 0 0 0 3px rgba(196,166,116,.18);
    background: rgba(255,255,255,.09);
}
.search-icon {
    font-size: 0;
    width: 2.9rem;
    padding: 0;
    align-self: stretch;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4A674' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 20.5 20.5'/%3E%3C/svg%3E") no-repeat center / 17px 17px;
}
.search-btn {
    border-radius: 3px;
    letter-spacing: .04em;
    font-weight: 600;
}
.search-btn:hover {
    opacity: 1;
    filter: brightness(1.08);
    box-shadow: none;
}

/* ---- Logo ----
   Eine Kachel mit 10 px Radius, blauem Verlauf und einem Emoji
   darin. Jetzt ein Messingschild mit gezeichnetem Rahmenzeichen –
   dieselbe Form, die das Portal bespricht. Das Emoji bleibt im
   Markup und wird über font-size: 0 stillgelegt; die Einstellung
   site_logo_mark muss dafür nicht angefasst werden. */
.logo-mark {
    border-radius: 3px;
    box-shadow: none;
    font-size: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E6' stroke-width='1.5'%3E%3Crect x='3.2' y='4.2' width='17.6' height='15.6' rx='1'/%3E%3Crect x='6.6' y='7.6' width='10.8' height='8.8' rx='.5' opacity='.5'/%3E%3C/svg%3E") no-repeat center / 21px 21px,
        var(--gradient-neon);
}
.logo-sub {
    color: rgba(243,240,233,.62);
    letter-spacing: .16em;
}

/* ---- Menüknopf ----
   Lief über denselben blauen Verlauf wie das Logo. Blau auf Blau
   ist keine Hervorhebung. */
.nav-cta {
    border-radius: 3px;
    letter-spacing: .03em;
}
.nav-cta:hover {
    transform: none;
    filter: brightness(1.08);
    box-shadow: none;
}
.nav a:hover,
.nav a.active {
    background: rgba(196,166,116,.14);
}

/* ---- Fußbereich ----
   Stand auf #020617 – fast Schwarz und aus einer anderen Palette.
   Die Verweise darin liefen über --primary-light, ein mittleres
   Blau: auf dunklem Grund 3,1:1 und damit unter der Grenze. */
.footer {
    background: #0C2138;
    border-top: 1px solid rgba(196,166,116,.22);
}
.footer-col a:hover,
.footer-copy a,
.footer-legal a:hover {
    color: #D9BE8C;
}

/* ---- Suchvorschläge im Hero ---- */
.search-tag:hover {
    background: rgba(196,166,116,.16);
    border-color: rgba(196,166,116,.4);
    color: #E4D3B4;
}


/* ============================================================
   PRÜFLISTEN – das Grün heraus, die Bedeutung behalten
   ============================================================
   artikel.css setzt den Haken in .a-check auf Grün (#0B6B4F auf
   #ECFDF5). Auf 151 Glossarseiten trägt diese Liste die
   Kurz-Fakten – dort bedeutet der Haken nichts, er zählt auf.
   Grün ist damit die einzige Farbe im Portal, die weder Struktur
   noch Hervorhebung ist, und sie steht auf fast jeder Seite.

   Der Haken wird deshalb Messing. Die beiden Varianten behalten
   ihre Farbe, weil sie tatsächlich etwas unterscheiden:
     .a-check--ask  blaues Fragezeichen  – das ist zu prüfen
     .a-check--no   rotes Kreuz          – das ist der Fehler
   Kontraste: #6B5334 auf #F5F0E6 = 6,1:1.
   ------------------------------------------------------------ */
.a-check > li::before {
    background: #F5F0E6;
    color: #6B5334;
    border-color: #DCCDB3;
    font-weight: 600;
}
.a-check--ask > li::before {
    background: #EDF2F7;
    color: #1B3A5C;
    border-color: #B9C9D8;
}
.a-check--no > li::before {
    background: #FBF0EE;
    color: #8A4634;
    border-color: #E4C0B6;
}


/* ============================================================
   STARTSEITE – der Text unter dem Hero
   ============================================================
   Der Block läuft in verzeichnis.css über 920 px. Bei dieser
   Schriftgröße sind das um die 110 Zeichen je Zeile; angenehm
   liest sich etwa die Hälfte. Und die Überschriften sassen ohne
   Abstand auf dem Absatz davor – vier Themen hintereinander ohne
   erkennbare Fuge.

   Die Linie über jeder Überschrift ist dieselbe Geste wie im
   Glossar und in der Faktentafel: eine Fuge, kein Kasten.
   ------------------------------------------------------------ */
.index-text {
    max-width: 780px;
    padding-top: 4rem;
}
.index-text h2 {
    margin-top: 3.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light-gray);
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}
.index-text > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.index-text p {
    line-height: 1.8;
}
.index-text .a-cards {
    margin: 1.75rem 0 0;
}
.index-text .a-card-i {
    font-size: 1.2rem;
    opacity: .8;
}

/* ------------------------------------------------------------
   ERKLÄRENDE GRAFIKEN
   Inline-SVG im Fließtext. Die Farben kommen aus Variablen,
   damit die Grafik in beiden Themes trägt – und damit ein
   anderer Mandant sie mit seiner Palette übernehmen kann.

   Nie Farbe als einziger Bedeutungsträger: Jede Fläche in den
   Grafiken ist zusätzlich beschriftet.
   ------------------------------------------------------------ */
:root {
    --svg-ink:    #16161A;   /* Linien und Text        */
    --svg-soft:   #8A867C;   /* Maßketten, Hilfslinien */
    --svg-flae:   #EDEBE4;   /* neutrale Flächen       */
    --svg-blau:   #1B3A5C;   /* das besprochene Objekt */
    --svg-mess:   #7A5E3A;   /* Hervorhebung           */
    --svg-papier: #FFFFFF;   /* Bildfläche             */
}

figure.a-svg {
    margin: 2rem 0;
    padding: 1.1rem 1.2rem .9rem;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--line, #D9D7D0);
    border-radius: 3px;
}
figure.a-svg svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
figure.a-svg figcaption {
    margin-top: .85rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line-soft, #E3E6EA);
    font-size: .76rem;
    line-height: 1.45;
    color: var(--medium-gray);
}

/* Auf sehr schmalen Anzeigen wird die Beschriftung in den Grafiken
   sonst unlesbar klein. Dort darf die Grafik seitlich rollen. */
@media (max-width: 26rem) {
    figure.a-svg {
        overflow-x: auto;
        padding-inline: .7rem;
    }
    figure.a-svg svg {
        min-width: 340px;
    }
}

/* ------------------------------------------------------------
   BEWEGUNG ZURÜCKNEHMEN
   Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt sie hier auch nicht.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   RECHNER AUF DEN WERKZEUGSEITEN
   ------------------------------------------------------------
   Acht Seiten unter /tools/ tragen ein Eingabefeld, das im
   Browser rechnet. Das CMS bringt dafuer nichts mit: Es kennt
   Formulare nur im Eintragsformular des Verzeichnisses, und
   dessen Klassen (.form-*) haengen an einem Layout, das hier
   nicht passt.

   Deshalb ein eigener, knapper Baustein - bewusst mit dem
   Praefix `rechner-`, damit er mit nichts im mitgelieferten
   Thema kollidiert. Alle Farben kommen aus den Variablen
   weiter oben; eigene Hex-Werte stehen hier keine.

   AUFBAU
     .rechner            Rahmen, Passepartout-Flaeche
     .rechner-felder     Raster der Eingaben
     .rechner-feld       ein Feld: Beschriftung, Eingabe, Tipp
     .rechner-ausgabe    Ergebnisflaeche, aria-live
     .rechner-wert       die Zahl, auf die es ankommt
     .rechner-notiz      der Satz daneben
     .rechner-liste      Koordinaten, Termine, Treffer
     .rechner-balken     Messbalken (Aufloesungs-Checker)
     .rechner-palette    Farbfelder (Farbpaletten-Matcher)
     .rechner-buehne     massstaebliche Vorschau
     .rechner-fuss       "rechnet im Browser"
   ------------------------------------------------------------ */

.rechner {
    margin: 2rem 0 2.4rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    background: var(--a-flaeche-2);
    border: 1px solid var(--a-line);
    border-top: 3px solid var(--accent);
    border-radius: var(--border-radius);
}

.rechner-felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.1rem;
}

/* display:flex wuerde das hidden-Attribut aushebeln - die
   Vorgabe des Browsers ist nur display:none ohne Gewicht. */
.rechner-feld[hidden],
.rechner-moebel[hidden] { display: none; }

.rechner-feld {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.rechner-feld > label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--a-ink-2);
}

.rechner-feld input,
.rechner-feld select {
    width: 100%;
    padding: .55rem .65rem;
    font: inherit;
    font-size: .95rem;
    color: var(--a-ink);
    background: var(--white);
    border: 1px solid var(--a-line-2);
    border-radius: 2px;
    /* Schriftgroesse unter 16 px laesst iOS beim Antippen zoomen. */
    min-height: 2.6rem;
}

.rechner-feld input[type="color"] {
    padding: .25rem;
    height: 2.6rem;
    cursor: pointer;
}

.rechner-feld input:focus-visible,
.rechner-feld select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.rechner-tipp {
    font-size: .74rem;
    line-height: 1.4;
    color: var(--a-ink-soft);
}

.rechner-ausgabe {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--a-line);
}

.rechner-wert {
    margin: 0;
    font-size: clamp(1.25rem, 3.6vw, 1.65rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--a-akzent-text);
    font-variant-numeric: tabular-nums;
}

.rechner-notiz {
    margin: .5rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--a-ink-2);
}

.rechner-warnung {
    color: var(--danger-text);
}

/* ---- Aufzaehlungen: Koordinaten, Termine, Treffer ---- */
.rechner-liste {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    border-top: 1px solid var(--a-line);
}

.rechner-liste li {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--a-line);
    font-size: .87rem;
    line-height: 1.45;
}

.rechner-liste b {
    font-weight: 600;
    color: var(--a-ink);
}

.rechner-liste span {
    color: var(--a-ink-soft);
    font-variant-numeric: tabular-nums;
}

.rechner-liste em {
    display: block;
    width: 100%;
    font-style: normal;
    font-size: .8rem;
    color: var(--a-ink-soft);
}

/* ---- Messbalken ---- */
.rechner-balken {
    height: .55rem;
    margin: .8rem 0 .2rem;
    background: var(--a-line);
    border-radius: 999px;
    overflow: hidden;
}

.rechner-balken i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .2s ease;
}

.rechner-balken i.ist-knapp { background: var(--warning); }
.rechner-balken i.ist-wenig { background: var(--danger); }

/* ---- Farbfelder ---- */
.rechner-palette {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .7rem;
    margin: 0 0 1rem;
    padding: 0;
}

.rechner-palette li {
    border: 1px solid var(--a-line-2);
    border-radius: 2px;
    overflow: hidden;
    background: var(--white);
}

.rechner-palette b {
    display: block;
    height: 3.4rem;
}

.rechner-palette span {
    display: block;
    padding: .4rem .5rem .5rem;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--a-ink-soft);
}

.rechner-palette span code {
    display: block;
    font-size: .78rem;
    color: var(--a-ink);
}

/* ---- Massstaebliche Vorschau ----
   Die Buehne ist so breit wie das Bezugsmass. Alles darin wird
   in Prozent gesetzt, damit die Vorschau auf jeder Anzeige
   massstaeblich bleibt. */
.rechner-buehne {
    margin: 0 0 .9rem;
}

.rechner-wand {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    min-height: 4rem;
    padding: .8rem .8rem 0;
    background: var(--white);
    border: 1px solid var(--a-line);
    border-radius: 2px;
}

.rechner-bild {
    background: var(--a-akzent-bg);
    border: 1px solid var(--accent);
}

.rechner-moebel {
    height: .9rem;
    margin: .55rem .8rem 0;
    background: var(--a-line-2);
    border-radius: 1px;
}

.rechner-raster {
    display: grid;
    justify-content: center;
    margin: 0 auto;
}

.rechner-raster i {
    background: var(--a-akzent-bg);
    border: 1px solid var(--accent);
}

.rechner-fuss {
    margin: 1rem 0 0;
    font-size: .74rem;
    color: var(--a-ink-soft);
}

/* Ohne JavaScript bleibt die Eingabe wirkungslos. Dann sagt der
   Kasten das - und verweist auf die Rechenregel im Text. */
.rechner-ohne-js {
    margin: 0 0 1.1rem;
    padding: .7rem .85rem;
    background: var(--white);
    border-left: 3px solid var(--warning);
    font-size: .86rem;
    line-height: 1.5;
}