/* Herzog CAB Lizenzportal. Hausfarben: Blau 00459A, Grau 5B6672, Linien D8DEE6. */

:root {
  --blau: #00459a;
  --blau-dunkel: #003a80;
  --grau: #5b6672;
  --linie: #d8dee6;
  --hell: #f4f6f8;
  --papier: #ffffff;
  --text: #1f2933;
  --rot: #b91c1c;
  --rot-hell: #fdecec;
  --gruen: #15803d;
  --gruen-hell: #e7f6ec;
  --gelb-hell: #fff7df;
  --gelb: #8a6d00;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  font-family: Lato, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--hell);
  line-height: 1.45;
}

a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--blau); font-weight: 700; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; color: var(--text); font-weight: 700; }
p.unter { margin: 0 0 1.25rem; color: var(--grau); }
.leicht { color: var(--grau); font-weight: 400; }
.klein { font-size: .85rem; }
.gedaempft { color: var(--grau); }

/* Kopf */
.kopf { background: var(--blau); color: #fff; }
.kopf .innen {
  max-width: 1100px; margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marke { color: #fff; text-decoration: none; font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; }
.marke .wort { font-weight: 900; }
.marke .leicht { color: rgba(255,255,255,.75); }
.navigation { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.navigation a {
  color: rgba(255,255,255,.85); text-decoration: none; padding: .35rem .7rem; border-radius: 4px;
}
.navigation a:hover { background: rgba(255,255,255,.12); color: #fff; }
.navigation a.aktiv { background: rgba(255,255,255,.2); color: #fff; font-weight: 700; }
.zaehler {
  display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px;
  background: #ffd166; color: #333; font-size: .75rem; font-weight: 700; text-align: center;
}
.person { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.person a { color: rgba(255,255,255,.9); text-decoration: none; font-size: .9rem; }
.person a:hover { text-decoration: underline; color: #fff; }
form.inline { display: inline; margin: 0; }

/* Inhalt */
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
main.schmal { max-width: 480px; padding-top: 3rem; }
.fuss { text-align: center; color: var(--grau); font-size: .8rem; padding: 1rem; }

.karte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 8px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.karte h2 { margin-top: 0; }
.karte .kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.karte .kopfzeile h2 { margin: 0; }
.mitte { background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; padding: 1.75rem; }

/* QR-Code: der weisse Grund und die Ruhezone stecken schon im Bild, der
   Rahmen ist nur Zierde. */
.qr { margin: 1rem 0 1.25rem; text-align: center; }
.qr svg { display: inline-block; border: 1px solid var(--linie); border-radius: 6px; }

.zeile { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }

/* Meldungen */
.meldung { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid transparent; word-break: break-word; }
.meldung.hinweis { background: var(--gelb-hell); border-color: #f0dc9a; color: var(--gelb); }
.meldung.erfolg { background: var(--gruen-hell); border-color: #bfe3cb; color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); border-color: #f5c2c2; color: var(--rot); }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { color: var(--grau); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.aktionen { text-align: right; white-space: nowrap; }
.tabelle td.aktionen form { display: inline; margin-left: .25rem; }
.tabelle .unter { display: block; color: var(--grau); font-size: .85rem; }
.tabelle-huelle { overflow-x: auto; }

/* Pillen */
.pille {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--hell); color: var(--grau); border: 1px solid var(--linie); white-space: nowrap;
}
.pille.ok { background: var(--gruen-hell); color: var(--gruen); border-color: #bfe3cb; }
.pille.warn { background: var(--gelb-hell); color: var(--gelb); border-color: #f0dc9a; }
.pille.aus { background: var(--rot-hell); color: var(--rot); border-color: #f5c2c2; }
.pille.blau { background: #e8f0fa; color: var(--blau); border-color: #c5d6ee; }

/* Formulare */
.feld { margin-bottom: .9rem; }
.feld label { display: block; font-size: .85rem; color: var(--grau); margin-bottom: .25rem; font-weight: 600; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 5px;
  font: inherit; color: var(--text); background: #fff;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid #9ab8e0; border-color: var(--blau); }
.feld .hilfe { font-size: .8rem; color: var(--grau); margin-top: .25rem; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem 1rem; align-items: end; }
.felder .feld { margin-bottom: 0; }
.formular-zeile { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.formular-zeile .feld { margin-bottom: 0; }
.formular-zeile .feld.schmal { width: 90px; }
.formular-zeile .feld.mittel { width: 150px; }
.code-eingabe { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.geheimnis { font-family: Consolas, "Courier New", monospace; font-size: 1.1rem; letter-spacing: .05em; word-break: break-all; }

/* Knoepfe */
.knopf {
  display: inline-block; padding: .45rem .9rem; border-radius: 5px; border: 1px solid var(--blau);
  background: var(--blau); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  line-height: 1.2;
}
.knopf:hover { background: var(--blau-dunkel); color: #fff; }
.knopf.haupt { width: 100%; padding: .6rem 1rem; }
.knopf.leise { background: transparent; color: var(--blau); border-color: var(--linie); }
.knopf.leise:hover { background: var(--hell); }
.kopf .knopf.leise { color: #fff; border-color: rgba(255,255,255,.4); }
.kopf .knopf.leise:hover { background: rgba(255,255,255,.12); }
.knopf.gefahr { background: transparent; color: var(--rot); border-color: #f5c2c2; }
.knopf.gefahr:hover { background: var(--rot-hell); }
.knopf.klein { padding: .25rem .6rem; font-size: .82rem; font-weight: 600; }

dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
dl.daten dt { color: var(--grau); font-size: .85rem; }
dl.daten dd { margin: 0; }

details summary { cursor: pointer; color: var(--blau); font-weight: 600; }
.leer { color: var(--grau); font-style: italic; }
code { background: var(--hell); padding: .05rem .3rem; border-radius: 3px; font-size: .9em; }

@media (max-width: 640px) {
  .kopf .innen { gap: .75rem; }
  .person { margin-left: 0; }
  main { padding: 1rem .9rem 2rem; }
  .karte { padding: 1rem; }
}