/* Erechio – Marke für das West-Labs-Design-Kit (Stil: stil-technik). Kontrastwerte in DESIGN.md. */
:root {
  --marke: #12355b;          /* Tintenblau: Weiß darauf 12,46:1 */
  --marke-dunkel: #0b2440;   /* Weiß darauf 15,66:1 */
  --marke-hell: #e7eef6;     /* --marke darauf 10,65:1 */
  --akzent: #1e8e5a;         /* Prüfgrün, nur Fokusrahmen und Flächen (4,14:1, kein Text) */
  --flaeche: #f4f7fa;        /* --text-leise darauf 7,05:1 */
  --info: #4f7cac;           /* nur Rahmen */
  --radius: 12px;
}

/* Seitenspezifisch (Abweichung, begründet in DESIGN.md):
   1. Unterseiten (Ratgeber, Fehlercodes, Rechtstexte) haben einen einfachen Textrahmen. */
.inhalt { padding-block: 2.5rem var(--abstand); max-width: calc(var(--lesebreite) + 4rem); overflow-wrap: break-word; }
.inhalt h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); margin-top: .4em; }
.inhalt h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: 2.2em; }
.inhalt h3 { margin-top: 1.6em; }
.inhalt .hinweis { margin-block: 1.5rem; }
.inhalt pre { background: var(--flaeche); padding: .8rem 1rem; border-radius: var(--radius-klein); overflow-x: auto; font-size: .85rem; }
.inhalt code, .pfad { overflow-wrap: anywhere; }
.inhalt .tabelle-scroll { margin-block: 1rem; }

/* 2. Ergebnisanzeige des Prüfers (/pruefen/, erzeugt von pruefen/app.js) */
.drop { border: 2px dashed var(--info); border-radius: var(--radius); padding: 2.5rem 1.25rem; text-align: center; background: var(--flaeche); cursor: pointer; max-width: none; }
.drop.over { background: var(--marke-hell); }
.drop input { display: none; }
.status { margin: 1rem 0; font-weight: 600; }
.verdict { border-radius: var(--radius-klein); padding: .9rem 1.1rem; margin: 1.1rem 0; font-weight: 650; }
.verdict.ok { background: #e7f6ee; color: var(--erfolg); border: 1px solid #b9e3cb; }
.verdict.err { background: #fdecea; color: var(--fehler); border: 1px solid #f5c2bd; }
.verdict.warn { background: #fff6e5; color: var(--warnung); border: 1px solid #f3d9a4; }
.msg { border: 1px solid var(--linie); border-left: 5px solid var(--fehler); border-radius: var(--radius-klein); padding: .8rem 1rem; margin: .75rem 0; background: #fff; max-width: none; }
.msg.warnung { border-left-color: var(--warnung); }
.msg.hinweis { border-left-color: var(--info); background: #fff; padding: .8rem 1rem; border-radius: var(--radius-klein); }
.msg .code { font-family: var(--schrift-mono); font-size: .85rem; background: var(--flaeche); padding: 1px 6px; border-radius: 4px; margin-right: 8px; }
.msg .lvl { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.msg h4 { margin: .3em 0; font-size: 1.05rem; }
.msg p { margin: .35em 0; }
.msg details { margin-top: 6px; font-size: .92rem; }
.path { font-family: var(--schrift-mono); font-size: .85rem; word-break: break-all; }

/* 3. Startseite und Hinweiskästen: Abstände im API-Abschnitt, Ratgeber-Karten als Links */
.api-link { margin-top: 1.25rem; }
.preise { margin-top: 2.5rem; }
.pk-knoepfe { margin-top: 1rem; }
a.karte { text-decoration: none; color: var(--text); }
a.karte h3 { color: var(--marke); }
a.karte:hover { border-color: var(--marke); }
.hinweis p:last-child, .hinweis ul:last-child { margin-bottom: 0; }