/* ══════════════════════════════════════════════════════════════
   Vaschido Studio — Gestaltungssystem

   Ein Fachwerkzeug für Elektrotechnik. Die Oberfläche soll wirken
   wie ein Messgerät: genau, ruhig, dicht. Sie soll nicht auffallen,
   sondern lesbar machen, was darin steht.

   Drei Regeln, die alles andere bestimmen:

     Eine Kante braucht einen Grund.
       Gruppiert wird über Weißraum, Ausrichtung und Typografie.
       Ein Rahmen kommt erst, wenn etwas wirklich abgetrennt gehört.

     Farbe bedeutet genau eine Sache.
       --signal heisst „hier fehlt etwas". Sonst ist alles neutral.
       Ein gedeckter Fall ist der Normalfall und braucht keine Farbe.

     Zahlen sind das Material.
       Tabellarische Ziffern überall, rechtsbündig, ausgerichtet.
       Vergleichen über Zeilen ist die eigentliche Arbeit.

   Raster:  4 · 8 · 12 · 20 · 32 · 56    — sonst nichts
   Grade:   32 · 20 · 15 · 13 · 11       — sonst nichts
   Gewicht: 400 · 500 · 650              — sonst nichts
   Radius:  4px                          — überall gleich
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Flächen ── */
  --bg:#fbfbfc;            /* Seitengrund, Papier mit kaltem Stich */
  --surface:#ffffff;       /* Tabellen, Panele */
  --bg-alt:#f5f6f8;        /* Zeile beim Überfahren, ruhige Blöcke */

  /* ── Tinte ── */
  --ink:#14171c;           /* Text, Zahlen, aktive Navigation */
  --ink-mid:#5a616b;       /* Sekundärtext */
  --ink-soft:#878e98;      /* Metadaten, Spaltenköpfe */

  /* ── Linien ── */
  --line:#e4e6ea;          /* Trenner */
  --line-strong:#d2d6dc;   /* Rahmen, Kopfzeilenlinie */
  --line-soft:#edeff2;     /* Rasterlinien innerhalb der Tabelle */

  /* Jede zweite Zeile getönt. In einer dichten Tabelle mit
     vierundzwanzig Punkt Zeilenhöhe verrutscht das Auge sonst
     zwischen den Spalten — der Wechsel führt es. */
  --zeile-alt:#f8f9fb;

  /* Schaltflaechen. Erst waren sie flach und grau und sahen aus wie
     abgeschaltete Felder. Dann bekamen sie Verlauf und helle
     Oberkante - und sahen aus wie Windows XP. Beides falsch.

     Was bleibt: keine Verlaeufe, kein Relief. Die Rangfolge macht
     die Flaeche, nicht die Plastik. Die Haupthandlung ist gefuellt,
     alles andere hat einen Rand und sonst nichts. */
  --knopf-rand:#c9ced5;
  --knopf-rand-hover:#a2a9b2;
  --knopf-flaeche-hover:#f2f3f5;
  --knopf-gedrueckt:#e8eaee;
  --rand-knopf-stark:#9aa0a8;

  /* ── Bedeutung ──
     Genau ein Signalton: „hier fehlt etwas". Kein Grün — ein
     gedeckter Fall ist der Normalfall und wird nicht ausgezeichnet.
     --stopp ausschliesslich für zerstörende Bestätigungen. */
  --signal:#a6521c;
  --stopp:#8c2f2f;
  --warn:#a6521c;          /* Altname, zeigt auf denselben Ton */
  --gut:#3d6b4f;           /* nur im Editor, sehr sparsam */

  --r:4px;

  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
            Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 13px/1.5 var(--schrift);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font:inherit; cursor:pointer; color:inherit }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; border-radius:2px }

/* Jede Zahl in dieser Anwendung steht tabellarisch. Ohne das
   springen Ziffern zwischen den Zeilen und man kann Spalten nicht
   vergleichen — das ist hier die Hauptarbeit. */
.zahl, td.zahl, .zahlwert,
[data-zahl]{ font-variant-numeric:tabular-nums }

/* ───────── Typografie ─────────
   Fünf Grade. Rang entsteht über Gewicht und Farbe, nicht über
   Größenunterschiede, die niemand sieht. */
.t-titel   { font-size:32px; font-weight:650; line-height:1.15; letter-spacing:-.02em }
.t-abschnitt{ font-size:20px; font-weight:650; line-height:1.25; letter-spacing:-.01em }
.t-kopf    { font-size:15px; font-weight:500; line-height:1.4 }
.t-text    { font-size:13px; font-weight:400; line-height:1.5 }
.t-meta    { font-size:11px; font-weight:400; line-height:1.45;
             color:var(--ink-soft); margin:0 }   /* p bringt sonst 11px mit */
