/* Signalfarben sind im Sprengstoffumfeld funktional gebunden.
   Gruen bedeutet Fluchtweg, Rot bedeutet Verbot.
   Wer sie dekorativ einsetzt, nimmt ihnen die Bedeutung. */
:root {
    --grund:    #ffffff;   /* Papierweiss. Der Vorgang stammt von einem Papierschein ab. */
    --tinte:    #14181c;   /* Fast-Schwarz, Text */
    --linie:    #c9d0d6;   /* Linien, wie die Linien des Papierscheins */
    --anwesend: #00843d;   /* Rettungszeichen-Gruen. NUR fuer Anwesenheit und Evakuierung. */
    --warnung:  #c8102e;   /* Signalrot. NUR fuer Fehler und Loeschen. */
    --kante:    #f2c300;   /* Signalgelb. NUR im Warnstreifen. */
    --flaeche:  #f5f7f8;
    --gedaempft:#5c6771;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-wert: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--schrift-text);
}

/* Der Warnstreifen ist das einzige auffaellige Element der Oberflaeche.
   Er kommt genau einmal vor und wird nirgends wiederholt. */
.warnstreifen {
    height: 4px;
    width: 100%;
    background: repeating-linear-gradient(135deg, var(--kante) 0 12px, var(--tinte) 12px 24px);
}

.kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--linie);
}

.marke {
    font-weight: 600;
    text-decoration: none;
    color: var(--tinte);
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1 1 auto;
}

nav a {
    padding: 0.5rem 0;
    color: var(--tinte);
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

.kopf-rechts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.875rem;
}

.kopf-rechts a {
    color: var(--tinte);
}

main {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

h1, h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.75rem;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
}

a {
    color: var(--tinte);
}

/* An der Pforte wird ohne Maus gearbeitet; wer den Fokus nicht sieht, kann nicht arbeiten. */
:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 2px;
}

/* Formulare folgen der Lesereihenfolge, damit der Tabulator den Vorgang ohne Maus durchlaeuft. */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 34rem;
}

label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gedaempft);
    margin-bottom: 0.25rem;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 1rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 2px;
    background: var(--grund);
    color: var(--tinte);
}

button,
.knopf {
    display: inline-block;
    background: var(--tinte);
    color: var(--grund);
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 100ms ease;
}

button:hover,
.knopf:hover {
    background: var(--gedaempft);
}

.knopf-gefahr {
    background: var(--warnung);
}

.knopf-gefahr:hover {
    background: #a00d25;
}

.knopf-leise {
    background: var(--grund);
    color: var(--tinte);
    border: 1px solid var(--linie);
}

.knopf-leise:hover {
    background: var(--flaeche);
}

/* Zeitspalten fluchten untereinander — bei hundert Zeilen ist das der Unterschied zwischen lesen und suchen. */
.wert {
    font-family: var(--schrift-wert);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabellenrahmen {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead tr {
    border-bottom: 2px solid var(--tinte);
}

th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gedaempft);
    text-align: left;
    padding: 0.55rem 0.6rem;
}

td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--linie);
}

.meldung {
    padding: 0.7rem 0.9rem;
    border-left: 4px solid;
    background: var(--flaeche);
    margin: 0 0 1rem;
}

.meldung-erfolg {
    border-color: var(--anwesend);
}

.meldung-fehler {
    border-color: var(--warnung);
}

.formularfehler {
    border-left: 4px solid var(--warnung);
    background: var(--flaeche);
    padding: 0.7rem 0.9rem;
    margin: 0 0 1rem;
    list-style: none;
}

.anwesenheit {
    border-left: 6px solid var(--anwesend);
    padding: 0.75rem 0 0.75rem 1rem;
    margin: 0 0 1.5rem;
}

/* Das ist die Frage, die das System zuerst beantwortet — im Notfall zaehlt genau diese Zahl. */
.anwesenheit-zahl {
    display: block;
    font-family: var(--schrift-wert);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 600;
    color: var(--anwesend);
    font-variant-numeric: tabular-nums;
}

.anwesenheit-text {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gedaempft);
}

/* Seitenwechsel der Gesamtuebersicht: Verweise und Zaehler in einer Zeile. */
.blaettern { display: flex; gap: 1rem; align-items: baseline; margin-top: 1rem; }
.blaettern span { font-family: var(--schrift-wert); color: var(--gedaempft); }

/* Hinweis ueber dem Einchecke-Formular. Erklaert eine Bedienung, deshalb leiser
   gesetzt als der Rest. */
.hinweis { color: var(--gedaempft); font-size: 0.9rem; margin: 0 0 1rem; }

/* Die Evakuierungsliste erbt nicht vom Grundgeruest — sie ist ein Ausdruck.
   Deshalb hier ihre eigenen wenigen Regeln. */
.evakuierung { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
.evakuierung h1 { margin: 0 0 0.25rem; }
.evakuierung .stand { font-family: var(--schrift-wert); color: var(--gedaempft); margin: 0 0 1.5rem; }

/* Gruppen des Einchecke-Formulars. Sie bilden die Abschnitte des Papierscheins ab:
   wer kommt, von welcher Firma, zu wem, und was er mitbekommt. Der Rahmen ist nur
   links gesetzt — eine Linie genuegt, um die Gruppe zu fassen, ohne die Seite in
   Kaesten zu zerlegen. */
fieldset {
    border: 0;
    border-left: 2px solid var(--linie);
    margin: 0 0 1.75rem;
    padding: 0 0 0 1rem;
}

fieldset legend {
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gedaempft);
    font-weight: 600;
}

/* Die Anmeldung ist die einzige Seite ohne Arbeitsinhalt. Ein schmaler, gefasster
   Block gibt ihr einen Mittelpunkt, statt das Formular in der Flaeche treiben zu
   lassen. */
.anmeldung {
    max-width: 24rem;
    margin: 3rem auto;
    padding: 1.75rem;
    border: 1px solid var(--linie);
    border-top: 4px solid var(--tinte);
    border-radius: 2px;
}

.anmeldung h1 {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
}

.anmeldung form {
    max-width: none;
}

.anmeldung button {
    width: 100%;
    margin-top: 0.5rem;
}

/* An der Pforte wartet jemand; Bewegung hat dort nichts verloren. */
@media (prefers-reduced-motion: reduce) {
    button,
    .knopf {
        transition: none;
    }
}

/* Wer noch auf dem Gelaende ist, wird in der Gesamtuebersicht in derselben Farbe
   ausgezeichnet wie die Anwesenheitszahl und die Fluchtwegschilder im Werk. Zwischen
   hundert Zeitangaben ist das die Zeile, die im Notfall zaehlt. */
.anwesend-marke {
    color: var(--anwesend);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Safari blaeht im Querformat die Schrift auf, wenn man es nicht unterbindet. */
html {
    -webkit-text-size-adjust: 100%;
}

/* Fingerkuppen brauchen Flaeche. 44 Pixel sind der Richtwert von Apple; darunter
   trifft man auf einem Tablet daneben — an der Pforte mit Handschuhen erst recht. */
/* Bewusst ohne Media Query: das Terminal an der Pforte wird mit dem Finger bedient,
   und ein Knopf, der auf dem einen Geraet 38 und auf dem anderen 44 Pixel misst,
   verwirrt mehr als er hilft. */
button,
.knopf-leise,
.knopf-gefahr {
    min-height: 44px;
}

/* Fingerkuppen brauchen Flaeche — aber nur dort, wo mit dem Finger gearbeitet wird.
   Global gesetzt wuechse die Kopfzeile auch am Schreibtisch: nav a bringt bereits
   0.5rem Innenabstand mit, zusammen mit line-height 44px waeren das 60 Pixel.
   Der Innenabstand wird hier auf null gesetzt, damit genau 44 Pixel herauskommen
   und nicht 60. */
@media (pointer: coarse) {
    nav a,
    .kopf-rechts a {
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
        min-height: 44px;
        line-height: 44px;
    }
}

/* Auf Touch-Geraeten bleibt ein Hover-Zustand nach dem Tippen stehen. Deshalb nur
   dort, wo es wirklich einen Zeiger gibt. */
@media (hover: hover) {
    tbody tr:hover {
        background: var(--flaeche);
    }
}

/* Unter 48rem werden die beiden Listen, die man im Gehen benutzt, von Tabellenzeilen
   zu gestapelten Karten. Jede Zelle traegt ihre Spaltenbeschriftung selbst, deshalb
   das Attribut data-spalte in der Vorlage. Die Kopfzeile wird dabei nicht
   ausgeblendet, sondern nur aus dem Bild geschoben — sie bleibt fuer Vorleseprogramme
   erhalten. */
@media (max-width: 48rem) {
    .karten thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .karten,
    .karten tbody,
    .karten tr,
    .karten td {
        display: block;
    }

    .karten tr {
        border: 1px solid var(--linie);
        border-left: 4px solid var(--anwesend);
        border-radius: 2px;
        margin: 0 0 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .karten td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        padding: 0.35rem 0;
        text-align: right;
    }

    .karten td::before {
        content: attr(data-spalte);
        flex: 0 0 auto;
        text-align: left;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--gedaempft);
    }

    /* Zellen ohne Beschriftung — etwa die mit der Auscheckschaltflaeche — fuellen
       die Breite, statt eine leere Spalte offenzulassen. */
    .karten td:empty,
    .karten td[data-spalte=""] {
        display: none;
    }

    .karten td.aktion {
        justify-content: stretch;
        padding-top: 0.6rem;
    }

    .karten td.aktion::before {
        content: none;
    }

    .karten td.aktion button {
        width: 100%;
    }
}

/* Der Kopf auf schmalen Schirmen */
@media (max-width: 48rem) {
    .kopf {
        gap: 0.25rem 1rem;
    }

    main {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .anwesenheit-zahl {
        font-size: 2.75rem;
    }
}

@media print {
    header,
    nav,
    .kopf-rechts,
    .warnstreifen {
        display: none;
    }

    main {
        max-width: none;
        padding: 0;
    }

    body {
        background: #fff;
        color: #000;
    }

    .evakuierung {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    table,
    th,
    td {
        border-color: #000;
    }
}