:root{
  --paper:#f6f8f7; --surface:#ffffff; --ink:#0f1a17; --ink-soft:#5b6b66;
  --line:#e3e9e6; --line-soft:#eef2f0; --accent:#0e9f6e; --accent-ink:#0a7d56;
  --accent-soft:#e6f6ef; --danger:#dc2626; --danger-soft:#fee2e2;
  --radius:16px; --radius-sm:11px; --shadow:0 1px 2px rgba(16,40,30,.05),0 8px 24px -16px rgba(16,40,30,.18);
  --maxw:1040px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"DM Sans",system-ui,sans-serif;background:var(--paper);color:var(--ink);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",sans-serif;margin:0;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
input,textarea,select,button{font-family:inherit;font-size:inherit}

/* ============ Header ============ */
.cc-header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 20px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.cc-header-l,.cc-header-r{display:flex;align-items:center;gap:12px}
.cc-logo-link{display:flex;align-items:center;gap:9px}
.cc-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent);
  color:#fff;font-family:"Bricolage Grotesque";font-weight:800;font-size:14px}
.cc-logo-text{font-family:"Bricolage Grotesque";font-weight:800;font-size:17px}
.cc-userchip{display:flex;flex-direction:column;line-height:1.15;text-align:end}
.cc-userchip b{font-size:12px;color:var(--accent-ink)}
.cc-userchip span{font-size:13px;color:var(--ink-soft)}
.cc-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);font-size:16px}
.cc-iconbtn:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ============ Sprachumschalter ============ */
.cc-langsel{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink-soft)}
.cc-langsel select{border:0;background:transparent;color:var(--ink);font-weight:600;font-size:13px;outline:none;cursor:pointer}

/* ============ Layout ============ */
.cc-main{max-width:var(--maxw);margin:0 auto;padding:22px 20px 80px}
.cc-pagetitle{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cc-pagetitle h1{font-size:25px;font-weight:800}
.cc-pagetitle p{margin:3px 0 0;color:var(--ink-soft);font-size:14px}
.cc-section{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
  margin:26px 0 12px}
.cc-back{display:inline-block;color:var(--ink-soft);font-weight:600;font-size:14px;margin-bottom:12px}
.cc-back:hover{color:var(--accent-ink)}
.cc-muted{color:var(--ink-soft)}

/* ============ Flash ============ */
.cc-flash{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-weight:600;font-size:14px}
.cc-flash-ok{background:var(--accent-soft);color:var(--accent-ink)}
.cc-flash-err{background:var(--danger-soft);color:var(--danger)}

/* ============ Buttons ============ */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;
  transition:.14s ease}
