/* ═══ Montagemeldung — Oberfläche ═══════════════════════════════════
   Ruhig, wenig Farbe, große Klickflächen. Das Programm wird im Büro am
   Bildschirm und auf der Baustelle am Handy benutzt — beides muss ohne
   Zoomen gehen. Schriften vom eigenen Server (System-Schriften), keine
   fremden Anfragen. */

:root {
  --tinte: #10232A;
  --tinte-hell: #4A6672;
  --linie: #DCE4E7;
  --flaeche: #FFFFFF;
  --hintergrund: #F2F5F6;
  --dunkel: #0E2A33;
  --dunkel-2: #163A45;
  --marke: #2C7C93;
  --marke-hell: #3E9DB8;
  --gruen: #1F7A4D;
  --gelb: #A96B10;
  --rot: #A62B2B;
  --rund: 6px;
  --schrift: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); color: var(--tinte);
  background: var(--hintergrund); font-size: 16px; line-height: 1.5;
}
a { color: var(--marke); }
h1 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }

/* ── Kopf ───────────────────────────────────────────────────────── */
.kopf {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--dunkel); color: #fff; padding: 12px 20px;
}
.marke { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: -0.02em; }
.marke-zeichen { width: 16px; height: 16px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--marke-hell) 0%, var(--marke) 100%); }
.marke-zeichen.gross { width: 30px; height: 30px; border-radius: 6px; display: block; margin: 0 auto 14px; }
.haupt { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.haupt a { color: #BCD3DB; text-decoration: none; padding: 7px 12px; border-radius: var(--rund);
  font-size: 15px; }
.haupt a:hover { background: var(--dunkel-2); color: #fff; }
.haupt a.an { background: var(--dunkel-2); color: #fff; font-weight: 600; }
.zahl { background: var(--rot); color: #fff; border-radius: 10px; padding: 1px 7px;
  font-size: 12px; font-weight: 700; margin-left: 4px; }
.konto { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.firma { color: #8FB0BB; }
.menue summary { cursor: pointer; list-style: none; padding: 6px 10px; border-radius: var(--rund);
  background: var(--dunkel-2); }
.menue summary::-webkit-details-marker { display: none; }
.menue { position: relative; }
.menue-auf { position: absolute; right: 0; top: 110%; background: #fff; color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--rund); min-width: 190px; padding: 8px;
  display: grid; gap: 2px; box-shadow: 0 8px 24px rgba(16,35,42,.16); z-index: 20; }
.menue-auf a { padding: 8px 10px; border-radius: 4px; text-decoration: none; color: var(--tinte); }
.menue-auf a:hover { background: var(--hintergrund); }
.menue-auf .rolle { padding: 4px 10px 8px; color: var(--tinte-hell); font-size: 13px;
  border-bottom: 1px solid var(--linie); margin-bottom: 4px; }

/* ── Inhalt ─────────────────────────────────────────────────────── */
.inhalt { max-width: 1120px; margin: 0 auto; padding: 24px 20px 60px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 20px 22px; margin: 0 0 20px; }
.karte.schmal { max-width: 620px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; flex-wrap: wrap; }
.hinweis-balken { background: #E7F3EC; border: 1px solid #BBDCC8; color: var(--gruen);
  padding: 11px 15px; border-radius: var(--rund); margin: 0 0 18px; }
.leer { color: var(--tinte-hell); }
.klein { font-size: 13px; color: var(--tinte-hell); }

/* ── Zahlen ─────────────────────────────────────────────────────── */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
  margin: 0 0 20px; }
.zahl-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 16px 18px; }
.zahl-karte b { display: block; font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
.zahl-karte span { font-size: 13px; color: var(--tinte-hell); }
.zahl-karte.warn { border-color: #E2B3B3; background: #FDF5F5; }
.zahl-karte.warn b { color: var(--rot); }

/* ── Warnungen ──────────────────────────────────────────────────── */
.warnliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden; }
.warnliste li { background: #fff; padding: 12px 15px; display: flex; gap: 11px; align-items: baseline; }
.warnliste .punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tinte-hell); }
.w-dringend .punkt { background: var(--rot); }
.w-wichtig .punkt { background: var(--gelb); }
.w-text { flex: 1; }
.w-frist { color: var(--tinte-hell); font-size: 13px; white-space: nowrap; }

/* ── Tabellen ───────────────────────────────────────────────────── */
.tafel-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund); }
.tafel { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.tafel th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinte-hell); padding: 10px 14px; background: var(--hintergrund);
  border-bottom: 1px solid var(--linie); font-weight: 600; }
