/* ======================================================================
   Verwaltungsoberflaeche des Burkhard-Heim-Archivs.

   Am 27.08.2026 neu gefasst. Vorher standen die Werte an drei Orten
   verteilt: hier, in medien.css der oeffentlichen Seite und in 56
   style="…"-Attributen quer durch neun Vorlagen. Jede Aenderung war
   Suchen-und-Ersetzen, und die Seiten liefen sichtbar auseinander —
   zwoelf Knoepfe trugen eine Klasse, acht keine und sahen deshalb aus
   wie vom Browser geliefert.

   Zwei Entscheidungen tragen das hier:

   1. FARBE UND MASS NUR UEBER MERKMALE. Kein fester Wert mehr in einer
      Regel. Was der Bestand an Toenen braucht, steht unten in :root.

   2. EIGENES GESICHT, NICHT DAS DER WEBSEITE. Die oeffentliche Seite ist
      auf Lesen ausgelegt: grosse Schrift, viel Luft, lange Zeilen. Hier
      wird gearbeitet — an Listen mit 852 Werken und Formularen mit
      zwanzig Feldern. Also dichter gesetzt (14 px Grundschrift statt
      16-17), engere Zeilen, mehr Kontrast an den Kanten. Dass man am
      ersten Blick sieht, ob man in der Verwaltung oder auf der
      oeffentlichen Seite steht, ist bei Schreibrechten kein Nachteil.

   Bewusst KEIN Dunkelmodus: eine zweite Farbreihe muesste bei jeder
   kuenftigen Aenderung mitgepflegt werden, und hier arbeitet niemand
   nachts im Dunkeln.

   Die elf Klassen, die frueher aus medien.css kamen (suchleiste,
   trefferzahl, punkt, marke, angaben, blaettern, mini, oeffnen,
   farblegende, inhalt, gesperrt), stehen jetzt hier. Damit haengt die
   Verwaltung gestalterisch an nichts mehr, was die oeffentliche Seite
   aendert.
   ====================================================================== */

:root {
    /* Flaechen. Der Grund ist leicht grau, damit die weissen Karten und
       Tabellen darauf eine Kante haben, ohne dass ueberall ein Rahmen
       gezogen werden muss. */
    --grund:        #f5f6f8;
    --flaeche:      #ffffff;
    --flaeche-2:    #eef0f3;
    --flaeche-3:    #e3e6ea;

    /* Schrift. Vier Stufen reichen: Text, ruhiger Text, leise, sehr leise. */
    --text:         #1b1f24;
    --text-2:       #3f454d;
    --leise:        #676e78;
    --leiser:       #949aa4;

    /* Linien. Die feine trennt innerhalb einer Flaeche, die kraeftige
       grenzt Flaechen gegeneinander ab. */
    --linie-fein:   #e5e8ec;
    --linie:        #d3d8de;
    --linie-stark:  #aeb5be;

    /* Akzent: ein zurueckgenommenes Marineblau statt des fruehreren
       #007bff. Das helle Blau schrie auf jeder Seite nach Aufmerksamkeit,
       obwohl es meist nur ein Verweis war. */
    --akzent:       #1a5091;
    --akzent-dunkel:#123a6b;
    --akzent-weich: #eaf1fa;
    --akzent-linie: #bcd2ec;

    /* Zustaende. Jeweils Flaeche, Linie, Schrift — damit ein Merker
       ueberall gleich gebaut ist. */
    --gut:          #256029;
    --gut-weich:    #e9f5ea;
    --gut-linie:    #a9d3ac;
    --warn:         #7a5c00;
    --warn-weich:   #fff8e1;
    --warn-linie:   #f0d17a;
    --fehler:       #97231a;
    --fehler-weich: #fdecea;
    --fehler-linie: #f0b3ad;

    /* Mass. Eine Skala statt frei gewaehlter Pixelwerte. */
    --luft-1: 4px;
    --luft-2: 8px;
    --luft-3: 12px;
    --luft-4: 16px;
    --luft-5: 24px;
    --rund:      4px;
    --rund-voll: 999px;
    --schatten:  0 1px 2px rgba(20, 25, 35, 0.06);
    --schatten-hoch: 0 6px 18px rgba(20, 25, 35, 0.14);
}

/* ---------------------------------------------------------------------
   Grundgeruest. Seit die Verwaltung eine eigene Anwendung ist, laedt sie
   kein seite.css der oeffentlichen Seite mehr — die Grundtypografie
   muss hier stehen, sonst faellt die Seite auf die Browservorgaben
   zurueck (Times, 16 px, blaue Verweise).
   --------------------------------------------------------------------- */

