/*
 * Ticketsystem mwork.at
 *
 * Handgeschrieben, kein Framework, kein Build-Schritt - dieselbe Minimallinie
 * wie in den beiden Website-Projekten.
 *
 * MOBIL ZUERST: Alle Grundregeln gelten fuer das schmale Fenster, die
 * Media Queries schalten erst nach oben. Grund ist die Vorgabe: Das System
 * soll am Handy genauso bedienbar sein - und das ist es nur, wenn der schmale
 * Fall der Normalfall im Stylesheet ist und nicht der nachtraeglich
 * zurechtgebogene Sonderfall.
 */

/*
 * FARBEN AUS DEM LOGO (branding/Logo_mwork.svg).
 *
 * Die Marke ist ein kräftiges Rot: #e20000. Es ist die einzige Farbe im
 * Logo neben Schwarz, Weiss und einem hellen Grau - deshalb ist das Schema
 * hier bewusst schwarz/weiss/grau MIT rotem Akzent und nicht bunt.
 * Dieselbe Linie wie bei paXCry.
 *
 * Rot ist damit die Farbe der Marke UND die Farbe für Fehler. Das ist kein
 * Versehen: Ein Fehler steht in einem Meldungskasten mit hellem Grund, eine
 * Hauptschaltfläche ist eine gefüllte rote Fläche - verwechseln kann man
 * beides nicht. Für Fehler wird ausserdem das dunklere #b00000 verwendet.
 */
