/* =========================================================================
   Die Farben und Schriften des ganzen Hauses.

   Diese Datei ist die einzige Stelle, an der eine Farbe festgelegt wird -
   Verkaufsseite, Toolkit, Admin und Rechnung lesen von hier. Vorher gab es
   zwei Tokenlisten mit verschiedenen Namen und verschiedenen Werten; wer auf
   der Verkaufsseite kaufte, landete danach sichtbar bei einer anderen Firma.

   Die Kontrastwerte in den Kommentaren sind gemessen, nicht geschaetzt
   (scripts/kontrast-test.mjs rechnet sie bei jedem Testlauf nach). Massstab
   ist WCAG 2.2. Fuer eine Leserschaft, die im Schnitt ueber fuenfzig ist, ist
   das keine Formsache: Ab etwa 45 laesst die Naheinstellung des Auges nach,
   und grauer Kleintext auf hellem Grund ist genau der Fall, der dann zuerst
   unlesbar wird.
   ========================================================================= */

:root{
  /* Text. ink-3 war #7d8b93 und damit bei 3,51 - unter AA. */
  --ink:#1c1f23;      /* 15,4 auf --bg  */
  --ink-2:#4a5a63;    /*  7,2 auf weiss */
  --ink-3:#566065;    /*  6,0 auf --bg  - gilt fuer allen Kleintext */

  /* Marke: ein einziges Petrol. Kein zweites Gruen auf der Verkaufsseite. */
  --brand:#0f3d56;    /* 10,7 auf --bg; weiss darauf 11,5 */
  --brand-2:#26596f;
  --brand-soft:#eaf1f5;

  /* Signale. Zwei Werte je Signal: die Flaeche und der Text darauf.
     Eine Farbe, die als Flaeche gut aussieht, ist als Text meist zu hell -
     das war der Fehler bei --warn (3,98). */
  --ok:#1f7a4d;       --ok-ink:#1a6540;    --ok-soft:#e7f2ec;
  --warn:#c2680f;     --warn-ink:#aa5b0d;  --warn-soft:#fdf4ec;
  --bad:#b3261e;      --bad-ink:#a02219;   --bad-soft:#fbeae8;
  --accent:var(--warn-ink);

  /* Die Schriftfarbe AUF einer farbigen Flaeche. Sie muss mit dem Modus
     kippen: In der dunklen Ansicht ist --brand ein helles Blau, und weisse
     Schrift darauf lag bei 2,16 - unlesbar. Das betraf jeden Knopf. */
  --auf-brand:#ffffff;
  --auf-bad:#ffffff;

  /* Grund. Minimal warm getoent, damit die Flaeche nicht klinisch wirkt. */
  --bg:#f4f7f9; --card:#ffffff; --line:#dde5ea; --line-stark:#c3d1d9;

  /* Der Tastaturfokus. Bewusst NICHT die Markenfarbe: Er soll aus jedem
     Element herausstechen, auch aus einem Knopf, der schon petrol ist.
     WCAG 2.2 verlangt fuer den Fokusring 3:1 gegen das Umfeld. */
  --fokus:#a2560c;

  --radius:10px;
  --shadow:0 1px 3px rgba(15,61,86,.08),0 8px 24px rgba(15,61,86,.06);

  /* Zwei Register, ein System: Serif zum Lesen, Sans zum Bedienen.
     Beide Stapel kommen ohne Nachladen aus - eine Schrift, die erst geladen
     werden muss, ist auf einer langsamen Landverbindung eine Sekunde
     Blindtext. */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-lesen:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-zahl:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8edf0; --ink-2:#a9b8c1; --ink-3:#86969f;   /* 6,0 auf --bg */
    --brand:#7fb8d4; --brand-2:#a5cfe4; --brand-soft:#16242c;
    --ok:#4b9470;   --ok-ink:#4b9470;   --ok-soft:#10211b;
    --warn:#c6711e; --warn-ink:#d99a4e; --warn-soft:#2a2317;
    --bad:#cb6a65;  --bad-ink:#cb6a65;  --bad-soft:#2b1a1a;
    --auf-brand:#08222f; --auf-bad:#1a0908;
    --bg:#0e1519; --card:#161f25; --line:#27343c; --line-stark:#3a4b56;
    --fokus:#e0a45c;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ink:#e8edf0; --ink-2:#a9b8c1; --ink-3:#86969f;
  --brand:#7fb8d4; --brand-2:#a5cfe4; --brand-soft:#16242c;
  --ok:#4b9470;   --ok-ink:#4b9470;   --ok-soft:#10211b;
  --warn:#c6711e; --warn-ink:#d99a4e; --warn-soft:#2a2317;
  --bad:#cb6a65;  --bad-ink:#cb6a65;  --bad-soft:#2b1a1a;
  --auf-brand:#08222f; --auf-bad:#1a0908;
  --bg:#0e1519; --card:#161f25; --line:#27343c; --line-stark:#3a4b56;
  --fokus:#e0a45c;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 17px statt 16: die Leserschaft ist im Schnitt ueber fuenfzig.

   Warum als Prozentwert und warum auf :root statt auf body:

   "rem" rechnet immer gegen die Schriftgroesse der Wurzel, nicht gegen die
   des Koerpers. Stand die 17px nur auf body, ergab jedes rem weiterhin 16px
   als Grundlage - "0,86rem Kleintext" waren dann 13,8px statt der gemeinten
   14,6. Die Regel im Gestaltungshandbuch war damit nirgends erfuellt, ohne
   dass es jemandem auffiel.

   Prozent statt px, weil ein fester Pixelwert auf der Wurzel die im Browser
   eingestellte Schriftgroesse ueberschreibt. Wer sie auf 20px gestellt hat,
   hat das aus einem Grund getan - er bekommt jetzt 21,25px statt zwangsweise
   17. Genau die Leserschaft, um die es hier geht, stellt so etwas ein. */
:root{font-size:106.25%}

body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:1rem; line-height:1.6; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{color:var(--brand); line-height:1.25; margin:0 0 .5em}
h1{font-size:1.6rem; letter-spacing:-.01em}
h2{font-size:1.2rem}
h3{font-size:1.02rem}
p{margin:0 0 .8em}
a{color:var(--brand)}
/* Nie unter 0,86rem (≈14,6px). Darunter faengt an, was diese Leserschaft
   als Erstes nicht mehr liest - und Kleintext traegt hier oft die Bedingung. */
small,.small{font-size:.86rem; line-height:1.5; color:var(--ink-3)}

body.centered{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:20px}
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 26px; width:100%; max-width:460px; border:1px solid var(--line);
}
.card.wide{max-width:1180px}