* { box-sizing: border-box; }

body.verwaltung {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

.verwaltung-rahmen {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--luft-4) var(--luft-5) var(--luft-5);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 var(--luft-3); line-height: 1.25; font-weight: 600; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 var(--luft-3); }

code, kbd, .einwertig {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}

/* Text, der leiser stehen soll als der Rest — ersetzt die frueheren
   style="font-size:13px;color:#666"-Attribute. */
.leise    { color: var(--leise); font-size: 13px; }
.leiser   { color: var(--leiser); font-size: 12px; }
.klein    { font-size: 13px; }
.rechts   { text-align: right; }
.nowrap   { white-space: nowrap; }
.abstand-oben { margin-top: var(--luft-4); }

/* ---------------------------------------------------------------------
   Kopf und Menue
   --------------------------------------------------------------------- */

.verwaltung-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--luft-3);
    padding-bottom: var(--luft-2);
    margin-bottom: 0;
    border-bottom: 2px solid var(--text);
}
.verwaltung-kopf h1 { margin: 0; font-size: 20px; }

.verwaltung-konto {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--leise);
}
.verwaltung-konto .rolle { color: var(--leiser); }
/* Auf /konto ist der Name der aktuelle Ort, nicht nur ein Weg. */
.verwaltung-konto a.hier { color: var(--text); font-weight: 600; text-decoration: none; }
.verwaltung-konto form { display: inline; margin: 0; }
.verwaltung-konto button {
    background: none;
    border: none;
    padding: 0;
    color: var(--akzent);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.verwaltung-konto button:hover { text-decoration: underline; }

/* Eine Reihe fuer alle acht Seiten. Gruppennamen stehen leise davor und
   trennen Bestandspflege, Inhalte und Zugaenge; der aktuelle Eintrag ist
   ausgefuellt statt nur gefaerbt, damit er auch ohne Farbwahrnehmung
   erkennbar bleibt. */
.verwaltung-menue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--luft-1) var(--luft-2);
    margin: 0 0 var(--luft-5);
    padding: var(--luft-2) 0 10px;
    border-bottom: 1px solid var(--linie);
    font-size: 14px;
}
.verwaltung-menue .gruppe {
    color: var(--leiser);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 10px;
}
.verwaltung-menue .gruppe:first-child { margin-left: 0; }
.verwaltung-menue a {
    padding: var(--luft-1) 9px;
    border: 1px solid transparent;
    border-radius: var(--rund);
    color: var(--akzent);
    text-decoration: none;
}
.verwaltung-menue a:hover {
    background: var(--akzent-weich);
    border-color: var(--akzent-linie);
    text-decoration: none;
}
.verwaltung-menue a.hier {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    font-weight: 600;
}
.verwaltung-menue a.hinaus { margin-left: auto; color: var(--leise); }

/* ---------------------------------------------------------------------
   Knoepfe. Vier Arten, mehr braucht es nicht:
     .knopf          — der uebliche, zurueckhaltend
     .knopf.haupt    — die eine Handlung, um die es auf der Seite geht
     .knopf.warnung  — was sich schwer zurueckholen laesst
     .knopf.leise    — Beiwerk, sieht fast wie Text aus
   Frueher trugen acht Knoepfe gar keine Klasse und kamen als
   Browservorgabe heraus.
   --------------------------------------------------------------------- */

.knopf,
button.knopf,
input[type="submit"].knopf {
    display: inline-block;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.knopf:active { background: var(--flaeche-3); box-shadow: none; }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.knopf[disabled], .knopf:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.knopf.haupt {
    color: #fff;
    background: var(--akzent);
    border-color: var(--akzent-dunkel);
    font-weight: 600;
}
.knopf.haupt:hover { background: var(--akzent-dunkel); }

.knopf.warnung {
    color: var(--fehler);
    background: var(--fehler-weich);
    border-color: var(--fehler-linie);
}
.knopf.warnung:hover { background: #fbdcd8; }

.knopf.leise {
    color: var(--akzent);
    background: none;
    border-color: transparent;
    box-shadow: none;
    padding: 4px 6px;
}
.knopf.leise:hover { background: var(--akzent-weich); }

.knopf.klein { padding: 4px 10px; font-size: 13px; }

/* Eine Reihe Knoepfe unter einem Formular oder ueber einer Liste. */
.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luft-2);
    align-items: center;
    margin: var(--luft-4) 0 0;
}