:root {
  --dunkel:      #1c1c1c;   /* Kopfzeile */
  --dunkler:     #0f0f0f;
  --rand:        #d0d0d0;
  --rand-hell:   #e6e6e6;
  --grund:       #f4f4f4;
  --flaeche:     #ffffff;
  --text:        #171717;
  --text-leise:  #6b6b6b;
  --akzent:      #e20000;   /* die Markenfarbe */
  --akzent-tief: #b00000;   /* für Text auf hellem Grund und beim Überfahren */
  --akzent-hell: #fff2f2;
  --gut:         #15803d;
  --gut-hell:    #f0fdf4;
  --schlecht:    #b00000;
  --schlecht-hell: #fff2f2;
  --warn-hell:   #fffbeb;
  --intern:      #b8860b;   /* interne Notizen - bewusst NICHT rot, sonst
                               liefe es mit der Markenfarbe zusammen */
  --radius:      8px;

  /* Trifft die Systemschrift des jeweiligen Geraets. Keine Webfonts:
     Das waere eine externe Abhaengigkeit und zusaetzliche Ladezeit im
     Mobilfunknetz - fuer nichts, was ein Ticket lesbarer machte. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a { color: var(--akzent); }
a:hover { color: var(--dunkel); }

code {
  background: var(--grund);
  padding: .1em .3em;
  border-radius: 4px;
  font-size: .9em;
}

/* ==========================================================================
   Kopf und Navigation
   ========================================================================== */

/*
 * WEISSE KOPFZEILE, nicht dunkel.
 *
 * Der dunkle Balken war meine Erfindung, nicht die der Marke. Das Logo ist
 * für weissen Grund gezeichnet: Rot #e20000 auf Fast-Schwarz käme auf rund
 * 3,4:1 Kontrast - zu wenig, und die roten Striche des M würden matt.
 * Auf Weiss stehen Rot und Blau so, wie sie gemeint sind.
 *
 * Der rote Abschlussstrich unten trennt die Kopfzeile vom Inhalt und
 * nimmt die Markenfarbe auf, ohne sie aufzudrängen.
 */
.kopf {
  background: var(--flaeche);
  color: var(--text);
  border-bottom: 3px solid var(--akzent);
  /* Bleibt beim Rollen oben stehen: Am Handy ist eine lange Ticketliste
     schnell mehrere Bildschirme hoch, und "Neues Ticket" soll erreichbar
     bleiben, ohne ganz nach oben zurückzurollen. */
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
/* 30 Punkte: die Höhe, bei der die dünnen Buchstabenstriche nachgemessen
   noch sauber stehen. Darunter verblasst "work" gegenüber dem M. */
.marke img { height: 30px; width: auto; display: block; }
.marke small {
  font-weight: 600;
  color: var(--text-leise);
  font-size: .8rem;
  border-left: 1px solid var(--rand);
  padding-left: .5rem;
}

.nav {
  display: flex;
  gap: .3rem;
  /* Am Handy waagrecht rollbar statt umbrechend: Vier Punkte in zwei Zeilen
     fressen ein Viertel des Bildschirms. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  order: 3;
  width: 100%;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  color: var(--text-leise);
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  font-size: .95rem;
  /* Dieselben 44px wie bei den Schaltflächen. Mit blossem padding kamen die
     Punkte auf 37px - nachgemessen bei 375px Fensterbreite. Zu wenig für
     einen Fingertipp, und ausgerechnet die Navigation trifft man dann
     daneben. */
  display: flex;
  align-items: center;
  min-height: 44px;
}
.nav a:hover { background: var(--grund); color: var(--text); }
.nav a.an { background: var(--akzent); color: #fff; }

.wer {
  margin-left: auto;
  text-align: right;
  line-height: 1.2;
  font-size: .8rem;
}
.wer-name { display: block; font-weight: 600; }
.wer-firma { display: block; color: var(--text-leise); }

.abmelden {
  color: var(--text-leise);
  text-decoration: none;
  font-size: .8rem;
  padding: .3rem .5rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  white-space: nowrap;
}
.abmelden:hover { background: var(--grund); color: var(--text); }

.inhalt {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.fuss {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 1rem;
  color: var(--text-leise);
  font-size: .8rem;
  border-top: 1px solid var(--rand-hell);
}

/* ==========================================================================
   Bausteine
   ========================================================================== */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.karte-kopf h2 { margin: 0; }

.seiten-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.seiten-kopf h1 { margin: 0; }

.zurueck {
  display: inline-block;
  font-size: .85rem;
  text-decoration: none;
  margin-bottom: .2rem;
}

.klein { font-size: .85rem; color: var(--text-leise); }
.mitte { text-align: center; }
.hinweis-zeile { margin-top: -.5rem; }

.meldung {
  padding: .7rem .9rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-size: .95rem;
}
.meldung.ok     { background: var(--gut-hell);      border-color: #bbf7d0; color: var(--gut); }
.meldung.fehler { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); }
.meldung.info   { background: var(--akzent-hell);   border-color: #f5c2c2; color: var(--akzent-tief); }

/* --- Schaltflächen ------------------------------------------------------ */

.knopf {
  display: inline-block;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  /* 44px Höhe ist die übliche Mindestgrösse für einen Fingertipp. Darunter
     trifft man am Handy mit Handschuhen nichts mehr - und genau das ist der
     Anwendungsfall. */
  padding: .6rem 1rem;
  min-height: 44px;
  font: inherit;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.knopf:hover { background: var(--grund); color: var(--text); }

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

.knopf.leise { color: var(--text-leise); }
.knopf.breit { width: 100%; }
/* Auch die kleinen Schaltflächen bleiben bei 44px Höhe - nur schmaler.
   Nachgemessen kamen sie sonst auf 34px, und "Bearbeiten" ist am Handy keine
   Nebensache, sondern der Weg zur Korrektur. */
.knopf.klein { padding: .35rem .7rem; min-height: 44px; font-size: .85rem; }

/* Aufklapper sind Bedienelemente, keine Überschriften.
   Gemessen kamen sie auf 19-22px - mit dem Finger kaum zu treffen, und
   dahinter steckt unter anderem die ursprüngliche Fassung eines Tickets. */
details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  cursor: pointer;
  /* display:flex nimmt dem <summary> das eingebaute Aufklapp-Dreieck. Ohne
     Ersatz sieht man dem Element nicht mehr an, dass sich etwas öffnet -
     ausgerechnet bei "Ursprüngliche Fassung ansehen" wäre das fatal, weil
     der Nachweis dann unauffindbar dahinterläge. Deshalb ein eigenes
     Zeichen, das sich beim Öffnen dreht. */
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }

details > summary::before {
  content: "▸";
  flex: none;
  color: var(--text-leise);
  font-size: .9em;
  transition: transform .15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }

/* Der Aufklapper der Löschen-Rückfrage ist als Schaltfläche gestaltet und
   soll nicht über die ganze Breite laufen. */
details > summary.knopf { display: inline-flex; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.verweis-knopf {
  background: none;
  border: none;
  color: var(--text-leise);
  font: inherit;
  font-size: .8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: .2rem;
  /* Auch dieser unscheinbare Verweis ist ein Tippziel - beim Nachmessen kam
     er auf 26px. Er öffnet allerdings nur eine Rückfrage und löscht nichts;
     deshalb reichen hier 36px statt der 44px der übrigen Schaltflächen, und
     die Anhangskachel bleibt kompakt. */
  min-height: 36px;
}
.verweis-knopf:hover { color: var(--schlecht); }

.karte.gefahr { border-color: #f0bcbc; }
.gefahr-knopf {
  color: var(--schlecht);
  border-color: #f0bcbc;
  background: var(--schlecht-hell);
  display: inline-block;
}
.gefahr-knopf:hover { background: #ffe6e6; color: var(--schlecht); }

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

.formular label {
  display: block;
  margin-bottom: .9rem;
}
.formular label > span:first-child {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .25rem;
}
.formular label em { color: var(--schlecht); font-style: normal; }
.formular small {
  display: block;
  color: var(--text-leise);
  font-size: .8rem;
  margin-top: .25rem;
}

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=number], input[type=datetime-local],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font: inherit;
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. Bei kleinerer
     Schrift springt die Ansicht - und man tippt daneben. */
  font-size: 16px;
  background: var(--flaeche);
  color: var(--text);
  min-height: 44px;
}
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}

input[type=color] {
  width: 100%;
  height: 44px;
  padding: .2rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.feld-paar { display: grid; gap: 0; }

label.haken {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .6rem;
  cursor: pointer;
}
label.haken input {
  /* Grössere Kästchen: mit dem Finger sonst kaum zu treffen. */
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  flex: none;
}
label.haken > span:first-child { font-weight: 400; }
label.haken span { font-size: .9rem; }

.datei-feld input[type=file] {
  width: 100%;
  padding: .6rem;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  font-size: .9rem;
}

.eingerueckt {
  margin-top: .75rem;
  padding: .75rem;
  background: var(--grund);
  border-radius: var(--radius);
}

/* ==========================================================================
   Anmeldung und Einladung
   ========================================================================== */

body.schmal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  /* Grauer statt schwarzer Grund: Das Logo steht auf der weissen Karte,
     und ein schwarzer Rand darum liess die Seite wie ein Fremdkoerper
     neben dem Rest der Anwendung wirken. */
  background: var(--grund);
}
.karte-mitte { border-top: 3px solid var(--akzent); }

.karte-mitte {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 26rem;
}
.karte-mitte h1 { font-size: 1.25rem; }

.marke-gross {
  display: block;
  height: 50px;
  width: auto;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Statusleiste (Zahlen + Filter)
   ========================================================================== */

.status-leiste {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  scrollbar-width: thin;
}

.status-kachel {
  flex: none;
  min-width: 5.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-bottom: 3px solid var(--rand);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  text-decoration: none;
  color: var(--text);
  text-align: center;
}
.status-kachel:hover { background: var(--grund); color: var(--text); }
.status-kachel.an { border-color: var(--akzent); background: var(--akzent-hell); }
.status-kachel .zahl { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.status-kachel .was  { display: block; font-size: .75rem; color: var(--text-leise); }

.filter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.filter-leiste .suchfeld { flex: 1 1 100%; }
.filter-leiste .filter-feld { flex: 1 1 10rem; min-width: 0; }

.status-schild {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   Ticketliste
   ========================================================================== */

.ticket-liste { list-style: none; margin: 0; padding: 0; }

.ticket-zeile {
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  margin-bottom: .6rem;
}
.ticket-zeile:hover { border-color: var(--akzent); }
.ticket-zeile.erledigt { opacity: .72; }

.ticket-link {
  display: block;
  padding: .8rem;
  text-decoration: none;
  color: inherit;
}

.zeile-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.nummer {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  color: var(--text-leise);
}
.nummer-gross {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-leise);
  font-size: .9em;
}

.zeile-titel { font-size: 1.02rem; margin: 0 0 .2rem; }
.zeile-anriss {
  margin: 0 0 .5rem;
  color: var(--text-leise);
  font-size: .88rem;
}

.zeile-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  font-size: .8rem;
  color: var(--text-leise);
  align-items: center;
}
.marke-kunde {
  background: var(--grund);
  border-radius: 4px;
  padding: .05rem .4rem;
  font-weight: 600;
  color: var(--text);
}
.zeile-fuss .zeit { margin-left: auto; }

.blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 1rem 0;
}

.leer-hinweis { text-align: center; padding: 2rem 1rem; }

/* ==========================================================================
   Ticketseite
   ========================================================================== */

.zwei-spalten { display: block; }
.spalte-seite .karte { background: var(--flaeche); }

.fliesstext p { margin: 0 0 .7rem; }
.fliesstext ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.fliesstext li { margin-bottom: .2rem; }
.fliesstext:last-child p:last-child { margin-bottom: 0; }
.fliesstext.alt { color: var(--text-leise); }

dl.daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--rand-hell);
  font-size: .9rem;
}
dl.daten dt { font-weight: 600; color: var(--text-leise); }
dl.daten dd { margin: 0; }

ul.schlicht { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
ul.schlicht li { margin-bottom: .35rem; }

/* --- ursprüngliche Fassung ---------------------------------------------- */

details.original {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rand-hell);
}
details.original > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--akzent);
}
.original-feld {
  background: var(--grund);
  border-left: 3px solid var(--rand);
  padding: .6rem .8rem;
  margin-top: .6rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.original-feld h4 { font-size: .85rem; color: var(--text-leise); margin-bottom: .3rem; }
.original-feld .leer { color: var(--text-leise); font-style: italic; margin: 0; }

/* --- Kommentare --------------------------------------------------------- */

.kommentare { list-style: none; margin: 0 0 1rem; padding: 0; }

.kommentar {
  border-left: 3px solid var(--rand);
  padding: .1rem 0 .1rem .8rem;
  margin-bottom: 1rem;
}
.kommentar.intern {
  border-left-color: var(--intern);
  background: var(--warn-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .5rem .8rem;
}

.kommentar-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: .85rem;
  margin-bottom: .3rem;
}
.kommentar-kopf .zeit { color: var(--text-leise); font-size: .8rem; }

.marke-intern {
  background: var(--intern);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 4px;
  text-transform: uppercase;
}

details.kommentar-aendern > summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-leise);
  margin-top: .3rem;
}

