/* FS Structure Lizenzportal – Gestaltung wie die Full-Scope-App „FS 360“ */
:root {
  --navy: #0f1d35; --navy-hell: #1d3157; --navy-linie: #24395f; --leiste-text: #e8edf6; --leiste-leise: #8e9bb3;
  --grund: #eef1f6; --weiss: #fff; --text: #1b2433; --leise: #687387; --linie: #dde2ea; --linie-stark: #c9d0db;
  --orange: #d9480f; --orange-dunkel: #c2410c; --orange-hell: #fff1e8; --orange-text: #b8460f;
  --blau: #2463b5; --gruen: #1e7a43; --gruen-hell: #e5f4ea; --rot: #b42318; --rot-hell: #fdeceb;
  --grau-hell: #eceff3; --schatten: 0 1px 2px rgba(16, 29, 53, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text);
       background: var(--grund); }
a { color: var(--blau); }
h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; margin: 0; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; word-break: break-all; }
.leise-text { color: var(--leise); font-size: 13px; }
.ueber { color: var(--rot); font-weight: 600; }

/* ---- Rahmen: Seitenleiste + Hauptbereich */
.rahmen { display: flex; min-height: 100vh; }
.leiste { width: 232px; flex: 0 0 232px; background: var(--navy); color: var(--leiste-text); display: flex;
          flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 14px 12px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700;
        font-size: 16px; padding: 4px 8px 18px; }
.logo img { width: 26px; height: 26px; border-radius: 7px; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Ausklappmenü für schmale Bildschirme – ohne JavaScript (Checkbox + Label); breit immer offen */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.menue-knopf { display: none; }
.menue { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menue a { display: flex; justify-content: space-between; align-items: center; color: var(--leiste-text);
           text-decoration: none; padding: 7px 10px; border-radius: 7px; font-size: 14px; }
.menue a:hover { background: var(--navy-linie); }
.menue a.aktiv { background: var(--navy-hell); font-weight: 600; }
.abschnitt { color: var(--leiste-leise); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
             padding: 18px 10px 6px; }
.zaehler { margin-left: 8px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px;
           padding: 0 7px; line-height: 18px; min-width: 18px; text-align: center; }
.leiste-fuss { color: var(--leiste-leise); font-size: 12px; padding: 8px 10px 2px; }

.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); display: flex; justify-content: flex-end;
        align-items: center; gap: 18px; padding: 10px 28px; min-height: 58px; flex-wrap: wrap; }
.wer { text-align: right; line-height: 1.25; }
.wer strong { display: block; font-size: 14px; }
.wer span { color: var(--leise); font-size: 12px; }
.textlink { background: none; border: 0; padding: 0; color: var(--leise); font: inherit; font-size: 14px;
            cursor: pointer; }
.textlink:hover { color: var(--text); text-decoration: underline; }
main { padding: 26px 28px 48px; max-width: 1400px; width: 100%; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
              margin-bottom: 20px; }
.seitenkopf .leise-text { font-size: 14px; margin-top: 2px; }
.zurueck { display: inline-block; margin-bottom: 10px; font-size: 14px; }

/* ---- Karten */
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten);
         margin-bottom: 20px; min-width: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px;
              padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.karte-kopf a { font-size: 13px; }