/* ---------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------- */

fieldset {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: var(--luft-4) var(--luft-4) var(--luft-3);
    margin: 0 0 var(--luft-4);
}
fieldset legend {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-2);
    padding: 0 6px;
    /* Ohne eigene Flaeche laeuft die Rahmenlinie hinter der Beschriftung
       durch und schneidet die Unterlaengen. */
    background: var(--flaeche);
}

input[type="text"], input[type="search"], input[type="number"],
input[type="password"], input[type="url"], input[type="date"],
textarea, select {
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    padding: 6px 8px;
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund);
    background: var(--flaeche);
    margin: 0;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
    border-color: var(--akzent);
}
textarea { line-height: 1.5; resize: vertical; }

.feldgruppe {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px var(--luft-4);
    align-items: start;
    margin-bottom: var(--luft-4);
}
.feldgruppe > label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-2);
    padding-top: 7px;
}
.feldgruppe input[type="text"],
.feldgruppe input[type="password"],
.feldgruppe input[type="number"],
.feldgruppe textarea,
.feldgruppe select { width: 100%; }
.feldgruppe textarea { min-height: 90px; }
.feldgruppe .hinweistext {
    grid-column: 2;
    font-size: 12px;
    color: var(--leise);
    margin: -6px 0 0;
}

.zeile { display: flex; gap: var(--luft-2); flex-wrap: wrap; align-items: center; }
.zeile label { font-weight: normal; font-size: 14px; }

/* ---------------------------------------------------------------------
   Tabellen. Ohne seite.css gaebe es hier gar keine — der Browser setzt
   sie sonst randlos und ohne Kopfzeilenton.
   --------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
}
th, td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linie-fein);
}
th {
    background: var(--flaeche-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--akzent-weich); }
/* Zahlen untereinander lesbar halten. */
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Die Werkliste ist die laengste Tabelle im Haus — hier zaehlt Dichte. */
table.werkliste td, table.werkliste th { font-size: 13px; padding: 6px 8px; }
table.werkliste td { vertical-align: middle; }
.werkliste .mini {
    width: 30px;
    height: 40px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--linie);
    border-radius: 2px;
    display: block;
    margin: 0;
    cursor: pointer;
}

table.personen th { font-size: 12px; }
table.personen td { vertical-align: middle; font-size: 14px; }
table.personen input[type="text"],
table.personen input[type="number"] { width: 100%; padding: 4px 6px; font-size: 13px; }
table.personen .weg {
    background: none;
    border: none;
    color: var(--fehler);
    font-size: 17px;
    cursor: pointer;
    padding: 0 6px;
    border-radius: var(--rund);
}
table.personen .weg:hover { background: var(--fehler-weich); }

/* Angabenblock (Werkseite): Bezeichnung links, Wert rechts. */
.angaben { margin: var(--luft-3) 0 var(--luft-5); }
.angaben th { width: 190px; text-transform: none; letter-spacing: 0; font-size: 13px; position: static; }

/* ---------------------------------------------------------------------
   Suchen, zaehlen, blaettern
   --------------------------------------------------------------------- */

.suchleiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luft-2);
    align-items: center;
    margin-bottom: var(--luft-4);
    padding: var(--luft-3);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
}
.suchleiste input[type="search"] { flex: 1 1 260px; padding: 7px 10px; font-size: 15px; }
.suchleiste select { padding: 7px 8px; }

.trefferzahl { color: var(--leise); font-size: 13px; margin: 0 0 var(--luft-3); }

.blaettern {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: var(--luft-5);
    font-size: 14px;
}

/* ---------------------------------------------------------------------
   Kennzahlen. Zugleich Filter: jede Zahl fuehrt auf die Liste, die sie
   zaehlt.
   --------------------------------------------------------------------- */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    overflow: hidden;
    margin-bottom: var(--luft-4);
}
.kennzahl { background: var(--flaeche); padding: 10px 12px; }
.kennzahl .zahl {
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1.15;
}
.kennzahl .was { font-size: 12px; color: var(--leise); }
.kennzahl a { color: var(--akzent); }

/* ---------------------------------------------------------------------
   Merker: Punkt, Marke, Oeffnen-Knopf
   --------------------------------------------------------------------- */

.punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--rund-voll);
    margin-right: 5px;
    vertical-align: -1px;
}

