kalina-ci/css/kalina-ci.css

/* KALINA CI — Satzvorlage für PDF (weasyprint) und eigenständige Webseiten
   Farben: Ink #0B0F14 · Bone #F5F5EF · Kalina-Rot #C1121F · Steel #3A4250 · Muted #8A94A2
   Schrift:  DejaVu Sans (in open-terminal installiert; identisch auf Schirm und Druck)
   Regeln:  Marke = SVG (schriftfrei, überall einsetzbar).
            Wortmarke = TEXT in der Seitenschrift, das i in Kalina-Rot.
            Die Wortmarken-SVG nie in fremder Schrift rendern — sie setzt ihre
            Buchstaben absolut (x = 10/80/150/212/242/319).           */

:root {
  --ink: #0b0f14;
  --bone: #f5f5ef;
  --rot: #c1121f;
  --rot-dunkel: #a50f1a;
  --steel: #3a4250;
  --muted: #8a94a2;
  --sans: "DejaVu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DejaVu Sans Mono", ui-monospace, monospace;
}

/* ---------- Seite (weasyprint / Druck) ---------- */
@page {
  size: A4;
  margin: 26mm 18mm 20mm 18mm;
  background: #f5f5ef;
  @bottom-left {
    content: "KALINA";
    font: 700 7pt var(--sans);
    letter-spacing: 0.22em;
    color: #8a94a2;
  }
  @bottom-right {
    content: counter(page) " / " counter(pages);
    font: 400 7.5pt var(--sans);
    color: #8a94a2;
  }
}
@page :first { margin-top: 16mm; }

/* ---------- Grundlage ---------- */
* { box-sizing: border-box; }

html { background: var(--bone); }

body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--ink);
  font: 400 10.5pt/1.55 var(--sans);
  hyphens: auto;
}

/* ---------- Kopfleiste (klebend am Schirm, Band im Druck) ---------- */
.kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--steel);
  background: var(--bone);
}
.kopf img, .kopf svg { display: block; height: 34px; width: 34px; }

.wortmarke {
  font: 900 20pt/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: none;
}
.wortmarke i {
  font-style: normal;
  color: var(--rot);
}
.kopf .wortmarke { margin-left: 2px; }

/* ---------- Titelzone ---------- */
.titel {
  font: 900 26pt/1.15 var(--sans);
  letter-spacing: -0.01em;
  margin: 18px 0 6px;
}
.untertitel {
  font: 400 12pt/1.4 var(--sans);
  color: var(--steel);
  margin: 0 0 14px;
}
.lead {
  font-size: 11.5pt;
  color: var(--ink);
  border-left: 3px solid var(--rot);
  padding-left: 12px;
  margin: 14px 0 20px;
}

/* ---------- Abschnitte ---------- */
h2 {
  font: 700 14pt/1.3 var(--sans);
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--steel);
}
h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background: var(--rot);
  margin-top: -2px;
}
h3 { font: 700 11pt/1.3 var(--sans); margin: 14px 0 4px; }

p { margin: 0 0 8px; }
ul, ol { margin: 0 0 10px; padding-left: 18px; }
li { margin: 0 0 3px; }

a { color: var(--rot-dunkel); text-decoration: none; }
code, kbd { font: 400 9.5pt var(--mono); background: #e7e8e2; padding: 0 3px; }

/* ---------- Tabellen ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 9.5pt;
}
thead th {
  background: var(--ink);
  color: var(--bone);
  text-align: left;
  font-weight: 700;
  padding: 6px 8px;
}
td, tbody th {
  border-bottom: 1px solid var(--steel);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
tbody tr:nth-child(even) td { background: #eceded; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Marken-Plakette ---------- */
.plakette {
  border: 1px solid var(--steel);
  border-top: 3px solid var(--rot);
  padding: 14px 16px;
  margin: 16px 0;
  background: #ffffff;
}
.plakette img, .plakette svg { height: 116px; width: 116px; display: block; margin-bottom: 8px; }
.plakette .plakette-titel { font: 700 11pt var(--sans); }
.plakette p { color: var(--steel); font-size: 9.5pt; }

/* ---------- Hinweis ---------- */
.hinweis {
  border-left: 3px solid var(--steel);
  color: var(--muted);
  font-size: 9.5pt;
  padding: 4px 0 4px 12px;
  margin: 12px 0;
}

/* ---------- Fußmarke (Band am Dokumentende) ---------- */
.fuss {
  margin-top: 26px;
  padding-top: 10px;
  border-top: 1px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 8.5pt;
}
.fuss img, .fuss svg { height: 26px; width: 26px; }

/* ---------- Impressum im Fußband (Pflicht am Dokumentende, Autor Kalina) ---------- */
.fuss.impressum { align-items: center; }
.fuss-mitte { flex: 1; line-height: 1.35; }
.fuss-titel { font-weight: 600; color: var(--steel); }
.fuss-titel .i { color: var(--rot); }
.fuss-klein { font-size: 7.6pt; }

/* ---------- Umbruchkontrolle (nur Druck) ---------- */
@media print {
  .fuss { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .abschnitt, .plakette, .hinweis { break-inside: avoid; }
  table { break-inside: auto; }
  thead { display: table-header-group; }
  a { color: var(--ink); }
}

/* ---------- Nur am Schirm: klebende Kopfleiste ---------- */
@media screen {
  .kopf { position: sticky; top: 0; z-index: 10; }
  body { padding: 0 24px 40px; max-width: 62rem; margin: 0 auto; }
}