/* ==========================================================================
   Assetz — Design-System

   Sämtliche Farbwerte stammen aus dem CD-Manual des Stadtwerk Haßfurt,
   abgerufen über den CD-Server. Sie sind nicht geschätzt und nicht aus den
   Druckfarben umgerechnet — Bildschirm und Druck sind dort getrennt
   festgelegt.

   Zwei Punkte, die man wissen muss:

   1. Bordeaux ist #931041. Zwei ältere Fassungen kursieren weiterhin und
      dürfen nicht verwendet werden: #941443 (noch auf der Webseite) und
      #931443 (noch im PowerPoint-Thema und in der Logo-Datei). Die Logo-Datei
      bleibt trotzdem unverändert, weil das Manual jedes Umfärben des Logos
      untersagt. Dieser Widerspruch ist mit der Agentur zu klären.

   2. Überfälligkeit wird bewusst in Bordeaux markiert. Es ist die Signalfarbe
      des Hauses, und Überfälligkeit ist genau das Signal, um das es in dieser
      Anwendung geht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schrift

   Avenir ist die Hausschrift, die Webfont-Lizenz liegt vor. Die Dateien
   gehören nach static/fonts/ und sind nicht Teil des Repositorys — sie sind
   lizenziert und haben in der Versionsverwaltung nichts verloren.

   Sind sie nicht vorhanden, greift die Ersatzkette. Die Anwendung sieht dann
   anders aus, funktioniert aber unverändert.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("../fonts/AvenirNextLTPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("../fonts/AvenirNextLTPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("../fonts/AvenirNextLTPro-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Gestaltungsvorgaben
   -------------------------------------------------------------------------- */

:root {
  /* Hausfarben, Bildschirm */
  --bordeaux:        #931041;
  --bordeaux-dunkel: #6b0c2e;
  --petrol:          #334250;
  --petrol-hell:     #4d6374;
  --grau-10:         #ececec;
  --grau-30:         #c5c6c6;

  /* Flächen und Text */
  --grund:      #faf9f9;
  --flaeche:    #ffffff;
  --flaeche-2:  #f4f1f2;
  --linie:      #e2dde0;
  --linie-kraeftig: #cdc5c9;
  --text:       #1f2830;
  --text-2:     #55636e;
  --text-3:     #87919b;

  /* Zustände. Überfällig ist bewusst die Hausfarbe. */
  --ok:          #356b53;
  --ok-flaeche:  #eaf1ed;
  --bald:        #8a6410;
  --bald-flaeche:#f8f1e3;
  --faellig:     var(--bordeaux);
  --faellig-flaeche: #f8ecf0;

  --auf-farbe:  #ffffff;

  /* Schriftfamilien. Avenir zuerst — auch als auf dem Rechner
     installierte Fassung, falls die Webfont-Dateien fehlen. */
  --schrift: "Avenir Next LT Pro", "Avenir Next", "Avenir",
             "Segoe UI", system-ui, sans-serif;
  --schrift-daten: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --radius: 4px;
  --schatten: 0 1px 2px rgba(31, 40, 48, .06),
              0 8px 22px -14px rgba(31, 40, 48, .3);

  --raster: 1180px;
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: 1.75rem; letter-spacing: -.015em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0; }

a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bordeaux-dunkel); }

:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 2px;
  border-radius: 2px;
}

code, .daten {
  font-family: var(--schrift-daten);
  font-size: .88em;
}

/* Zahlen in Spalten müssen untereinander stehen. */
.zahl, td.zahl, .datum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Aufbau
   -------------------------------------------------------------------------- */

.huelle { max-width: var(--raster); margin-inline: auto; padding-inline: 24px; }

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  flex-wrap: wrap;
}

/* Das Logo braucht laut Manual ringsum Freiraum in Höhe des Bildzeichens
   und mindestens 150 px Breite auf dem Bildschirm. */
.logo { display: block; width: 172px; height: auto; padding: 10px 0; }

.haupt-navigation {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.haupt-navigation a {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--text-2);
  text-decoration: none;
  font-size: .95rem;
}
.haupt-navigation a:hover { background: var(--flaeche-2); color: var(--text); }
.haupt-navigation a[aria-current="page"] {
  background: var(--bordeaux);
  color: var(--auf-farbe);
}

.benutzer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--text-2);
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--linie);
}

main { padding-block: 40px 72px; }

.seitenkopf { margin-bottom: 28px; }
.seitenkopf p { color: var(--text-2); margin-top: 8px; max-width: 68ch; }

.stapel { display: flex; flex-direction: column; gap: 20px; }
.reihe { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.raster-3 { display: grid; gap: 18px; }
@media (min-width: 800px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Bausteine
   -------------------------------------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--schatten);
}
.karte > h2, .karte > h3 { margin-bottom: 10px; }
.karte p { color: var(--text-2); }

/* Kennzahl-Kachel für das Fristen-Dashboard ab Phase 2. */
.kennzahl { display: flex; flex-direction: column; gap: 4px; }
.kennzahl .wert {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kennzahl .titel {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kennzahl.ist-faellig .wert { color: var(--faellig); }
.kennzahl.ist-bald   .wert { color: var(--bald); }
.kennzahl.ist-ok     .wert { color: var(--ok); }

.marke {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marke.ok      { background: var(--ok-flaeche);      color: var(--ok); }
.marke.bald    { background: var(--bald-flaeche);    color: var(--bald); }
.marke.faellig { background: var(--faellig-flaeche); color: var(--faellig); }
.marke.ruhend  { background: var(--flaeche-2);       color: var(--text-3); }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bordeaux);
  color: var(--auf-farbe);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--bordeaux-dunkel); color: var(--auf-farbe); }
.knopf.still {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--linie-kraeftig);
}
.knopf.still:hover { background: var(--flaeche-2); color: var(--text); }

/* Tabellen: breite Inhalte scrollen in ihrem eigenen Kasten, nie die Seite. */
.tabelle-rahmen {
  overflow-x: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
th {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--flaeche-2);
  font-weight: 600;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--flaeche-2); }

/* Hinweise */
.hinweis {
  border-inline-start: 3px solid var(--linie-kraeftig);
  padding: 4px 0 4px 18px;
  color: var(--text-2);
}
.hinweis.wichtig { border-inline-start-color: var(--bordeaux); }

/* Meldungen aus django.contrib.messages */
.meldungen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.meldung {
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.meldung.success { border-color: var(--ok); background: var(--ok-flaeche); color: var(--ok); }
.meldung.warning { border-color: var(--bald); background: var(--bald-flaeche); color: var(--bald); }
.meldung.error   { border-color: var(--bordeaux); background: var(--faellig-flaeche); color: var(--bordeaux); }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feld label { font-size: .9rem; font-weight: 500; }
.feld input, .feld select, .feld textarea {
  padding: 9px 12px;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  width: 100%;
}
.feld .fehler { color: var(--bordeaux); font-size: .88rem; }
.feld .hilfe { color: var(--text-3); font-size: .85rem; }

.anmeldung { max-width: 400px; margin: 60px auto; }

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 26px 40px;
  color: var(--text-3);
  font-size: .85rem;
}

/* Vom Bildschirm verborgen, für Vorleseprogramme vorhanden. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprungmarke zum Inhalt, für Bedienung per Tastatur. */
.sprung {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--bordeaux);
  color: var(--auf-farbe);
  padding: 10px 18px;
  border-radius: var(--radius);
  z-index: 100;
}
.sprung:focus { left: 8px; color: var(--auf-farbe); }

@media (prefers-reduced-motion: no-preference) {
  .knopf, .haupt-navigation a { transition: background-color .14s ease, color .14s ease; }
}

@media print {
  .kopf, .fuss, .haupt-navigation, .knopf { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Anlagen
   -------------------------------------------------------------------------- */

/* Zwei Spalten: links der Inhalt, rechts das Beiwerk. Unter 980 px
   untereinander — das Feld arbeitet am Tablet im Hochformat. */
.spalten { display: grid; gap: 20px; align-items: start; }
@media (min-width: 980px) { .spalten { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }

.suchleiste { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--text-3); }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--bordeaux); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--text); font-weight: 600; }

/* Beschreibungsliste für Angaben: Beschriftung links, Wert rechts. */
.angaben { display: grid; gap: 0; margin: 0; }
@media (min-width: 560px) { .angaben { grid-template-columns: minmax(140px, 34%) 1fr; } }
.angaben dt {
  color: var(--text-3);
  font-size: .88rem;
  padding: 9px 14px 9px 0;
  border-top: 1px solid var(--linie);
}
.angaben dd {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--linie);
  overflow-wrap: anywhere;
}
@media (max-width: 559px) {
  .angaben dt { padding-bottom: 0; }
  .angaben dd { border-top: none; padding-top: 2px; padding-bottom: 12px; }
}

.schlicht { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.schlicht > li { padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.schlicht > li:last-child { border-bottom: none; padding-bottom: 0; }

/* Kachel zur Wahl der Anlagenart beim Anlegen. */
a.karte.artwahl { text-decoration: none; color: inherit; display: block; }
a.karte.artwahl:hover { border-color: var(--bordeaux); }
a.karte.artwahl h3 { color: var(--bordeaux); }
a.karte.artwahl .ordner { font-size: .82rem; color: var(--text-3); margin-top: 2px; }

.blaettern {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 22px; color: var(--text-2); font-size: .92rem;
}

/* Auswahlfelder und Textfelder in Formularen sollen gleich breit wirken. */
.feld select { appearance: none; background-image: none; }
.feld input[type="file"] { padding: 7px 10px; }
.feld ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.feld ul label { font-weight: 400; display: flex; align-items: center; gap: 6px; }