.marke {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--rund-voll);
    font-size: 12px;
    border: 1px solid var(--linie);
    background: var(--flaeche-2);
    color: var(--text-2);
    white-space: nowrap;
}
.marke.intern   { background: var(--warn-weich);  border-color: var(--warn-linie);  color: var(--warn); }
.marke.gesperrt { background: var(--fehler-weich); border-color: var(--fehler-linie); color: var(--fehler); }
.marke.personen { background: var(--akzent-weich); border-color: var(--akzent-linie); color: var(--akzent); }
.marke.gut      { background: var(--gut-weich);   border-color: var(--gut-linie);   color: var(--gut); }

/* Direktaufruf aus der Trefferliste. Ohne ihn braucht es zwei Klicks bis
   zur Datei: erst die Werkseite, dort "oeffnen". */
.oeffnen {
    display: inline-block;
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 9px;
    border: 1px solid var(--akzent-linie);
    border-radius: var(--rund-voll);
    background: var(--akzent-weich);
    color: var(--akzent);
    text-decoration: none;
    white-space: nowrap;
}
.oeffnen:hover { background: #dceaff; border-color: #8db6e5; text-decoration: none; }
.oeffnen .typ { font-weight: 600; letter-spacing: 0.03em; }
.oeffnen .gr { color: var(--leise); }

/* ---------------------------------------------------------------------
   Meldungen
   --------------------------------------------------------------------- */

.meldung {
    padding: 9px 12px;
    margin-bottom: var(--luft-4);
    font-size: 14px;
    border: 1px solid var(--linie);
    border-left-width: 4px;
    border-radius: var(--rund);
    background: var(--flaeche);
}
.meldung.gut     { background: var(--gut-weich);    border-color: var(--gut-linie);    color: var(--gut); }
.meldung.warnung { background: var(--warn-weich);   border-color: var(--warn-linie);   color: var(--warn); }
.meldung.fehler  { background: var(--fehler-weich); border-color: var(--fehler-linie); color: var(--fehler); }
.meldung.hinweis { background: var(--akzent-weich); border-color: var(--akzent-linie); color: var(--akzent-dunkel); }

/* Bestandsnamen aus der alten Fassung, damit die Vorlagen nicht alle
   gleichzeitig umgeschrieben werden mussten. */
.gespeichert {
    background: var(--gut-weich);
    border: 1px solid var(--gut-linie);
    border-radius: var(--rund);
    color: var(--gut);
    padding: 9px 12px;
    margin-bottom: var(--luft-4);
    font-size: 14px;
}

.zaehlstand {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: var(--rund);
    display: inline-block;
}
.zaehlstand.passt  { background: var(--gut-weich);    border: 1px solid var(--gut-linie);    color: var(--gut); }
.zaehlstand.offen  { background: var(--warn-weich);   border: 1px solid var(--warn-linie);   color: var(--warn); }
.zaehlstand.zuviel { background: var(--fehler-weich); border: 1px solid var(--fehler-linie); color: var(--fehler); }

/* Die Personentabelle fuellt sich sofort beim Anklicken eines
   Vorschlags — das sieht nach "gespeichert" aus, ist es aber nicht.
   Ohne diesen Hinweis geht die Zuordnung beim Verlassen der Seite
   verloren, ohne dass es jemand merkt. */
.ungespeichert {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--warn-weich);
    border: 1px solid var(--warn-linie);
    border-left: 4px solid #ffc107;
    border-radius: var(--rund);
    padding: 10px 14px;
    margin: var(--luft-4) 0 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(20, 25, 35, 0.10);
}
.ungespeichert[hidden] { display: none; }
.ungespeichert strong { color: var(--warn); }
.ungespeichert .knopf { margin-left: auto; }

/* ---------------------------------------------------------------------
   Reiter (Personen / Institutionen / Ereignisse)
   --------------------------------------------------------------------- */

.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--linie);
    margin: 0 0 var(--luft-4);
}
.reiter a {
    padding: 7px 15px;
    font-size: 14px;
    text-decoration: none;
    color: var(--akzent);
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
    border-bottom: none;
    border-radius: var(--rund) var(--rund) 0 0;
    margin-bottom: -2px;
}
.reiter a:hover { background: var(--akzent-weich); text-decoration: none; }
.reiter a.aktiv {
    background: var(--flaeche);
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid var(--flaeche);
}
.reiter a .zahl { color: var(--leiser); font-weight: normal; }

/* ---------------------------------------------------------------------
   Personenzuordnung
   --------------------------------------------------------------------- */

