/* Die Bauteile, die auf jeder Seite gleich aussehen sollen.
 *
 * WARUM NEBEN tokens.css UND NICHT DARIN
 * tokens.css traegt WERTE, diese Datei traegt REGELN. Eine Datei, die beides
 * mischt, wird zu der einen Datei, die niemand mehr anfasst. Wer eine Farbe
 * sucht, schaut in die eine; wer wissen will, wie eine Kopfzeile gebaut ist,
 * in die andere.
 *
 * WARUM ES SIE GIBT
 * Der Kopfbereich stand zwoelfmal fast gleich in den Seiten: Logo, Titel,
 * Unterzeile, untereinander, mittig. Gemessen am 24.09.2026 kostete er
 * zwischen 391 und 626 Pixel, bevor der erste Inhalt anfing. Auf dossier.html
 * blieben 222 von 813 Pixeln uebrig, auf MMGENERATOR.html vierzehn.
 *
 * Haette ich ihn in zwoelf Seiten einzeln umgebaut, waere die Doppelpflege
 * zurueck, die tokens.css gerade beseitigt hat.
 *
 * WAS DER KOPF JETZT IST
 * Eine Zeile. Titel links, Unterzeile klein daneben, Name rechts. Das Logo
 * faellt weg: es steht bereits in der Topbar, und zweimal dieselbe Marke auf
 * einem Schirm ist einmal zu viel.
 *
 * Der Name bleibt, weil die Chatterinnen sich Rechner teilen. "Wer bin ich
 * gerade" ist die eine Frage, die man nicht raten darf: wer im falschen
 * Konto einen Schichtbericht abschickt, schreibt ihn einer Kollegin gut.
 * Gefuellt wird er in assets/auth.js, sobald die Anmeldung durch ist.
 */

/* ---------------- hidden heisst hidden ----------------
 *
 * WORAUS DIESE EINE ZEILE ENTSTANDEN IST
 * Das Attribut hidden bringt sein eigenes display:none mit, aber nur als
 * Vorgabe des Browsers. Jede Klassenregel mit eigenem display schlaegt sie.
 * Ein Element kann damit hidden tragen und trotzdem gezeichnet werden, und
 * das sieht man nur, wenn man genau diese Rolle oeffnet.
 *
 * Vier Wochen lang sah Biel auf der Startseite die Kacheln To do, Statistics,
 * Model Tasks und Users: .weg setzt display:block. Eine Chatterin sah die
 * Gruppe gar nicht, weil dort keine Kachel uebrig bleibt; David sieht ohnehin
 * alles. Nur Biel lag dazwischen.
 *
 * WARUM GLOBAL UND NICHT JE KLASSE
 * Die enge Fassung waere .weg[hidden], .cards[hidden], .titem-actions[hidden]
 * und so weiter gewesen. Nachgezaehlt gab es dreizehn Kandidaten. David am
 * 07.10.2026: "Du behebst denselben Fehler dreizehn Mal und findest den
 * vierzehnten nicht." Eine Zeile hier macht die ganze Klasse tot, auch fuer
 * jede Klasse, die es noch nicht gibt.
 *
 * DIE EINE GEFAHR, GEPRUEFT BEVOR DIE ZEILE KAM
 * Verlaesst sich irgendwo ein Uebergang oder eine Animation darauf, dass ein
 * Element mit hidden noch gezeichnet wird? Zwei Treffer, beide harmlos:
 * #egg traegt transition:none im prefers-reduced-motion-Block, und .btn-edit
 * fuehrt sein [hidden] laengst selbst, sein Uebergang liegt auf Hoverfarben.
 * Das Anmeldefenster arbeitet mit der KLASSE hidden, nicht mit dem Attribut,
 * und bleibt davon unberuehrt.
 *
 * !important, weil es sonst jede Klassenregel wieder schlaegt. Es ist die
 * Ausnahme, die die Regel durchsetzt, und sie steht genau einmal.
 */
