/* Wagner-Werkzeuge: Optik wie immobilien-wagner.net. Papiergrund, Sandgold nur für Aktion, Auswahl und Fortschritt.
   Eckig, ohne Schatten, Haarlinien statt Kästen. Fraunces nur für Seitentitel, sonst Instrument Sans. */
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("schriften/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --grund: #f5f2ec;
  --flaeche: #fbf9f5;
  --flaeche-tief: #efeae1;
  --tinte: #2b2926;
  --leise: #66615a;
  --linie: #ddd5c8;
  --linie-stark: #c9bfaf;
  --akzent: #8d7455;
  --akzent-dunkel: #6f5a41;
  --akzent-hauch: #ece4d7;
  --gut: #4f6b4a;
  --warn: #9a4a2f;
  --warn-hauch: #f6ebe5;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --zug: 160ms cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  accent-color: var(--akzent);
  scrollbar-color: var(--linie-stark) var(--grund);
}

* { box-sizing: border-box; border-radius: 0; box-shadow: none; }
html { background: var(--grund); color: var(--tinte); font: 17px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; caret-color: var(--akzent); }
::selection { background: var(--akzent-hauch); color: var(--tinte); }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font: 400 2.15rem/1.12 var(--serif); letter-spacing: -.02em; }
h2 { font: 600 1.05rem/1.3 var(--sans); }
p { margin: 0; }
a { color: var(--akzent-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Kopf */
.kopfleiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--linie); background: var(--grund); }
.marke img { display: block; height: 36px; width: auto; }
.navigation { display: flex; align-items: center; gap: 1.5rem; }
.navigation a { color: var(--tinte); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid transparent;
  transition: border-color var(--zug), color var(--zug); }
.navigation a:hover { color: var(--akzent-dunkel); }
.navigation a[aria-current="page"] { border-bottom-color: var(--akzent); }
.wer { color: var(--leise); font-size: .88rem; }

.inhalt { max-width: 1120px; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 3rem) 5rem; }

/* Knöpfe */
.knopf, button { font: 500 1rem/1.2 var(--sans); cursor: pointer; border: 1px solid var(--akzent);
  background: var(--akzent); color: #fff; padding: .72rem 1.3rem; text-decoration: none; display: inline-flex;
  align-items: center; gap: .5rem; transition: background-color var(--zug), border-color var(--zug), color var(--zug); }
.knopf:hover, button:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf:active, button:active { background: #5d4b36; }
button.leise, .knopf.leise { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
button.leise:hover, .knopf.leise:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: transparent; }
button.klein, .knopf.klein { padding: .38rem .75rem; font-size: .88rem; }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; background: var(--akzent); border-color: var(--akzent); }
button.leise:disabled, button.leise:disabled:hover { background: transparent; border-color: var(--linie-stark); color: var(--tinte); }
[data-laeuft] .aktion-haupt { opacity: .45; pointer-events: none; }

/* Seitenkopf: Titel links, die eine Aktion rechts */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; margin-bottom: 2rem; border-bottom: 1px solid var(--linie); }
.seitenkopf .unterzeile { margin-top: .5rem; color: var(--leise); }
.pfadleiste { font-size: .9rem; margin-bottom: .7rem; }
.pfadleiste a { color: var(--leise); }

.abschnitt { margin-top: 3rem; }
.abschnitt > h2 { margin-bottom: .9rem; }
.abschnitt > .unterzeile { color: var(--leise); margin: -.5rem 0 1rem; font-size: .92rem; }

.leise-text { color: var(--leise); }
.klein-text { font-size: .88rem; }
.abstand-oben { margin-top: 1rem; max-width: 75ch; }
.zahl, td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Meldungen und Hinweise: ganze Haarlinie, kein Randbalken */
.meldung { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid #d9b5a5; background: var(--warn-hauch);
  color: var(--warn); max-width: 70ch; }
.hinweis { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--linie-stark); background: var(--flaeche);
  max-width: 70ch; }

