/**
 * Geteilte Bausteine der Cockpit-Oberflaeche — Design-Token und Grundformen,
 * bisher inline im frueheren `index.html` (vor Planning-Zentrale-2026-09-01,
 * Stufe 1b). Ausgelagert, weil `/cockpit/` jetzt eine zweite Seite ist, die
 * dieselben Farben/Formen braucht — eine Quelle statt zweier Kopien.
 *
 * Stil "Werkstatt" (seit 24.09.2026, Nutzerwunsch — "ich muss mir das den
 * ganzen Tag ansehen und will es auch huebsch"): das Cockpit traegt jetzt
 * denselben Stil wie Salonika (app-salonika/src/modules/themes/ui/werkstatt.css),
 * in der Farbvariante Tuerkis statt des dortigen Rosé — je App eine eigene
 * Farbe, siehe [[favicon-farbcode-je-app]]. Das loest die fruehere
 * "Leitstand"-Entscheidung vom 2026-09-07 ab (fester dunkler Kontrollraum,
 * IBM Plex Sans/Mono ueber Google Fonts): heller Grund, Archivo Black fuer
 * Ueberschriften, Inter fuer Fliesstext, eine einzige Signalfarbe als
 * Flaeche/Kante (NIE als Text — Lesbarkeit auf Weiss reicht dafuer nicht),
 * dafuer `--akzent-text` fuer Links und farbige Beschriftung. Die Ampel
 * (--gut/--warn/--schlecht) bleibt unveraendert rot/gelb/gruen.
 *
 * Schriften liegen als Datei unter vendor/schriften/ (Lizenz dort) und
 * werden nie ueber fremde Server geladen (Datenschutz, siehe AGENTS.md) —
 * das loeste zugleich den Google-Fonts-Aufruf ab, den es hier vorher gab.
 */

@font-face {
  font-family: "Archivo Black";
  src: url("vendor/schriften/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("vendor/schriften/inter-variabel.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Flaechen */
  --grund: #ffffff;
  --seite: #eef3f2;
  --karte: #ffffff;
  --linie: #d5e0de;

  /* Text */
  --text: #101a19;
  --still: #566462;

  /* Akzent — Tuerkis. --akzent ist die Signalfarbe: nur Flaeche/Kante, nie
     Text (auf Weiss reicht der Kontrast nicht). Fuer Links, farbige
     Beschriftung u.ae. gilt --akzent-text, eine kraeftigere, lesbare Stufe. */
  --akzent: #2ed3bd;
  --akzent-text: #0a7466;

  /* Ampel — wechselt nie mit der Signalfarbe. */
  --gut: #1d7a46;
  --warn: #8a5d00;
  --schlecht: #b3261e;

  /* Tintenfarbe auf hellen/signalgefuellten Flaechen (Akzent-Knopf, Badges) —
     dort reicht #fff nicht als Kontrast, siehe --akzent oben. */
  --tief: #101a19;

  --schrift: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --anzeige: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  /* Codes und Tastenkuerzel bleiben bei der System-Schrift statt einer
     dritten Webfont-Datei — der Bedarf im Cockpit ist gering. */
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund); color: var(--text);
  font: 15px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
h1 {
  font-family: var(--anzeige); font-weight: 400; letter-spacing: -0.005em;
  font-size: 1.6rem; margin: 0 0 .25rem;
}
.unterzeile { color: var(--still); margin: 0 0 2rem; }
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1.25rem 1.35rem; margin-bottom: 1.25rem;
}
.karte h2 { font-family: var(--anzeige); font-weight: 400; font-size: 1.08rem; margin: 0 0 1rem; }
.karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.karte__kopf h2 { margin: 0; }
.karte__kopf button { width: auto; padding: .5rem .9rem; }
.meldung { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; border: 1px solid; }

/* Dialog-Overlay — gleiches Muster wie die Kommandopalette (cockpit/stil.css),
   hier fuer Formular-Dialoge wie "Neuen Salon anlegen". */
