/* Secuvise-Design: Grundwerte. Eine Akzentfarbe, Tiefe ueber dezente Schatten,
   ruhige native Anmutung. Nur helles Thema (Entscheidung, siehe spezifikation.md).
   Alles, was ein Projekt anpassen darf, steht hier -- kit.css greift nur auf
   diese Variablen zu. */

:root{
  /* Flaechen und Text */
  --papier:#EEF0F2;        /* Seitenhintergrund */
  --karte:#FBFCFD;         /* Karten, Dialoge, Kopfleiste */
  --tinte:#15181D;         /* Text */
  --gedaempft:#5C6470;     /* Nebentext, Beschriftungen (AA auf Papier und Karte) */
  --linie:#E2E5E9;         /* Rahmen, Trennlinien */

  /* Akzent: Stahlblau. Primaerknopf, aktive Zustaende, Verweise */
  --stahl:#39536F; --stahl-text:#FFFFFF; --stahl-hell:#EAEEF3;
  /* Achtung: Loeschen, Fehler, Fehlendes, Offenes */
  --rot:#E8482B; --rot-text:#C63A1F; --rot-hell:#FCEAE6;
  /* Erledigt, gedeckt */
  --gruen:#2E7D53; --gruen-text:#256B46; --gruen-hell:#E4F0EA;

  /* Radien, konzentrisch von aussen nach innen:
     Karte, Dialog, Panel 18 > Kasten in der Karte 14 > Knopf, Feld, Reiter 10
     > kleine Flaechen, Code, Zeilen im Panel 6. Etiketten und Chips sind
     Pillen (999px), Kreisel sind rund (50%). */
  --r-klein:6px; --r-knopf:10px; --r-kasten:14px; --r-karte:18px;

  /* Schatten: Karte liegt auf dem Papier, Schwebendes ueber der Seite */
  --schatten-karte:0 1px 2px rgba(21,24,29,.04), 0 4px 16px rgba(21,24,29,.06);
  --schatten-schwebend:0 8px 30px rgba(21,24,29,.12);

  /* Schrift: die des Systems, keine Webfonts */
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Fokusring: ein Ring fuer alles, das den Fokus bekommen kann */
  --fokus:0 0 0 2px rgba(57,83,111,.5);

  /* Seitenbreite und Hoehe der Kopfleiste (Panels und Sprungziele rechnen damit) */
  --seitenbreite:1360px;
  --kopfhoehe:56px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--tinte);font-family:var(--schrift);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
/* Fokusring-Netz: :where() haelt die Spezifitaet bei null, damit ein Baustein
   den Ring ohne !important ersetzen kann (z. B. der Editor-Text). */
:where(a[href],button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--fokus)}
[hidden]{display:none !important}