/* mitarbeiter.com Design-Tokens (Auszug aus dem Design-System) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@font-face{font-family:"League Spartan";src:url("/fonts/LeagueSpartan-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

:root{
  --mc-cyan:#16acef;
  --mc-cyan-deep:#0e8fd6;
  --mc-cyan-700:#0e7cc2;
  --mc-blue:#3aa5f5;
  --mc-ink:#0d2a47;
  --mc-ink-soft:#4a6076;
  --mc-ink-muted:#7c8da6;
  --mc-paper:#ffffff;
  --mc-paper-tint:#f2f7fc;
  --mc-desk:#ebf1f4;
  --mc-line:#dfe9f3;
  --mc-line-app:#eaf0f6;
  --mc-green:#39c26d;
  --mc-amber:#f5b83d;
  --mc-red:#ef5350;
  --mc-grad-cta:linear-gradient(135deg,#16acef,#0e8fd6);
  --mc-font-display:"League Spartan",sans-serif;
  --mc-font-body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mc-mono:ui-monospace,'SF Mono','Segoe UI',system-ui,sans-serif;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--mc-desk); font-family:var(--mc-font-body); -webkit-font-smoothing:antialiased; }
a { color:var(--mc-blue); text-decoration:none; }
a:hover { color:var(--mc-cyan-700); }
[hidden] { display:none !important; }

.page { min-height:100vh; padding:28px 20px 56px; display:flex; justify-content:center; }
.wrap { width:100%; max-width:940px; }

/* Topbar */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-logo { height:24px; width:auto; display:block; }
.brand-divider { width:1px; height:24px; background:var(--mc-line); display:block; }
.brand-kicker { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mc-blue); }

.lock { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; cursor:pointer; border:1px solid var(--mc-line); background:var(--mc-paper); color:var(--mc-ink-muted); padding:0; }
.lock:hover { background:var(--mc-paper-tint); color:var(--mc-ink-soft); }
.lock.active { border:none; background:var(--mc-grad-cta); color:#fff; box-shadow:0 8px 20px rgba(58,165,245,.35); }

/* Admin-Bar */
.admin-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--mc-paper); border:1px solid var(--mc-line); border-radius:14px; padding:10px 14px; margin-bottom:14px; box-shadow:0 6px 18px rgba(13,42,71,.05); }
.admin-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mc-ink-muted); }
.admin-select { font-family:var(--mc-font-body); font-size:14px; font-weight:500; color:var(--mc-ink); background:var(--mc-paper-tint); border:1px solid var(--mc-line); border-radius:11px; padding:8px 12px; min-width:220px; cursor:pointer; }
.admin-spacer { flex:1; }

