/* Infoboard – im Erscheinungsbild von verwa.de
   Schrift: Merriweather Sans (SIL OFL, lokal ausgeliefert – siehe static/fonts)
   Farben aus verwa.de: Rot #F50D14, Orange #FA8012, Dunkel #1E0404, Text #626061 */

@font-face { font-family: "Merriweather Sans"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/merriweather-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/merriweather-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/merriweather-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/merriweather-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  /* VERWA-Hausfarben */
  --verwa-rot: #f50d14;
  --verwa-orange: #fa8012;
  --verwa-dunkel: #1e0404;
  --verwa-grau: #626061;

  --bg: #f4f4f4;
  --flaeche: #ffffff;
  --text: #3a3637;          /* etwas dunkler als #626061 – besser lesbar im Treppenhaus */
  --text-leise: var(--verwa-grau);
  --ueberschrift: var(--verwa-dunkel);
  --linie: #e4e2e2;
  --schatten: 5px 0 30px -10px rgba(30, 4, 4, .14);

  /* Signalfarben der Meldungsarten */
  --rot: #d40a10;      --rot-bg: #fdecec;     /* Störung (VERWA-Rot, für Text leicht abgedunkelt) */
  --orange: #b45a00;   --orange-bg: #fff1e3;  /* Termin  (VERWA-Orange, für Text abgedunkelt) */
  --gruen: #1e6b3a;    --gruen-bg: #e8f3ec;   /* Behoben */
  --neutral: #4a4546;  --neutral-bg: #efeded; /* Hinweis */

  --radius: 4px;
  --schrift: "Merriweather Sans", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--verwa-rot); }
strong, b { font-weight: 600; }

.seite {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.seite.breit { max-width: 860px; }

/* ---------- Kopf mit Logo ---------- */

.kopf { margin-bottom: 28px; }
.logo { display: block; height: 52px; width: auto; margin: 0 0 22px; }
.kopf-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-leise);
}
.kopf-label::after {          /* kurze rote Linie wie bei „Über uns“ auf verwa.de */
  content: "";
  width: 32px;
  height: 1px;
  background: var(--verwa-rot);
}
.kopf h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ueberschrift);
}
.stand { margin: 8px 0 0; color: var(--text-leise); font-size: 15px; }

h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-leise);
}
h2::after { content: ""; width: 32px; height: 1px; background: var(--verwa-rot); }

/* ---------- Alles in Ordnung ---------- */

.alles-gut {
  background: var(--flaeche);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px 22px 18px;
}
.alles-gut-titel { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--gruen); }
.alles-gut p:last-child { margin: 0; }

/* ---------- Karten ---------- */

.karte {
  background: var(--flaeche);
  border-left: 4px solid var(--neutral);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.karte--stoerung { border-left-color: var(--verwa-rot); }
.karte--behoben  { border-left-color: var(--gruen); }
.karte--termin   { border-left-color: var(--verwa-orange); }
.karte--hinweis  { border-left-color: var(--neutral); }

.karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.karte-kopf h3 {
  margin: 0;
  flex: 1 1 220px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ueberschrift);
}

.marke {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--neutral-bg);
  color: var(--neutral);
  white-space: nowrap;
}
.karte--stoerung .marke { background: var(--verwa-rot); color: #fff; }
.karte--behoben  .marke { background: var(--gruen-bg); color: var(--gruen); }
.karte--termin   .marke { background: var(--orange-bg); color: var(--orange); }

.zeitangabe { margin: 10px 0 0; font-weight: 600; font-size: 16px; color: var(--ueberschrift); }
.text { margin: 8px 0 0; white-space: pre-line; font-weight: 400; }

.chronik {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--linie);
}
.chronik li {
  display: grid;
  grid-template-columns: 7.4em 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 15.5px;
  font-weight: 400;
}
.chronik time { color: var(--text-leise); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chronik li:first-child span { font-weight: 600; color: var(--ueberschrift); }

/* ---------- Fuß ---------- */

.fuss {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 15px;
}
.fuss p { margin: 0 0 8px; }
.notfall {
  background: var(--flaeche);
  border-left: 4px solid var(--verwa-rot);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 12px 16px;
  margin-bottom: 18px !important;
  color: var(--ueberschrift);
  font-weight: 600;
}
.klein { font-size: 13px; }

/* ---------- Verwaltung ---------- */

.zurueck { margin: 0 0 12px; font-size: 15px; }
.objektliste { list-style: none; padding: 0; margin: 0; }
.objektliste a {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 18px;
  margin-bottom: 12px;
  color: var(--text);
  text-decoration: none;
  border-left: 4px solid transparent;
}
.objektliste a:hover { border-left-color: var(--verwa-rot); }
.objektliste strong { color: var(--ueberschrift); }
.meta { color: var(--text-leise); font-size: 14px; margin: 6px 0 0; }
.rot-text { color: var(--rot); }

.werkzeuge {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 18px;
}
.url { margin: 0 0 10px; font-size: 14px; word-break: break-all; }
.url span { color: var(--text-leise); }

.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knoepfe form { margin: 0; }

/* Knöpfe wie der „Kontakt“-Knopf auf verwa.de */
button, .knopf {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--verwa-rot);
  background: var(--verwa-rot);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.3;
}
button:hover { filter: brightness(.92); }
.knopf, button.leise { background: transparent; color: var(--ueberschrift); border-color: #cfcaca; }
.knopf:hover, button.leise:hover { border-color: var(--verwa-rot); color: var(--verwa-rot); filter: none; }
button.gruen { background: var(--gruen); border-color: var(--gruen); }
button.rot, button.dunkel { background: var(--verwa-dunkel); border-color: var(--verwa-dunkel); }
button.haupt { font-size: 14px; padding: 13px 40px; }

.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; color: var(--ueberschrift); }
.formular small, .optional { font-weight: 300; color: var(--text-leise); font-size: 13px; }
input[type=text], input[type=date], input[type=datetime-local], textarea {
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 9px 11px;
  border: 1px solid #d6d2d2;
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
input:focus, textarea:focus { outline: 2px solid rgba(245, 13, 20, .25); border-color: var(--verwa-rot); }
input[type=radio], input[type=checkbox] { accent-color: var(--verwa-rot); }
.arten { border: 0; padding: 0; margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.arten legend { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--ueberschrift); }
.arten label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 16px; }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.erklaerung { margin: 0; color: var(--text-leise); font-size: 14px; }
.neu {
  margin-top: 24px;
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 4px 18px 20px;
}
.neu h2 { margin-top: 18px; }
.neu button.haupt { justify-self: start; }

.aktionen { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); display: grid; gap: 10px; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zeile input[type=text] { flex: 1 1 220px; width: auto; }
.loeschen summary { cursor: pointer; color: var(--text-leise); font-size: 14px; padding: 8px 0; }
.loeschen .zeile { margin-top: 6px; }
.loeschen label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.archiv summary { cursor: pointer; font-weight: 600; margin: 24px 0 12px; color: var(--ueberschrift); }
.archiv .karte { opacity: .7; }
.leer { color: var(--text-leise); }

.hinweis-ok, .hinweis-fehler {
  padding: 10px 14px; border-radius: 3px; margin: 0 0 14px; font-size: 15px; font-weight: 400;
}
.hinweis-ok { background: var(--gruen-bg); color: var(--gruen); }
.hinweis-fehler { background: var(--rot-bg); color: var(--rot); }

/* ---------- Aushang (DIN A4) ---------- */

body.aushang { background: #e6e4e4; color: var(--verwa-dunkel); }
.nur-bildschirm { text-align: center; color: var(--verwa-grau); font-size: 14px; margin: 16px; }
.blatt {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 24px;
  padding: 18mm 20mm 14mm;
  background: #fff;
  color: var(--verwa-dunkel);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 4mm solid var(--verwa-rot);
}
.blatt .logo { height: 26mm; margin: 0 0 10mm; }
.blatt-label {
  margin: 0;
  font-size: 13pt;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verwa-rot);
}
.blatt h1 { margin: 5mm 0 0; font-size: 26pt; font-weight: 600; line-height: 1.25; }
.blatt-adresse { margin: 5mm 0 0; font-size: 16pt; font-weight: 400; color: var(--verwa-grau); }
.qr-rahmen {
  margin: 10mm 0 7mm;
  padding: 5mm;
  border: 1mm solid var(--verwa-dunkel);
  border-radius: 3mm;
}
.qr { display: block; width: 78mm; height: 78mm; }
.blatt-anleitung { margin: 0; font-size: 16pt; font-weight: 600; line-height: 1.4; }
.blatt-url { margin: 4mm 0 0; font-size: 9pt; font-weight: 300; color: var(--verwa-grau); word-break: break-all; }
.blatt-beispiele {
  margin: 9mm 0 0;
  padding: 0;
  list-style: none;
  font-size: 12pt;
  font-weight: 400;
  color: var(--verwa-grau);
  line-height: 1.75;
}
.blatt-fuss {
  margin-top: auto;
  padding-top: 8mm;
  font-size: 10pt;
  font-weight: 300;
  color: var(--verwa-grau);
}

@media screen and (max-width: 820px) {
  .blatt { width: auto; min-height: 0; margin: 0 16px 24px; padding: 28px 20px; }
  .blatt .logo { height: 64px; }
  .qr { width: 70vw; height: 70vw; max-width: 78mm; max-height: 78mm; }
}

@media print {
  @page { size: A4; margin: 0; }
  body.aushang { background: #fff; }
  .nur-bildschirm { display: none; }
  .blatt { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}