label{display:block; font-size:.86rem; font-weight:600; color:var(--ink-2); margin:12px 0 4px}
input,select,textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:8px;
  padding:11px 12px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,61,86,.12)}

/* Sichtbarer Tastaturfokus, ueberall und deutlich.
   Wer eine Maus schlecht fuehrt - und das nimmt mit dem Alter zu -, arbeitet
   mit der Tabulatortaste. Ein unsichtbarer Fokus macht das unmoeglich.
   :focus-visible statt :focus, damit der Ring nicht bei jedem Mausklick
   aufblitzt. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--fokus);
  outline-offset:2px;
  border-radius:4px;
}
textarea{min-height:80px; resize:vertical}
input[type=checkbox]{width:auto; margin:0}

.btn{
  display:inline-block; background:var(--brand); color:var(--auf-brand); border:none; cursor:pointer;
  font:inherit; font-size:.96rem; font-weight:600; padding:12px 20px; border-radius:8px;
  text-decoration:none; text-align:center; transition:opacity .12s;
}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5; cursor:default}
.btn.block{display:block; width:100%}
.btn.ghost{background:transparent; color:var(--brand); border:1.5px solid var(--line)}
.btn.small{padding:10px 14px; font-size:.86rem}
.btn.danger{background:var(--bad); color:var(--auf-bad)}

.msg{padding:11px 13px; border-radius:8px; font-size:.9rem; margin:14px 0}
.msg.ok{background:rgba(31,122,77,.1); color:var(--ok)}
.msg.err{background:rgba(179,38,30,.1); color:var(--bad)}
.msg.info{background:var(--brand-soft); color:var(--brand-2)}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; padding:9px 10px; background:var(--brand-soft); color:var(--brand);
   font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

.pill{display:inline-block; font-size:.78rem; font-weight:700; padding:2px 8px; border-radius:20px;
      background:var(--brand-soft); color:var(--brand-2); letter-spacing:.02em}
.pill.ok{background:rgba(31,122,77,.14); color:var(--ok)}
.pill.bad{background:rgba(179,38,30,.12); color:var(--bad)}
.pill.warn{background:rgba(194,104,15,.14); color:var(--warn)}

ul.devices{list-style:none; padding:0; margin:12px 0}
ul.devices li{padding:9px 12px; background:var(--brand-soft); border-radius:8px; margin-bottom:6px; font-size:.9rem}

.brandmark{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex:1; min-width:150px}