.btn { border:1px solid var(--mc-line); background:var(--mc-paper); color:var(--mc-ink-soft); font-family:var(--mc-font-body); font-size:14px; font-weight:600; border-radius:11px; padding:9px 16px; cursor:pointer; }
.btn:hover { background:var(--mc-paper-tint); color:var(--mc-ink); }
.btn:disabled { opacity:.45; cursor:default; }
.btn:disabled:hover { background:var(--mc-paper); color:var(--mc-ink-soft); }
.btn-primary { border:none; background:var(--mc-grad-cta); color:#fff; box-shadow:0 8px 20px rgba(58,165,245,.35); }
.btn-primary:hover { background:var(--mc-grad-cta); color:#fff; filter:brightness(1.05); }
.btn-primary:disabled:hover { filter:none; color:#fff; }
.btn-primary.dirty::after { content:" •"; }

/* Card */
.card { background:var(--mc-paper); border:1px solid var(--mc-line); border-radius:22px; box-shadow:0 20px 60px rgba(13,42,71,.10); overflow:hidden; }
.card-head { padding:30px 34px 24px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.card-head h1 { margin:0 0 6px; font-family:var(--mc-font-display); font-weight:800; font-size:29px; line-height:1.12; letter-spacing:-.01em; color:var(--mc-ink); }
.kunde { font-size:14px; color:var(--mc-ink-muted); }
.gesamt { display:flex; align-items:center; gap:16px; }
.gesamt-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mc-ink-muted); margin-bottom:5px; }
.pill { display:inline-flex; align-items:center; font-size:14px; font-weight:600; border-radius:100px; padding:6px 14px; white-space:nowrap; }

/* Gesamteinschätzung (Kommentarfeld) */
.kommentar-block { padding:16px 34px; background:var(--mc-paper-tint); border-top:1px solid var(--mc-line); }
.kommentar-titel { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mc-ink-muted); margin-bottom:6px; }
.kommentar-text { margin:0; font-size:14px; line-height:1.65; color:var(--mc-ink-soft); }
.kommentar-input { width:100%; resize:vertical; font-family:var(--mc-font-body); font-size:14px; line-height:1.55; color:var(--mc-ink); background:var(--mc-paper); border:1px solid var(--mc-line); border-radius:11px; padding:9px 12px; }
.kommentar-input:focus { outline:none; border-color:var(--mc-blue); box-shadow:0 0 0 3px rgba(58,165,245,.2); }

/* Kacheln mit runden Gauges (PageSpeed-Stil) */
.tiles { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--mc-line); }
.tile { padding:26px 20px 22px; text-align:center; border-right:1px solid var(--mc-line-app); display:flex; flex-direction:column; align-items:center; min-width:0; }
.tile:last-child { border-right:none; }
.tile-gauge { margin-bottom:14px; }
.gauge { display:block; }
.gauge text { font-family:var(--mc-font-body); }
.tile-name { font-size:14px; font-weight:600; color:var(--mc-ink); margin-bottom:3px; }
.tile-stufe { font-size:13px; font-weight:500; margin-bottom:8px; }
.tile-kommentar { margin:0; font-size:12.5px; line-height:1.55; color:var(--mc-ink-muted); text-align:center; }

/* Admin-Steuerung in der Kachel */
.tile-regler { display:flex; align-items:center; gap:8px; width:100%; margin:2px 0 10px; }
.tile-regler input[type=range] { flex:1; min-width:0; accent-color:var(--mc-blue); cursor:pointer; }
.tile-regler input[type=range]:disabled { cursor:default; opacity:.4; }
.tile-wert { font-family:var(--mc-mono); font-size:12px; font-weight:600; color:var(--mc-ink-soft); width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.btn-unbekannt { flex:none; width:24px; height:24px; border-radius:50%; cursor:pointer; border:1px solid var(--mc-line); background:var(--mc-paper); color:var(--mc-ink-muted); font-family:var(--mc-font-body); font-size:12px; font-weight:600; line-height:1; padding:0; }
.btn-unbekannt.aktiv { border-color:#c3cfdb; background:#eef3f8; }
.tile-kommentar-input { width:100%; resize:vertical; font-family:var(--mc-font-body); font-size:12.5px; line-height:1.55; color:var(--mc-ink); background:var(--mc-paper-tint); border:1px solid var(--mc-line); border-radius:11px; padding:8px 10px; }
.tile-kommentar-input:focus { outline:none; border-color:var(--mc-blue); box-shadow:0 0 0 3px rgba(58,165,245,.2); background:var(--mc-paper); }

/* Footer (nur Admin) */
.card-foot { padding:16px 34px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--mc-line); }
.foot-hilfe { font-size:12.5px; color:var(--mc-ink-muted); }

/* Schmale Einbettungen (Miro-Panel, Mobil) */
@media (max-width: 860px) {
  .tiles { grid-template-columns:repeat(2, 1fr); }
  .tile { border-bottom:1px solid var(--mc-line-app); }
  .tile:nth-child(2n) { border-right:none; }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns:1fr; }
  .tile { border-right:none; }
  .card-head, .card-foot, .kommentar-block { padding-left:20px; padding-right:20px; }
}