/* Der Stil folgt der Webseite von BAU-REAL-PMG, am 11.09.2026 dort gemessen.

   Rot        #D5072D   Akzent, sparsam
   Dunkelrot  #B3050B   gedrückter Zustand
   Grau       #707070   Navigation und Fließtext
   Dunkelgrau #444444   Überschriften
   Flächen    #F9F9F9 und #EBEBEB
   Schrift    Folio, ersatzweise Helvetica Neue

   Folio ist eine gekaufte Schrift und liegt nicht auf dem Server. Der
   Ersatzstapel trifft sie nah genug, und keine Schriftdatei von einem fremden
   Server zu laden ist hier die richtige Entscheidung: es spart eine
   Verbindung nach draußen, die wir dem Kunden sonst erklären müssten.
*/

:root {
    --rot: #d5072d;
    --rot-dunkel: #b3050b;
    --grau: #707070;
    --grau-dunkel: #444444;
    --grau-hell: #969696;
    --flaeche: #f9f9f9;
    --linie: #ebebeb;
    --weiss: #ffffff;
    --seitenleiste: 260px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--weiss);
    color: var(--grau-dunkel);
    font-family: Folio, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); text-decoration: underline; }

h1, h2, h3 {
    color: var(--grau-dunkel);
    font-weight: 500;
    letter-spacing: 0.4px;
    margin: 0 0 12px;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; margin-top: 34px; }
h3 { font-size: 16px; margin-top: 24px; }

/* Zahlen in Tabellen müssen untereinander stehen. */
.zahl, table td.zahl, .kennzahl-wert {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* -- Gerüst -------------------------------------------------------------- */

.rahmen { display: flex; min-height: 100vh; }

.seitenleiste {
    width: var(--seitenleiste);
    flex: 0 0 var(--seitenleiste);
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
    padding: 32px 0 24px;
    display: flex;
    flex-direction: column;
}

.seitenleiste .logo { padding: 0 28px 28px; }
.seitenleiste .logo img { width: 150px; height: auto; display: block; }

.seitenleiste nav { display: flex; flex-direction: column; }

.seitenleiste nav a,
.seitenleiste nav span {
    display: block;
    padding: 9px 28px 9px 24px;
    border-left: 4px solid transparent;
    color: var(--grau);
    font-size: 13.5px;
    letter-spacing: 0.3px;
}
.seitenleiste nav a:hover { color: var(--grau-dunkel); text-decoration: none; }
.seitenleiste nav a.aktiv {
    border-left-color: var(--rot);
    color: var(--grau-dunkel);
}
.seitenleiste nav span {
    color: #b9b9b9;
    cursor: default;
}
.seitenleiste nav span::after {
    content: "in Vorbereitung";
    display: block;
    font-size: 11px;
    letter-spacing: 0.2px;
    color: #c9c9c9;
}

.leistenkopf {
    padding: 0 28px 10px;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--grau-hell);
    margin-top: 18px;
}

.leistenfuss {
    margin-top: auto;
    padding: 22px 28px 0;
    border-top: 1px solid var(--linie);
    font-size: 12.5px;
    color: var(--grau-hell);
}
.leistenfuss form { margin-top: 6px; }
.leistenfuss button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--rot);
    font: inherit;
    cursor: pointer;
}

.inhalt { flex: 1; padding: 40px 48px 64px; max-width: 1080px; }

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

.leitzeile {
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rot);
    margin-bottom: 6px;
}

.unterzeile { color: var(--grau); margin: 0 0 26px; max-width: 70ch; }

.karte {
    border: 1px solid var(--linie);
    background: var(--weiss);
    padding: 26px 28px;
    margin-bottom: 20px;
}

.hinweis {
    border-left: 3px solid var(--linie);
    background: var(--flaeche);
    padding: 14px 18px;
    color: var(--grau);
    font-size: 14px;
    margin: 18px 0;
}
.hinweis.fehler { border-left-color: var(--rot); color: var(--grau-dunkel); }

/* Eine Zahl regiert, der Rest ordnet sich unter. */
.kopfzahl { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; }
.kopfzahl .gross {
    font-size: 68px;
    line-height: 0.9;
    font-weight: 500;
    color: var(--rot);
    font-variant-numeric: tabular-nums;
}
.kopfzahl .gross small {
    display: block;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--grau-hell);
    font-weight: 400;
    margin-top: 10px;
}