.cc-btn:hover{border-color:#cfd9d4}
.cc-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.cc-btn-primary:disabled{background:#b9d8cb;border-color:#b9d8cb;cursor:not-allowed}
.cc-btn-success{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-btn-success:hover{background:var(--accent-ink)}
.cc-btn-danger{background:#fff;border-color:#f3c4c4;color:var(--danger)}
.cc-btn-danger:hover{background:var(--danger-soft)}
.cc-btn-block{width:100%}

/* ============ Cards ============ */
.cc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.cc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.cc-card-btn{display:block;transition:.14s ease}
.cc-card-btn:hover{border-color:#cde6da;transform:translateY(-1px)}
.cc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cc-card-title{font-family:"Bricolage Grotesque";font-weight:700;font-size:16px}
.cc-card-sub{color:var(--ink-soft);font-size:13px;margin-top:2px}
.cc-card-meta{color:var(--ink-soft);font-size:13px;margin-top:9px}
.cc-card-chev{color:var(--ink-soft);font-size:20px}
.cc-progress-num{font-family:"Bricolage Grotesque";font-weight:800;color:var(--accent-ink)}
.cc-roomstrip{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.cc-roomdot{font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:7px}
.cc-empty{padding:26px;text-align:center;color:var(--ink-soft);background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius)}

/* ============ Fortschritt ============ */
.cc-bar{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:11px}
.cc-bar-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}

/* ============ Stats ============ */
.cc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.cc-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.cc-stat-val{font-family:"Bricolage Grotesque";font-weight:800;font-size:28px;line-height:1}
.cc-stat-label{color:var(--ink-soft);font-size:13px;margin-top:6px}

/* ============ Tabelle ============ */
.cc-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cc-tr{display:grid;grid-template-columns:.8fr 1.2fr .9fr .8fr .9fr 1.1fr;gap:10px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.cc-tr:last-child{border-bottom:0}
.cc-th{background:#fafcfb;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.cc-tr-btn:hover{background:#fafcfb}
.cc-td-room{font-family:"Bricolage Grotesque";font-weight:700}

/* ============ Pills ============ */
.cc-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.cc-chip-time{display:inline-flex;align-items:center;background:var(--accent-soft);color:var(--accent-ink);
  font-weight:700;font-size:13px;padding:7px 12px;border-radius:10px}

/* ============ Zeit-Karte ============ */
.cc-timecard{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:14px}
.cc-timecard-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.cc-timecard-val{font-family:"Bricolage Grotesque";font-weight:800;font-size:30px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.cc-timecard-r{font-weight:700;font-size:13px;color:var(--ink-soft)}
.cc-running{color:var(--accent-ink)}
.cc-running::first-letter{color:var(--accent)}

/* ============ Notes ============ */
.cc-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  font-size:14px;margin-bottom:14px}
.cc-note-warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.cc-note-ok{background:var(--accent-soft);border-color:#bfe8d5;color:var(--accent-ink)}

/* ============ Claim ============ */
.cc-claimbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  text-align:center;box-shadow:var(--shadow)}
.cc-claimbox p{margin:0 0 14px;color:var(--ink-soft)}

/* ============ Blocks (Checkliste / Fotos) ============ */
.cc-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.cc-block-title{font-family:"Bricolage Grotesque";font-weight:700;font-size:15px;margin-bottom:12px}
.cc-checklist{display:grid;gap:8px}
.cc-check{display:flex;align-items:center;gap:11px;width:100%;text-align:start;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.12s ease;font-size:14px}
.cc-check:hover{border-color:#cfd9d4}
.cc-check .cc-check-box{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);
  color:#fff;font-size:13px;font-weight:800;flex:none}
.cc-check.on{background:var(--accent-soft);border-color:#bfe8d5;color:var(--accent-ink)}
.cc-check.on .cc-check-box{background:var(--accent);border-color:var(--accent)}
.cc-check.static{cursor:default}
.cc-check.static.off{color:var(--ink-soft)}
.cc-check.static.off .cc-check-box{border-color:#e7caca;color:var(--danger)}
.cc-check.static.on .cc-check-box{background:var(--accent);border-color:var(--accent)}

/* ============ Fotos ============ */
.cc-photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.cc-photo{aspect-ratio:1;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--line-soft)}
.cc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cc-photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1;
  border-radius:11px;border:1.5px dashed #c7d4ce;color:var(--accent-ink);background:var(--accent-soft);cursor:pointer;
  font-weight:600;font-size:12px}
.cc-photo-add:hover{border-color:var(--accent)}
.cc-cam{font-size:22px}

/* ============ Finish-Leiste ============ */
.cc-finishbar{position:sticky;bottom:0;background:linear-gradient(to top,var(--paper) 60%,transparent);
  padding:14px 0 4px;margin-top:6px}
.cc-finishhint{text-align:center;margin-bottom:9px;font-size:13px}

/* ============ Kontrolle ============ */
.cc-kontroll{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.cc-ta{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;resize:vertical;outline:none}
.cc-ta:focus{border-color:var(--accent)}
.cc-kontroll-btns{display:flex;gap:10px;margin-top:11px}
.cc-kontroll-btns .cc-btn{flex:1}

/* ============ Felder / Formulare ============ */
.cc-field{display:block;margin-bottom:13px}
.cc-field>span{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.cc-field input,.cc-field textarea,.cc-field select{width:100%;border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;outline:none;background:#fff;color:var(--ink)}
.cc-field input:focus,.cc-field textarea:focus,.cc-field select:focus{border-color:var(--accent)}
.cc-formcard h3{font-family:"Bricolage Grotesque";font-size:17px;margin-bottom:14px}
.cc-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}

/* ============ Login ============ */
.cc-login-body{background:linear-gradient(160deg,#eef5f1,#f6f8f7 60%);min-height:100vh}
.cc-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.cc-login-top{position:fixed;top:18px;inset-inline-end:20px}
.cc-login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:28px;box-shadow:0 20px 50px -24px rgba(16,40,30,.3)}
.cc-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cc-brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent);
  color:#fff;font-family:"Bricolage Grotesque";font-weight:800;font-size:19px}
.cc-brand-name{font-family:"Bricolage Grotesque";font-weight:800;font-size:21px}
.cc-brand-sub{color:var(--ink-soft);font-size:13px}
.cc-err{background:var(--danger-soft);color:var(--danger);padding:9px 12px;border-radius:10px;font-size:13.5px;
  font-weight:600;margin-bottom:12px}
.cc-hint-toggle{display:block;width:100%;margin-top:14px;background:none;border:0;color:var(--ink-soft);
  font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline}
.cc-hints{margin-top:12px;display:grid;gap:7px}
.cc-hint-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:#fafcfb;cursor:pointer;text-align:start}
.cc-hint-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.cc-hint-role{font-weight:700;font-size:13px}
.cc-hint-cred{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ============ RTL ============ */
[dir="rtl"] .cc-card-chev{transform:scaleX(-1)}
[dir="rtl"] .cc-back{direction:rtl}

/* ============ Mobile ============ */
@media (max-width:680px){
  .cc-main{padding:16px 14px 90px}
  .cc-pagetitle h1{font-size:22px}
  .cc-userchip{display:none}
  .cc-tr{grid-template-columns:.7fr 1fr .8fr 1fr;font-size:13px}
  .cc-tr span:nth-child(3){display:none}      /* Checkliste-Spalte ausblenden */
  .cc-th span:nth-child(3){display:none}
  .cc-timecard-val{font-size:25px}
  .cc-logo-text{display:none}
}

/* ============ Etagen / Typen / Weiterleiten (v2) ============ */
.cc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.cc-grid2{grid-template-columns:1fr}}
.cc-details{margin:2px 0 14px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fafcfb}
.cc-details summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--accent-ink)}
.cc-details[open] summary{margin-bottom:10px}
.cc-forward-cta{margin-top:10px;font-weight:700;color:var(--accent-ink);font-size:14px}
.cc-td-etage{display:block;font-size:11.5px;color:var(--ink-soft);font-family:"DM Sans",sans-serif;font-weight:500;margin-top:1px}
/* Zimmer-Tabelle hat jetzt 7 Spalten (mit Typ) */
.cc-table-z .cc-tr{grid-template-columns:1fr .8fr 1.1fr .8fr .7fr .8fr 1fr}
@media (max-width:680px){
  .cc-table-z .cc-tr{grid-template-columns:.9fr .8fr 1fr .8fr}
  .cc-table-z .cc-tr span:nth-child(4),
  .cc-table-z .cc-th span:nth-child(4){display:none}   /* Checkliste */
  .cc-table-z .cc-tr span:nth-child(6),
  .cc-table-z .cc-th span:nth-child(6){display:none}   /* Dauer */
}

/* ============ Ketten / Filialen / Reporting (v3) ============ */
.cc-stats-4{flex-wrap:wrap}
.cc-table-r .cc-tr{grid-template-columns:1.4fr 1fr .9fr .9fr .9fr}
.cc-table-r .cc-tr:has(span:nth-child(6)){grid-template-columns:1.3fr .8fr .8fr .9fr 1fr .8fr}
@media (max-width:680px){
  .cc-table-r .cc-tr{grid-template-columns:1.2fr .8fr .8fr}
  .cc-table-r .cc-tr span:nth-child(n+4){display:none}
  .cc-table-r .cc-th span:nth-child(n+4){display:none}
}
.cc-monthsel select{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.cc-inline-assign{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.cc-inline-assign select{flex:1;min-width:140px;font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.cc-assign-label{font-size:13px;color:var(--ink-soft);font-weight:600}

/* ============ Register / Segment (v4) ============ */
.cc-segment{display:flex;gap:6px;background:#eef2f0;border-radius:11px;padding:4px;margin-bottom:16px}
.cc-seg{flex:1;text-align:center;padding:9px 8px;border-radius:8px;font-weight:600;font-size:14px;color:var(--ink-soft);text-decoration:none}
.cc-seg.on{background:#fff;color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cc-reg-link{display:block;text-align:center;margin:12px 0 4px;font-size:14px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.cc-reg-link:hover{text-decoration:underline}
.cc-login-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px;flex-wrap:wrap}
.cc-login-foot a{font-size:13.5px;color:var(--ink-soft);text-decoration:none}

/* ============ Firma-Team (v5) ============ */
.cc-section-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.cc-section-row .cc-section{margin:0}
.cc-section-link{font-size:13px;font-weight:600;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.cc-section-link:hover{text-decoration:underline}
.cc-subhead{font-size:13px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.cc-table-team .cc-tr{grid-template-columns:1.6fr .8fr .8fr}
.cc-table-team4 .cc-tr{grid-template-columns:1.6fr .7fr .7fr .8fr}

/* ============ Personalkosten (v6) ============ */
.cc-table-cost .cc-tr{grid-template-columns:1.3fr .9fr .7fr 1fr 1fr 1fr}
.cc-table-teamc .cc-tr{grid-template-columns:1.2fr .6fr .7fr .95fr .95fr 1fr}
.cc-tr-sum{background:#f5f8f6;font-weight:700}
.cc-hours-form{display:flex;gap:4px;align-items:center}
.cc-hours-input{width:66px;font:inherit;padding:5px 7px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-hours-save{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer;color:var(--accent-ink);font-weight:700;line-height:1}
.cc-hours-save:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:680px){
  .cc-table-cost .cc-tr,.cc-table-teamc .cc-tr{grid-template-columns:1.2fr .8fr 1fr}
  .cc-table-cost .cc-tr span:nth-child(n+4),.cc-table-cost .cc-th span:nth-child(n+4){display:none}
  .cc-table-teamc .cc-tr span:nth-child(2),.cc-table-teamc .cc-tr span:nth-child(3),
  .cc-table-teamc .cc-th span:nth-child(2),.cc-table-teamc .cc-th span:nth-child(3){display:none}
}

/* ============ Vorarbeiter-Gehalt (v7) ============ */
.cc-table-teamv .cc-tr{grid-template-columns:1.4fr .8fr .8fr 1fr}
.cc-unit{font-size:12px;color:var(--ink-soft);margin:0 2px}
.cc-mini-role{font-size:10.5px;font-weight:600;color:var(--ink-soft);background:#eef2f0;padding:1px 6px;border-radius:6px;margin-left:4px;vertical-align:middle}
@media (max-width:680px){
  .cc-table-teamv .cc-tr{grid-template-columns:1.4fr .8fr 1fr}
  .cc-table-teamv .cc-tr span:nth-child(3),.cc-table-teamv .cc-th span:nth-child(3){display:none}
}

/* Foto wird hochgeladen (Input bleibt erhalten!) */
.cc-photo-add.is-uploading{opacity:.5;pointer-events:none}
.cc-photo-add.is-uploading .cc-cam{animation:cc-pulse 1s ease-in-out infinite}
@keyframes cc-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ============ Ein-/Austritt (v9) ============ */
.cc-date-input{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);max-width:128px}

/* Ghost-Button (Rolle wechseln / Zimmer eingeben) */
.cc-btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-soft);border-radius:9px;cursor:pointer}
.cc-btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ============ Checkliste mit Foto je Punkt (v11) ============ */
.cc-checkfoto-list{display:flex;flex-direction:column;gap:8px}
.cc-cf-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;flex-wrap:wrap}
.cc-cf-item.done{background:#ecfdf3;border-color:#bbf7d0}
.cc-cf-head{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.cc-cf-box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px}
.cc-cf-item.done .cc-cf-box{background:var(--accent,#15803d);border-color:var(--accent,#15803d)}
.cc-cf-name{font-weight:600;font-size:14px}
.cc-cf-photos{display:flex;align-items:center;gap:8px;flex:none}
.cc-cf-thumb{display:block;width:46px;height:46px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.cc-cf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cc-cf-add{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:9px;border:2px dashed var(--line);cursor:pointer;background:#fff;transition:.15s}
.cc-cf-add:hover{border-color:var(--accent,#15803d);background:#f0fdf4}
.cc-cf-add .cc-cam{font-size:20px}
.cc-cf-add.is-uploading{opacity:.5;pointer-events:none}
.cc-cf-add.is-uploading .cc-cam{animation:cc-pulse 1s ease-in-out infinite}