@import url('/gemeinsam.css');

/* Gemeinsame Grundgestaltung fuer die Bueroseiten.
   Bewusst eine eigene Datei statt Inline-CSS: die Bilddatenbank steckt in einer
   einzigen 187-KB-index.html, und dort noch ein Geschaeftsmodul hineinzupacken
   waere der falsche Weg. Wenn spaeter das Hauptmenue kommt und index.html
   aufgeteilt wird, wechselt sie auf dieselbe Datei. */


/* box-sizing und die Grundschrift kommen aus gemeinsam.css */
body { margin: 0; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
/* Volle Fensterbreite. Die 1800 px sind kein Gestaltungsraster, sondern eine
   Vernunftgrenze: auf einem sehr breiten Schirm wuerde eine Positionstabelle
   sonst ueber einen Meter laufen und das Auge verliert die Zeile. */
.seite { max-width: var(--seite-max); margin: 0 auto; padding: var(--seite-polster); }

/* Die Kopfzeile steht in gemeinsam.css – dieselbe wie in der Bilddatenbank */

/* Die Knoepfe stehen in gemeinsam.css – dieselben wie in der Bilddatenbank */

/* ── FELDER ──
   In Ruhe grau hinterlegt und ohne Rahmen, beim Hineinklicken weiss und
   eingerahmt. Vorher lagen die Felder mit rgba(255,255,255,0.7) auf einer Karte
   mit 0.72 – also weiss auf weiss, und der Rahmen musste die ganze Arbeit
   allein tun. Die Flaeche sagt jetzt "hier steht etwas drin", der Rahmen sagt
   "hier arbeitest du gerade". Das ist derselbe Gedanke wie bei den berechneten
   Werten, die gar keinen Rahmen haben.
   Die Masse bleiben in beiden Zustaenden gleich, damit beim Hineinklicken
   nichts springt: der Rahmen ist vorher da, nur durchsichtig. */
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; background: var(--ton-2); border: 0.5px solid transparent;
  border-radius: var(--radius-sm); padding: .4rem .65rem; color: var(--text);
  font-size: .85rem; font-family: var(--font); outline: none; resize: none;
  box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { background: var(--ton-3); }
input:focus, select:focus, textarea:focus {
  background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,58,60,0.10);
}
.zahl { text-align: right; font-variant-numeric: tabular-nums; }




/* Ueberschriften, Feldbeschriftungen, leere Liste und Meldung stehen in
   gemeinsam.css. Hier nur der Abstand, den der Ort vorgibt: die Meldung sitzt
   auf diesen Seiten ueber dem Inhalt und braucht Luft nach unten. */
#meldung .meldung { margin-bottom: 1rem; }

/* Fuer schmale Fenster braucht es hier nichts mehr: Polsterung und Kopfzeile
   regeln das in gemeinsam.css, und der Knopf bleibt ueberall oben rechts. */