.t-mono    { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums }

h1,h2,h3,h4,h5{ margin:0; font-weight:650 }
/* Hervorhebung ist 500, nicht die 700 des Browsers. Drei Gewichte,
   sonst keine — sonst schleicht sich über jedes blanke <b> ein
   viertes ein. */
b,strong{ font-weight:500 }

/* ───────── Kopfleiste ─────────
   Eine Linie, kein Schatten, kein Weichzeichner. Sie trägt die
   Marke und höchstens zwei Bedienelemente. */
/* Die Kopfleiste bleibt oben stehen, wenn die Liste laenger wird
   als das Fenster. Die linke Leiste klebt schon lange darunter
   (top:48px) — ohne eine klebende Kopfleiste stand sie beim Rollen
   unter einem weissen Nichts. */
.kopf{
  flex:none; height:48px;
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.kopf-in{
  display:flex; align-items:center; gap:20px;
  height:48px; padding:0 20px;
}
.marke{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:650; letter-spacing:-.01em;
  text-decoration:none; flex:none; color:var(--ink);
}
/* Das Zeichen war ein Ausschnitt aus dem grossen Logo: die 1080er
   Datei auf 41 Pixel gequetscht und ein 16x15-Fenster darüber
   geschoben. Der Roboter kam unten angeschnitten und matschig
   heraus. Jetzt die Datei, die genau dafür da ist. */
.marke .zeichen{
  width:17px; height:17px;
  background:url("vaschido-zeichen.png") no-repeat center;
  background-size:contain;
}
.marke small{
  color:var(--ink-soft); font-weight:400; font-size:11px; margin-left:4px;
}
.kopf .rechts{ margin-left:auto; display:flex; align-items:center; gap:12px }
.kopf .wer{ font-size:11px; color:var(--ink-soft) }

/* ───────── Knöpfe ─────────
   Radius 4, keine Pillen. Pillen bekämen eine Bedeutung, die sie
   hier nicht haben. */
/* Schaltflaechen: eckig, dicht, ohne Zierat.

   Zwei Raenge, die man auf einen Blick unterscheidet. Die
   Haupthandlung ist gefuellt, weil eine gefuellte Flaeche in einer
   dichten Oberflaeche das Einzige ist, was sich wirklich abhebt.
   Alles andere traegt einen Rand und weiter nichts.

   Kein Verlauf, kein Innenschatten, kein Relief. Ein Knopf, der
   plastisch tut, sieht nach zwanzig Jahre alter Software aus. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:28px; padding:0 14px;
  background:var(--ink); color:#fff;
  border:1px solid var(--ink);
  border-radius:4px;
  font-size:13px; font-weight:500; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
}
.knopf:hover{ background:#2b3038; border-color:#2b3038 }
.knopf:active{ background:#0c0e11; border-color:#0c0e11 }
.knopf:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* Alles Zweitrangige: nur ein Rand. */
.knopf.stumm{
  background:var(--surface); color:var(--ink);
  border-color:var(--knopf-rand);
  font-weight:400;
}
.knopf.stumm:hover{
  background:var(--knopf-flaeche-hover);
  border-color:var(--knopf-rand-hover);
}
.knopf.stumm:active{ background:var(--knopf-gedrueckt) }

.knopf[disabled]{
  background:var(--bg-alt); border-color:var(--line-strong);
  color:var(--ink-soft); cursor:default;
}
.knopf[disabled]:hover{ background:var(--bg-alt); border-color:var(--line-strong) }

/* In einer Zeile oder Werkzeugleiste: kleiner, und dort ist auch
   die Haupthandlung nur umrandet - eine schwarze Flaeche in einer
   Tabellenzeile schreit. */
.knopf.klein{
  height:22px; padding:0 9px; font-size:11px; font-weight:400;
  background:var(--surface); color:var(--ink);
  border-color:var(--knopf-rand);
}
.knopf.klein:hover{
  background:var(--knopf-flaeche-hover); border-color:var(--knopf-rand-hover);
}
.knopf.klein:active{ background:var(--knopf-gedrueckt) }

.knopf.gefahr{
  background:var(--surface); color:var(--stopp); border-color:var(--knopf-rand);
}
.knopf.gefahr:hover{ background:#fbeeee; border-color:var(--stopp); color:var(--stopp) }
.knopfzeile{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:20px }

/* Textknopf — für Zeilenbefehle, die kein Gewicht brauchen */
.tunknopf{
  background:none; border:0; padding:0;
  font-size:13px; color:var(--ink-mid); text-decoration:none;
}
.tunknopf:hover{ color:var(--ink); text-decoration:underline }
.tunknopf.gefahr:hover{ color:var(--stopp) }

/* ───────── Eingaben ───────── */
input[type=text],input[type=email],input[type=password],
input[type=number],textarea,select{
  width:100%; font:400 13px/1.4 var(--schrift); color:var(--ink);
  height:26px; padding:0 6px;
  border:1px solid var(--line-strong); border-radius:3px;
  background:var(--surface);
}
textarea{ height:auto; min-height:72px; padding:8px; line-height:1.5; resize:vertical }
select{ padding-right:20px }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--ink) }
input::placeholder{ color:var(--ink-soft) }