.personensuche { position: relative; }
.vorschlaege {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund);
    box-shadow: var(--schatten-hoch);
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.vorschlaege li {
    display: block;
    margin: 0;
    padding: 7px 10px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--linie-fein);
}
.vorschlaege li:last-child { border-bottom: none; }
.vorschlaege li:hover, .vorschlaege li.aktiv { background: var(--akzent-weich); }
.vorschlaege .lebensdaten { color: var(--leise); font-size: 12px; }

/* ---------------------------------------------------------------------
   Farblegende (aufklappbar)
   --------------------------------------------------------------------- */

.farblegende {
    max-width: 900px;
    margin: 0 0 var(--luft-3);
    font-size: 13px;
    color: var(--leise);
}
.farblegende summary { cursor: pointer; color: var(--akzent); display: inline-block; padding: 2px 0; }
.farblegende summary:hover { text-decoration: underline; }
.farblegende .inhalt {
    border-left: 3px solid var(--linie);
    padding: var(--luft-2) 0 6px var(--luft-3);
    margin-top: 6px;
    line-height: 1.55;
}
.farblegende ul { list-style: none; margin: 0 0 var(--luft-2); padding: 0; }
.farblegende li { margin: 0 0 5px; }
.farblegende p { margin: 0; }

/* ---------------------------------------------------------------------
   Anmeldeseite. Eine Karte in der Mitte, sonst nichts — es gibt hier
   genau eine Handlung.
   --------------------------------------------------------------------- */

.anmeldekarte {
    max-width: 380px;
    margin: 8vh auto 0;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-shadow: var(--schatten);
    padding: var(--luft-5);
}
.anmeldekarte h1 { font-size: 19px; margin-bottom: var(--luft-4); }
.anmeldekarte label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: var(--luft-1); }
.anmeldekarte input { width: 100%; margin-bottom: var(--luft-3); padding: 8px 10px; }
.anmeldekarte .knopf { width: 100%; text-align: center; }
.anmeldekarte .fuss { margin: var(--luft-4) 0 0; font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------------
   Kleinteile. Was frueher als style="…" im HTML stand: 56 Attribute in
   neun Vorlagen. Die Breiten waren dabei acht verschiedene Werte
   (34, 70, 85, 100, 110, 130, 280, 330 px) fuer vier Aufgaben — hier auf
   vier Stufen zusammengezogen, damit Spalten gleicher Art auch gleich
   breit sind.
   --------------------------------------------------------------------- */

.normal     { font-weight: normal; }
.winzig     { font-size: 12px; }
.lesebreite { max-width: 70ch; }
.spalte-auto { grid-column: auto; }
.abstand-links { margin-left: 10px; }

/* Untergeordnetes Formular unter seinem Elternteil (Unterlinks). */
.eingerueckt { margin-left: 24px; margin-top: 12px; }
.eingerueckt.mit-linie { border-left: 3px solid var(--linie); padding-left: 14px; }

/* Feldbreiten. */
.feld-eng    { width: 40px; }
.feld-schmal { width: 72px; }
.feld-mittel { width: 110px; }
.feld-breit  { width: 280px; }
.feld-flach  { min-height: 60px; }

/* Vorschaubild auf der Werkseite. */
.werkbild {
    max-height: 340px;
    width: auto;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
}

/* ---------------------------------------------------------------------
   Schmale Geraete. Die Verwaltung wird ueberwiegend am Schreibtisch
   benutzt; sie muss auf dem Telefon aber bedienbar bleiben, wenn
   unterwegs etwas nachzusehen ist.
   --------------------------------------------------------------------- */

@media (max-width: 700px) {
    .verwaltung-rahmen { padding: var(--luft-3) var(--luft-3) var(--luft-5); }

    .verwaltung-menue .gruppe { margin-left: 0; flex-basis: 100%; }
    /* Eigene Zeile, sonst sieht der Weg nach draussen aus, als gehoerte
       er zur letzten Gruppe darueber. */
    .verwaltung-menue a.hinaus { margin-left: 0; flex-basis: 100%; margin-top: 6px; }

    /* Beschriftung ueber das Feld statt daneben: 190 px feste Spalte
       lassen auf 390 px Breite nichts fuer die Eingabe uebrig. */
    .feldgruppe { grid-template-columns: 1fr; gap: var(--luft-1); }
    .feldgruppe > label { padding-top: var(--luft-2); }
    .feldgruppe .hinweistext { grid-column: 1; }

    /* Breite Tabellen scrollen in sich, statt die Seite zu sprengen. */
    .tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabellenrahmen table { min-width: 640px; }

    fieldset { padding: var(--luft-3); }
    .knopfreihe .knopf { flex: 1 1 auto; text-align: center; }
}