/* Oberfläche der Werkzeugverwaltung.
   Die Farben stammen aus dem Firmenlogo: Blau führt, Rot warnt, Gelb mahnt.
   Grün ist ergänzt — das Logo hat keins, und "geprüft" braucht eine eigene
   Farbe, die niemand mit "fällig" verwechselt. */

:root {
  /* Die Marke BurgwinkelDigital/BetriebsakteDigital: Dunkelgruen als
     Hauptfarbe, Terracotta als sparsamer Akzent, Elfenbein als Flaeche,
     Sand fuer Linien. Aus den Logos gemessen, nicht geraten.
     --blau heisst aus der Kundenprojekt-Zeit so und zeigt seit 3.0 als
     Zweitname auf --haupt: 64 Stellen fragen ihn, und ein Massenumbau
     der Namen waere Rauschen in der Historie. Neues nimmt --haupt. */
  --haupt: #1D3629; --haupt-hell: #E9EFE9;
  --akzent: #D05A26;
  --blau: var(--haupt); --blau-hell: var(--haupt-hell);
  --rot: #C8121A;  --rot-hell: #fdeced;
  --gelb: #8a7a00; --gelb-hell: #fdf8d0;
  --gruen: #1E7F4A; --gruen-hell: #e4f4ea;
  --grau: #6E6A60; --linie: #E4DCCB; --flaeche: #FBF7F2;
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Vier Schriftgroessen, mehr gibt es nicht. Jede Angabe im Blatt zeigt auf
     eine davon -- wer eine fuenfte braucht, hat die falsche gewaehlt. Die
     Zeilenhoehe ist ueberall 1.5; Ueberschriften stehen enger (1.25), weil
     eine umgebrochene Ueberschrift sonst auseinanderfaellt. */
  --schrift-klein: 13px;        /* Hinweise, Nebenangaben, Tabellenkoepfe */
  --schrift-mittel: 15px;       /* Fliesstext, Tabellen, Formulare, Knoepfe */
  --schrift-gross: 20px;        /* h2, hervorgehobene Werte */
  --schrift-extragross: 30px;   /* h1, grosse Zahlen */

  /* Flaechen und Kanten. Karten tragen einen weichen Schatten statt eines
     Rahmens: Ein Rahmen zieht eine harte Linie um jeden Kasten, und bei
     zwanzig Kaesten auf einer Seite entsteht daraus ein Gitter, das lauter
     ist als der Inhalt. */
  --karte: #fff;
  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 2px rgba(29, 54, 41, .05), 0 6px 16px rgba(29, 54, 41, .05);
  --schatten-tief: 0 8px 30px rgba(29, 54, 41, .12);
  --leiste: 264px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--schrift); font-size: var(--schrift-mittel); color: #1b1d33;
       background: var(--flaeche); line-height: 1.5; }
a { color: var(--blau); }


/* Das Kundenlogo schrumpft nie. Ohne diese Zeile hat flex es gestaucht,
   sobald die Leiste zu voll wurde -- mit dem sechsten Menuepunkt in 2.0 war
   es auf vier Pixel zusammengedrueckt und lag hinter dem ersten Eintrag.
   "Oben Kunde" ist keine Empfehlung. */

/* Die Leiste darf umbrechen, aber nicht ueberlaufen: min-width:0 erlaubt dem
   Navigationsblock, unter seine Inhaltsbreite zu schrumpfen -- ohne das
   ignoriert flex jede Breitenangabe und schiebt die Nachbarn beiseite. */

/* --- Hauptleiste: Punkte mit Untermenue ---------------------------------- */
/* Aufgeklappt wird ueber <details> und nicht ueber :hover. Am Handy gibt es
   kein Hover, und ein Menue, das beim Vorbeiziehen des Fingers aufgeht,
   trifft niemand absichtlich. */


.klappe {
    position: absolute; top: calc(100% + 9px); left: -12px; z-index: 20;
    min-width: 250px; display: flex; flex-direction: column; gap: 2px;
    padding: 7px; background: #fff; border: 1px solid var(--linie);
    border-radius: 7px; box-shadow: 0 10px 28px rgba(20, 22, 50, .16); }
/* Im Untermenue markiert eine Flaeche, kein Unterstrich -- der Rahmen von
   header nav a gilt hier also nicht. */

/* Unter 1150 Punkten geht das Suchfeld auf eine eigene Zeile, statt die
   Menuepunkte zu quetschen. Es ist das einzige Feld hier, das ohne Verlust
   umziehen kann -- der Barcode-Scanner tippt hinein, egal wo es steht. */
@media (max-width: 1150px) {
}
main { max-width: 1360px; margin: 0 auto; padding: 26px 30px 40px; width: 100%; }
/* --- Fußleiste: oben der Kunde, unten der Hersteller --------------------- */
/* Die Oberfläche trägt die Farben der Wilfried Haugk GmbH. Wem die Software
   gehört, muss trotzdem auf jeder Seite erkennbar bleiben. */