.tafel td { padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tafel tr:last-child td { border-bottom: 0; }
.tafel tbody tr { cursor: pointer; }
.tafel tbody tr:hover { background: #F7FAFB; }
.land { display: inline-block; background: var(--dunkel); color: #fff; border-radius: 3px;
  padding: 1px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* ── Ampel ──────────────────────────────────────────────────────── */
.ampel { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 13px;
  font-weight: 600; white-space: nowrap; }
.ampel.gruen { background: #E7F3EC; color: var(--gruen); }
.ampel.gelb  { background: #FBF1DF; color: var(--gelb); }
.ampel.rot   { background: #FBEAEA; color: var(--rot); }

/* ── Formulare ──────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--rund);
  font: inherit; color: var(--tinte); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marke-hell); outline-offset: 1px;
  border-color: var(--marke-hell); }
textarea { min-height: 90px; resize: vertical; }
button, .knopf {
  display: inline-block; background: var(--marke); color: #fff; border: 0; border-radius: var(--rund);
  padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:hover, .knopf:hover { background: var(--marke-hell); }
.knopf.klein, button.klein { padding: 7px 13px; font-size: 14px; color: #fff; }
.knopf.still { background: #fff; color: var(--tinte); border: 1px solid var(--linie); }
.knopf.still:hover { background: var(--hintergrund); }
.knopf.warnung { background: var(--rot); }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.felder .breit { grid-column: 1 / -1; }
.fehler { background: #FBEAEA; border: 1px solid #E2B3B3; color: var(--rot); padding: 11px 14px;
  border-radius: var(--rund); margin: 0 0 16px; }
.tat-reihe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }

/* ── Anmeldung ──────────────────────────────────────────────────── */
body.nur-anmeldung { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--dunkel); padding: 20px; }
.anmelde-karte { background: #fff; border-radius: 10px; padding: 34px 32px; width: 100%;
  max-width: 400px; text-align: center; }
.anmelde-karte h1 { font-size: 22px; margin: 0 0 4px; }
.anmelde-karte .unter { color: var(--tinte-hell); font-size: 14px; margin: 0 0 22px; }
.anmelde-karte form { text-align: left; }
.anmelde-karte button { width: 100%; margin-top: 20px; padding: 12px; }
.anmelde-karte .klein { margin-top: 18px; }

/* ── Fuß ────────────────────────────────────────────────────────── */
.fuss { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; display: grid; gap: 6px;
  color: var(--tinte-hell); font-size: 12.5px; }
.fuss-recht { max-width: 70ch; }

/* ── Einsatz-Detail ─────────────────────────────────────────────── */
.zwei-spalten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }
.daten-liste { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 15px; }
.daten-liste dt { color: var(--tinte-hell); }
.daten-liste dd { margin: 0; }
.dok-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.dok-zeile:last-child { border-bottom: 0; }
.dok-name { flex: 1; min-width: 160px; }
.marke-zustand { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.z-da { background: #E7F3EC; color: var(--gruen); }
.z-laeuft_ab, .z-beantragt { background: #FBF1DF; color: var(--gelb); }
.z-fehlt, .z-abgelaufen, .z-zu_kurz { background: #FBEAEA; color: var(--rot); }
.z-waehrend { background: var(--hintergrund); color: var(--tinte-hell); }

/* ── Handy ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .kopf { gap: 12px; padding: 10px 14px; }
  .haupt { order: 3; width: 100%; }
  .inhalt { padding: 16px 14px 50px; }
  .karte { padding: 16px; }
  .konto .firma { display: none; }
}

/* Mappe am Handy: große Kacheln, alles mit dem Daumen erreichbar. */
.mappe-kachel { display: block; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px; margin: 0 0 10px; text-decoration: none;
  color: var(--tinte); }
.mappe-kachel b { display: block; font-size: 17px; }
.mappe-kopf { background: var(--dunkel); color: #fff; padding: 18px 20px; border-radius: var(--rund);
  margin: 0 0 16px; }
.mappe-kopf h1 { color: #fff; margin: 0 0 4px; }
.mappe-kopf p { margin: 0; color: #BCD3DB; font-size: 14px; }
.stand { font-size: 12.5px; color: var(--tinte-hell); }

@media print {
  .kopf, .fuss, .tat-reihe, .knopf { display: none !important; }
  body { background: #fff; }
  .karte { border: 0; padding: 0; margin: 0 0 18px; break-inside: avoid; }
}

/* Blöcke innerhalb von Karten */
.monteur-block { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.monteur-block:last-child { border-bottom: 0; }
.monteur-block h3 { font-size: 15.5px; margin: 0 0 6px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.monteur-block h3 a { text-decoration: none; }
.regel-block { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.regel-block:last-child { border-bottom: 0; }
.regel-block p { margin: 6px 0 0; }
ul.schlicht { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
ul.schlicht li { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
ul.schlicht li:last-child { border-bottom: 0; }
form.hochladen { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 14px; }
input[type=file] { width: 100%; padding: 9px; border: 1px dashed var(--linie); border-radius: var(--rund);
  background: var(--hintergrund); font-size: 14px; }

/* Registrierung */
.anmelde-karte.breit { max-width: 480px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
label.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  font-size: 13.5px; line-height: 1.5; margin-top: 18px; text-align: left; }
label.zustimmung input { width: auto; margin-top: 3px; flex: none; }

/* Hinweis zum Kontostand oben */
.konto-balken { background: #EAF3F6; color: var(--tinte); padding: 10px 20px; font-size: 14px;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--linie); }
.konto-balken a { font-weight: 600; }
.konto-balken.k-faellig { background: #FBF1DF; }
.konto-balken.k-gesperrt { background: #FBEAEA; }

/* ── Ergänzungen zur Veröffentlichung ───────────────────────────── */
.schritte { margin: 8px 0 16px; padding-left: 22px; }
.schritte li { margin: 0 0 8px; }
pre.code { background: var(--hintergrund); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 12px 14px; font-size: 13px; overflow-x: auto; white-space: pre; }
h3 { font-size: 16px; margin: 20px 0 6px; }
.karte.ruhig { background: #F7FAFB; }
tr[data-link] { cursor: pointer; }
details summary { cursor: pointer; }