.dialog-hintergrund {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 45%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60;
}
.dialog-hintergrund[hidden] { display: none; }
.dialog {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
  width: min(28rem, 92vw); padding: 1.35rem 1.5rem;
  box-shadow: 0 12px 40px color-mix(in srgb, #000 25%, transparent);
}
.dialog h2 { margin: 0 0 1rem; font-family: var(--anzeige); font-weight: 400; font-size: 1.08rem; }
.dialog form { grid-template-columns: 1fr; }
.dialog__fuss { display: flex; justify-content: flex-end; gap: .6rem; }
.dialog__fuss button { width: auto; padding: .55rem 1rem; }
/* Eigene Rueckfrage-/Eingabedialoge (shared/ui/appDialog.js) — echtes
   <dialog> statt Overlay-Div; Rahmen/Flaeche kommen von .dialog oben. */
dialog.app-dialog { color: var(--text); margin: auto; }
dialog.app-dialog::backdrop { background: color-mix(in srgb, #000 45%, transparent); }
dialog.app-dialog form { display: grid; gap: .9rem; grid-template-columns: 1fr; align-items: stretch; }
dialog.app-dialog form h2, dialog.app-dialog form .app-dialog__text { margin: 0; }
.app-dialog__text { margin: 0 0 1rem; white-space: pre-line; overflow-wrap: anywhere; }
.app-dialog__fehler { margin: 0; color: var(--schlecht); font-size: .84rem; }
.app-dialog__fehler[hidden] { display: none; }
/* Zerstoerende Aktion: roter Bestaetigen-Knopf (der Knopftext nennt die Aktion,
   die Farbe ist nie das einzige Signal). */
button.gefahr { background: var(--schlecht); color: #fff; }
.meldung.warnung { border-color: var(--schlecht); color: var(--schlecht); background: color-mix(in srgb, var(--schlecht) 8%, transparent); }
.meldung.hinweis { border-color: var(--linie); color: var(--still); }
code { background: color-mix(in srgb, var(--still) 14%, transparent); padding: .12em .4em; border-radius: 4px; font-size: .92em; font-family: var(--mono); }

form { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; align-items: end; }
label { display: block; font-size: .84rem; color: var(--still); margin-bottom: .3rem; }
input, select, button {
  font: inherit; padding: .55rem .7rem; border-radius: 7px;
  border: 1px solid var(--linie); background: var(--grund); color: var(--text); width: 100%;
}
button { cursor: pointer; background: var(--akzent); color: var(--tief); border-color: transparent; font-weight: 700; }
button:hover:not(:disabled) { filter: brightness(1.06); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.stumm { background: transparent; color: var(--text); border-color: var(--linie); font-weight: 460; }
.adresse { grid-column: 1 / -1; font-size: .84rem; color: var(--still); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: middle; font-variant-numeric: tabular-nums; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--still); font-weight: 600; }
td.knoepfe { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
td.knoepfe button { width: auto; padding: .34rem .62rem; font-size: .84rem; }
/* Versionsverzeichnis (Issue #81): Zellinhalt reicht von blossem Text bis zu
   mehreren Chips + zwei Knoepfen — bei `table-layout: auto` (Standard)
   verteilt der Browser die Spaltenbreiten je Zeile neu, das Raster wirkte
   dadurch schief. Feste Breiten je Spalte (per colgroup in app.js) statt. */
.tabelle-versionen { table-layout: fixed; }
.tabelle-versionen td { word-wrap: break-word; }
.punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; }
.punkt.laeuft { background: var(--gut); }
.punkt.aus { background: var(--still); }
.leer { color: var(--still); padding: 1.4rem .5rem; }
a { color: var(--akzent-text); }
pre { background: var(--seite); border: 1px solid var(--linie); border-radius: 7px; padding: .8rem; overflow-x: auto; font-size: .82rem; margin: 0; }
@media (max-width: 40rem) { form { grid-template-columns: 1fr; } }

/* Kundenakte (shared/ui/kundenAnsicht.js, Planning-Zentrale-Kundenmodell-
   2026-09-03, F3) — geteilt zwischen Cockpit-Kundenakte und dem spaeteren
   Cockpit-Konto (Stufe 6), deshalb hier statt in cockpit/stil.css. */
.kundenansicht__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.kundenansicht__rollen { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.kundenansicht__knoepfe { display: flex; gap: .5rem; flex-shrink: 0; }
.kundenansicht__knoepfe button { width: auto; padding: .4rem .8rem; font-size: .88rem; }
.chip {
  display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 560; background: color-mix(in srgb, var(--akzent) 16%, transparent); color: var(--akzent-text);
}

/*
 * Start-Ladebalken (index.html, entfernt von app.js nach dem ersten
 * Datenabruf): dieselbe Mechanik wie in Salonika, Stil "Werkstatt" (siehe
 * raw/wiki/code/stil-werkstatt.md) — ein Balken waechst von links nach
 * rechts, an seiner Spitze laeuft ein Kreis in der Signalfarbe mit, darin
 * eine Schere, die im Takt schnippt (zwei Klingen, die sich um denselben
 * Drehpunkt oeffnen/schliessen). Signal ist Flaeche, die Schere Tinte.
 */
#app-lader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund);
}
.lader { width: min(280px, 70vw); }
.lader__bahn { position: relative; height: 46px; }
.lader__bahn::before {
  content: "";
  position: absolute;
  inset: calc(50% - 4px) 0;
  border-radius: 4px;
  background: var(--linie);
}
.lader__fuellung {
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  border-radius: 4px;
  background: var(--akzent);
  animation: cockpit-lader-fuellung 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.lader__kreis {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--tief);
  animation: cockpit-lader-kreis 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.lader__kreis svg { width: 26px; height: 26px; }
.schere__a, .schere__b { transform-origin: 12px 12px; transform-box: view-box; }
.schere__a { animation: cockpit-schnipp-a .6s ease-in-out infinite; }
.schere__b { animation: cockpit-schnipp-b .6s ease-in-out infinite; }
.lader__text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@keyframes cockpit-lader-fuellung {
  0% { width: 23px; }
  100% { width: calc(100% - 23px); }
}
@keyframes cockpit-lader-kreis {
  0% { left: 0; }
  100% { left: calc(100% - 46px); }
}
@keyframes cockpit-schnipp-a {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
}
@keyframes cockpit-schnipp-b {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lader__fuellung, .lader__kreis, .schere__a, .schere__b { animation: none; }
  .lader__fuellung { width: 50%; }
  .lader__kreis { left: calc(50% - 23px); }
}

.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.25rem; flex-wrap: wrap; }
.reiter__knopf {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  width: auto; padding: .6rem .3rem; margin-right: 1rem; color: var(--still); font: inherit; cursor: pointer;
}
.reiter__knopf[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.reiter__knopf:hover { color: var(--text); }

.datenliste { display: grid; grid-template-columns: 9rem 1fr; gap: .55rem 1rem; margin: 0; }
.datenliste dt { color: var(--still); font-size: .84rem; }
.datenliste dd { margin: 0; }

.verlauf-liste { list-style: none; margin: 0; padding: 0; }
.verlauf-liste li { padding: .6rem 0; border-top: 1px solid var(--linie); }
.verlauf-liste li:first-child { border-top: none; }
.verlauf-liste__zeit { color: var(--still); font-size: .84rem; margin-right: .4rem; }
.aktivitaet-formular { grid-template-columns: 8rem 1fr auto; margin-bottom: 1.25rem; }

.checkbox-gruppe { grid-column: 1 / -1; display: flex; gap: 1rem; flex-wrap: wrap; }
.checkbox-gruppe label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--text); margin: 0; }
.checkbox-gruppe input { width: auto; }
textarea {
  font: inherit; padding: .55rem .7rem; border-radius: 7px; resize: vertical;
  border: 1px solid var(--linie); background: var(--grund); color: var(--text); width: 100%;
}