/* Ergänzungen zur Eihi-App-Bibliothek – abgeleitet aus dem CD (Token-Farben, Radius 4/10 px) */
body { margin: 0; background: var(--eihi-bg); }
html { -webkit-tap-highlight-color: rgba(0, 97, 80, .15); }
button, a, input, select, textarea, label { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
dialog.eihi-modal { overscroll-behavior: contain; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: #fff; color: var(--eihi-navy); padding: 10px 14px; border-radius: var(--radius-btn); font: 700 .9rem var(--font-ui); box-shadow: var(--shadow-label); }
.skip-link:focus { top: 8px; }
#page:focus { outline: none; }   /* Ziel des Skip-Links / Seitenwechsels, kein interaktives Element */
.eihi-btn[aria-busy="true"] { opacity: .75; cursor: progress; }

/* Personen-Auswahl mit Suche */
.picker input { margin-bottom: 6px; }
.picker select { min-height: 0; }
.quick-range { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.quick-range .eihi-btn { min-height: 36px; }

/* Vorschlagskarten */
.prop-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.prop-card:last-of-type { border-bottom: 0; }
.prop-card .who { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 6px; }
.prop-card .who strong { font: 700 1.05rem/1.3 var(--font-display); }
.prop-card .why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.prop-card details { margin-top: 6px; }
.prop-card summary { cursor: pointer; color: var(--eihi-green); font-weight: 600; font-size: .9rem; min-height: 32px; display: inline-flex; align-items: center; }
.prop-group { font: 700 .75rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .6px; color: var(--eihi-text-muted); margin: 16px 0 0; }
.fit { font: 700 .8rem/1 var(--font-body); padding: 3px 7px; border-radius: 3px; background: var(--eihi-green-tint); color: var(--eihi-green); white-space: nowrap; }
.fit--mid { background: var(--eihi-mist); color: var(--eihi-navy); }
.plan-row { display: contents; }

/* Anwesenheitsliste (Startseite) */
.roster-loc { border-top: 1px solid var(--ui-line); }
.roster-loc h3 { margin: 0; padding: 10px 16px; background: var(--eihi-green-tint); color: var(--eihi-green); font: 700 .95rem/1.3 var(--font-display); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.roster-loc h3 .eihi-meta { color: var(--eihi-text-muted); font-family: var(--font-body); font-weight: 600; }
.roster-loc ul { list-style: none; margin: 0; padding: 0; }
.roster-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 16px; border-bottom: 1px solid var(--ui-line); flex-wrap: wrap; min-height: 52px; }
.roster-row:last-child { border-bottom: 0; }
.roster-row.is-absent { background: #fff8f8; }
.roster-who { display: flex; flex-direction: column; min-width: 0; }
.roster-who strong { overflow-wrap: anywhere; }
.roster-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.roster-act .eihi-btn { min-height: 40px; min-width: 72px; }

/* Toast mit Aktion */
.eihi-toast .toast-act { margin-left: 12px; background: none; border: 0; font: 700 .9rem var(--font-ui); color: inherit; text-decoration: underline; cursor: pointer; min-height: 32px; }
.boot { padding: 40px; font-family: var(--font-body); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--eihi-green); }
.login-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-label); width: min(100%, 420px); padding: 32px; }
.login-card img { width: 72px; height: 72px; object-fit: contain; display: block; margin-bottom: 16px; }
.login-card .eihi-h1 { font-size: 2rem; letter-spacing: -1px; margin: 0; }
.login-card .eihi-form { margin-top: 20px; }
.login-note { font-size: .8125rem; color: var(--eihi-text-muted, #5b6075); margin-top: 20px; line-height: 1.5; }

/* Topbar */
.topbar-title { font: 600 1rem/1.2 var(--font-body); color: var(--ui-text); }
.user-menu { display: flex; align-items: center; gap: 12px; }
.role-chip { text-transform: none; }
.demo-banner { background: #fff4e0; color: #8a4f00; padding: 8px 24px; font: 600 .875rem/1.4 var(--font-body); border-bottom: 1px solid #f3d29a; }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.toolbar .eihi-field { margin: 0; min-width: 180px; }
.toolbar .grow { flex: 1; }
.week-nav { display: flex; gap: 6px; align-items: center; }
.week-nav strong { font: 700 1.05rem/1.2 var(--font-display); min-width: 190px; text-align: center; }

/* Wochenplan */
.plan-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.plan-grid { display: grid; grid-template-columns: 200px repeat(var(--days, 5), minmax(170px, 1fr)); min-width: 1050px; }
.plan-grid > div { border-bottom: 1px solid var(--ui-line); border-right: 1px solid var(--ui-line); padding: 8px; }
.plan-head { background: var(--eihi-mist); font: 600 .75rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .6px; color: var(--eihi-text-muted, #5b6075); position: sticky; top: 0; z-index: 1; }
.plan-head.today { box-shadow: inset 0 -3px 0 var(--eihi-lime); color: var(--eihi-green); }
.plan-loc { background: #fff; position: sticky; left: 0; z-index: 1; }
.plan-loc strong { display: block; font: 700 .95rem/1.25 var(--font-display); color: var(--ui-text); }
.plan-loc small { color: var(--eihi-text-muted, #5b6075); font-size: .75rem; }
.plan-cell.closed { background: repeating-linear-gradient(-45deg, var(--eihi-mist), var(--eihi-mist) 6px, #fff 6px, #fff 12px); color: var(--eihi-text-muted, #5b6075); font-size: .8rem; }
.shift { display: block; width: 100%; text-align: left; border: 1px solid var(--ui-line); border-left: 4px solid var(--eihi-green); border-radius: 4px; background: #fff; padding: 6px 8px; margin-bottom: 6px; font: inherit; color: inherit; }
button.shift { cursor: pointer; }
button.shift:hover { box-shadow: var(--shadow-card); }
.shift.open { border-left-color: var(--eihi-red); background: #fff6f7; }
.shift.extra { border-left-color: var(--eihi-blue); }
.shift-top { display: flex; justify-content: space-between; gap: 6px; font: 600 .78rem/1.3 var(--font-body); color: var(--eihi-text-muted, #5b6075); }
.shift-label { font: 600 .82rem/1.3 var(--font-body); color: var(--ui-text); margin: 2px 0 4px; }
.staff { list-style: none; margin: 0; padding: 0; font-size: .82rem; line-height: 1.45; }
.staff li { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.absent { text-decoration: line-through; color: var(--eihi-text-muted, #5b6075); }
.tag { font: 700 .66rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .4px; padding: 1px 5px; border-radius: 3px; }
.tag-abs { background: #fde8ea; color: var(--eihi-red-dark); }
.tag-rep { background: var(--eihi-green-tint, #e6f0ee); color: var(--eihi-green); }
.tag-ext { background: #e3eff9; color: var(--eihi-blue-dark); }
.cov { font-variant-numeric: tabular-nums; }
.cov.bad { color: var(--eihi-red-dark); font-weight: 700; }

/* Listen und Karten */
.stack { display: grid; gap: 24px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rec { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--ui-line); }
.rec:last-child { border-bottom: 0; }
.rec h3 { margin: 0; font: 700 1rem/1.3 var(--font-display); }
.rec p { margin: 0; font-size: .9rem; line-height: 1.5; }
.rec .act { color: var(--eihi-green); font-weight: 600; }
.rec .chip-col { grid-row: span 3; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .95rem; margin: 0; }
.kv dt { color: var(--eihi-text-muted, #5b6075); }
.kv dd { margin: 0; }
.cand { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); align-items: center; }
.cand small { color: var(--eihi-text-muted, #5b6075); grid-column: 1; }
.score { font: 700 1rem/1 var(--font-display); color: var(--eihi-green); font-variant-numeric: tabular-nums; }
.prop { padding: 12px 0; border-bottom: 1px solid var(--ui-line); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.prop label { font-weight: 600; }
.area-card h3 { margin: 0 0 4px; }
.people-list { margin: 4px 0 0; padding: 0; list-style: none; }
.muted { color: var(--eihi-text-muted, #5b6075); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.avail-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.tpl-row { display: grid; grid-template-columns: 1.4fr 90px 90px 70px auto; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.tpl-row .staffsel { grid-column: 1 / -1; }
.tpl-row .staffsel select { min-height: 96px; }
dialog.eihi-modal.wide { width: min(calc(100% - 32px), 860px); }
.pw-box { font: 700 1.2rem/1.4 ui-monospace, Menlo, monospace; background: var(--eihi-mist); padding: 12px 16px; border-radius: 4px; user-select: all; word-break: break-all; }
.chart { width: 100%; height: auto; font-family: var(--font-body); }
.chart text { fill: var(--ui-text); }
.chart .axis { fill: var(--eihi-text-muted, #5b6075); }
.legal { font-size: .92rem; line-height: 1.6; }
.legal h3 { font: 700 1.05rem/1.3 var(--font-display); margin: 18px 0 6px; }
.legal ul { padding-left: 20px; margin: 6px 0; }
.toolbar-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-pill { font-size: .85rem; }

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .eihi-topbar { padding-left: 16px; padding-right: 16px; }
  /* Kennzahlen kompakt, damit die Anwesenheitsliste schnell erreichbar ist */
  .eihi-grid--4[aria-label="Kennzahlen"] { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px !important; }
  .eihi-grid--4[aria-label="Kennzahlen"] .eihi-kpi { padding: 12px 14px; }
  .eihi-grid--4[aria-label="Kennzahlen"] .eihi-kpi__value { font-size: 1.75rem; }
  .eihi-grid--4[aria-label="Kennzahlen"] .eihi-kpi__delta { font-size: .78rem; }
  .eihi-page-head .eihi-actions { width: 100%; }
  .eihi-page-head .eihi-actions .eihi-btn--primary { order: -1; }
  .topbar-title, .user-menu .eihi-meta, .user-menu .eihi-avatar { display: none; }
  .demo-banner { padding: 8px 16px; }
  .toolbar .eihi-field { min-width: 0; flex: 1 1 140px; }
  .week-nav { width: 100%; justify-content: space-between; }
  .week-nav strong { min-width: 0; font-size: .95rem; }
  .plan-grid { grid-template-columns: 130px repeat(var(--days, 5), minmax(150px, 1fr)); min-width: 880px; }
  .tpl-row { grid-template-columns: 1fr 1fr; }
  .avail-row { grid-template-columns: 50px 1fr 1fr; }
  .eihi-page-head { flex-wrap: wrap; }
}

/* Bereichswahl in der Seitenleiste – jeder Bereich hat seine eigene Oberfläche */
.area-switch { padding: 12px 20px 4px; color: #fff; display: grid; gap: 6px; }
.area-switch label, .area-switch__label { font: 700 .7rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .6px; color: rgba(255, 255, 255, .8); }
.area-switch strong { font: 700 1.05rem/1.2 var(--font-display); }
.area-switch .eihi-select { background-color: #fff; color: var(--eihi-navy); min-height: 44px; }
@media (max-width: 900px) {
  .area-switch { padding: 8px 16px; grid-template-columns: auto 1fr; align-items: center; }
}

/* Zwei-Faktor-Einrichtung */
.setup-steps { padding-left: 20px; margin: 0 0 8px; line-height: 1.5; }
.setup-steps li { margin-bottom: 6px; }
.qr-box { display: flex; justify-content: center; background: #fff; border: 1px solid var(--ui-line); border-radius: var(--radius-card); padding: 12px; margin: 4px 0 8px; }
.qr-box svg { width: 200px; height: 200px; }