label.feld{ display:block; margin-bottom:12px }
label.feld .titel{
  display:block; font-size:11px; font-weight:500; color:var(--ink-mid);
  margin-bottom:4px;
}
label.feld .dazu{
  display:block; font-size:11px; color:var(--ink-soft); margin-top:4px;
}

/* Filterfeld — rahmenlos, erscheint erst wenn es gebraucht wird */
.filter{
  height:26px; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:0 0 0 4px; width:200px; font-size:13px;
  background:transparent;
}
.filter:focus{ border-color:var(--ink) }

/* ───────── Meldungen ─────────
   Kein Kasten mit Hintergrund. Eine Linie links, mehr braucht es
   nicht, damit man sie findet. */
.meldung{
  padding:8px 0 8px 12px; border-left:2px solid var(--line-strong);
  font-size:13px; color:var(--ink-mid); margin-bottom:20px;
}
.meldung.fehler{ border-left-color:var(--signal); color:var(--ink) }
.meldung.gut{ border-left-color:var(--ink-soft) }
.meldung[hidden]{ display:none }

/* ───────── Tabellen ─────────
   Ein Raster, kein Textblock.

   Bis hierher waren Tabellen nach Weblehre gebaut: viel Luft,
   Haarlinie nur zwischen den Zeilen, kein abgesetzter Kopf. Das
   liest sich ruhig, kostet aber Platz und lässt Spalten
   auseinanderfallen.

   Wer den ganzen Tag mit Warenwirtschaft arbeitet, erwartet etwas
   anderes: Rahmen aussen, Linien innen, ein abgesetzter Kopf,
   vierundzwanzig Punkt hohe Zeilen und ein Farbwechsel, der das Auge
   über die Breite trägt. Genau das steht hier. */
.tafel{
  width:100%; border-collapse:collapse; font-size:13px;
  border:1px solid var(--line-strong);
  background:var(--surface);
}

.tafel thead th{
  height:24px; padding:0 8px;
  background:var(--bg-alt);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line-strong);
  font-size:11px; font-weight:500; color:var(--ink-mid);
  text-align:left; white-space:nowrap; vertical-align:middle;
}
.tafel tbody td{
  height:24px; padding:0 8px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* Die letzte Spalte braucht rechts keine Linie — dort ist der
   Rahmen. */
.tafel th:last-child,.tafel td:last-child{ border-right:0 }
.tafel tbody tr:last-child td{ border-bottom:0 }

.tafel tbody tr:nth-child(even) td{ background:var(--zeile-alt) }
/* Nach der Tönung, sonst gewinnt sie */
.tafel tbody tr:hover td{ background:#eceef2 }
.tafel tr.ruhig:hover td{ background:inherit }
.tafel tr.ruhig:nth-child(even):hover td{ background:var(--zeile-alt) }

.tafel .r{ text-align:right; font-variant-numeric:tabular-nums }
.tafel thead th.r{ text-align:right }
.tafel .stark{ font-weight:500 }
.tafel .leise{ color:var(--ink-soft); font-size:11px }
.tafel .mono{ font-family:var(--mono); font-size:12px }
.tafel .nichts{ color:var(--ink-soft) }

/* Bedienelemente in einer Zeile dürfen die Zeile nicht aufblähen.
   Ein Knopf in Normalgröße ist sechsundzwanzig Punkt hoch und
   sprengt das Raster um drei — also hier kleiner. */
.tafel-huelle{ overflow-x:auto }

.tafel td .knopf,.tafel td select{
  height:20px; padding:0 8px; font-size:11px; line-height:18px;
}

/* ───────── Entscheidungstabelle ─────────
   Erbt das Raster. Eigen sind nur die Rubrikzeile, die stärkere
   Trennung zwischen Bedingung und Folge, und dass eine leere Zelle
   ausdrücklich „beliebig" heisst statt leer zu bleiben. */
.tafel.dmn thead tr.rubrik th{
  height:22px; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:500; color:var(--ink-soft);
  text-align:center; background:var(--bg-alt);
}
.tafel.dmn thead tr.rubrik th.dann{ text-align:center }
.tafel.dmn th.nr,.tafel.dmn td.nr{
  width:36px; text-align:right;
  color:var(--ink-soft); font-size:11px;
  font-variant-numeric:tabular-nums;
}
.tafel.dmn td{ font-family:var(--mono); font-size:12px }
.tafel.dmn td.nr{ font-family:var(--schrift) }
.tafel.dmn .beliebig{ color:var(--ink-soft) }
.tafel.dmn .folge{ font-weight:500 }
.tafel.dmn .einheit{ color:var(--ink-soft); font-weight:400 }
/* Wo die Bedingungen aufhören und die Folgen anfangen */
.tafel.dmn .ersteDann{ border-left:1px solid var(--line-strong) }
.tafel-fuss{
  display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;
  margin-top:8px; font-size:11px; color:var(--ink-soft);
}

/* ───────── Status ─────────
   Eine Sprache: nichts · Zahl in Tinte · Zahl in Signalfarbe.
   Keine Hintergründe, keine Pillen, keine Symbole. */
.rolle{ font-size:11px; color:var(--ink-soft); white-space:nowrap }
.rolle.inhaber{ color:var(--ink-mid) }
.wert-offen{ color:var(--signal); font-weight:500 }
.wert-still{ color:var(--ink-soft) }

/* ───────── Abdeckung ─────────
   64px Spur, 2px hoch, eckig. Der Balken ist keine Verzierung —
   er macht Zeilen vergleichbar, was Zahlen allein nur langsam
   leisten. Das Defizit trägt die Signalfarbe, nicht der Rest. */
.spur{
  display:inline-block; width:56px; height:2px;
  background:var(--line-strong); vertical-align:middle;
  position:relative; overflow:hidden;
}
.spur i{ display:block; height:2px; background:var(--ink) }
.spur.fehlt::after{
  content:''; position:absolute; right:0; top:0; bottom:0;
  width:var(--fehlt, 0%); background:var(--signal);
}

/* ───────── Anmeldeseiten ─────────
   Eine schmale Spalte, mittig. Wer sich anmeldet, hat eine Aufgabe. */
.tor{
  min-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px 20px 56px;
}
.tor-karte{ width:100%; max-width:320px }
.tor .marke{ justify-content:center; margin-bottom:32px }
.tor h1{ font-size:20px; font-weight:650; margin:0 0 4px; letter-spacing:-.01em }
.tor .dazu{ font-size:13px; color:var(--ink-mid); margin:0 0 32px; line-height:1.5 }
.tor .knopf{ width:100% }
.tor .knopfzeile{ margin-top:20px }
.tor .fuss{ margin-top:20px; font-size:11px; color:var(--ink-soft); text-align:center }
/* Der Hinweis, nicht die Bestätigung: er steht da, wo man ihn vor
   dem Absenden liest, und verlangt nichts. */
.rechtshinweis{
  margin:16px 0 0; font-size:11px; line-height:1.5; color:var(--ink-soft);
}
.rechtshinweis a{ color:var(--ink-mid) }
.tor .fuss a{ color:var(--ink-mid) }

/* ───────── Nur-Lesen ─────────
   Sichtbar gesperrt, damit niemand gegen eine Wand tippt.
   Verbindlich ist trotzdem allein die Prüfung in studio.php. */
body.nurlesen .sperrbar input,
body.nurlesen .sperrbar textarea,
body.nurlesen .sperrbar select,
body.nurlesen .sperrbar button:not(.trotzdem){
  pointer-events:none; opacity:.45;
}
.nurlesen-hinweis{ display:none; font-size:11px; color:var(--ink-soft) }
body.nurlesen .nurlesen-hinweis{ display:inline }

/* ───────── Bewegung ─────────
   Voreinstellung: keine. Bewegt wird nur, was tatsächlich seinen
   Platz wechselt. Für Menschen, die Bewegung nicht vertragen,
   entfällt auch das. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important;
                        animation-iteration-count:1 !important;
                        transition-duration:.01ms !important }
}


/* ════════════════════════════════════════════════════════════
   Einwilligungen und Rechtliches
   ════════════════════════════════════════════════════════════ */

/* Ein Haken, den man ohne Lupe trifft, und ein Text, der nicht
   kleiner ist als das, wozu er verpflichtet. */
.haken{
  display:flex; gap:8px; align-items:flex-start;
  margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink-mid);
  cursor:pointer;
}
.haken input{
  flex:none; width:16px; height:16px; margin:2px 0 0;
  accent-color:var(--ink);
}
.haken b{ color:var(--ink); font-weight:500 }
.haken a{ text-decoration:underline }

.torfuss, .rechtfuss{
  display:flex; gap:20px; justify-content:center;
  margin-top:20px; padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11px;
}
.torfuss a, .rechtfuss a{ color:var(--ink-soft) }
.fuss-marke{ font-weight:650; color:var(--ink) }
/* Im Dashboard sitzt sie am Fuss des Inhalts, nicht mittig */
.geruest + .rechtfuss{
  justify-content:flex-start; padding:12px 20px 20px;
  margin:0 0 0 220px; border-top:1px solid var(--line);
}
@media(max-width:900px){ .geruest + .rechtfuss{ margin-left:0 } }
.torfuss a:hover, .rechtfuss a:hover{ color:var(--ink) }


/* ════════════════════════════════════════════════════════════
   Anfragen

   Dasselbe Fenster wie sonst, nur groesser — hier steht mehr, weil
   der Leser wissen soll, was er bekommt und was nicht, bevor er
   seinen Namen eintraegt.
   ════════════════════════════════════════════════════════════ */
.schleier{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(24,27,31,.42);
  opacity:0; transition:opacity .14s;
  overflow-y:auto;
}
.schleier.da{ opacity:1 }
.fenster{
  width:min(27rem, 100%);
  background:var(--surface);
  border:1px solid var(--rand-knopf-stark);
  border-radius:3px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  padding:20px;
}
.fenster h2{ font-size:15px; font-weight:650; margin:0 0 8px; letter-spacing:-.01em }
.fenster p{ margin:0 0 12px; font-size:13px; line-height:1.55; color:var(--ink-mid) }
.fenster p:last-of-type{ margin-bottom:0 }
.fenster-knoepfe{ justify-content:flex-end; margin-top:20px }
.fenster-inhalt:empty{ display:none }

/* Das Gespräch im Fenster: breiter als eine Rückfrage, weil hier
   Sätze stehen und nicht zwei Worte. */
.fenster.gespraech{ width:min(38rem, 100%) }
.fenster.gespraech .fenster-knoepfe{ margin-top:12px }

/* Ein Feld im Fenster: dasselbe wie im Formular, nur ohne den
   Aussenabstand — im Fenster ist der Platz gezählt. */
.fenster .feld{ margin:12px 0 0 }
.fenster .feld:first-of-type{ margin-top:14px }

.fenster.anfrage{
  width:min(34rem, 100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  position:relative;
}
.anfrage-zu{
  position:absolute; right:8px; top:6px;
  background:none; border:0; padding:2px 6px;
  font-size:17px; line-height:1; color:var(--ink-soft);
}
.anfrage-zu:hover{ color:var(--ink) }
.anfrage-dach{
  margin:0 0 2px !important;
  font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.anfrage-sagt{
  margin:12px 0 20px; padding:12px;
  background:var(--bg-alt); border:1px solid var(--line);
}
.anfrage-sagt p{ margin:0 0 8px }
.anfrage-sagt p:last-child{ margin:0 }

.anfrage-felder .zwei{ display:flex; gap:12px }
.anfrage-felder .zwei > *{ flex:1; min-width:0 }
.anfrage-felder .titel i{ font-style:normal; color:var(--ink-soft); font-weight:400 }
.anfrage-felder textarea{ min-height:72px }

.anfrage-warnung{
  margin:0 0 12px !important; padding:8px 10px;
  border-left:2px solid var(--warn, #b45309); background:#fff8ed;
  font-size:13px;
}
.anfrage-stand{
  margin-top:12px; padding:8px 10px;
  border-left:2px solid var(--ink); background:var(--bg-alt);
  font-size:13px; color:var(--ink-mid);
}
.anfrage-stand.schlecht{ border-left-color:var(--stopp) }

/* Der Honigtopf steht im Markup und nirgends sonst */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }