/* posttakt CRM. Linien statt Kästen, §-Marken statt Banner.
   Farben und Schriften wie auf posttakt.de. */

@font-face { font-family: "Fraunces"; src: url("/static/schrift/fraunces-normal-400.woff2") format("woff2");
             font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/static/schrift/fraunces-italic-400.woff2") format("woff2");
             font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/static/schrift/newsreader-normal-400.woff2") format("woff2");
             font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/static/schrift/newsreader-italic-400.woff2") format("woff2");
             font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/schrift/ibm-plex-mono-normal-400.woff2") format("woff2");
             font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/schrift/ibm-plex-mono-normal-500.woff2") format("woff2");
             font-style: normal; font-weight: 500; font-display: swap; }

:root {
  --papier: #ECE5D7;
  --papier-dunkel: #E4DBC9;
  --tinte: #1C1610;
  --rost: #B5502E;
  --feder: #6E6353;
  --linie: #D4CAB7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.82em; color: var(--feder); }

h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 1.7rem; margin: .2rem 0 1.2rem; }

/* Kein Fettdruck: es gibt nur die 400er Schnitte. Hervorhebung ist eine Mono-Marke. */
strong { font-weight: 400; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .82em; color: var(--feder); letter-spacing: .04em; }

a { color: var(--tinte); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rost); }

.kopf {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 1rem 2rem; border-bottom: 1px solid var(--linie);
}
.kopf .marke { font-family: "Fraunces", serif; text-decoration: none; }
.kopf nav { display: flex; gap: 1.2rem; }
.kopf .abmelden { margin-left: auto; display: flex; gap: .6rem; align-items: baseline; }

main { padding: 2rem; max-width: 78rem; margin: 0 auto; }
.schmal { max-width: 26rem; }

section { border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 2rem; }
section:first-of-type { border-top: 0; margin-top: 0; }

.marke-zeile { letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .3rem; }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th {
  text-align: left; font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  font-weight: 400; color: var(--feder); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--linie); padding: .4rem .6rem .4rem 0;
}
table.liste td { border-bottom: 1px solid var(--linie); padding: .5rem .6rem .5rem 0; vertical-align: top; }

input, select {
  font: inherit; background: transparent; color: var(--tinte);
  border: 0; border-bottom: 1px solid var(--linie); padding: .3rem .2rem;
}
input:focus, select:focus { outline: 0; border-bottom-color: var(--rost); }

/* Anmeldung: Feld unter Feld, damit Label und Eingabe zusammenbleiben.
   Der Knopf behält seine eigene Breite — eine Plakette über die ganze Spalte
   wäre genau die Widget-Optik, die hier nicht vorkommt. */
.schmal form { display: grid; gap: .5rem; }
.schmal form button { justify-self: start; }
label { display: block; margin-top: .6rem; }

.zeile-formular { display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; margin: .8rem 0; }
.erfassen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; margin: .8rem 0 1.4rem; }

/* Schnelle Notiz in der Arbeitsliste — bleibt in der Zeile, statt sie zu verdoppeln */
form.notiz { display: flex; gap: .5rem; align-items: baseline; }
form.notiz input { width: 7rem; }

/* Textlink statt Knopf: Knopfplatten sind nur für die eine Haupthandlung erlaubt */
button.textlink {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinte); text-decoration: underline; text-underline-offset: 2px;
}
button.textlink:hover { color: var(--rost); }

button.haupt {
  font: inherit; cursor: pointer; background: var(--tinte); color: var(--papier);
  border: 0; padding: .45rem 1.1rem;
}
button.haupt:hover { background: var(--rost); }

.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li { border-bottom: 1px solid var(--linie); padding: .45rem 0; }
.verlauf .wer { color: var(--feder); font-size: .85em; }

.beleg { color: var(--feder); font-style: italic; }
.leer, .hinweis { color: var(--feder); }
.fehler { color: var(--rost); }

.karte { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.karte .spalte-links, .karte .spalte-rechts { min-width: 0; }

@media (max-width: 900px) {
  .karte { grid-template-columns: 1fr; }
  main { padding: 1.2rem; }
  .kopf { flex-wrap: wrap; padding: 1rem 1.2rem; }
}