.neuer-kommentar {
  border-top: 1px solid var(--rand-hell);
  padding-top: 1rem;
}

/* --- Anhänge ------------------------------------------------------------ */

.anhang-liste {
  list-style: none;
  margin: .5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .6rem;
}

.anhang {
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  padding: .4rem;
  background: var(--flaeche);
  font-size: .8rem;
}
.anhang.intern { border-color: var(--intern); background: var(--warn-hell); }

.anhang img {
  width: 100%;
  height: 6rem;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--grund);
}

.pdf-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6rem;
  background: var(--grund);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  padding: .3rem;
  text-align: center;
}
.pdf-symbol {
  font-weight: 700;
  color: var(--schlecht);
  font-size: 1.1rem;
  letter-spacing: .05em;
}
.pdf-name {
  font-size: .7rem;
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.anhang-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  align-items: center;
  margin-top: .3rem;
}

/* Umschalter "nur intern" / "für Kunden sichtbar".
   Steht bewusst über dem Löschen und ohne Rückfrage: Es geht nichts verloren,
   es wechselt nur die Seite des Vorhangs - und lässt sich sofort wieder
   zurückstellen. */
.anhang-sicht button, .kommentar-sicht button {
  text-align: left;
  padding-left: 0;
}
.kommentar-sicht { margin-top: .2rem; }
.anhang-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.anhang-weg { margin-top: .1rem; }