[hidden] { display: none !important; }

/* ---------------- Kopfzeile ---------------- */
.header {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-3) 0 var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--linie-stark);
  margin-bottom: var(--s-5);
}

.header .tool-title {
  font-family: var(--font-serif);
  font-style: italic;
  /* 20px, nicht 28. Der Titel beantwortet "wo bin ich" und wird einmal beim
     Ankommen gelesen; danach steht er acht Stunden im Weg. Die grosse Stufe
     bleibt der Startseite vorbehalten, die nichts anderes zu tun hat. */
  font-size: var(--fs-6);
  line-height: 1.2;
  letter-spacing: var(--headline-tracking);
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Nicht schrumpfen: der Titel ist die Antwort auf "wo bin ich". */
  flex: none;
}

.header .tagline {
  font-size: var(--fs-2);
  color: var(--text-2);
  font-style: normal;
  font-weight: 400;
  /* Sie darf verschwinden, bevor der Titel es tut: auf einem schmalen
     Schirm ist "wo bin ich" wichtiger als die Erklaerung dazu. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Name. Versteckt, solange die Anmeldung nicht durch ist: ein leeres
   Feld, das spaeter aufspringt, laesst die Zeile huepfen. */
.header .wer {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-1);
  color: var(--text-2);
  letter-spacing: 0.04em;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--linie);
  border-radius: var(--r-0);
  white-space: nowrap;
}
.header .wer[hidden] { display: none; }

/* KNOEPFE IN DER KOPFZEILE.
   Nur eine Seite braucht sie: das Wiki hat "Trash" und "+ New section" seit
   jeher oben stehen, und diese zwei waren der Grund, warum es als letzte
   Seite noch ihren eigenen Kopf trug (.page-head, zweizeilig, 28px Titel).

   ZWEI AUTOMATISCHE RAENDER TEILEN SICH DEN PLATZ, sie stapeln sich nicht.
   Haette hier margin-left:auto stehen und beim Namen daneben auch, saessen
   die Knoepfe in der Mitte statt rechts. Deshalb verliert der Name seinen
   automatischen Rand, sobald Knoepfe vor ihm stehen. */
.header .kopf-tat {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin-left: auto;
  flex: none;
}
.header .kopf-tat ~ .wer { margin-left: var(--s-5); }

/* Auf schmalen Schirmen faellt die Unterzeile ganz weg. Titel und Name
   bleiben, und die Zeile bleibt eine Zeile. */
@media (max-width: 640px) {
  .header { gap: var(--s-4); }
  .header .tagline { display: none; }
  .header .tool-title { font-size: var(--fs-6); }
}

/* ============================================================
   DER BAUSATZ
   ============================================================
   Gezaehlt am 25.09.2026, bevor es ihn gab:

     .panel        fuenf Fassungen. Eine davon ist gar kein Panel, sondern
                   der dunkle Grund eines Dialogs (wiki.html). Derselbe Name
                   fuer zwei Dinge ist schlimmer als zwei Namen fuer dasselbe.
     .btn          sechs Fassungen in drei Groessen. Auf vier Seiten ein
                   umrandeter Zweitknopf, auf zwei ein stiller, auf drei ein
                   grosser. Die Benutzung war ueberall gleich: .btn als
                   Grundlage, dazu ein Zusatz wie .btn-primary.
     .btn-primary  sechs Fassungen, im Kern ueberall dasselbe.
     .banner       fuenf, .pill drei, .loading zwei, .psub zwei.
     Rundungen     259 Angaben in zwoelf Werten. Zwischen 9, 10, 11 und 12
                   sieht niemand einen Unterschied, und gewaehlt hat sie
                   auch niemand.

   WAS HIER STEHT
   Die Grundlage jedes Bauteils. Zusaetze, die nur eine Seite kennt, bleiben
   bei ihr: der Bausatz soll das Gemeinsame tragen, nicht jede Besonderheit
   einsammeln.

   WELCHE FASSUNG GEWONNEN HAT
   Beim Knopf die umrandete. Sie ist die einzige, die fuer sich allein schon
   aussieht wie etwas, das man druecken kann; die beiden anderen brauchen
   einen Zusatz, um sichtbar zu sein. Auf model-tasks, ppv und logbook werden
   die Knoepfe dadurch eine Stufe kleiner. Das ist die Richtung.
   ============================================================ */

