/* SICCA – Gestaltung.
   Hausfarben: Verlauf #228630 -> #73ab46, dunkles Petrol fuer Tabellenkoepfe.
   (Diese Datei ist oeffentlich abrufbar – deshalb steht hier nichts ueber den
   Zweck der Anwendung.) */

:root{
  --gruen1:#228630; --gruen2:#73ab46; --linie:#d4d9de; --kopf:#1f4e5f;
  --grau:#f5f7f8; --text:#1d2429; --rot:#b3261e; --gelb:#8a6d1f;
  --tan:#ac8d62;   /* Fusszeile/Navigation im Shop (SW6-Theme) */
  --listenhoehe:460px;  /* gemeinsame Hoehe der beiden Listen auf der Auswahlseite */
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Calibri,Arial,sans-serif;font-size:14px;
     color:var(--text);background:#eef1f3}

/* Kopfzeile wie im Onlineshop: gruener Verlauf (#228630 -> #73ab46) mit dem
   SICCA-Logo links. Gleiche Bilddatei wie im Shopware-6-Theme.
   Der Titel steht genau in der Mitte der Seite - deshalb absolut gesetzt und
   nicht per Flex-Verteilung: sonst wandert er, sobald links oder rechts mehr
   Text steht (langer Anzeigename, zusaetzlicher Menuepunkt). */
header{background:linear-gradient(90deg,var(--gruen1),var(--gruen2));color:#fff;
       padding:10px 22px}
header .kopf-oben{position:relative;display:flex;align-items:center;gap:20px;min-height:54px}
header h1{margin:0;font-size:18px;font-weight:600;
          position:absolute;left:50%;transform:translateX(-50%);
          white-space:nowrap;pointer-events:none}
header .logo-link{display:flex;align-items:center;line-height:0}
header .logo{height:54px;width:auto;display:block}

/* Anmeldeseite: Logo gross und mittig, wie ein Empfang. */
header.gross{padding:26px 22px}
header.gross .kopf-oben{flex-direction:column;justify-content:center;text-align:center;gap:12px}
header.gross h1{position:static;transform:none;font-size:19px;font-weight:500}
header.gross .logo{height:92px}

@media (max-width:1100px){
  /* Zu wenig Platz fuer echte Mitte: Titel rutscht in eine eigene Zeile,
     bleibt aber zentriert. */
  header .kopf-oben{flex-wrap:wrap;justify-content:space-between}
  header h1{position:static;transform:none;order:3;width:100%;text-align:center;
            margin-top:6px;white-space:normal}
}
@media (max-width:760px){
  header{padding:8px 14px}
  header .logo{height:40px}
  header h1{font-size:15px}
  header.gross .logo{height:70px}
}
header nav{display:flex;gap:22px;margin-top:8px;flex-wrap:wrap}
header nav a{color:#fff;text-decoration:none;font-size:14px;
             padding:3px 0;border-bottom:2px solid transparent}
header nav a:hover{border-bottom-color:rgba(255,255,255,.75)}
header .rechts{margin-left:auto;font-size:13px;position:relative;z-index:1}
header .rechts a{color:#fff}

.huelle{max-width:1500px;margin:18px auto;padding:0 18px}

/* Fusszeile im Tan des Shops (SW6-Theme: .footer-main #ac8d62). */
footer{text-align:center;background:var(--tan);color:#fff;font-size:12.5px;
       padding:16px 22px;margin-top:26px}
footer a{color:#fff}

.karte{background:#fff;border:1px solid var(--linie);border-radius:4px;margin-bottom:16px}
.karte h2{margin:0;padding:11px 16px;font-size:15px;border-bottom:1px solid var(--linie);
          background:var(--grau)}
.karte .inhalt{padding:14px 16px}

.zeile{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end}
label{display:block;font-size:12px;color:#5a666f;margin-bottom:3px}
input[type=text],input[type=password],input[type=date]{
  padding:7px 9px;border:1px solid var(--linie);border-radius:3px;font-size:14px}
input[type=text],input[type=password]{width:220px}

.knopf{background:var(--gruen1);color:#fff;border:0;border-radius:3px;
       padding:9px 20px;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.knopf:hover{background:#1b6b26}
.knopf.grau{background:#5a666f}
.knopf.grau:hover{background:#48525a}
.knopf.klein{padding:5px 14px;font-size:13px}
.knopf[disabled]{background:#9aa4ab;cursor:not-allowed}

.kennzahlen{display:flex;gap:12px;flex-wrap:wrap}
.kz{border:1px solid var(--linie);border-radius:4px;padding:9px 16px;min-width:150px;background:#fff}
.kz .wert{font-size:22px;font-weight:600;color:var(--kopf)}
.kz .txt{font-size:12px;color:#5a666f}

/* ---- Tabelle / Grid ---- */
.tabellenrahmen{max-height:var(--listenhoehe);overflow:auto;border-top:1px solid var(--linie)}

/* Zwei Listen nebeneinander: links die Auswahl, rechts die Uebersicht je
   Rechnungsdatum. Beide bekommen dieselbe feste Hoehe, damit sie unten
   buendig abschliessen - die schmale Uebersicht lief vorher ueber die ganze
   Seitenbreite und wirkte verloren. */
.listen{display:flex;align-items:stretch;border-top:1px solid var(--linie)}
.listen .tabellenrahmen{height:var(--listenhoehe);max-height:var(--listenhoehe);border-top:0}
.liste-haupt{flex:1 1 auto;min-width:0}
.liste-neben{flex:0 0 290px;border-left:1px solid var(--linie)}
.liste-neben table{font-size:13px}
.liste-neben tfoot td{position:sticky;bottom:0}

/* Schmale Fenster: untereinander statt nebeneinander, sonst wird die
   Auswahlliste unlesbar schmal. */
@media (max-width:1000px){
  .listen{flex-wrap:wrap}
  .liste-haupt{flex:1 1 100%}
  .liste-neben{flex:1 1 100%;border-left:0;border-top:1px solid var(--linie)}
  .listen .tabellenrahmen{height:auto;max-height:var(--listenhoehe)}
}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{position:sticky;top:0;background:var(--kopf);color:#fff;text-align:left;
         padding:7px 8px;font-weight:600;white-space:nowrap;cursor:pointer;z-index:2}
thead th.nichtsortierbar{cursor:default}
thead th.filter{position:sticky;top:31px;background:#eaeef0;padding:3px 4px;z-index:2}
thead th.filter input{width:100%;padding:3px 5px;border:1px solid var(--linie);
                      border-radius:2px;font-size:12px;font-weight:400}
tbody td{padding:5px 8px;border-bottom:1px solid #eceff1;white-space:nowrap}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr.aus{color:#9aa4ab;text-decoration:line-through}
tbody tr:hover{background:#eef6ee}
td.z,th.z{text-align:right}
tfoot td{padding:7px 8px;font-weight:600;background:#eaeef0;
         border-top:2px solid var(--kopf);white-space:nowrap}
.pfeil{font-size:10px;opacity:.75}

/* ---- Meldungen ---- */
.meldung{border-radius:4px;padding:11px 14px;font-size:13px;margin-bottom:16px;border:1px solid}
.meldung.hinweis{background:#fdf6e3;border-color:#e6d9a8;color:#5a4b16}
.meldung.warnung{background:#fdf1e3;border-color:#e6c3a8;color:#7a4715}
.meldung.fehler {background:#fdeaea;border-color:#e8b4b4;color:#8f1d1d}
.meldung.erfolg {background:#eaf5ec;border-color:#b6d7bb;color:#1b6b26}

/* ---- Anmeldung ---- */
.anmeldung{max-width:390px;margin:60px auto}
.anmeldung .karte .inhalt{padding:20px}
.anmeldung input{width:100%}
.anmeldung .knopf{width:100%;margin-top:14px;padding:11px}

/* ---- Downloads ---- */
.dl{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eceff1}
.dl:last-child{border-bottom:0}
.dl .name{font-weight:600;min-width:320px}
.dl .info{color:#5a666f;font-size:12.5px}
.dl .groesse{color:#5a666f;font-size:12.5px;min-width:80px;text-align:right}

.stand{color:#5a666f;font-size:12.5px}
.warte{color:var(--gelb);font-weight:600}
.fertig{color:var(--gruen1);font-weight:600}
.gestoert{color:var(--rot);font-weight:600}