.anhang-formular {
  border-top: 1px solid var(--rand-hell);
  padding-top: .8rem;
  margin-top: .8rem;
}
.anhang-formular label { display: block; margin-bottom: .6rem; }
.anhang-formular label > span:first-child {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .25rem;
}

/* --- Änderungsverlauf --------------------------------------------------- */

.verlauf {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
  /* Bei einem lange laufenden Auftrag wird der Verlauf lang. Er soll die
     Seite nicht dominieren, aber vollständig erreichbar bleiben. */
  max-height: 24rem;
  overflow-y: auto;
}
.verlauf li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rand-hell);
}
.verlauf li:last-child { border-bottom: none; }
.verlauf li.intern { border-left: 3px solid var(--intern); padding-left: .5rem; }
.verlauf-zeit { color: var(--text-leise); font-size: .75rem; }

details.verlauf-werte > summary {
  cursor: pointer;
  color: var(--akzent);
  font-size: .8rem;
  margin-top: .2rem;
}
.verlauf-werte h5 {
  margin: .4rem 0 .1rem;
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--text-leise);
  letter-spacing: .03em;
}
.verlauf-werte pre {
  margin: 0;
  padding: .4rem .5rem;
  background: var(--grund);
  border-radius: 4px;
  font-size: .78rem;
  /* Umbrechen statt waagrecht rollen: Ein alter Beschreibungstext ist lang,
     und in einer schmalen Spalte will ihn niemand seitlich schieben. */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow-y: auto;
}
.verlauf-werte .vorher pre  { border-left: 3px solid var(--schlecht); }
.verlauf-werte .nachher pre { border-left: 3px solid var(--gut); }

/* ==========================================================================
   Verwaltung
   ========================================================================== */

.kachel-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.kachel { text-decoration: none; color: inherit; margin: 0; }
a.kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.kachel.still { background: var(--grund); }
.zahl-gross { font-size: 2rem; font-weight: 700; margin: 0 0 .2rem; line-height: 1; }

.benutzer-liste { list-style: none; margin: 0; padding: 0; }
.benutzer-liste > li {
  border-bottom: 1px solid var(--rand-hell);
  padding: .2rem 0;
}
.benutzer-liste > li:last-child { border-bottom: none; }
.benutzer-liste > li.stillgelegt { opacity: .6; }

.benutzer-liste summary {
  padding: .6rem .2rem;
  gap: .4rem .6rem;
}
.benutzer-liste summary:hover { background: var(--grund); }

.marke {
  background: var(--grund);
  border: 1px solid var(--rand-hell);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .72rem;
  color: var(--text-leise);
  white-space: nowrap;
}
.marke.aus  { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); }
.marke.warn { background: var(--warn-hell); border-color: #fde68a; color: #92400e; }

.link-kasten .link-feld {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  background: var(--flaeche);
}

/* ==========================================================================
   Breitere Fenster
   ========================================================================== */

@media (min-width: 40rem) {
  .inhalt { padding: 1.5rem 1rem; }
  h1 { font-size: 1.75rem; }

  .nav { order: 0; width: auto; }

  .feld-paar {
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  .filter-leiste .suchfeld { flex: 2 1 16rem; }

  .anhang-liste { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }

  .knopf.breit { width: auto; min-width: 12rem; }
}

@media (min-width: 62rem) {
  .zwei-spalten {
    display: grid;
    /* Der Auftrag bekommt den Platz, die Bearbeitung die Seitenspalte. */
    grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
    gap: 1rem;
    align-items: start;
  }
}

/* ==========================================================================
   Drucken
   ==========================================================================
   Ein Ticket wird durchaus ausgedruckt und auf die Baustelle mitgenommen.
   Ohne diese Regeln stünde die halbe Seite voller Schaltflächen, die auf
   Papier nichts tun.
*/

@media print {
  .kopf, .fuss, .filter-leiste, .status-leiste, .spalte-seite,
  form, .knopf, .zurueck, .anhang-weg { display: none !important; }

  body { background: #fff; }
  .karte { border: none; padding: 0; margin-bottom: 1rem; }
  .zwei-spalten { display: block; }
  /* Aufgeklappt drucken: Sonst fehlt auf dem Ausdruck ausgerechnet das,
     was den Nachweis ausmacht. */
  details { display: block; }
  details > summary { display: none; }
  .verlauf { max-height: none; overflow: visible; }
  a[href]::after { content: ""; }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Termine und Kalender
   ========================================================================== */

.termin-liste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.termin-liste > li {
  border-left: 3px solid var(--akzent);
  padding: .5rem 0 .5rem .8rem;
  margin-bottom: .8rem;
}
/* Vergangene Termine bleiben stehen - sie sind Teil des Nachweises -, treten
   aber zurück, damit der nächste anstehende ins Auge fällt. */
.termin-liste > li.vorbei { border-left-color: var(--rand); opacity: .65; }
.termin-zeit { font-weight: 600; }

.termin-leute {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin-top: .25rem;
  font-size: .85rem;
}
.termin-leute .person {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  align-items: baseline;
}

.mini-formular { margin-top: .5rem; }
details.termin-neu > summary { display: inline-flex; }

.wunsch-marke {
  background: var(--warn-hell);
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 4px;
  padding: .05rem .4rem;
}

/* --- die Wochenansicht -------------------------------------------------- */

/* Am Handy untereinander, am breiten Fenster sieben Spalten. Ein echtes
   Stundenraster mit absolut platzierten Terminen wäre am Telefon nicht mehr
   zu treffen - deshalb je Tag eine Karte mit Leiste und Liste. */
.kalender { display: grid; gap: .6rem; margin-bottom: 1rem; }

.ktag {
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  padding: .6rem .7rem;
}
.ktag.heute { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.ktag.wochenende { background: var(--grund); }

.ktag-kopf {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0 0 .4rem;
  font-size: .95rem;
}
.ktag-name  { font-weight: 700; }
.ktag-datum { color: var(--text-leise); font-size: .85rem; }
.ktag-leer  { margin: .2rem 0 0; }

.frei-leiste {
  display: flex;
  gap: 2px;
  margin-bottom: .5rem;
  /* Bei zehn Stunden und schmalem Telefon lieber rollen als quetschen. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.frei-feld {
  flex: 1 0 2.1rem;
  text-align: center;
  border-radius: 4px;
  padding: .15rem .1rem .2rem;
  line-height: 1.1;
  border: 1px solid transparent;
}
.frei-feld .fz { display: block; font-size: .6rem; color: var(--text-leise); }
.frei-feld .fa { display: block; font-weight: 700; font-size: .95rem; }
.frei-feld.frei  { background: var(--gut-hell);      border-color: #bbf7d0; color: var(--gut); }
.frei-feld.knapp { background: var(--warn-hell);     border-color: #fde68a; color: #92400e; }
.frei-feld.voll  { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); }
.frei-feld.voll .fz, .frei-feld.knapp .fz, .frei-feld.frei .fz { color: inherit; opacity: .75; }

.ktermine { list-style: none; margin: 0; padding: 0; }
.ktermine li { margin-bottom: .3rem; }
.ktermine a {
  display: block;
  border-left: 3px solid var(--rand);
  background: var(--grund);
  border-radius: 0 4px 4px 0;
  padding: .35rem .5rem;
  text-decoration: none;
  color: var(--text);
  font-size: .85rem;
}
.ktermine a:hover { background: var(--akzent-hell); color: var(--text); }
.kzeit   { font-weight: 700; margin-right: .4rem; }
.ktitel  { font-weight: 600; }
.kkunde, .kleute { display: block; color: var(--text-leise); font-size: .78rem; }

.legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  /* Ohne das setzt der Browser zusaetzlich zum Farbfeld noch seinen eigenen
     Aufzaehlungspunkt - zwei Marken je Eintrag. */
  list-style: none;
  padding-left: 0;
  margin: 0 0 .5rem;
}
.legende li { display: flex; align-items: center; }
.legende .frei-feld { flex: 0 0 2.1rem; }

@media (min-width: 62rem) {
  .kalender { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .frei-leiste { flex-wrap: wrap; overflow-x: visible; }
  .frei-feld { flex: 1 0 1.6rem; }
}

/* Zusammengehörende Felder in einem <fieldset> - Wunschtermin, "wer fährt
   hin". Ohne eigene Regel setzt der Browser seinen alten Standardrahmen,
   der mit nichts anderem auf der Seite zusammenpasst. */
.feld-gruppe {
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  padding: .7rem .8rem .3rem;
  margin: 0 0 .9rem;
  /* Ein fieldset bekommt vom Browser eine Mindestbreite nach seinem Inhalt
     und sprengt damit schmale Fenster. min-width:0 stellt das ab. */
  min-width: 0;
}
.feld-gruppe > legend {
  font-weight: 600;
  font-size: .9rem;
  padding: 0 .3rem;
}
.feld-gruppe > legend em { color: var(--schlecht); font-style: normal; }
.feld-gruppe > label:last-child,
.feld-gruppe > p:last-child { margin-bottom: .5rem; }

/* --- Abwesenheiten ------------------------------------------------------ */

/* Die Abwesenheitsliste im Kalender ist am 2026-08-03 entfallen (siehe
   kalender_woche()); ihre Regeln .kabwesend/.kaname/.kagrund sind mit ihr
   weg. Die Anzeige der Abwesenheiten selbst steht jetzt im Dienstplan. */

.abw-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  align-items: center;
  padding: .6rem .2rem;
  min-height: 44px;
}

/* ==========================================================================
   Einrichtung und Update
   ========================================================================== */

.schritt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  margin: 1.4rem 0 .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand-hell);
}
.schritt:first-of-type { border-top: none; padding-top: 0; }
.schritt-nr {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  background: var(--grund);
  color: var(--text-leise);
  border: 1px solid var(--rand);
}
.schritt.erledigt .schritt-nr { background: var(--gut); border-color: var(--gut); color: #fff; }
.schritt.dran     .schritt-nr { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.schritt.offen              { color: var(--text-leise); }

/* Prüfliste der Voraussetzungen. Drei Zustände statt zwei: Ein fehlendes
   gd ist ärgerlich, aber kein Grund abzubrechen - ein fehlendes pdo_mysql
   schon. Das muss man auf einen Blick unterscheiden können. */
.pruefliste { list-style: none; margin: 0 0 1rem; padding: 0; }
.pruefliste li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .4rem .5rem;
  border-radius: 4px;
  margin-bottom: .25rem;
  font-size: .9rem;
}
.pruefliste li > strong { flex: none; width: 1rem; text-align: center; }
.pruefliste li small { display: block; color: var(--text-leise); font-size: .8rem; }
.pruefliste li.ja   { background: var(--gut-hell);      color: var(--gut); }
.pruefliste li.nein { background: var(--schlecht-hell); color: var(--schlecht); }
.pruefliste li.warn { background: var(--warn-hell);     color: #92400e; }
.pruefliste li.ja span, .pruefliste li.nein span, .pruefliste li.warn span { color: var(--text); }

/* Der Inhalt von config.php zum Abtippen, wenn inc/ nicht beschreibbar ist. */
.config-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  white-space: pre;
  overflow-x: auto;
  background: var(--grund);
}

.dateiliste {
  list-style: none;
  margin: .3rem 0 1rem;
  padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  /* Bei einem grossen Paket sind das schnell hundert Zeilen. */
  max-height: 16rem;
  overflow-y: auto;
}
.dateiliste li {
  padding: .15rem .4rem;
  border-bottom: 1px solid var(--rand-hell);
  word-break: break-all;
}
.dateiliste li:last-child { border-bottom: none; }
.dateiliste li.ja   { color: var(--gut); }
.dateiliste li.nein { color: var(--schlecht); }

/* --- Zeiterfassung ------------------------------------------------------ */

.zeit-summe {
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--grund);
  border-radius: var(--radius);
  padding: .15rem .6rem;
}

/* Die zwei Stempelknöpfe stehen ganz oben und dürfen nicht zu suchen sein -
   sie werden mit Handschuhen im Stiegenhaus gedrückt. */
.zeit-stempel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding: .6rem;
  margin-bottom: .8rem;
  background: var(--grund);
  border-radius: var(--radius);
}

.zeit-liste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.zeit-liste > li {
  border-bottom: 1px solid var(--rand-hell);
  padding: .5rem 0;
}
.zeit-liste > li:last-child { border-bottom: none; }
/* Ein laufender Einsatz sticht heraus - sonst vergisst man die Abfahrt. */
.zeit-liste > li.offen {
  border-left: 3px solid var(--intern);
  padding-left: .6rem;
  background: var(--warn-hell);
  border-radius: 0 4px 4px 0;
}

.zeit-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  align-items: baseline;
  font-size: .9rem;
}
.zeit-wer    { font-weight: 600; }
.zeit-spanne { color: var(--text-leise); }
.zeit-dauer  { margin-left: auto; font-weight: 700; }

details.zeit-neu > summary { display: inline-flex; }
details.zeit-aendern > summary { font-size: .8rem; color: var(--text-leise); }

/* --- Rechtstexte -------------------------------------------------------- */

/* Etwas schmaler als der Rest: Eine Datenschutzerklärung über die volle
   Breite eines 1200-Punkte-Fensters liest niemand - das Auge verliert beim
   Zeilenwechsel den Anschluss. */
.rechtstext { max-width: 46rem; }
.rechtstext h2 {
  font-size: 1.05rem;
  margin-top: 1.6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rand-hell);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.rechtstext h3 { font-size: .95rem; margin-top: 1rem; color: var(--text-leise); }
.rechtstext p, .rechtstext ul { font-size: .92rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext dl.daten { border-top: none; padding-top: 0; }

.fuss-schmal { margin-top: 1.2rem; }

/* Die Referenz des Kunden in der Liste. Auffällig genug, um sie beim
   Überfliegen zu finden - das ist ihr einziger Zweck. */
.zeile-referenz {
  margin: 0 0 .3rem;
  font-size: .8rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-leise);
}

.zurueck-formular { display: inline; }
.zurueck-formular button { font-size: .75rem; min-height: 0; }

/* ==========================================================================
   Dienstplan, Öffnungszeiten, Arbeitszeiten
   ========================================================================== */

/* Eine Tabelle mit sieben Tagesspalten passt auf kein Telefon. Statt sie
   umzubrechen (dann steht Montag über Dienstag und niemand erkennt eine
   Woche), rollt sie waagrecht - INNERHALB ihres Rahmens, damit die Seite
   selbst nicht mitrollt. */
.tabelle-rollt {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  margin-bottom: 1rem;
}
.tabelle-rollt > .tabelle { margin: 0; border: none; }

.dienstplan { min-width: 46rem; width: 100%; border-collapse: collapse; }
.dienstplan th, .dienstplan td {
  border: 1px solid var(--rand-hell);
  padding: .45rem .5rem;
  vertical-align: top;
  font-size: .84rem;
}
.dienstplan thead th { background: var(--grund); text-align: center; font-size: .8rem; }
.dienstplan thead th small { display: block; font-weight: 400; color: var(--text-leise); }

/* Die Namensspalte bleibt beim waagrechten Rollen stehen - ohne sie weiß
   nach zwei Spalten niemand mehr, wessen Zeile er liest. */
.dienstplan tbody th {
  position: sticky;
  left: 0;
  background: var(--flaeche);
  text-align: left;
  white-space: nowrap;
  z-index: 1;
  box-shadow: 1px 0 0 var(--rand-hell);
}

.dienstplan .heute   { box-shadow: inset 0 3px 0 var(--akzent); }
.dienstplan .tag-zu  { background: var(--grund); color: var(--text-leise); }

/* Die drei Zustände. Sie müssen sich auch OHNE Farbe unterscheiden - deshalb
   trägt jeder zusätzlich eine eigene Textform ("frei", die Marke, die
   Notiz). Farbe allein wäre für Farbenblinde keine Auskunft. */
.dienst-frei     { background: var(--grund); }
.dienst-anders   { background: var(--warn-hell); }
.dienst-abwesend { background: var(--schlecht-hell); }

.dienst-zeit  { display: block; font-variant-numeric: tabular-nums; }
.dienst-frei .dienst-zeit { color: var(--text-leise); }
.dienst-notiz { display: block; color: var(--text-leise); font-size: .74rem; margin-top: .15rem; }

.marke-abwesend {
  display: inline-block;
  background: var(--schlecht);
  color: #fff;
  border-radius: 4px;
  padding: .05rem .3rem;
  font-size: .72rem;
  margin-bottom: .2rem;
}

.dienst-aendern { font-size: .74rem; margin-top: .2rem; display: inline-block; }

.dienst-formular { display: grid; gap: .3rem; margin-top: .3rem; }
.dienst-formular input[type="time"],
.dienst-formular input[type="text"] { width: 100%; font-size: .8rem; }
.dienst-formular button { font-size: .8rem; }

.legende-punkt {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border: 1px solid var(--rand);
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: .2rem;
}

.wochen-blaettern { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Öffnungs- und Arbeitszeiten */
.zeiten-tabelle th[scope="row"] { white-space: nowrap; }
.zeiten-tabelle input[type="time"] { min-width: 7rem; }
.zeiten-tabelle .tag-zu { background: var(--grund); color: var(--text-leise); }

.schalter { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.schalter input { min-height: 0; }

.warnzeichen { color: var(--text-leise); font-style: italic; }

.person-wahl { display: flex; flex-wrap: wrap; gap: .4rem; }

@media (max-width: 40rem) {
  .dienstplan { min-width: 40rem; }
}

/* Wenn ein freiwilliges Feld leer geblieben ist. Bewusst NICHT .leer-hinweis:
   das ist die zentrierte Meldung fuer leere Listen und bringt 2rem Polsterung
   mit - mitten im Ticket saehe das aus wie ein eigener Abschnitt. */
.ohne-text {
  color: var(--text-leise);
  font-style: italic;
  font-size: .88rem;
  margin: 0 0 .8rem;
}

/* Feiertage. Sie wirken wie ein Wochenende (keine freien Zeitfenster), sind
   aber ausdruecklich benannt - "Keine Termine" liesse offen, ob niemand
   arbeitet oder nur nichts ansteht. */
.marke-feiertag {
  display: inline-block;
  background: var(--intern);
  color: #fff;
  border-radius: 4px;
  padding: .05rem .35rem;
  font-size: .72rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.marke-feiertag.offen { background: var(--text-leise); }

.dienst-feiertag { background: #fdf6e3; }
.feiertag-name {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  color: var(--intern);
  /* Lange Namen wie "Christi Himmelfahrt" duerfen die Spalte nicht
     auseinanderziehen - die Tabelle hat sieben davon. */
  overflow-wrap: anywhere;
}

/* Die Notiz zum Termin im Kalender. Kleiner als alles andere in der Karte:
   Zeit, Titel und wer hinfaehrt sind das, wonach man zuerst sucht. */
.knotiz {
  display: block;
  color: var(--text-leise);
  font-size: .74rem;
  font-style: italic;
  margin-top: .15rem;
}

/* Die uebliche Arbeitszeit an einem gesperrten Feiertag: sichtbar, aber
   erkennbar ausser Kraft. Durchgestrichen statt ausgeblendet - der Admin
   sieht so weiterhin, was normalerweise gaelte, wenn er fuer einen Notdienst
   doch jemanden einteilen will. */
.zeit-ruht {
  text-decoration: line-through;
  color: var(--text-leise);
}