/* Listen und Tabellen */
.liste { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.liste th { text-align: left; font: 500 .8rem/1.3 var(--sans); color: var(--leise); padding: 0 1rem .6rem 0;
  border-bottom: 1px solid var(--linie-stark); white-space: nowrap; }
.liste td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste th:last-child, .liste td:last-child { padding-right: 0; }
.liste tbody tr { transition: background-color var(--zug); }
.liste tbody tr:hover { background: var(--flaeche); }
.liste .rechts { text-align: right; }
.objektname { font-weight: 600; color: var(--tinte); text-decoration: none; }
.objektname:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.ordner { color: var(--leise); }
.dateiname { overflow-wrap: anywhere; }

/* Schrittleiste: je Schritt ein Quadrat, gefüllt wenn erledigt */
.schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.schritt { display: inline-flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.schritt::before { content: ""; width: .62rem; height: .62rem; border: 1px solid var(--akzent); flex: none;
  transform: translateY(-.05rem); }
.schritt[data-stand="erledigt"]::before { background: var(--akzent); }
.schritt[data-stand="unterbrochen"]::before { border-color: var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
.schritt-name { font-weight: 500; }
.schritt-wert { color: var(--leise); font-size: .92rem; }

.leer { padding: 3rem 0 1rem; max-width: 60ch; }
.leer h2 { font: 400 1.5rem/1.2 var(--serif); margin-bottom: .6rem; }
.leer p { color: var(--leise); }

/* Formulare */
.formular { display: grid; gap: 1.2rem; max-width: 34rem; }
.formular.raster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; column-gap: 1.2rem; }
.formular.raster .breit, .formular.raster .aktionen { grid-column: 1 / -1; }
.feld { display: grid; gap: .35rem; }
.feld label { font-weight: 500; font-size: .94rem; }
.feld .hilfe { color: var(--leise); font-size: .86rem; }
input[type="text"], input[type="email"], input[type="number"], input:not([type]), select {
  font: inherit; color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie-stark);
  padding: .62rem .75rem; width: 100%; transition: border-color var(--zug), background-color var(--zug); }
input:hover, select:hover { border-color: var(--akzent); }
input:focus, select:focus { outline: none; border-color: var(--akzent); background: #fff; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
input::placeholder { color: #8a847b; }
input[readonly] { background: var(--flaeche-tief); }
.aktionen { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* Upload */
.ablage { border: 1px dashed var(--akzent); background: var(--flaeche); padding: 2.6rem 2rem; display: grid;
  justify-items: start; gap: .9rem; transition: background-color var(--zug), border-color var(--zug); }
.ablage[data-ueber] { background: var(--akzent-hauch); border-style: solid; }
.ablage-titel { font: 400 1.55rem/1.2 var(--serif); }
.ablage-text { color: var(--leise); max-width: 62ch; }
.ordnerwahl { position: relative; }
.ordnerwahl input { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.ordnerwahl:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.hochladen .hinweis, .hochladen .meldung { max-width: none; }
.fortschritt { margin-top: 1.4rem; display: grid; gap: .55rem; }
.fortschritt[data-leer] { display: none; }
.fortschritt-text { font-variant-numeric: tabular-nums; }
progress { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border: 0; background: var(--linie); }
progress::-webkit-progress-bar { background: var(--linie); }
progress::-webkit-progress-value { background: var(--akzent); }
progress::-moz-progress-bar { background: var(--akzent); }
.dateiliste { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 22rem; overflow: auto;
  border-top: 1px solid var(--linie); font-size: .92rem; }
.dateiliste:empty { display: none; }
.datei { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.datei-name { overflow-wrap: anywhere; }
.datei-stand { color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.datei[data-art="fertig"] .datei-stand { color: var(--gut); }
.datei[data-art="fehler"] .datei-stand { color: var(--warn); white-space: normal; text-align: right; }
.datei[data-art="laeuft"] .datei-stand { color: var(--akzent-dunkel); }

/* Leitung */
.lage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--linie); }
.lage > div { padding: 1.1rem 1.25rem; display: grid; gap: .4rem; align-content: start; }
.lage > div + div { border-left: 1px solid var(--linie); }
.lage dt { font-size: .82rem; color: var(--leise); }
.lage dd { margin: 0; font-variant-numeric: tabular-nums; }
.lage .wert { font-size: 1.15rem; font-weight: 600; }
.lage .warn { color: var(--warn); }
.lage progress { margin-top: .3rem; }
.lage progress.ueber-warnung::-webkit-progress-value { background: var(--warn); }
.lage progress.ueber-warnung::-moz-progress-bar { background: var(--warn); }
.zustand, .einzeilig { white-space: nowrap; }
.zustand[data-zustand="gesperrt"] { color: var(--warn); }
.zustand[data-zustand="aktiv"] { color: var(--gut); }
.knopfreihe { display: flex; gap: .45rem; justify-content: flex-end; flex-wrap: wrap; }
.linkausgabe { margin-top: 1.4rem; padding: 1.1rem 1.25rem; border: 1px solid var(--akzent); background: var(--flaeche);
  display: grid; gap: .8rem; max-width: 46rem; }
.linkausgabe .zeile { display: flex; gap: .6rem; }
.linkausgabe input { font-size: .9rem; }

/* Einzelkarte: Anmeldung, Einladung, Fehler */
.karte { background: var(--flaeche); border: 1px solid var(--linie); padding: 2.4rem 2.2rem; display: grid; gap: 1rem;
  justify-items: start; }
.schmal { max-width: 32rem; margin: 3rem auto 0; }
.karte h1 { margin-bottom: .2rem; }

@media (max-width: 760px) {
  html { font-size: 16px; }
  h1 { font-size: 1.75rem; }
  .inhalt { padding-top: 1.6rem; }
  .kopfleiste { flex-wrap: wrap; }
  .navigation { gap: 1rem; }
  .wer { display: none; }
  .seitenkopf { align-items: flex-start; }
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste tr { padding: .8rem 0; border-bottom: 1px solid var(--linie); }
  .liste td { border: 0; padding: .3rem 0; }
  .liste td[data-label]::before { content: attr(data-label); display: block; color: var(--leise); font-size: .8rem; }
  .liste td:empty { display: none; }
  .liste td.kopfzelle { padding-bottom: .4rem; }
  .liste .rechts { text-align: left; }
  .liste td.zahl, .einzeilig, .schritt { white-space: normal; }
  .knopfreihe { justify-content: flex-start; }
  .lage { grid-template-columns: 1fr; }
  .lage > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .formular.raster { grid-template-columns: 1fr; }
  .ablage { padding: 1.6rem 1.2rem; }
  .karte { padding: 1.6rem 1.3rem; }
  .schmal { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }