/* Cermik Engineering – gemeinsames Erscheinungsbild aller Cockpits */
:root {
  --petrol: #2A4F5C; --petrol-dunkel: #1A3139; --stahl: #6889B7;
  --hell: #EFF3F4; --weiss: #fff; --rot: #B3402A; --gruen: #3E7C4F;
  --rand: #d5dee1;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--hell); color: #1c2b31; }
header { background: linear-gradient(135deg, var(--petrol-dunkel), var(--petrol)); color: #fff;
  padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
header .logo { font-weight: 700; letter-spacing: .4px; font-size: 1.05rem; }
header .logo small { display:block; font-weight:400; opacity:.75; font-size:.72rem; }
header .platz { flex: 1; }
header .nutzer { font-size: .85rem; opacity: .9; }
button, .knopf { background: var(--petrol); color: #fff; border: 0; padding: 9px 16px;
  border-radius: 7px; cursor: pointer; font-size: .92rem; }
button:hover { background: var(--stahl); }
button.zweit { background: #fff; color: var(--petrol); border: 1px solid var(--petrol); }
button.gefahr { background: var(--rot); }
button:disabled { opacity: .5; cursor: default; }
nav.tabs { display: flex; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; }
nav.tabs button { background: #fff; color: var(--petrol); border: 1px solid var(--rand); border-bottom: 0;
  border-radius: 9px 9px 0 0; }
nav.tabs button.aktiv { background: var(--petrol); color: #fff; }
main { padding: 18px 20px 60px; max-width: 1180px; }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 16px 18px;
  margin-bottom: 14px; }
.karte h3 { color: var(--petrol-dunkel); margin-bottom: 10px; font-size: 1rem; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--rand);
  border-radius: 7px; font: inherit; margin-bottom: 10px; background: #fff; }
textarea { min-height: 90px; }
label { font-size: .82rem; color: #476069; display: block; margin-bottom: 3px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--petrol-dunkel); background: #f4f8f9; }
.status { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .76rem; color: #fff;
  background: var(--stahl); }
.status.offen { background: var(--rot); } .status.angenommen, .status.wartet, .status.eingegangen { background: #B98A2E; }
.status.erledigt, .status.freigegeben, .status.ausgespielt, .status.bezahlt { background: var(--gruen); }
.status.fehler { background: #7a2020; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--petrol-dunkel); color: #fff; padding: 12px 16px; border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 340px; font-size: .88rem; }
#login-schirm { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--petrol-dunkel), var(--petrol)); }
#login-schirm .karte { width: 340px; }
pre.dok { white-space: pre-wrap; background: #f7fafb; border: 1px solid var(--rand); border-radius: 8px;
  padding: 12px; font-size: .82rem; max-height: 420px; overflow: auto; font-family: inherit; }
.hinweis { font-size: .8rem; color: #5a7078; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
@media (max-width: 640px) { main { padding: 12px; } header { padding: 12px; } }