/* CI Joachim Tecklenburg – Tokens
   Eine Quelle für Leitfaden, Berichte, Rechnungen und später die Website.
   Pfade zu den Schriften sind relativ zu dieser Datei. */

@font-face{font-family:"Unbounded";src:url("fonts/web/Unbounded-VF.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/web/HankenGrotesk-VF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/web/HankenGrotesk-Italic-VF.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  /* ---------- Farbe: Signal / Tief / Hauch ---------- */
  --ci-safran:#FFB920;  --ci-safran-t:#8E6200;  --ci-safran-h:#FDEED7;
  --ci-koralle:#FF4D30; --ci-koralle-t:#BF3C2D; --ci-koralle-h:#FFEBE7;
  --ci-kobalt:#1651F5;  --ci-kobalt-t:#1651F5;  --ci-kobalt-h:#E8F1FF;
  --ci-petrol:#00B7A8;  --ci-petrol-t:#007974;  --ci-petrol-h:#D7F8F5;
  --ci-fuchsia:#E41FA8; --ci-fuchsia-t:#AE4090; --ci-fuchsia-h:#FFE9F7;
  --ci-limette:#BCF600;

  /* Neutrale */
  --ci-tinte:#281C18;   /* Text, statt Schwarz */
  --ci-grau:#6E625B;    /* Nebentext, 5,9 : 1 auf Weiß */
  --ci-linie:#E7DFD3;   /* feine Linien */
  --ci-papier:#FDFAF4;  /* Flächen am Bildschirm */
  --ci-weiss:#FFFFFF;   /* Druck */

  /* Rollen */
  --ci-fuehrung:var(--ci-safran);     /* die eine große Fläche pro Seite */
  --ci-akzent:var(--ci-koralle);      /* das Wichtigste, sparsam */
  --ci-akzent-text:var(--ci-koralle-t);
  --ci-link:var(--ci-kobalt-t);
  --ci-ok:var(--ci-petrol-t);
  --ci-warnung:var(--ci-safran-t);
  --ci-fehler:var(--ci-koralle-t);
  /* Reihenfolge für Diagramme: Safran, Koralle, Kobalt, Petrol, Fuchsia */

  /* ---------- Schrift ---------- */
  --ci-kopf:"Unbounded","Arial Black",sans-serif;
  --ci-text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --ci-kopf-w:700;      /* Unbounded nur Bold, nur Versalien */
  --ci-duenn:200;       /* Hanken ExtraLight, erst ab 20 px bzw. 13 pt */
  --ci-normal:400;
  --ci-fett:800;        /* Hanken ExtraBold */

  /* Bildschirm, Basis 17 px */
  --ci-px-display:64px; --ci-px-h1:44px; --ci-px-h2:28px; --ci-px-h3:20px;
  --ci-px-lede:22px; --ci-px-text:17px; --ci-px-klein:14px; --ci-px-label:12px;
  /* Druck A4, Basis 10 pt */
  --ci-pt-h1:26pt; --ci-pt-h2:16pt; --ci-pt-h3:11.5pt;
  --ci-pt-lede:13pt; --ci-pt-text:10pt; --ci-pt-klein:8.5pt; --ci-pt-label:7.5pt;

  --ci-zeile-kopf:1.08; --ci-zeile-text:1.55;
  --ci-sperrung-label:.12em;

  /* ---------- Raum und Form ---------- */
  --ci-r:3px;           /* Flächen, Kästen, Bilder */
  --ci-r-tag:2px;       /* Etiketten */
  --ci-r-balken:999px;  /* nur die Balken der Wortmarke */
  --ci-sp-1:4px; --ci-sp-2:8px; --ci-sp-3:12px; --ci-sp-4:16px; --ci-sp-5:24px;
  --ci-sp-6:32px; --ci-sp-7:48px; --ci-sp-8:64px; --ci-sp-9:96px;
  --ci-strich:2px;      /* Tabellenkopf, Trennung von Abschnitten */
  --ci-haar:1px;        /* Tabellenzeilen */
  --ci-messe:62ch;      /* Zeilenlänge Fließtext */
}

/* ---------- Wortmarke ----------
   <div class="ci-wm"><span class="ci-wm-name">Joachim Tecklenburg</span>
   <span class="ci-wm-balken"><i></i><i></i><i></i></span>
   <span class="ci-wm-zusatz">…</span></div>
   Alle Maße hängen an der Schriftgröße des Namens. */
.ci-wm{display:inline-flex;flex-direction:column;align-items:flex-start;font-size:var(--ci-wm-size,22px);color:var(--ci-tinte)}
.ci-wm-name{font-family:var(--ci-kopf);font-weight:var(--ci-kopf-w);text-transform:uppercase;line-height:1.02;letter-spacing:-.005em}
.ci-wm-balken{display:flex;gap:.27em;margin-top:.5em}
.ci-wm-balken i{display:block;height:.3em;border-radius:var(--ci-r-balken)}
.ci-wm-balken i:nth-child(1){width:2.5em;background:var(--ci-wm-b1,var(--ci-safran))}
.ci-wm-balken i:nth-child(2){width:.9em;background:var(--ci-wm-b2,var(--ci-koralle))}
.ci-wm-balken i:nth-child(3){width:.45em;background:var(--ci-wm-b3,var(--ci-kobalt))}
.ci-wm-zusatz{font-family:var(--ci-text);font-weight:var(--ci-normal);font-size:.5em;letter-spacing:.14em;text-transform:uppercase;margin-top:.9em}
/* Varianten */
.ci-wm.auf-safran{--ci-wm-b1:var(--ci-tinte)}
.ci-wm.auf-tinte{color:var(--ci-papier);--ci-wm-b3:var(--ci-papier)}
.ci-wm.einfarbig{--ci-wm-b1:currentColor;--ci-wm-b2:currentColor;--ci-wm-b3:currentColor}