/* ---------------- Panel ----------------
   RICHTUNG A, 29.09.2026: KEIN KASTEN MEHR.
   Vorher trug jedes Panel eine eigene Flaeche, einen rosa Rand, eine
   Rundung von 18px, eine Weichzeichnung und einen Schatten. Fuenfzehn
   Seiten voller Kaesten, und in jedem Kasten wieder Kaesten.

   Jetzt trennt eine Linie. Das Panel behaelt genau eine Aufgabe, naemlich
   zu sagen "hier faengt etwas Neues an", und dafuer genuegt ein Strich
   darueber. Der Gewinn ist nicht nur Ruhe: ohne Rand und Polster beginnt
   der Inhalt sechzehn Pixel weiter links und sechs weiter oben.

   Die Weichzeichnung faellt ersatzlos weg. Sie kostete auf jedem Panel
   eine eigene Ebene im Browser, und zu sehen war unter ihr ohnehin nur
   der Seitengrund. */
.panel {
  background: none;
  border: 0;
  border-top: 1px solid var(--linie-stark);
  border-radius: var(--r-0);
  box-shadow: none;
  padding: var(--s-6) 0 0;
  margin-top: var(--s-6);
  /* DIE LUFT HAENGT UNTEN, NICHT OBEN.
     Sonst rutscht der Seitenanfang mit: auf /logbook steht vor der ersten
     sichtbaren Tafel eine unsichtbare, und mit margin-top waere der Inhalt
     dort von 116px auf 144px gewandert, also unter die Grenze aus
     test/kopf.mjs. Unten kostet es nichts und wirkt genauso: zwei
     senkrechte Abstaende nebeneinander fallen in CSS zusammen, es zaehlt
     der groessere. */
  margin-bottom: var(--abschnitt);
}
/* Ein Panel im Panel bekommt die feine Linie: sonst stehen zwei gleich
   starke Striche uebereinander und sagen zweimal dasselbe. */
/* Eine Tafel in der Tafel gehoert zum selben Abschnitt: feine Linie, und
   KEIN Abschnittsabstand, sonst trennt die Innengliederung staerker als die
   Abschnitte selbst. */
.panel .panel { border-top-color: var(--linie); margin-top: var(--s-5); margin-bottom: 0; }

/* Die Unterzeile eines Panels: was hier zu tun ist, in einem Satz. */
.psub {
  color: var(--text-2);
  font-size: var(--fs-2);
  line-height: 1.5;
  margin-bottom: var(--s-5);
}

