/* Dieselben Markenfarben wie die Eingangsseite -- sie stammen aus
     belego-logo.svg. Vorher liefen hier ein eigenes Amber (#F5A800) und ein
     eigenes Schwarz (#1c1b19), die neben dem Logo sichtbar danebenlagen. */
  :root { --navy:#111828; --navy-weich:#525B6C;
          --amber:#EBA819; --amber-d:#D08F0F;
          --line:#E6E7EA; --muted:#6B7280; }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
         background:#F7F8F9; color:var(--navy); }
  .wrap { max-width:920px; margin:0 auto; padding:32px 20px 64px; }
  h1 { font-size:26px; margin:0 0 4px; }
  .sub { color:var(--muted); font-size:14px; margin:0 0 26px; }
  .karte { background:#fff; border:1px solid var(--line); border-radius:16px;
           padding:20px 22px; margin-bottom:18px; }
  .karte h2 { font-size:16px; margin:0 0 14px; }
  label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
  input, select { width:100%; padding:9px 11px; border:1px solid #DCDEE3; border-radius:10px;
                  font:inherit; background:#fff; color:var(--navy); }
  input:focus, select:focus { outline:none; border-color:var(--amber); }
  .reihe { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
  /* Dunkle Schrift auf Amber, nicht weisse: weiss traegt auf #EBA819 nur
     2,1:1 und ist damit auf dem Knopf kaum zu lesen. Navy traegt 8,6:1. */
  button { font:inherit; font-weight:600; border:0; border-radius:10px; padding:9px 16px;
           background:var(--amber); color:var(--navy); cursor:pointer; }
  button:hover { background:var(--amber-d); }
  button.leise { background:#fff; color:var(--navy-weich); border:1px solid var(--line); }
  button.gefahr { background:#fff; color:#c0392b; border:1px solid #f0d0cc; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
       color:var(--muted); padding:0 8px 8px; }
  td { padding:9px 8px; border-top:1px solid #F0F1F3; }
  .pill { display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; }
  .an { background:#e8f6ec; color:#1e7a3c; }
  .aus { background:#F1F2F4; color:#6B7280; }
  .warn { background:#fdf3e3; color:#9a6b12; }
  .art { background:#f0eefa; color:#5b4ea8; font-family:ui-monospace,monospace; }
  .hinweis { padding:10px 13px; border-radius:10px; font-size:14px; margin-bottom:14px; }
  .ok { background:#e8f6ec; color:#1e7a3c; }
  .fehler { background:#fdeceb; color:#b5372c; }
  .mini { font-size:12px; color:var(--muted); }
  #anmeldung { max-width:340px; margin:14vh auto; }
  #anmeldung h2 { text-align:center; color:var(--navy-weich); font-size:15px; }
  .versteckt { display:none; }
  /* Umbruch erlauben: sonst quetscht die Knopfgruppe rechts die Textspalte
     so weit zusammen, dass die Ueberschrift mitten im Wort umbricht.
     min-width:0 hebt die Vorgabe auf, unter die Inhaltsbreite nicht zu gehen. */
  .kopf { display:flex; justify-content:space-between; align-items:flex-start;
          gap:16px; flex-wrap:wrap; }
  .kopf > div:first-child { min-width:0; }
  .kopf h1 { white-space:nowrap; }
  /* Die Knoepfe im Kopf sind Navigation, keine Hauptaktionen -- eine Stufe
     kleiner als die Knoepfe in den Karten. In voller Groesse brauchten die
     vier zusammen mit der Ueberschrift 885px und passten nicht in die 880px
     der Spalte; sie fielen dann in eine eigene Zeile. */
  .kopf button { font-size:14px; padding:8px 13px; }
  /* Auf schmalen Schirmen lief die Knopfgruppe aus dem Bild -- "Abmelden"
     war dort nicht mehr erreichbar. */
  .kopf-aktionen { display:flex; gap:8px; flex-wrap:wrap; }
  .oeffnen { flex-shrink:0; white-space:nowrap; }
  .kunde { display:flex; justify-content:space-between; align-items:center; gap:14px;
           padding:14px 16px; border:1px solid var(--line); border-radius:12px;
           margin-bottom:10px; cursor:pointer; background:#fff; text-align:left; width:100%;
           color:inherit; font:inherit; font-weight:400; }
  .kunde:hover { border-color:var(--amber); background:#FFFCF4; }
  .zurueck { background:none; border:0; color:var(--muted); padding:0; font-size:14px;
             font-weight:500; cursor:pointer; margin-bottom:10px; }
  .zurueck:hover { color:var(--navy); background:none; }
  .fehler-pill { background:#fdeceb; color:#b5372c; }
  .karte-kopf { display:flex; justify-content:space-between; align-items:baseline;
                gap:12px; margin-bottom:14px; }
  .karte-kopf h2 { margin:0; }
  .filterzeile { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .filter { background:#fff; color:var(--navy-weich); border:1px solid var(--line); border-radius:99px;
            padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; }
  .filter:hover { border-color:var(--amber); background:#FFFCF4; }
  .filter-an { background:var(--amber); color:var(--navy); border-color:var(--amber); }
  .filter-an:hover { background:var(--amber-d); color:var(--navy); }
  .protokoll-tag { font-size:11px; text-transform:uppercase; letter-spacing:.06em;
                   color:var(--muted); margin:14px 0 4px; }
  .protokoll-tag:first-child { margin-top:0; }
  .protokoll-zeile { display:flex; align-items:baseline; gap:8px; padding:3px 0;
                     border-top:1px solid #F3F4F6; }
  .protokoll-zeit { color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
  .protokoll-wer { color:var(--muted); flex-shrink:0; }
  .kat { font-size:10px; flex-shrink:0; text-transform:uppercase; letter-spacing:.04em; }
  .kat-anmeldung { background:#eef2fb; color:#3a5a9b; }
  .kat-kunde     { background:#eaf6ee; color:#1e7a3c; }
  .kat-lizenz    { background:#fdf3e3; color:#9a6b12; }
  .kat-zugang    { background:#f0eefa; color:#5b4ea8; }
  .kat-system    { background:#F1F2F4; color:#5A616E; }
  .filter-trenner { width:1px; background:var(--line); margin:2px 4px; align-self:stretch; }
  .protokoll-zeile.auffaellig { background:#fdf6f5; }
  .protokoll-zeile.auffaellig .protokoll-zeit { color:#b5372c; font-weight:600; }
  .knopf-link { display:inline-block; text-align:center; width:100%;
                text-decoration:none; padding:9px 16px; border-radius:10px;
                border:1px solid var(--line); background:#fff; color:var(--navy-weich);
                font-weight:600; font-size:15px; box-sizing:border-box; }
  .knopf-link:hover { border-color:var(--amber); background:#FFFCF4; }
  .blaettern { display:flex; align-items:center; justify-content:center; gap:14px; }
  .blaettern button:disabled { opacity:.4; cursor:default; }
  .blaettern button:disabled:hover { background:#fff; border-color:var(--line); }
  .kat-konto { background:#fdeef7; color:#8d3a6b; }

  /* Marke im Seitenkopf. Auf router.getbelego.de reicht Nginx alles an den
     Router durch, deshalb hier die Datei statt eines eingebetteten SVG. */
  .kopf-marke { height:30px; width:auto; display:block; margin-bottom:6px; }
  .anmeldung-marke { display:block; height:44px; width:auto;
                     margin:0 auto 22px; }

  /* Anmeldemaske im Stil der Kundenanmeldung */
  body:has(#anmeldung:not(.versteckt)) { background:#E3EAF4; }
  #anmeldung { max-width:396px; margin:12vh auto; background:#fff;
               border:1px solid #D0D5DE; border-radius:16px; padding:30px 28px 26px;
               box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); }
  #anmeldung .anmeldung-marke { width:100%; max-width:250px; height:auto; margin:0 auto 26px; }
  #anmeldung h2 { text-align:center; font-size:15px; color:#4A5567; margin:0 0 20px; }
  #anmeldung label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
  #anmeldung input { width:100%; padding:13px 14px; background:#F2F6FC;
                     border:1px solid #D0D5DE; border-radius:10px; font:inherit; color:#101828; }
  #anmeldung input:focus { outline:none; background:#fff; border-color:#EBA819;
                           box-shadow:0 0 0 3px rgba(235,168,25,.20); }
  #anmeldung button { width:100%; padding:13px 16px; font:inherit; font-weight:600;
                      color:#8A5A00; background:#fff; border:1px solid #EBA819;
                      border-radius:10px; cursor:pointer; }
  #anmeldung button:hover { background:#FFFCF4; border-color:#D08F0F; }