.karte-inhalt { padding: 16px 18px; }
.karte.dringend { border-left: 4px solid var(--orange); }
.raster { display: grid; gap: 20px; margin-bottom: 20px; }
.raster .karte { margin-bottom: 0; }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zahl { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.werte { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; }
.werte dt { color: var(--leise); }
.werte dd { margin: 0; text-align: right; font-weight: 600; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste .titel { font-weight: 600; font-size: 14px; }
.aufgabe { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--linie); }
.aufgabe:last-child { border-bottom: 0; }
.aufgabe .text { flex: 1; min-width: 0; }
.aufgabe .titel { font-weight: 600; }
.aufgabe .knoepfe { display: flex; gap: 8px; }
.leer { color: var(--leise); padding: 14px 18px; font-size: 14px; }

/* ---- Pillen und Chips */
.pille { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 10px;
         white-space: nowrap; background: var(--grau-hell); color: var(--leise); }
.pille.gruen { background: var(--gruen-hell); color: var(--gruen); }
.pille.rot { background: var(--rot-hell); color: var(--rot); }
.pille.orange { background: var(--orange-hell); color: var(--orange-text); }
.pille.grau { background: var(--grau-hell); color: var(--leise); }
.pille.navy { background: #e3e8f1; color: var(--navy); }
.chip { display: inline-block; font-size: 12px; padding: 0 8px; border: 1px solid var(--linie-stark);
        border-radius: 6px; margin: 1px 2px 1px 0; white-space: nowrap; }
.chip.statik { border-color: #f3b796; background: var(--orange-hell); color: var(--orange-text); }

/* ---- Tabellen */
.tabelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em;
     background: #f7f9fc; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfd; }
tr.ueber td { color: var(--rot); }
.werte-tabelle th { text-transform: none; letter-spacing: 0; font-size: 14px; width: 34%; background: none; }

/* ---- Formulare und Knöpfe */
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 5px; }
.hinweis { font-weight: 400; color: var(--leise); font-size: 13px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select {
  width: 100%; max-width: 380px; padding: 8px 10px; font: inherit; border: 1px solid var(--linie-stark);
  border-radius: 6px; background: var(--weiss); color: var(--text); }
textarea { width: 100%; max-width: 520px; padding: 8px 10px; font: inherit; border: 1px solid var(--linie-stark);
           border-radius: 6px; background: var(--weiss); color: var(--text); resize: vertical; }
input[type=file] { max-width: 380px; width: 100%; font: inherit; font-size: 14px; }
select[multiple] { padding: 4px 6px; }
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 3px solid #f7c3a5; outline-offset: 1px; }
.wahl { font-weight: 400; display: inline-flex; gap: 7px; align-items: flex-start; margin: 4px 0; }
.wahl input { margin: 3px 0 0; flex: none; }   /* Haken auf der ersten Textzeile (mehrzeilige Rechte-Texte) */
.reihe { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.knopf, button { display: inline-block; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px;
                 border-radius: 6px; border: 1px solid var(--orange); background: var(--orange); color: #fff;
                 cursor: pointer; text-decoration: none; line-height: 1.3; }
.knopf:hover, button:hover { background: var(--orange-dunkel); border-color: var(--orange-dunkel); }
.knopf.zweit, button.zweit { background: var(--weiss); color: var(--text); border-color: var(--linie-stark);
                             font-weight: 500; }
.knopf.zweit:hover, button.zweit:hover { background: #f5f7fa; }
button.gefahr { background: var(--weiss); color: var(--rot); border-color: #e7b4ae; font-weight: 500; }
button.gefahr:hover { background: var(--rot-hell); }
.klein { padding: 4px 11px; font-size: 13px; }
.inline { display: inline; }
.aktionen { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.aktionen .rechts { margin-left: auto; }

/* ---- Meldungen */
.meldung { padding: 11px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); border: 1px solid #bfe0cb; }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); border: 1px solid #f1c1bb; }
.meldung ul { margin: 0; padding-left: 20px; }

/* ---- Filter, Blättern */
.filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter label { margin: 0 0 5px; }
.filter input, .filter select { width: 220px; }
.blaettern { display: flex; gap: 16px; padding: 12px 18px; }

/* ---- Anmeldeseite */
body.anmeldung { background: var(--navy); }
.anmelde-rahmen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.anmelde-karte { background: var(--weiss); border-radius: 12px; width: 100%; max-width: 400px; padding: 32px 30px;
                 box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.anmelde-karte .logo { color: var(--navy); padding: 0 0 20px; font-size: 18px; }
.anmelde-karte .logo img { width: 40px; height: 40px; border-radius: 10px; }
.anmelde-karte input { max-width: none; }
.anmelde-karte button { width: 100%; margin-top: 20px; padding: 10px; }
/* „Mit Google anmelden“: nur Text, gestaltet wie ein Zweit-Knopf des Portals (kein Google-Logo) */
.anmelde-oder { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--leiste-leise);
                font-size: 12px; }
.anmelde-oder::before, .anmelde-oder::after { content: ""; flex: 1; border-top: 1px solid var(--linie-stark); }
.anmelde-karte .knopf.google { display: block; width: 100%; margin-top: 12px; padding: 10px; text-align: center; }
.anmelde-fuss { color: var(--leiste-leise); font-size: 12px; text-align: center; margin-top: 16px; }

/* ---- schmale Bildschirme: Seitenleiste wird zur Kopfleiste */
@media (max-width: 1100px) { .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rahmen { flex-direction: column; }
  .leiste { position: static; width: auto; flex: none; height: auto; padding: 10px 12px; }
  .logo { padding-bottom: 8px; }
  .menue { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .menue a { gap: 6px; }
  .abschnitt { display: none; }
  .leiste-fuss { display: none; }
  .kopf { padding: 10px 16px; justify-content: space-between; }
  main { padding: 18px 16px 40px; }
  .raster-3, .raster-2 { grid-template-columns: minmax(0, 1fr); }
  .aufgabe { flex-wrap: wrap; }
}

/* ---- Rechte (Haken nach Gruppen) */
.rechte-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
.rechte-gruppe { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 14px 10px; margin: 0; min-width: 0; }
.rechte-gruppe legend { font-weight: 600; font-size: 13px; color: var(--leise); text-transform: uppercase;
                        letter-spacing: .05em; padding: 0 4px; }
.rechte-gruppe .wahl { display: flex; font-size: 14px; }
.wahl.aus { color: var(--leise); }
.rechte-tabelle td, .rechte-tabelle th { padding: 6px 10px; }
.rechte-tabelle td.mitte, .rechte-tabelle th.mitte { text-align: center; width: 90px; }
.rechte-tabelle tr.gruppe td { background: #f7f9fc; font-weight: 600; font-size: 12px; text-transform: uppercase;
                               letter-spacing: .05em; color: var(--leise); }
.rechte-tabelle tr.nicht-gebucht td { color: var(--leise); }
.ja { color: var(--gruen); font-weight: 700; }
.knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details summary { cursor: pointer; color: var(--blau); margin: 12px 0 8px; font-size: 14px; }

/* ---- Telefon (≤ 600 px): Menü hinter einem Knopf, Kopfzeile mit Name und Abmelden in einer Zeile */
@media (max-width: 600px) {
  .leiste-kopf .logo { padding: 4px 8px; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px;
                 border: 1px solid var(--navy-linie); border-radius: 7px; color: var(--leiste-text); font-size: 14px;
                 font-weight: 500; cursor: pointer; }
  .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after {
    display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
  .menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
  .menue-knopf span::before { top: -5px; }
  .menue-knopf span::after { top: 5px; }
  .leiste-kopf:has(+ .menue-schalter:focus-visible) .menue-knopf { outline: 3px solid #f7c3a5; }
  .menue { display: none; flex-direction: column; gap: 2px; padding-top: 8px; }
  .menue-schalter:checked ~ .menue { display: flex; }
  .menue a { padding: 9px 10px; justify-content: flex-start; }
  .kopf { flex-wrap: nowrap; gap: 10px; min-height: 0; padding: 8px 16px; }
  .wer { flex: 1; min-width: 0; text-align: left; }
  .wer strong, .wer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wer span { display: block; }
  .kopf .pille { flex: none; }
  h1 { font-size: 22px; }
}

/* Sicherheitsaudit: neue Software-Version im Protokoll hervorheben (Befund H1c) */
tr.hervor td { background: var(--orange-hell); font-weight: 600; }
.geheimnis { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 1px; word-break: break-all; }