/* ---------------- Knopf ---------------- */
.btn {
  border: 1px solid var(--linie-stark);
  background: none;
  color: var(--text-1);
  border-radius: var(--r-0);
  padding: var(--s-4) var(--s-6);
  font-size: var(--fs-3);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { color: var(--text-0); background: var(--flaeche-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
/* DER EINE AKZENT. In A traegt Cyan das, was man tut; Rosa und Violett
   bleiben fuer das, was etwas bedeutet. Der Verlauf ist weg: ein Knopf mit
   Verlauf und Schatten ist eine Flaeche, und Flaechen hat diese Richtung
   nicht. Gefuellt bleibt er trotzdem, denn der Hauptknopf muss sich von
   den drei anderen daneben unterscheiden lassen. */
.btn-primary {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--bg-0);
}
.btn-primary:hover:not(:disabled) { color: var(--bg-0); background: var(--cyan-hell); border-color: var(--cyan-hell); }
.btn-danger { border-color: var(--error-line); color: var(--accent-error); background: none; }
.btn-danger:hover:not(:disabled) { color: var(--accent-error); background: var(--error-fill); }
.btn-sm { padding: var(--s-3) var(--s-4); font-size: var(--fs-2); }

/* ---------------- Eingabefeld ----------------
   Es gab bisher keins im Bausatz, und das sah man: auf /dossier stand das
   Suchfeld in Weiss auf dunklem Grund, weil keine Regel es je erfasst hat.
   Jede Seite hatte ihre eigenen Feldregeln, und wo eine fehlte, sprang der
   Browser ein.

   In A ist ein Feld kein Kasten, sondern eine Linie darunter, wie auf einem
   Formular. Unter dem Zeiger passiert nichts, beim Schreiben wird die Linie
   cyan: dort bin ich gerade.

   Schalter und Regler bleiben aussen vor, die zeichnet der Browser besser,
   als eine Regel es koennte. */
input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']):not([type='submit']):not([type='button']),
select,
textarea {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie-stark);
  border-radius: var(--r-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  padding: var(--s-3) 0;
  outline: none;
}
/* Ein mehrzeiliges Feld bekommt seinen Rahmen zurueck. Eine Linie unten
   sagt bei einer Zeile "hier schreibst du"; bei acht Zeilen sagt sie gar
   nichts mehr, und der Text steht scheinbar frei auf der Seite. */
textarea {
  border: 1px solid var(--linie);
  padding: var(--s-4) var(--s-5);
}
input:focus, select:focus { border-bottom-color: var(--accent-cyan); }
textarea:focus { border-color: var(--accent-cyan); }
input::placeholder, textarea::placeholder { color: var(--text-2); }
/* Die aufgeklappte Liste zeichnet das Betriebssystem, nicht wir. Ohne
   eigenen Grund stuende dort dunkle Schrift auf dunklem Grund. */
select option { background: var(--bg-1); color: var(--text-0); }

/* ---------------- Pille ---------------- */
.pill {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-0);
  color: var(--text-2);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-2);
  font-weight: 500;
  cursor: pointer;
}
.pill:hover { color: var(--text-0); }
/* Die gewaehlte Pille war eine gefuellte Kapsel. Jetzt ist sie eine Zeile
   mit einem Strich darunter, wie ein Reiter: dasselbe Wissen, eine Flaeche
   weniger, und der Name bleibt lesbar statt auf dem Verlauf zu schwimmen. */
.pill.active { color: var(--text-0); border-bottom-color: var(--accent-cyan); font-weight: 600; }

/* ---------------- Marke ----------------
   Kein Knopf: sie sagt einen Zustand, sie tut nichts. */
.tbadge {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-0);
  white-space: nowrap;
}

/* ---------------- Meldung ---------------- */
/* Eine Meldung ist kein Kasten, sondern ein Strich am Rand. Die Farbe des
   Strichs sagt, was los ist, und der Satz steht dort, wo Text steht. */
.banner {
  display: none;
  margin-top: var(--s-5);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-radius: var(--r-0);
  font-size: var(--fs-3);
  line-height: 1.45;
  border: 0;
  border-left: 2px solid var(--accent-error);
  background: none;
  color: var(--text-1);
}
.banner.show { display: block; }
.banner.ok { border-left-color: var(--accent-good); }

/* ---------------- Leerer Zustand und Warten ----------------
   Beide sagen dasselbe Nichts, und trotzdem etwas Verschiedenes: "hier ist
   nichts" und "hier kommt gleich etwas". Wer das verwechselt, wartet auf
   eine Liste, die nie kommt. */
.tempty {
  padding: var(--s-7);
  text-align: center;
  color: var(--text-2);
  font-style: italic;
  font-size: var(--fs-3);
}
.loading {
  padding: var(--s-6);
  text-align: center;
  color: var(--text-2);
  font-style: italic;
}