footer { border-top: 1px solid var(--linie); background: #fff; margin-top: 30px; }
footer .hersteller { max-width: 1500px; margin: 0 auto; padding: 18px 22px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
footer img { height: 34px; width: auto; flex: none; }
footer .rechte { flex: 1; min-width: 260px; font-size: var(--schrift-klein); color: var(--grau);
                 line-height: 1.5; }
footer .rechte b { color: var(--ink, #1b1d33); }
footer .rechte .klein { font-size: var(--schrift-klein); }
footer .hilfe { display: flex; gap: 10px; align-items: center; }
footer .hilfe a { font-size: var(--schrift-klein); }
footer .hilfe a.haupt { padding: 8px 16px; }

h1 { font-size: var(--schrift-extragross); line-height: 1.25; margin: 0 0 14px; }
h2 { font-size: var(--schrift-gross); line-height: 1.25; margin: 22px 0 8px;
     color: var(--blau); }
h3 { font-size: var(--schrift-mittel); line-height: 1.25; margin: 18px 0 6px;
     color: #1b1d33; }
aside h2:first-child, section h2:first-child { margin-top: 0; }
.klein { font-size: var(--schrift-klein); color: var(--grau); }
.leer { color: var(--grau); font-style: italic; }
.kopfzeile { display: flex; align-items: center; gap: 14px; justify-content: space-between;
             flex-wrap: wrap; margin-bottom: 12px; }

/* .knoepfe gibt es weiter unten schon (Betriebsanweisung) -- hier nur der
   Rand, den eine Kopfzeile nicht braucht. Vierte Namenskollision in diesem
   Projekt nach .marke, .punkt und .kachel; vor einem neuen Namen erst suchen. */
.kopfzeile .knoepfe { margin: 0; align-items: center; }

/* "Was ansteht" ist nach Bereichen geteilt: Geraete, Unterweisungen,
   Sonstiges. Wer morgens draufsieht, sucht selten alles auf einmal. */
h3.anstehend { margin: 22px 0 6px; border-bottom: 1px solid var(--linie);
               padding-bottom: 5px; }
h3.anstehend:first-of-type { margin-top: 8px; }
p.wozu { font-size: var(--schrift-klein); color: var(--grau); margin: 10px 0 4px; }

/* Offene Auflagen stehen ueber allem anderen -- sie haben eine Frist und
   einen Absender. Nur wenn welche offen sind: Ein dauerhaft leerer Kasten
   wird nach zwei Tagen nicht mehr gelesen. */
.auflagenband { background: #fff; border: 1px solid var(--rot);
                border-left: 5px solid var(--rot); border-radius: 6px;
                padding: 14px 18px; margin-bottom: 18px; }
.auflagenband h2 { margin: 0 0 8px; color: var(--rot); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           gap: 12px; margin-bottom: 22px; }
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
          padding: 14px; text-align: center; text-decoration: none;
          color: #1b1d33; display: block; }
a.kachel:hover { background: var(--blau-hell); border-color: var(--blau); }
.kachel b { display: block; font-size: var(--schrift-extragross); line-height: 1.25; }
.kachel span { font-size: var(--schrift-klein); color: var(--grau); }
.kachel.rot b { color: var(--rot); } .kachel.gelb b { color: var(--gelb); }
.kachel.gruen b { color: var(--gruen); }

.reihe { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
         gap: 22px; align-items: start; }
section.breit, aside { background: #fff; border: 1px solid var(--linie);
                       border-radius: 6px; padding: 18px; }
/* minmax(0, 1fr), nicht nur 1fr: eine Spalte ohne die 0 darf nicht schmaler
   werden als ihr Inhalt -- die breite Tabelle in "Was ansteht" hätte sonst
   die ganze Seite seitlich scrollbar gemacht statt nur sich selbst. */
@media (max-width: 1000px) { .reihe { grid-template-columns: minmax(0, 1fr); } }

table { width: 100%; border-collapse: collapse; font-size: var(--schrift-mittel); background: #fff; }
th { text-align: left; font-size: var(--schrift-klein); text-transform: uppercase; letter-spacing: .04em;
     color: var(--grau); padding: 8px 10px; border-bottom: 2px solid var(--linie); }
td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr.grau td { color: var(--grau); background: #fafbfd; }
td.mitte, th.mitte { text-align: center; white-space: nowrap; }
table.paare th { width: 160px; text-transform: none; letter-spacing: 0; font-size: var(--schrift-mittel);
                 font-weight: 500; border-bottom: 1px solid var(--linie); }

.nr { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 700;
      white-space: nowrap; }

/* Eine Zeile, die irgendwohin fuehrt (zeilen.js), zeigt das auch: Zeiger und
   Einfaerben unter der Maus. Der echte Verweis in der ersten Zelle bleibt --
   Tastatur und Mausrad-Klick haengen an ihm. */
tr[data-weg] { cursor: pointer; }
tr[data-weg]:hover td { background: var(--blau-hell); }

/* --- Die ganze Zeile ist der Weg in die Akte ----------------------------- */
/* In einer Liste meint der Benutzer die Zeile und nicht die Nummer am
   linken Rand. Der Verweis in der ersten Zelle bleibt trotzdem stehen --
   an ihm haengen Tastatur, Mausrad-Klick und die Zieladresse in der
   Statusleiste (siehe static/zeilen.js). Er traegt hier nur keinen Strich
   mehr: Was unterstrichen ist, sieht aus, als waere es das Einzige, was
   klickt. */
tr[data-weg] { cursor: pointer; }
tr[data-weg]:hover td { background: var(--blau-hell); }
tr[data-weg] a.nr, tr[data-weg] td > a:first-child {
    text-decoration: none; color: inherit; }
tr[data-weg]:hover a.nr, tr[data-weg]:hover td > a:first-child {
    color: var(--blau); }
.nr.gross { font-size: var(--schrift-extragross); color: var(--blau); }
/* Achtung, vergebener Name: .punkt ist die runde Statusanzeige und nichts
   anderes. Die Wege in der Seitenleiste heissen .navpunkt -- siebte
   Namenskollision in diesem Projekt (nach .marke, .punkt, .kachel, .rechts
   und .hilfe); vor einem neuen Namen erst suchen. */
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
         margin-right: 7px; vertical-align: middle; background: var(--grau); }
.punkt.rot { background: var(--rot); } .punkt.gelb { background: var(--gelb); }
.punkt.gruen { background: var(--gruen); } .punkt.grau { background: #A39C8E; }

button, .haupt { background: var(--blau); color: #fff; border: 0; border-radius: 4px;
                 padding: 9px 16px; font-size: var(--schrift-mittel); font-weight: 600; cursor: pointer;
                 text-decoration: none; display: inline-block; font-family: var(--schrift); }
button:hover, .haupt:hover { background: #12211A; }
a.haupt { color: #fff; }

/* Was etwas tut, sieht aus wie ein Knopf -- auch wenn es technisch ein Verweis
   ist. Blau fuehrt (.haupt), weiss mit blauer Schrift ist die zweite Reihe:
   gleich gross und gleich anfassbar, aber nicht die Hauptsache der Seite. Ein
   Verweis, der als blosser Text zwischen zwei Knoepfen steht, sieht aus wie
   eine Fussnote und wird entsprechend selten gefunden. */
.knopf { background: #fff; color: var(--blau); border: 1px solid var(--linie);
         border-radius: 4px; padding: 9px 16px; font-size: var(--schrift-mittel);
         font-weight: 600; cursor: pointer; text-decoration: none;
         display: inline-block; font-family: var(--schrift); }
.knopf:hover { background: var(--blau-hell); border-color: var(--blau); }
.knopf.schmal { padding: 5px 11px; font-size: var(--schrift-klein); }

/* --- Das Fragezeichen: Erklaerung auf Verlangen -------------------------- */
/* Erklaerungen, die dauerhaft unter jedem Knopf stehen, liest man zweimal und
   danach nie wieder. Sie machen die Seite lang und den Knopf klein. Hier
   steht die Erklaerung da, wo die Frage entsteht -- aber erst, wenn jemand
   sie sucht. */
.hilfe { position: relative; display: inline-flex; align-items: center;
         justify-content: center; width: 18px; height: 18px; flex: none;
         border-radius: 50%; border: 1px solid var(--linie); background: #fff;
         color: var(--grau); font-size: var(--schrift-klein); font-weight: 700; cursor: help;
         vertical-align: 1px; margin-left: 7px; user-select: none;
         font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.hilfe:hover, .hilfe:focus { border-color: var(--blau); color: var(--blau);
                             background: var(--blau-hell); outline: none; }
.hilfe .blase {
    font-family: var(--schrift); font-style: normal;
    /* Wie weit die Blase aus ihrer Sollstellung geschoben wurde, damit sie
       ins Fenster passt. Rechnet hilfe.js beim Oeffnen aus; ohne das Skript
       bleibt es bei 0 und alles steht wie zuvor. */
    --schub: 0px;
    position: absolute; bottom: calc(100% + 9px); z-index: 30;
    /* Nie breiter als das Fenster: Auf dem Handy sind 330px fast die ganze
       Breite, und eine Blase, die schon von sich aus nicht hineinpasst,
       kann auch kein Schub mehr retten. */
    width: max-content; max-width: min(330px, calc(100vw - 24px));
    background: #1b1d33; color: #fff;
    font-size: var(--schrift-klein); font-weight: 400; line-height: 1.5; text-align: left;
    padding: 10px 13px; border-radius: 6px; white-space: normal;
    box-shadow: 0 8px 22px rgba(20, 22, 50, .3);
    opacity: 0; visibility: hidden; transition: opacity .12s ease; }
.hilfe .blase b { color: #fff; }
.hilfe .blase code { display: inline-block; overflow-wrap: anywhere;
                     background: rgba(255, 255, 255, .12); border-radius: 3px;
                     padding: 1px 4px; font-size: var(--schrift-klein); }
/* Die Seitenangabe im Makro (hilfe("links") und Geschwister) ist nur noch
   die Sollstellung -- wohin die Blase zeigt, wenn ringsum Platz ist. Wo das
   i im fertigen Layout wirklich steht, weiss beim Schreiben der Vorlage
   niemand: Dieselbe Ueberschrift sitzt am breiten Bildschirm in der Mitte
   und am schmalen ganz links. Deshalb misst hilfe.js beim Oeffnen nach und
   schiebt ueber --schub nach, bis die Blase im Fenster steht. */
.hilfe-mitte  .blase { left: 50%; transform: translateX(calc(-50% + var(--schub))); }
.hilfe-rechts .blase { right: 0; transform: translateX(var(--schub)); }
.hilfe-links  .blase { left: 0; transform: translateX(var(--schub)); }
.hilfe:hover .blase, .hilfe:focus .blase { opacity: 1; visibility: visible; }
h1 .hilfe, h2 .hilfe, h3 .hilfe { vertical-align: 3px; }
/* Am Seitentitel oeffnet die Blase nach unten: ueber dem h1 sitzt die
   Kopfleiste, dort wuerde sie abgeschnitten. Dieselbe Regel setzt hilfe.js
   als Klasse, wenn oben auch anderswo kein Platz ist. */
h1 .hilfe .blase, .hilfe .blase.nach-unten { bottom: auto; top: calc(100% + 9px); }
/* ... und umgekehrt: Steht das i so weit unten, dass die nach unten
   geoeffnete Blase aus dem Fenster faellt, klappt sie wieder nach oben. */
.hilfe .blase.nach-oben { top: auto; bottom: calc(100% + 9px); }

/* --- Das Dateifeld sieht aus wie ein Knopf ------------------------------- */
/* Das Feld des Browsers sieht auf jedem System anders aus und auf allen alt.
   Es steckt deshalb unsichtbar in seiner Beschriftung; der Name der
   gewaehlten Datei kommt aus static/datei.js daneben. Ohne Skript bleibt es
   ein ganz gewoehnliches Dateifeld -- nur ohne Namensanzeige. */
.dateiwahl { display: inline-flex; align-items: center; gap: 10px;
             flex-wrap: wrap; }
.dateiwahl input[type="file"] { position: absolute; width: 1px; height: 1px;
                                opacity: 0; overflow: hidden; }
.dateiwahl label.knopf { margin: 0; }
/* Sichtbar, wohin die Tastatur gerade zeigt -- das Feld selbst ist ja weg. */
.dateiwahl input[type="file"]:focus + span,
.dateiwahl label.knopf:focus-within { border-color: var(--blau);
                                      background: var(--blau-hell); }
.dateiname { font-size: var(--schrift-klein); color: var(--grau); overflow-wrap: anywhere; }
.dateiname.gewaehlt { color: #1b1d33; font-weight: 600; }
/* Ein Kasten je Sache statt einer Rolle. Drucker, Mailversand und die
   Angaben fuer die Betriebsanweisung haben nichts miteinander zu tun --
   nebeneinander in einem Raster sahen sie aus, als haetten sie es. */
.einstellblock { background: #fff; border: 1px solid var(--linie);
                 border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; }
.einstellblock > h2:first-child { margin-top: 0; }
.einstellblock .spalten { margin-top: 10px; }
.einstellblock form { margin: 0; }

/* --- Messwerte erfassen -------------------------------------------------- */
/* Ein Kasten je Wert: das Feld gross genug fuer den Daumen, daneben die
   Einheit, darunter der Grenzwert. Der Grenzwert steht sichtbar dabei und
   nicht in einer Fussnote -- wer misst, will beim Eintippen wissen, ob der
   Wert reicht. */
fieldset.messwerte { border: 1px solid var(--linie); border-radius: 6px;
                     padding: 12px 14px; margin: 12px 0; background: #fff; }
fieldset.messwerte > legend { font-size: var(--schrift-klein); font-weight: 600;
                              color: var(--blau); padding: 0 6px; }
.messwert { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.messwert:last-child { border-bottom: 0; padding-bottom: 0; }
.messwert .wert { display: flex; align-items: center; gap: 12px;
                  justify-content: space-between; flex-wrap: wrap; }
.messwert .was { font-weight: 600; font-size: var(--schrift-mittel); }
.messwert .was .klein { font-weight: 400; display: block; }
.messwert .feld { display: inline-flex; align-items: baseline; gap: 6px; }
.messwert .feld input { width: 120px; padding: 8px 10px; font-size: var(--schrift-mittel);
                        text-align: right; border: 1px solid var(--linie);
                        border-radius: 4px; font-family: var(--schrift); }
.messwert .einheit { font-size: var(--schrift-mittel); color: var(--grau); min-width: 28px; }
.messwert .grenze { margin: 4px 0 0; }
.messwert .grund { width: 100%; margin-top: 6px; padding: 6px 9px;
                   font-size: var(--schrift-klein); border: 1px dashed var(--linie);
                   border-radius: 4px; font-family: var(--schrift); }
table.messwerte td.wert { font-variant-numeric: tabular-nums;
                          white-space: nowrap; font-weight: 600; }

.dateiform { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             background: #fff; border: 1px solid var(--linie);
             border-radius: 6px; padding: 14px 16px; margin: 10px 0 4px; }

.formular { display: flex; flex-direction: column; gap: 10px; }
.formular label { display: flex; flex-direction: column; gap: 3px; font-size: var(--schrift-klein);
                  color: var(--grau); }
.formular input, .formular select, .filter input, .filter select {
    padding: 8px 10px; border: 1px solid var(--linie); border-radius: 4px;
    font-size: var(--schrift-mittel); font-family: var(--schrift); color: #1b1d33; background: #fff; }
.filter { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.formular.breit { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
                  padding: 18px; }
.auswahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 8px; margin-bottom: 16px; }
.kasten { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--linie);
          border-radius: 4px; padding: 9px 11px; color: #1b1d33; font-size: var(--schrift-klein); }
/* .formular label stellt alle Beschriftungen untereinander -- fuer ein
   Ankreuzfeld ist das falsch, da gehoert das Kaestchen neben den Text. Die
   Regel muss die des Formulars ueberbieten, sonst gewinnt deren hoehere
   Genauigkeit und das Kaestchen rutscht wieder nach oben. */
.formular label.kasten { flex-direction: row; align-items: flex-start; gap: 9px; }

/* Ein ausgeblendetes Feld muss auch verschwinden. Das display:flex der Zeile
   darueber schlaegt sonst die UA-Regel fuer [hidden] -- die ist nur
   display:none auf einem Element ohne Klasse und verliert jeden Wettstreit.
   Ohne diese Zeile bleibt „Wieder ansehen bis“ stehen, obwohl das Skript es
   ausgeblendet hat. */
.formular label[hidden] { display: none; }
.formular p[hidden] { display: none; }

/* Die Unterlagentabelle steht in der schmalen Spalte neben dem Etikett. Ohne
   feste Breiten zieht ein langer Dateiname sie ueber den Rand hinaus, und der
   Knopf am Ende landet unter dem Nebenkasten. */
/* Am Rechner passt die Tabelle in ihre Spalte, am Handy nicht -- fuenf
   Spalten mit Datum und Knopf gehen auf 375 Punkten nicht auf. Dann schiebt
   sie sich in ihrem eigenen Rahmen zur Seite, statt aus der Seite zu ragen.
   Am Rechner ist der Rahmen unsichtbar: was passt, scrollt nicht. */
.quer { overflow-x: auto; }

table.unterlagen { min-width: 430px; }
/* Nur der Dateiname darf mitten im Wort umbrechen -- er ist das einzige, was
   hier unteilbar lang wird. Auf die ganze Zelle angewandt zerriss die Regel
   auch „Bedienungsanleitung“; die trennt sich stattdessen mit Trennstrich. */
table.unterlagen td { overflow-wrap: break-word; }
table.unterlagen td:first-child { hyphens: auto; }
table.unterlagen td .klein { overflow-wrap: anywhere; }

/* Feste Spaltenbreiten erst da, wo die Tabelle neben dem Etikettenkasten
   steht: dort muss sie in ihre 700 Punkte passen. Am Handy steht sie allein
   und darf sich nach ihrem Inhalt richten -- feste Breiten machten sie dort
   doppelt so breit wie noetig. */
@media (min-width: 1001px) {
    table.unterlagen { table-layout: fixed; }
    table.unterlagen th:nth-child(1) { width: 24%; }
    table.unterlagen th:nth-child(3) { width: 11%; }
    table.unterlagen th:nth-child(4) { width: 15%; }
    table.unterlagen th:nth-child(5) { width: 16%; }
}
.formular label.kasten input { margin-top: 2px; flex: none; }
.kasten span { display: flex; flex-direction: column; }
.kasten .klein { font-weight: 400; }

.warnung { background: var(--rot-hell); border-left: 4px solid var(--rot);
           padding: 12px 16px; border-radius: 0 4px 4px 0; margin-bottom: 18px; }
.hinweis { background: var(--blau-hell); border-left: 4px solid var(--blau);
           padding: 12px 16px; border-radius: 0 4px 4px 0; margin-bottom: 16px; }
.hinweis ol { margin: 6px 0; padding-left: 20px; }
.meldung { padding: 14px 18px; border-radius: 6px; margin-bottom: 16px; }
.meldung.gut { background: var(--gruen-hell); border-left: 4px solid var(--gruen); }
.meldung.schlecht { background: var(--rot-hell); border-left: 4px solid var(--rot); }

.etikett { width: 100%; border: 1px solid var(--linie); background: #fff;
           margin-bottom: 10px; }
ul.journal { list-style: none; padding: 0; margin: 0; font-size: var(--schrift-klein); }
ul.journal li { padding: 5px 0; border-bottom: 1px solid var(--linie); }
.nochmal { margin-top: 18px; padding: 14px; background: #fff;
           border: 1px solid var(--linie); border-radius: 6px; display: flex;
           flex-direction: column; gap: 10px; align-items: flex-start; }

/* --- Kategorien als aufklappbare Gruppen --------------------------------- */

details.gruppe { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
                 margin-bottom: 10px; overflow: hidden; }
details.gruppe > summary {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    cursor: pointer; list-style: none; user-select: none;
    border-left: 4px solid var(--blau); background: #fbfbfe; }
details.gruppe > summary::-webkit-details-marker { display: none; }
details.gruppe > summary::before {
    content: "▸"; color: var(--blau); font-size: var(--schrift-klein); width: 12px;
    transition: transform .12s ease; }
details.gruppe[open] > summary::before { transform: rotate(90deg); }
details.gruppe > summary:hover { background: var(--blau-hell); }
details.gruppe > summary .kuerzel {
    font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 700;
    background: var(--blau); color: #fff; border-radius: 3px; padding: 1px 8px;
    font-size: var(--schrift-klein); }
details.gruppe > summary .name { font-weight: 600; }
details.gruppe > summary .offen { margin-left: auto; white-space: nowrap; }
details.gruppe > table { border-top: 1px solid var(--linie); }
details.gruppe > table th { background: #fff; }
details.gruppe > table tr:last-child td { border-bottom: 0; }
.klappen { margin-left: auto; display: flex; gap: 8px; }
.klappen button { background: #fff; color: var(--blau); border: 1px solid var(--linie);
                  font-weight: 500; }
.klappen button:hover { background: var(--blau-hell); }
h1 .klein { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
    details.gruppe > summary::before { transition: none; }
}

/* --- Schnellzugriff auf der Übersicht ------------------------------------ */
/* Die vier Dinge, die man wirklich täglich tut, ohne Umweg über ein Menü. */

.schnellzugriff { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
                  gap: 12px; margin-bottom: 22px; }
.tat { display: flex; flex-direction: column; gap: 3px; background: #fff;
       border: 1px solid var(--linie); border-left: 4px solid var(--blau);
       border-radius: 6px; padding: 13px 16px; text-decoration: none;
       color: #1b1d33; }
.tat:hover { background: var(--blau-hell); border-left-color: var(--rot); }
.tat b { color: var(--blau); font-size: var(--schrift-mittel); }
.tat span { font-size: var(--schrift-klein); color: var(--grau); line-height: 1.5; }

/* --- Betriebsprüfungen und Auflagen -------------------------------------- */

ul.auflagen { list-style: none; padding: 0; margin: 0; font-size: var(--schrift-klein); }
ul.auflagen li { display: flex; gap: 2px; align-items: flex-start;
                 padding: 7px 0; border-bottom: 1px solid var(--linie); }
ul.auflagen li span span { display: block; }
.fliesstext { white-space: pre-wrap; background: var(--flaeche); padding: 12px 14px;
              border-radius: 4px; margin: 0 0 8px; }
textarea { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 4px;
           font-size: var(--schrift-mittel); font-family: var(--schrift); color: #1b1d33;
           resize: vertical; }
button.schmal { padding: 5px 10px; font-size: var(--schrift-klein); background: #fff;
                color: var(--blau); border: 1px solid var(--linie); }
button.schmal:hover { background: var(--blau-hell); }
form.nachreichen { display: flex; gap: 6px; align-items: center; }
form.nachreichen input[type="file"] { max-width: 130px; font-size: var(--schrift-klein); }
.kuerzel { font-family: ui-monospace, "SF Mono", Consolas, monospace;
           font-weight: 700; background: var(--blau); color: #fff;
           border-radius: 3px; padding: 1px 8px; font-size: var(--schrift-klein); }
.kasten.breit { display: inline-flex; align-items: center; }
.auswahl.eng { grid-template-columns: 1fr; max-height: 330px; overflow-y: auto;
               border: 1px solid var(--linie); border-radius: 4px; padding: 8px;
               gap: 4px; }
.auswahl.eng .kasten { border: 0; padding: 5px 7px; }
aside h2 { margin-top: 20px; }

/* --- Prüfen am Gerät: für den Daumen gebaut ------------------------------ */
/* Wer im Lager vor einer Leiter steht, hat eine Hand frei. Flächen sind
   deshalb groß, und nach dem Speichern geht es zurück in die Liste. */

.scanfeld { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
            padding: 14px 16px; margin-bottom: 16px; display: flex;
            flex-direction: column; gap: 10px; }
.nummerneingabe { display: flex; gap: 8px; }
.nummerneingabe input { flex: 1; min-width: 0; padding: 12px 14px; font-size: var(--schrift-gross);
    font-family: ui-monospace, "SF Mono", Consolas, monospace; text-transform: uppercase;
    border: 1px solid var(--linie); border-radius: 4px; }
/* Nur die Eingabe wird groß geschrieben, der Platzhalter bleibt lesbar. */
.nummerneingabe input::placeholder { text-transform: none; font-family: var(--schrift);
    font-size: var(--schrift-mittel); }
button.scan { padding: 13px 16px; font-size: var(--schrift-mittel); }
button.scan:disabled { background: #c9cddd; cursor: not-allowed; }
#scanbereich { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* display:flex schlaegt das hidden-Attribut -- ohne diese Zeile steht der
   schwarze Kamerakasten dauerhaft auf der Seite. */
#scanbereich[hidden] { display: none; }
#scanbild { width: 100%; max-width: 480px; border-radius: 6px; background: #000; }

ul.pruefliste { list-style: none; padding: 0; margin: 0; }
ul.pruefliste li { border-bottom: 1px solid var(--linie); background: #fff; }
ul.pruefliste li:first-child { border-top: 1px solid var(--linie);
                               border-radius: 6px 6px 0 0; }
ul.pruefliste li:last-child { border-radius: 0 0 6px 6px; }
ul.pruefliste a { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
                  text-decoration: none; color: #1b1d33; }
ul.pruefliste a:hover { background: var(--blau-hell); }
.mitte-spalte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mitte-spalte b { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.rechts { text-align: right; display: flex; flex-direction: column;
          white-space: nowrap; font-size: var(--schrift-klein); }

.zurueck { margin: 0 0 10px; }
.geraetkopf { background: #fff; border: 1px solid var(--linie);
              border-left: 4px solid var(--blau); border-radius: 6px;
              padding: 14px 16px; margin-bottom: 14px; display: flex;
              flex-direction: column; gap: 2px; }
.geraetkopf b { font-size: var(--schrift-gross); }

.pruefkarte { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
              padding: 14px 16px; margin-bottom: 14px; display: flex;
              flex-direction: column; gap: 10px; }
.pruefkopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pruefkopf b { font-size: var(--schrift-mittel); }
.umfang { margin: -4px 0 0; }
.pruefkarte label { display: flex; flex-direction: column; gap: 3px; color: var(--grau); }
.pruefkarte input, .pruefkarte select { padding: 11px 12px; font-size: var(--schrift-mittel);
    border: 1px solid var(--linie); border-radius: 4px; font-family: var(--schrift); }
.knopfreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.knopfreihe button { padding: 15px 8px; font-size: var(--schrift-mittel); }
.knopfreihe .gut { background: var(--gruen); }
.knopfreihe .warn { background: var(--gelb); }
.knopfreihe .schlimm { background: var(--rot); }
ul.verlauf { list-style: none; padding: 0; margin: 0; font-size: var(--schrift-klein); }
ul.verlauf li { padding: 6px 0; border-bottom: 1px solid var(--linie); }

/* --- Handy --------------------------------------------------------------- */

@media (max-width: 640px) {
    /* Am Handy wachsen die Stufen selbst -- alles, was auf sie zeigt,
       waechst mit. 16px in Eingabefeldern verhindert ausserdem, dass das
       Handy beim Antippen in die Seite hineinspringt. */
    :root { --schrift-mittel: 16px; --schrift-extragross: 22px; }
    /* Kein seitlich scrollender Streifen mehr: er wuerde die Klappe
       abschneiden. Die Leiste umbricht stattdessen, und das Untermenue legt
       sich ueber die ganze Breite der Zeile -- so ist es mit dem Daumen zu
       treffen, egal welcher Punkt es aufgemacht hat. */
    /* flex-basis: 100% statt nur width -- das "flex: 1" der Desktop-Regel
       setzt sonst weiterhin flex-basis: 0 und die Leiste bleibt schmal. */
    .klappe { left: 0; right: 0; min-width: 0; top: calc(100% + 6px); }
    main { padding: 12px; }
    .kacheln { grid-template-columns: repeat(2, 1fr); }
    .schnellzugriff { grid-template-columns: 1fr; }
    .knopfreihe { grid-template-columns: 1fr; }
    .spalten { grid-template-columns: 1fr; }
    /* Breite Tabellen dürfen seitlich scrollen, die Seite selbst nie. */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    ul.pruefliste a { padding: 16px 14px; }
}

/* --- Warteschlange im Funkloch ------------------------------------------- */
/* Sichtbar nur, wenn wirklich etwas wartet -- eine dauerhafte Leiste würde
   nach dem zweiten Tag niemand mehr lesen. */

.warteleiste { position: sticky; bottom: 0; z-index: 5; display: flex;
               align-items: center; gap: 12px; justify-content: space-between;
               background: var(--gelb-hell); border: 1px solid var(--gelb);
               border-radius: 6px; padding: 11px 14px; margin-top: 14px;
               font-size: var(--schrift-mittel); }
.warteleiste[hidden] { display: none; }
.warteleiste button { background: var(--blau); padding: 9px 14px; }
.warteleiste button:disabled { background: #A39C8E; }

ul.pruefliste li.erledigt { background: var(--gruen-hell); }
ul.pruefliste li.erledigt .rechts { color: var(--gruen); font-weight: 600; }

/* --- Handbuch ------------------------------------------------------------ */
/* Fließtext bleibt schmal: über die volle Bildschirmbreite findet das Auge
   den Zeilenanfang nicht wieder. */

.handbuch { background: #fff; border: 1px solid var(--linie); border-radius: 6px;
            padding: 24px 28px; max-width: 900px; }
.handbuch p, .handbuch li { max-width: 70ch; }
.handbuch h2 { margin-top: 26px; border-bottom: 1px solid var(--linie);
               padding-bottom: 5px; }
.handbuch .lede { font-size: var(--schrift-mittel); color: var(--grau); margin-bottom: 4px; }
.handbuch ol, .handbuch ul { padding-left: 22px; }
.handbuch li { margin-bottom: 6px; }
.handbuch .kasten { display: block; background: var(--blau-hell);
                    border: 0; border-left: 4px solid var(--blau);
                    border-radius: 0 4px 4px 0; padding: 12px 16px; margin: 14px 0;
                    max-width: 74ch; }
.handbuch .kasten .titel { font-weight: 700; margin-bottom: 4px; }
.handbuch .kasten p:last-child { margin-bottom: 0; }
.handbuch table { margin-bottom: 18px; }
.handbuch td.eng { font-weight: 600; width: 190px; }

/* --- Anmeldung ----------------------------------------------------------- */

body.schmalseite { display: flex; flex-direction: column; min-height: 100vh; }
main.anmeldung { max-width: 380px; margin: 8vh auto auto; background: #fff;
                 border: 1px solid var(--linie); border-top: 4px solid var(--blau);
                 border-radius: 6px; padding: 28px; }
main.anmeldung .kundenlogo { height: 46px; margin-bottom: 18px; }
main.anmeldung h1 { font-size: var(--schrift-extragross); margin-bottom: 14px; }
main.anmeldung .formular { margin-bottom: 14px; }
main.anmeldung input { font-size: var(--schrift-mittel); }
footer.schlank { margin-top: auto; display: flex; align-items: center; gap: 12px;
                 justify-content: center; padding: 20px; color: var(--grau);
                 font-size: var(--schrift-klein); }
footer.schlank img { height: 24px; }

/* --- Das Kontofenster in der Kopfzeile ----------------------------------- */
/* Name, Rolle und Abmelden standen frei nebeneinander in der Leiste und sahen
   aus wie drei weitere Menuepunkte. Jetzt ist es ein Kasten: zu, solange
   niemand ihn braucht, und aufgeklappt das, was zum eigenen Konto gehoert --
   die Rechte, der Weg zur eigenen Seite, das Abmelden. */

details.konto > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    list-style: none; user-select: none; white-space: nowrap;
    border: 1px solid var(--linie); border-radius: 5px; padding: 5px 11px;
    background: #fff; }
details.konto > summary::-webkit-details-marker { display: none; }
details.konto > summary::after {
    content: "\25be"; font-size: var(--schrift-klein); color: var(--grau);
    transition: transform .12s ease; }
details.konto[open] > summary { border-color: var(--blau);
                                background: var(--blau-hell); }
details.konto[open] > summary::after { transform: rotate(180deg); }
details.konto > summary:hover { background: var(--blau-hell); }
details.konto .name { font-weight: 600; font-size: var(--schrift-mittel); }
details.konto .rolle { font-size: var(--schrift-klein); color: var(--grau); }

/* Nach links aufklappen: der Kasten steht am rechten Rand, ein Menue, das
   nach rechts aufgeht, staende halb ausserhalb des Fensters. */
details.konto > .klappe { left: auto; right: 0; min-width: 235px; }
details.konto .klappe a {
    display: flex; flex-direction: column; gap: 1px; padding: 8px 11px;
    border-radius: 5px; text-decoration: none; color: #1b1d33;
    font-weight: 600; font-size: var(--schrift-mittel); }
details.konto .klappe a span { font-size: var(--schrift-klein); font-weight: 400;
                               color: var(--grau); }
details.konto .klappe a:hover { background: var(--blau-hell); }
details.konto .klappe form { margin: 0; padding: 4px 4px 0;
                             border-top: 1px solid var(--linie); }
details.konto .klappe form button { width: 100%; }
/* Die Rechte stehen im Fenster, nicht in der Leiste: Wer sie liest, liest sie
   einmal -- danach zaehlt der eigene Name. */
details.konto .anspruch { padding: 8px 11px 10px; font-size: var(--schrift-klein);
                          color: var(--grau); line-height: 1.5;
                          border-bottom: 1px solid var(--linie);
                          margin-bottom: 4px; }
details.konto .anspruch b { display: block; color: #1b1d33; font-size: var(--schrift-klein); }

@media (max-width: 640px) {
    details.konto .rolle { display: none; }
    /* Der Kasten steht am rechten Rand. Ein Fenster von 235 Punkten haengt
       darunter auf dem Handy links aus dem Bildschirm heraus -- also spannt
       es sich dort ueber die ganze Kopfzeile, genau wie die Untermenues.
       Steht hinter dem Block oben und nicht im grossen Handy-Abschnitt
       weiter vorn: bei gleicher Spezifitaet gewinnt die spaetere Regel. */
    details.konto { position: static; }
    details.konto > .klappe { left: 12px; right: 12px; min-width: 0; }
}

/* --- Stapeldruck --------------------------------------------------------- */

.druckleiste { position: sticky; top: 0; z-index: 4; display: flex; gap: 16px;
               align-items: flex-end; background: #fff; border: 1px solid var(--linie);
               border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; }
.druckleiste label { display: flex; flex-direction: column; gap: 3px;
                     font-size: var(--schrift-klein); color: var(--grau); }
.druckleiste select { padding: 8px 10px; border: 1px solid var(--linie);
                      border-radius: 4px; font-family: var(--schrift); }
/* Die Rolle rueckt an den rechten Rand, direkt neben den Druckknopf: Sie
   ist die letzte Entscheidung vor dem Druck und gehoert dorthin, wo gedruckt
   wird -- nicht an den Anfang der Leiste. */
.druckleiste .anzahl { margin-right: auto; font-size: var(--schrift-mittel); color: var(--grau); }
.druckleiste .anzahl b { font-size: var(--schrift-mittel); color: #1b1d33; }
.druckleiste label { flex: none; }
.druckleiste button[type="button"] { background: #fff; color: var(--blau);
                                     border: 1px solid var(--linie); }
.filter .kasten { padding: 7px 11px; }

/* --- Anlege-Formulare in den Stammdaten: zugeklappt ---------------------- */
/* Fuenf Formulare untereinander sind eine Wand, von der taeglich hoechstens
   eines gebraucht wird. Zugeklappt bleibt die Liste links lesbar. */

details.anlegen { border: 1px solid var(--linie); border-radius: 6px;
                  margin-bottom: 10px; background: #fff; }
details.anlegen > summary { cursor: pointer; padding: 10px 13px; font-weight: 600;
                            font-size: var(--schrift-mittel); color: var(--blau);
                            list-style: none; display: flex; align-items: center;
                            gap: 8px; }
details.anlegen > summary::-webkit-details-marker { display: none; }
details.anlegen > summary::before { content: "+"; font-size: var(--schrift-mittel); line-height: 1;
                                    color: var(--grau); width: 12px; }
details.anlegen[open] > summary::before { content: "−"; }
details.anlegen[open] > summary { border-bottom: 1px solid var(--linie); }
details.anlegen .formular { padding: 13px; }

/* --- Checkliste beim Erfassen einer Prüfung ------------------------------ */
/* Durchklicken statt tippen: die Antwort steht schon auf "Ja", ein Nein ist
   der Ausnahmefall und bekommt daneben Platz fuer die Bemerkung. */

fieldset.checkliste { border: 1px solid var(--linie); border-radius: 6px;
                      padding: 12px 13px; margin: 4px 0; }
fieldset.checkliste[hidden] { display: none; }
fieldset.checkliste legend { font-size: var(--schrift-klein); font-weight: 600; color: var(--blau);
                             padding: 0 5px; }
fieldset.checkliste .pruefpunkt { padding: 9px 0; border-bottom: 1px solid var(--linie); }
fieldset.checkliste .pruefpunkt:last-child { border-bottom: 0; padding-bottom: 0; }
fieldset.checkliste .frage { margin: 0 0 2px; font-size: var(--schrift-klein); }
fieldset.checkliste .klein { margin: 0 0 5px; }
fieldset.checkliste .antworten { display: flex; gap: 14px; margin-bottom: 6px; }
/* flex-direction ausdruecklich: .formular label stellt sonst alles
   untereinander -- hier soll die Beschriftung neben den Knopf. */
fieldset.checkliste .antworten label { display: inline-flex; flex-direction: row;
                                       align-items: center; gap: 5px;
                                       font-size: var(--schrift-klein); cursor: pointer; }
/* Ohne die eigene Groesse werden die Knoepfe von ".pruefkarte input"
   (11px Innenabstand, fuer Textfelder am Handy gedacht) verformt. 20px sind
   zugleich gross genug fuer den Daumen im Lager. */
fieldset.checkliste .antworten input[type="radio"] {
    flex: none; margin: 0; padding: 0; width: 20px; height: 20px; }
fieldset.checkliste .antworten label { padding: 4px 0; }
fieldset.checkliste input[type="text"],
fieldset.checkliste .pruefpunkt > input:not([type="radio"]) {
    width: 100%; padding: 6px 9px; border: 1px solid var(--linie);
    border-radius: 4px; font-family: var(--schrift); font-size: var(--schrift-klein); }

/* --- Arbeitsschutz: Betriebsanweisungen und Unterweisungen ---------------- */

/* Die uebliche Farbe der Betriebsanweisung: orange Gefahrstoff, blau
   Maschine und Taetigkeit, gruen Biostoff. Dieselbe Zuordnung wie im PDF --
   wer die Liste am Bildschirm sieht und danach an die Wand schaut, soll
   dasselbe Zeichen wiederfinden.

   Heisst "farbstreifen" und nicht "marke": Der Name war vergeben -- das
   Kundenlogo in der Kopfzeile traegt ihn. Eine .marke mit width:4px hat es
   auf vier Pixel gestaucht, und der Fehler sah aus wie ein Fehler im
   Kopfzeilen-Layout. Dieselbe Falle wie .punkt bei der Checkliste in 1.4:
   Wer hier eine Klasse erfindet, sieht vorher nach, ob es sie schon gibt. */
.farbstreifen { display: inline-block; width: 4px; height: 13px;
                border-radius: 1px; margin-right: 7px; vertical-align: -2px;
                background: #A39C8E; }
.farbstreifen.orange { background: #D97706; }
.farbstreifen.blau   { background: var(--blau); }
.farbstreifen.gruen  { background: var(--gruen); }
.farbstreifen.gross  { width: 6px; height: 22px; vertical-align: -3px; }

table.katalog td { vertical-align: top; }

/* Der Katalog nach Art: je Gruppe eine eigene Suche und eigene Seiten.
   Vorher stand die Auswahl der Innung da und die uebrigen dreihundert
   Eintraege hinter einem Haken -- eine Liste, die vollstaendig aussah und
   es nicht war. */
details.gruppe > form.gruppensuche {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    border-top: 1px solid var(--linie); padding: 10px 13px; margin: 0;
    background: var(--flaeche); }
details.gruppe > form.gruppensuche input[name^="q_"] {
    flex: 1 1 240px; min-width: 0; padding: 8px 10px; font-size: var(--schrift-mittel);
    border: 1px solid var(--linie); border-radius: 4px;
    font-family: var(--schrift); }
.blaettern { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
             padding: 10px 13px; margin: 0;
             border-top: 1px solid var(--linie); }
.blaettern .klein { margin: 0 4px; }

/* Was der Fachverband fuer das SHK-Handwerk vorschlaegt, steht je Art oben
   und traegt eine Marke. Der Rest ist Katalog -- richtig, aber nicht
   ausgesucht. */
/* --- Listenkopf: Ueberschrift links, Suche und Filter rechts ------------- */
/* Ein gemeinsames Suchfeld ueber zwei Listen hat immer beide gefiltert --
   wer die eigenen durchsah, raeumte den Katalog mit ab. Jetzt sitzt das
   Werkzeug an der Ueberschrift der Liste, zu der es gehoert. Zugeklappt ist
   es ein Zeichen; ausgefahren wird es erst, wenn jemand es braucht. */
.listenkopf { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.listenkopf h2 { margin: 0; }
.listenkopf h2 .klein { font-weight: 400; margin-left: 6px; }
.werkzeuge { display: flex; gap: 6px; align-items: center; }

details.werkzeug { position: relative; }
details.werkzeug > summary {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    list-style: none; border: 1px solid var(--linie); background: #fff;
    color: var(--grau); }
details.werkzeug > summary::-webkit-details-marker { display: none; }
details.werkzeug > summary:hover { border-color: var(--blau); color: var(--blau);
                                   background: var(--blau-hell); }
details.werkzeug[open] > summary { border-color: var(--blau); color: var(--blau);
                                   background: var(--blau-hell); }
/* Gesetzt heisst: Diese Liste ist gerade eingeschraenkt. Ohne die Marke
   sucht man spaeter den Grund, warum die Liste so kurz ist. */
details.werkzeug.gesetzt > summary { border-color: var(--blau);
                                     background: var(--blau); color: #fff; }
details.werkzeug > .klappe { left: auto; right: 0; min-width: 290px; gap: 9px;
                            padding: 12px; }
details.werkzeug .klappe input[type="text"],
details.werkzeug .klappe input:not([type]) {
    width: 100%; padding: 8px 10px; border: 1px solid var(--linie);
    border-radius: 4px; font-size: var(--schrift-mittel); font-family: var(--schrift); }
details.werkzeug .klappe label { display: flex; flex-direction: column; gap: 3px;
                                 font-size: var(--schrift-klein); color: var(--grau); }
details.werkzeug .klappe label.kasten { flex-direction: row; }
details.werkzeug .klappe select { padding: 8px 10px; border: 1px solid var(--linie);
                                  border-radius: 4px; font-family: var(--schrift); }
details.werkzeug .klappe .knoepfe { margin: 2px 0 0; }

/* --- Das Auswahlfenster -------------------------------------------------- */
dialog.fenster { border: 1px solid var(--linie); border-radius: 8px;
                 padding: 20px 22px; max-width: 560px; width: calc(100% - 32px);
                 box-shadow: 0 20px 50px rgba(20, 22, 50, .3);
                 color: #1b1d33; font-family: var(--schrift); }
dialog.fenster::backdrop { background: rgba(20, 22, 50, .45); }
dialog.fenster h2 { margin-top: 0; }
dialog.fenster .auswahl.eng { max-height: 46vh; }

.innung { font-size: var(--schrift-klein); font-weight: 600; text-transform: uppercase;
          letter-spacing: .04em; color: var(--blau);
          background: var(--blau-hell); border-radius: 3px;
          padding: 1px 6px; vertical-align: 1px; }
table.katalog a { font-weight: 600; }

/* Ein Abschnitt der Betriebsanweisung: Ueberschrift und Text gehoeren
   zusammen und duerfen beim Blaettern nicht auseinanderfallen. */
.abschnitt { border: 1px solid var(--linie); border-radius: 6px;
             padding: 12px 13px; margin-bottom: 10px; background: #fff; }
.abschnitt label { margin-bottom: 8px; }
.abschnitt textarea, .formular textarea {
    padding: 8px 10px; border: 1px solid var(--linie); border-radius: 4px;
    font-size: var(--schrift-mittel); font-family: var(--schrift); color: #1b1d33;
    background: #fff; resize: vertical; }

/* Eine Auswahlliste mit vielen Haken -- Personen, Betriebsanweisungen.
   Begrenzt in der Hoehe, damit das Formular nicht ueber die Seite waechst. */
.auswahlliste { display: flex; flex-direction: column; gap: 5px;
                max-height: 260px; overflow-y: auto; padding: 3px;
                border: 1px solid var(--linie); border-radius: 4px; }
.auswahlliste .kasten { border: 0; padding: 4px 6px; font-size: var(--schrift-klein); }

/* .formular label stellt Beschriftung und Feld untereinander -- fuer eine
   Auswahlliste ist das richtig, fuer die Beschriftung darueber auch. */
label.nurschrift { font-weight: 600; }

/* Die Kopf-Vorschau zeigt, was ohne Zutun schon fertig ist. Sie sieht
   absichtlich aus wie das gedruckte Blatt und nicht wie ein Formular: Wer
   sie sieht, soll erkennen, dass hier nichts einzutragen ist -- und unten
   nur noch die sechs Textfelder warten. */
.kopfvorschau { border: 1px solid var(--linie); border-radius: 6px;
                overflow: hidden; margin-bottom: 18px; background: #fff; }
.kopfvorschau .balken { display: flex; align-items: center; gap: 14px;
                        padding: 12px 14px; background: var(--blau);
                        color: #fff; }
.kopfvorschau.orange .balken { background: #D97706; }
.kopfvorschau.gruen .balken  { background: var(--gruen); }
.kopfvorschau .balken img { height: 34px; background: #fff; padding: 3px 5px;
                            border-radius: 3px; flex: none; }
.kopfvorschau .balken > div { display: flex; flex-direction: column; gap: 1px;
                              min-width: 0; }
.kopfvorschau .art { font-size: var(--schrift-klein); letter-spacing: .1em;
                     text-transform: uppercase; opacity: .9; }
.kopfvorschau .balken b { font-size: var(--schrift-gross); line-height: 1.15; }
.kopfvorschau .anschrift { font-size: var(--schrift-klein); opacity: .9; }
.kopfvorschau table.paare { margin: 0; }
.kopfvorschau table.paare th { width: 190px; }
.kopfvorschau table.paare tr:last-child td,
.kopfvorschau table.paare tr:last-child th { border-bottom: 0; }
.kopfvorschau .klein { color: var(--grau); }

/* Was hier fehlt, fehlt auf jedem gedruckten Blatt -- das darf nicht wie ein
   leeres Feld aussehen, sondern wie eine offene Aufgabe. */
.fehlt { color: var(--rot); }
.kopfvorschau p.fehlt { margin: 0; padding: 10px 14px;
                        border-top: 1px solid var(--linie); }

/* Der Haken zum Ausformulieren steht zwischen den Abschnitten und dem
   Speichern-Knopf -- da, wo die Entscheidung faellt. Abgesetzt, weil er im
   Gegensatz zu allen anderen Feldern etwas *ersetzt*. */
.formular label.kasten.ausformulieren {
    background: var(--blau-hell); border: 1px solid var(--blau);
    border-radius: 6px; padding: 12px 13px; margin: 6px 0; }

.termin { border: 1px solid var(--linie); border-radius: 6px; background: #fff;
          padding: 13px 15px; margin-bottom: 12px; }
.termin h3 { margin: 0; }
.termin .kopfzeile { margin-bottom: 4px; }

.rot { color: var(--rot); }

/* Stammdaten-Uebersicht. Die Seite war eine einzige Rolle geworden -- wer
   die Einstellungen suchte, scrollte an vier Tabellen vorbei. Jetzt ein Feld
   je Bereich und darueber in jeder Unterseite dasselbe Menue.

   NICHT .kachel nennen: das gibt es oben schon fuer die Zahlen der
   Uebersichtsseite, mit 30px fetter Schrift und zentriert. Das ist in diesem
   Projekt die dritte Namenskollision nach .marke und .punkt -- vor einem
   neuen Klassennamen erst hier suchen. */
.bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
            margin: 16px 0; }
.bereich { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
           background: #fff; border: 1px solid var(--linie); border-radius: 6px;
           text-decoration: none; color: inherit; }
.bereich:hover { border-color: var(--blau); background: var(--flaeche); }
.bereich b { color: var(--blau); font-size: var(--schrift-mittel); }
.bereich span { font-size: var(--schrift-klein); color: var(--grau); }
.unterpunkte { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 4px; }
.unterpunkte a { padding: 6px 12px; border-radius: 6px; text-decoration: none;
                 color: inherit; border: 1px solid transparent; }
.unterpunkte a:hover { border-color: var(--linie); }
.unterpunkte a.hier { background: var(--blau); color: #fff; }
@media (max-width: 700px) { .bereiche { grid-template-columns: 1fr; } }

/* Vorschau vor dem Bestaetigen. Das Blatt wird hier gezeigt und nicht als
   Datei ausgeliefert: Wer entscheiden soll, ob es passt, soll es sehen und
   nicht erst ein anderes Programm oeffnen. */
.blattvorschau { width: 100%; height: 78vh; min-height: 500px;
                 border: 1px solid var(--linie); border-radius: 6px;
                 background: #fff; }
.entscheiden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
               margin: 12px 0; }
.entscheiden form { margin: 0; }
.entscheiden p { flex-basis: 100%; margin: 0; }

/* Betriebsanweisung: Knoepfe, Haken und der Entwurfsvermerk.
   Eigene Namen -- .marke, .punkt und .kachel gab es hier schon. */
.gutknopf { background: var(--gruen); color: #fff; border: 0; }
a.schlechtknopf { display: inline-block; padding: 9px 16px; border-radius: 6px;
                  background: var(--rot); color: #fff; text-decoration: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.entwurfsvermerk { background: var(--gelb-hell); border: 1px solid var(--gelb);
                   border-radius: 6px; padding: 8px 12px; margin: 12px 0 0;
                   font-size: var(--schrift-mittel); }
.hakenfeld { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
             max-height: 240px; overflow-y: auto; padding: 4px;
             border: 1px solid var(--linie); border-radius: 6px; }
.geraetewahl { border: 0; padding: 0; margin: 12px 0; }
.geraetewahl legend { font-weight: 600; padding: 0; }
#ausformulieren.laedt { opacity: .55; }
#ausformulieren-lage.laeuft::before, #vorschlaege-lage.laeuft::before {
    content: ""; display: inline-block; width: 90px; height: 6px;
    margin-right: 8px; border-radius: 3px; vertical-align: middle;
    background: linear-gradient(90deg, var(--blau) 0 40%, var(--linie) 40% 100%);
    background-size: 250% 100%; animation: balken 1.1s linear infinite;
}
@keyframes balken { from { background-position: 100% 0; }
                    to   { background-position: -60% 0; } }
#ausformulieren-lage.fertig { color: var(--gruen); }
#ausformulieren-lage.schlecht { color: var(--rot); }
.drucken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 700px) { .hakenfeld { grid-template-columns: 1fr; } }
textarea.zulang { border-color: var(--rot); background: var(--rot-hell); }
.knoepfe button[disabled] { opacity: .45; cursor: not-allowed; }

/* Kategoriebaum bei der Geraetewahl. Eine Anweisung fuer Akku-Bohrmaschinen
   betrifft meist eine ganze Kategorie -- mit ein, zwei Ausnahmen. */
.baum { max-height: 320px; overflow-y: auto; padding: 4px;
        border: 1px solid var(--linie); border-radius: 6px; }
.baum .ast { border-bottom: 1px solid var(--linie); }
.baum .ast:last-child { border-bottom: 0; }
.baum summary { cursor: pointer; padding: 4px 2px; list-style: revert; }
.baum summary label { display: inline-flex; margin: 0; }
.baum .zweig { margin-left: 26px; }

/* Die Akte einer fertigen Betriebsanweisung: links das Blatt, rechts, was
   man darueber wissen muss. Kein Bearbeitungsmodus -- wer aendern will,
   klickt Bearbeiten. */
.blattbild { display: block; text-decoration: none; color: inherit; }
.blattklein { width: 100%; height: 60vh; min-height: 420px; border: 0;
              border: 1px solid var(--linie); border-radius: 6px;
              background: #fff; pointer-events: none; }
.blattbild:hover .blattklein { border-color: var(--blau); }
h1 .stand { font-size: var(--schrift-klein); font-weight: 600; padding: 3px 10px;
            border-radius: 12px; vertical-align: middle; margin-left: 8px; }
h1 .stand.gruen { background: var(--gruen-hell); color: var(--gruen); }
h1 .stand.gelb  { background: var(--gelb-hell);  color: var(--gelb); }
h1 .stand.grau  { background: var(--flaeche);    color: var(--grau); }
.unterschriftsbild { max-height: 60px; max-width: 100%;
                     border-bottom: 1px solid var(--linie); }

/* Ausgegraut statt weggelassen. Wer eine Funktion nicht hat, soll sehen, dass
   es sie gibt und wem sie gehoert -- ein Knopf, der spurlos fehlt, wirft
   dieselbe Frage jedes Mal neu auf. Kein Verweis, kein Formular: was hier
   steht, tut nichts. */
.knopf.aus, .haupt.aus { opacity: .45; cursor: not-allowed; }
.knopf.aus:hover { background: #fff; border-color: var(--linie); }
.haupt.aus:hover { background: var(--blau); }

/* Das Inhaltsverzeichnis des Handbuchs: zwei Spalten, damit sechzehn Kapitel
   nicht eine Bildschirmseite kosten, bevor das erste Wort gelesen ist. */
.inhaltsverzeichnis { background: var(--flaeche); border: 1px solid var(--linie);
                      border-radius: 6px; padding: 14px 18px; margin: 16px 0 8px; }
.inhaltsverzeichnis .titel { font-weight: 700; margin: 0 0 6px; }
.inhaltsverzeichnis ol { columns: 2; column-gap: 36px; margin: 0;
                         padding-left: 22px; }
.inhaltsverzeichnis li { margin-bottom: 3px; break-inside: avoid; }
.inhaltsverzeichnis a { text-decoration: none; }
.inhaltsverzeichnis a:hover { text-decoration: underline; }
@media (max-width: 640px) { .inhaltsverzeichnis ol { columns: 1; } }

/* --- Mehrbetrieb (3.0): Registrierung, Hinweiskasten, Betriebsname -------- */
/* Der Betriebsname steht als Text neben der Marke: bei vielen Betrieben auf
   einem Server muss jede Seite sagen, wessen Daten sie zeigt. */
.betriebsname { flex: none; font-weight: 600; color: var(--grau);
                border-left: 1px solid var(--linie); padding-left: 14px; }
@media (max-width: 640px) { .betriebsname { display: none; } }

/* Der Verantwortungs-Hinweis: gelb, weil er weder Fehler noch Erfolg ist,
   sondern eine Bedingung. Er steht bei der Registrierung und der
   Ersteinrichtung -- den zwei Momenten, in denen der Betrieb beginnt. */
.hinweiskasten { background: var(--gelb-hell); border-left: 4px solid var(--gelb);
                 padding: 12px 16px; border-radius: 6px; margin: 14px 0;
                 font-size: var(--schrift-klein); }
.hinweiskasten p { margin: 0 0 8px; }
.hinweiskasten .haken { display: flex; flex-direction: row; gap: 8px;
                        align-items: baseline; font-weight: 600; }
.hinweiskasten .haken input { width: auto; flex: none; }

/* Das Registrierformular braucht mehr Platz als das Anmelden. */
main.anmeldung.breiter { max-width: 460px; }

/* Das Abo-Band: sichtbar, aber kein Alarm. In der Probezeit gelb, bei
   gescheiterter Zahlung rot -- und immer mit dem Weg, es zu erledigen. */
.abo-band { background: var(--gelb-hell); border-bottom: 1px solid var(--linie);
            padding: 8px 22px; font-size: var(--schrift-klein);
            font-weight: 600; }
.abo-band.rot { background: var(--rot-hell); }

/* Der Support-Knopf traegt als einziger den Terracotta-Akzent der Marke:
   ein Knopf, der zum Hersteller fuehrt, darf anders aussehen als die
   Arbeitsknoepfe -- und genau einer reicht. */
footer .hilfe a.haupt { background: var(--akzent); }
footer .hilfe a.haupt:hover { background: #B34C1F; }

/* ========================================================================
   Das Geruest: Wege links, Arbeit rechts
   ========================================================================
   Eine Software mit sechs Bereichen und zwanzig Unterseiten braucht eine
   Gliederung, die dasteht, statt sich aufklappen zu lassen. Oben war jeder
   Bereich ein Menue, das man erst oeffnen musste, um zu sehen, was darin
   liegt -- links steht alles untereinander, und wo man gerade ist, bleibt
   beim Arbeiten im Blick. */

.rahmen { display: flex; min-height: 100vh; align-items: stretch; }

.seitenleiste {
    width: var(--leiste); flex: none; background: var(--karte);
    border-right: 1px solid var(--linie); padding: 18px 14px 16px;
    display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.leistenkopf { display: flex; align-items: center; justify-content: space-between;
               padding: 0 8px; }
/* Das Logo traegt seinen Zusatz ("pruefen - unterweisen - nachweisen") mit
   im SVG; unter 44px wird der zu einem grauen Strich. */
.seitenleiste .marke img { height: 58px; display: block; max-width: 100%; }
.seitenleiste .betriebsname { font-size: var(--schrift-klein); font-weight: 600;
    color: var(--grau); padding: 10px 10px 0; margin: 0;
    border-top: 1px solid var(--linie); overflow-wrap: anywhere; }

.seitenleiste .suche input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--linie);
    border-radius: var(--radius-klein); background: var(--flaeche);
    font-size: var(--schrift-mittel); font-family: var(--schrift); color: inherit;
}
.seitenleiste .suche input:focus { outline: 2px solid var(--haupt);
    outline-offset: -1px; background: var(--karte); }

.seitenleiste nav { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.navgruppe { display: flex; flex-direction: column; gap: 1px; }
.gruppentitel { font-size: var(--schrift-klein); font-weight: 700; color: var(--grau);
    text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 6px; }
.seitenleiste .navpunkt {
    display: block; padding: 8px 10px; border-radius: var(--radius-klein);
    text-decoration: none; color: #24303a; font-weight: 500;
    font-size: var(--schrift-mittel); line-height: 1.35;
}
.seitenleiste .navpunkt:hover { background: var(--flaeche); }
/* Wo man ist, traegt die Farbe der Marke -- einmal auf der Seite, damit sie
   etwas bedeutet. */
.seitenleiste .navpunkt.hier { background: var(--haupt); color: #fff; font-weight: 600; }

.seitenleiste .konto { border-top: 1px solid var(--linie); padding: 14px 8px 0;
    display: flex; flex-direction: column; gap: 8px; }
.seitenleiste .konto .wer { display: flex; flex-direction: column; }
.seitenleiste .konto .name { font-weight: 600; }
.seitenleiste .konto .rolle { font-size: var(--schrift-klein); color: var(--grau); }
.seitenleiste .kontowege { display: flex; gap: 14px; align-items: center;
    font-size: var(--schrift-klein); }
.seitenleiste .kontowege a, button.alstext {
    color: var(--grau); text-decoration: none; background: none; border: 0;
    padding: 0; font-size: var(--schrift-klein); font-family: var(--schrift);
    cursor: pointer; }
.seitenleiste .kontowege a:hover, button.alstext:hover { color: var(--haupt);
    text-decoration: underline; }

.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- Der Griff fuers Handy ------------------------------------------------ */
.leiste-auf, .leiste-zu { display: none; cursor: pointer; }
.leiste-auf span { display: block; width: 20px; height: 2px; background: #24303a;
    border-radius: 2px; }

@media (max-width: 900px) {
    .seitenleiste { position: fixed; z-index: 60; left: 0; top: 0;
        transform: translateX(-100%); transition: transform .18s ease;
        box-shadow: var(--schatten-tief); }
    .leiste-schalter:checked ~ .rahmen .seitenleiste { transform: translateX(0); }
    .leiste-auf { display: flex; flex-direction: column; gap: 4px;
        padding: 12px; margin: 12px 0 0 16px; background: var(--karte);
        border: 1px solid var(--linie); border-radius: var(--radius-klein);
        width: 44px; }
    .leiste-zu { display: block; font-size: var(--schrift-gross);
        color: var(--grau); padding: 0 6px; }
    main { padding: 16px; }
}

/* ========================================================================
   Karten statt Kaesten
   ======================================================================== */
section.breit, aside, .kachel, .einstellblock, dialog.fenster {
    background: var(--karte); border: 0; border-radius: var(--radius);
    box-shadow: var(--schatten);
}
section.breit, aside { padding: 24px; }

/* Die Kacheln der Uebersicht: der farbige Balken links war eine Klammer um
   jede einzelne Kachel -- vier davon nebeneinander ergaben ein Zebramuster.
   Jetzt traegt die Kachel den Akzent nur, wenn man sie anfasst. */
.kachel { padding: 18px 20px; text-decoration: none; display: block;
    border-left: 0; transition: box-shadow .15s ease, transform .15s ease; }
a.kachel:hover { box-shadow: var(--schatten-tief); transform: translateY(-1px); }

h1 { font-size: var(--schrift-extragross); line-height: 1.2; margin: 0 0 18px;
     letter-spacing: -.015em; }
h2 { font-size: var(--schrift-gross); line-height: 1.3; margin: 26px 0 12px;
     letter-spacing: -.01em; }

/* ========================================================================
   Knoepfe: eine Hoehe, drei Rangstufen
   ======================================================================== */
button, .knopf, .haupt, a.knopf {
    height: 40px; padding: 0 18px; border-radius: var(--radius-klein);
    font-size: var(--schrift-mittel); font-weight: 600; font-family: var(--schrift);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
button, .haupt { background: var(--haupt); color: #fff; border-color: var(--haupt); }
button:hover, .haupt:hover { background: #12211A; border-color: #12211A; }
.knopf, a.knopf { background: var(--karte); color: var(--haupt);
                  border-color: var(--linie); }
.knopf:hover, a.knopf:hover { background: var(--flaeche); border-color: var(--haupt); }
button.schmal, .knopf.schmal, .haupt.schmal { height: 32px; padding: 0 12px;
    font-size: var(--schrift-klein); }
button:disabled, .knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* ========================================================================
   Das Hinweisband ueber dem Inhalt
   ========================================================================
   Vorher ein gelber Balken ueber die volle Breite -- die Bauform, in der
   Betriebssysteme seit dreissig Jahren Fehler melden. Es ist aber keine
   Stoerung, sondern eine Auskunft: Deshalb eine ruhige Karte im Inhalt,
   mit einem farbigen Punkt als Anker und dem Weg gleich daneben. */
.hinweisband {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 22px 30px -8px; padding: 12px 16px;
    background: var(--karte); border-radius: var(--radius);
    box-shadow: var(--schatten); font-size: var(--schrift-klein);
}
.hinweisband .ampelpunkt { width: 8px; height: 8px; border-radius: 50%;
    background: var(--gruen); flex: none; }
.hinweisband.warnt .ampelpunkt { background: var(--rot); }
.hinweisband > span:nth-child(2) { flex: 1; min-width: 220px; color: #24303a; }
@media (max-width: 900px) { .hinweisband { margin: 16px 16px -4px; } }

/* --- Fussleiste ----------------------------------------------------------- */
footer { border-top: 1px solid var(--linie); background: transparent;
         margin-top: auto; }

/* Die vier Einstiege auf der Uebersicht. Der dicke Balken links war eine
   Klammer um jede einzelne Karte -- vier davon nebeneinander ergaben ein
   Zebramuster, das mehr Aufmerksamkeit zog als die Woerter darin. */
.tat { background: var(--karte); border: 0; border-radius: var(--radius);
       box-shadow: var(--schatten); padding: 18px 20px; gap: 4px;
       transition: box-shadow .15s ease, transform .15s ease; }
.tat:hover { background: var(--karte); box-shadow: var(--schatten-tief);
             transform: translateY(-1px); }
.tat b { color: #24303a; font-size: var(--schrift-mittel); }

/* Die Zahlenkacheln daneben: dieselbe Bauform, damit die Uebersicht eine
   Flaeche ist und keine Sammlung verschiedener Kaesten. */
.kachel { padding: 20px 16px; }
a.kachel:hover { background: var(--karte); }
.auflagenband { background: var(--karte); border: 0; border-left: 4px solid var(--rot);
                border-radius: var(--radius); box-shadow: var(--schatten);
                padding: 18px 22px; }

/* Tabellen ruhiger: eine Linie zwischen den Zeilen reicht, ein Gitter um
   jede Zelle ist Papier von 1995. */
table { border-radius: var(--radius); overflow: hidden; }
th { color: var(--grau); font-weight: 600; }

/* Die Fussleiste bricht um, statt am rechten Rand abgeschnitten zu werden --
   der Support-Knopf hing dort halb ausserhalb. Dieselbe Breite wie der
   Inhalt darueber, damit beides auf einer Kante steht. */
footer .hersteller { max-width: 1360px; padding: 20px 30px; flex-wrap: wrap;
                     gap: 16px; align-items: center; }
footer .hilfe { margin-left: auto; flex: none; }
@media (max-width: 900px) {
    footer .hersteller { padding: 18px 16px; }
    footer .hilfe { margin-left: 0; }
}

/* Die Seiten ohne Anmeldung -- anmelden, registrieren, Passwort, Sperre.
   Dieselbe Bauform wie drinnen: eine Karte auf ruhiger Flaeche, kein
   Rahmen und kein Balken obendrauf. Das Logo bekommt die Groesse, bei der
   sein Zusatz noch lesbar ist. */
main.anmeldung { max-width: 420px; margin: 9vh auto auto; background: var(--karte);
                 border: 0; border-radius: var(--radius);
                 box-shadow: var(--schatten); padding: 32px; }
main.anmeldung.breiter { max-width: 480px; }
main.anmeldung .kundenlogo { height: 58px; margin-bottom: 22px; max-width: 100%; }
main.anmeldung h1 { margin: 0 0 20px; }
main.anmeldung .formular { margin-bottom: 16px; }
body.schmalseite { background: var(--flaeche); }
body.schmalseite footer .hersteller { justify-content: center; }

/* Das alte Abo-Band gibt es nicht mehr -- es heisst jetzt .hinweisband und
   steht als ruhige Karte im Inhalt statt als Balken ueber der Seite. */
.abo-band { display: none; }