/* Gleiche Farben und Formen wie die Stempeluhr, damit alles aus einem Guss wirkt. */
:root{--blau:#0b3e91;--bg:#f4f6f8;--rand:#d8dee9;--text:#17202a;--grau:#697386;
      --gruen:#1e7e34;--gruenHell:#d1e7dd;--rot:#b02a37;--gelb:#fff3cd}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Kopfzeile */
.kopf{background:var(--blau);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 22px}
.kopf.schmal{padding:10px 18px}
.firma{font-size:19px;font-weight:800}
.untertitel{opacity:.85;font-size:14px}
.kopf nav a{color:#fff;margin-left:16px;font-weight:700;text-decoration:none;font-size:15px}

.inhalt{max-width:900px;margin:16px auto;padding:0 14px;display:flex;flex-direction:column;gap:14px}
.ueberschrift{margin:0;font-size:20px}

/* Kamerabild */
.bildRahmen{position:relative;background:#0d1117;border-radius:16px;overflow:hidden;
            min-height:200px;display:flex;align-items:center;justify-content:center}
.bildRahmen img{width:100%;display:block}
/* Vor dem ersten Bild kein kaputtes Bildsymbol zeigen - nur den dunklen Rahmen. */
.bildRahmen img:not([src]){display:none}
.bildhinweis{display:none;position:absolute;color:#fff;background:rgba(0,0,0,.6);padding:12px 18px;
             border-radius:12px;font-weight:700;font-size:15px;text-align:center;max-width:80%}
.bildhinweis.sichtbar{display:block}

/* Zeilen mit Knöpfen und Marken */
.zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.knopf{border:0;border-radius:14px;background:var(--blau);color:#fff;font-size:16px;
       font-weight:800;padding:14px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.knopf.hell{background:#fff;color:var(--blau);border:2px solid var(--rand)}
.knopf:disabled{opacity:.6}
.marke{font-size:14px;font-weight:800;border-radius:999px;padding:6px 14px;background:#e4e8ee;color:var(--grau)}
.marke.gruen{background:var(--gruen);color:#fff}
.marke.rot{background:var(--rot);color:#fff}
.marke.gelb{background:var(--gelb);color:#7a6002}
.marke.grau{background:#e4e8ee;color:var(--grau)}

.hinweis{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:12px 16px;
         margin:0;font-size:15px;color:var(--grau);line-height:1.45}
.hinweis.warnung{background:var(--gelb);color:#7a6002;border-color:#e6d28a;font-weight:700}
.leer{padding:26px;font-size:17px;color:var(--grau);text-align:center}
.zurueckLink{color:var(--grau);font-size:15px}
.fehler{color:var(--rot);font-weight:700;margin:4px 0}

/* Liste der Ereignisse */
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ereignis{background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);
          box-shadow:0 3px 10px rgba(0,0,0,.07);display:flex;flex-direction:column}
.ereignis img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#0d1117}
.ereignisText{padding:10px 14px}
.ereignisZeit{font-size:19px;font-weight:800}
.ereignisTag{font-size:14px;color:var(--grau)}
.ereignisZahl{font-size:13px;color:var(--grau)}

/* Anmeldeseite */
body.mitte{display:flex;align-items:center;justify-content:center;min-height:100vh}
.loginBox{background:#fff;border-radius:20px;padding:34px;box-shadow:0 6px 20px rgba(0,0,0,.08);
          display:flex;flex-direction:column;gap:14px;min-width:300px;text-align:center}
.loginBox h1{margin:0;color:var(--blau);font-size:24px}
.loginBox input{border:2px solid var(--rand);border-radius:12px;padding:14px;font-size:18px;text-align:center}
.riesig{border:0;border-radius:16px;background:var(--blau);color:#fff;font-size:20px;font-weight:800;
        padding:16px 24px;cursor:pointer}

/* Auf dem Handy hat die Kopfzeile nebeneinander keinen Platz - dann untereinander. */
@media (max-width:520px){
  .kopf.schmal{flex-direction:column;align-items:flex-start;gap:8px}
  .kopf nav{display:flex;gap:20px}
  .kopf nav a{margin-left:0}
  .firma{font-size:17px}
  .knopf{flex:1 1 100%;text-align:center}
}