.kennzahlen {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
.kennzahl-wert {
    font-size: 25px;
    font-weight: 500;
    color: var(--grau-dunkel);
    line-height: 1.1;
}
.kennzahl-name {
    font-size: 11.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--grau-hell);
    margin-top: 4px;
}

/* -- Befunde ------------------------------------------------------------- */

.befundgruppe { margin-top: 34px; }
.befundgruppe > p.anlass { color: var(--grau); max-width: 76ch; margin: 0 0 14px; }

.titelzeile {
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--grau-hell);
    margin: 20px 0 8px;
    border-bottom: 1px solid var(--linie);
    padding-bottom: 5px;
}

ul.befunde { list-style: none; margin: 0; padding: 0; }
ul.befunde > li {
    padding: 9px 0 9px 16px;
    border-left: 2px solid var(--linie);
    margin-bottom: 2px;
}
ul.befunde > li:hover { border-left-color: var(--rot); background: var(--flaeche); }

.gegenueber { margin: 8px 0 2px; font-size: 13.5px; }
.gegenueber div { padding: 4px 0 4px 14px; border-left: 2px solid var(--linie); }
.gegenueber .vorher { color: var(--grau-hell); text-decoration: line-through; }
.gegenueber .jetzt { color: var(--grau-dunkel); }
.gegenueber b {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--grau-hell);
    display: block;
}

/* -- Formulare ----------------------------------------------------------- */

label { display: block; font-size: 13px; color: var(--grau); margin-bottom: 6px; }
label .zusatz { color: var(--grau-hell); }

input[type="text"],
input[type="password"],
input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linie);
    background: var(--weiss);
    font: inherit;
    color: var(--grau-dunkel);
}
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--rot);
}

.feld { margin-bottom: 20px; }
.feldpaar { display: flex; gap: 24px; flex-wrap: wrap; }
.feldpaar .feld { flex: 1 1 300px; }

button.knopf,
a.knopf {
    display: inline-block;
    background: var(--rot);
    color: var(--weiss);
    border: 0;
    padding: 11px 26px;
    font: inherit;
    letter-spacing: 0.5px;
    cursor: pointer;
}
button.knopf:hover, a.knopf:hover {
    background: var(--rot-dunkel);
    color: var(--weiss);
    text-decoration: none;
}
a.knopf.still {
    background: var(--weiss);
    color: var(--grau);
    border: 1px solid var(--linie);
}
a.knopf.still:hover { color: var(--grau-dunkel); border-color: var(--grau-hell); }

/* -- Anmeldung ----------------------------------------------------------- */

.anmeldeseite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flaeche);
    padding: 24px;
}
.anmeldekarte {
    width: 100%;
    max-width: 400px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    padding: 40px 38px 34px;
}
.anmeldekarte img { width: 160px; margin-bottom: 26px; display: block; }

/* -- Tabelle ------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
table th {
    text-align: left;
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--grau-hell);
    border-bottom: 1px solid var(--linie);
    padding: 7px 10px 7px 0;
}
table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--flaeche); }
table td.zahl { text-align: right; padding-right: 18px; }

.fuss {
    margin-top: 46px;
    padding-top: 16px;
    border-top: 1px solid var(--linie);
    font-size: 12.5px;
    color: var(--grau-hell);
    max-width: 76ch;
}

@media (max-width: 760px) {
    .rahmen { flex-direction: column; }
    .seitenleiste { width: 100%; flex: none; border-right: 0;
                    border-bottom: 1px solid var(--linie); padding: 20px 0; }
    .inhalt { padding: 26px 20px 48px; }
    .kopfzahl .gross { font-size: 52px; }
}

/* --- Fachliche Durchsicht ------------------------------------------------
   Die Anregungen aus Schicht 4 stehen in derselben Liste wie die gerechneten
   Befunde, tragen aber zwei eigene Auszeichnungen: das Gewicht und den
   Hinweis, dass eine Anregung nicht gegengeprüft werden konnte. */

.still {
  color: var(--grau);
  font-size: 13px;
}

.marke {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--rot);
  border-radius: 2px;
  color: var(--rot);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

p.fehler {
  color: var(--rot);
}