:root {
  --rahmen: #d8dce3;
  --grau: #f4f6f9;
  --text: #1d2430;
  --gedaempft: #66707f;
  --akzent: #0b5fa5;
  --gut: #0f7a3d;
  --warn: #a35b00;
  --fehler: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
header {
  display: flex; align-items: center; gap: 2rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--rahmen);
  background: var(--grau);
  flex-wrap: wrap;
}
.marke { font-weight: 700; letter-spacing: .04em; }
.marke span { font-weight: 400; color: var(--gedaempft); }
nav { display: flex; gap: 1.25rem; }
.anmeldung { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.anmeldung form { margin: 0; }
.anmeldung a { color: var(--akzent); text-decoration: none; }
.anmeldung a:hover { text-decoration: underline; }
nav a { color: var(--gedaempft); text-decoration: none; padding-bottom: 2px; }
nav a:hover { color: var(--text); }
nav a.aktiv { color: var(--akzent); border-bottom: 2px solid var(--akzent); font-weight: 600; }
main { padding: 1.5rem; max-width: 1400px; }
h1 { font-size: 1.25rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 2rem 0 .6rem; }
h2:first-child { margin-top: 0; }
p.hinweis { color: var(--gedaempft); margin: .2rem 0 1rem; }

.karte {
  border: 1px solid var(--rahmen); border-radius: 6px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem; background: #fff;
}
.formzeile { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: 12px; color: var(--gedaempft); margin-bottom: .25rem; }
input[type=text], input[type=number], input[type=date], select {
  padding: .45rem .55rem; border: 1px solid var(--rahmen); border-radius: 4px;
  font-size: 14px; font-family: inherit; background: #fff;
}
input[readonly] { background: var(--grau); }
button {
  padding: .5rem 1.1rem; border: 0; border-radius: 4px; background: var(--akzent);
  color: #fff; font-size: 14px; cursor: pointer;
}
button:hover { background: #094c85; }
button.sekundaer { background: #fff; color: var(--text); border: 1px solid var(--rahmen); }
button.klein { padding: .2rem .5rem; font-size: 12px; }

table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--rahmen); text-align: left; }
th { background: var(--grau); font-size: 12px; text-transform: uppercase;
     letter-spacing: .03em; color: var(--gedaempft); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.bester td { background: #eef7f1; font-weight: 600; }
.tabelle-scroll { overflow-x: auto; }

.meldung { padding: .6rem .8rem; border-radius: 4px; margin-bottom: 1rem; }
.meldung.warnung { background: #fff6e5; color: var(--warn); border: 1px solid #f0d9ac; }
.meldung.fehler { background: #fdeceb; color: var(--fehler); border: 1px solid #f2c2be; }
.meldung.info { background: #eef4fb; color: var(--akzent); border: 1px solid #cfe0f2; }

.pill { display: inline-block; padding: .1rem .45rem; border-radius: 10px;
        background: var(--grau); color: var(--gedaempft); font-size: 12px; }
/* Rote Markierung aus dem Preisblatt = Vertragsfrächter */
.pill.rot { background: #fdeceb; color: var(--fehler); border: 1px solid #f2c2be;
            font-weight: 600; }
tr.vertrag td:first-child { border-left: 3px solid var(--fehler); }
tr.vertrag td:nth-child(2) { color: var(--fehler); font-weight: 600; white-space: nowrap; }
.farbfeld { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
            background: var(--fehler); vertical-align: -1px; margin-right: .35rem; }
.mini { font-size: 12px; color: var(--gedaempft); }
ul.gruende { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--gedaempft); font-size: 12px; }
.kennzahl { font-size: 1.6rem; font-weight: 700; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
pre { background: var(--grau); padding: .8rem; border-radius: 4px; overflow-x: auto;
      font-size: 12px; }