:root{
  /* Brand */
  --evonik-purple:#57068c;
  --evonik-purple-2:#7a1fa2;
  --evonik-soft:#f4eafc;

  /* System */
  --bg:#f2f2f7;
  --card:#ffffff;
  --card-2:#fafafa;
  --border:rgba(0,0,0,0.10);
  --text:#1c1c1e;
  --muted:#6b7280;

  /* Status */
  --ios-blue:#007aff;
  --ios-green:#34c759;
  --ios-red:#ff3b30;
  --ios-gray:#8e8e93;

  /* UI */
  --radius:18px;
  --radius-sm:14px;
  --shadow:0 10px 30px rgba(0,0,0,0.06);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.hidden{display:none!important;}
.mono{font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;}
.small{font-size:13px; color:var(--muted); line-height:1.35;}
.hint{font-size:13px; color:var(--muted); line-height:1.35;}
.notice{
  background:rgba(87,6,140,0.06);
  border:1px solid rgba(87,6,140,0.18);
  color:#3b2550;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:13px;
  line-height:1.35;
}

/* Layout */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

/* Header */
.app-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 18px rgba(0,0,0,0.04);
}
.header-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand .title{
  font-size:18px;
  font-weight:900;
  letter-spacing:0.2px;
}
.brand .subtitle{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

/* Card */
.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.card-header h2, .card-header h3{
  margin:0;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.98);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .04s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{
  background:rgba(87,6,140,0.06);
  border-color:rgba(87,6,140,0.26);
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background:var(--evonik-purple);
  border-color:rgba(87,6,140,0.4);
  color:#fff;
}
.btn.primary:hover{ background:var(--evonik-purple-2); }
.btn.danger{
  border-color:rgba(255,59,48,0.40);
  color:var(--ios-red);
  background:#fff;
}
.btn.danger:hover{
  background:rgba(255,59,48,0.08);
}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,0.12);
  margin-left:8px;
}
.badge.ok{ background:rgba(52,199,89,0.10); border-color:rgba(52,199,89,0.25); color:#1f6b33; }
.badge.todo{ background:rgba(142,142,147,0.10); border-color:rgba(142,142,147,0.25); color:#5b5b60; }

/* Grid helpers */
.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr; }
  .header-inner{ flex-wrap:wrap; }
}

/* KPI */
.kpi .label{ font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
.kpi .value{ font-size:16px; font-weight:900; margin-top:4px; }
.kpi .hint{ margin-top:6px; }

/* Forms */
.form{ display:grid; gap:12px; }
.field label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin:0 0 6px 2px;
}
.field input, .field select, input, select{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  font-size:14px;
  outline:none;
}
.field input:focus, .field select:focus, input:focus, select:focus{
  border-color:rgba(87,6,140,0.35);
  box-shadow:0 0 0 4px rgba(87,6,140,0.10);
}

/* Tables */
.table-wrap{ width:100%; overflow:auto; border-radius:14px; border:1px solid rgba(0,0,0,0.08); }
table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; }
th,td{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.06); text-align:left; vertical-align:top; }
th{ font-size:12px; color:var(--muted); background:var(--card-2); position:sticky; top:0; z-index:1; }
tr:last-child td{ border-bottom:none; }

/* Matrix (Monatsübersicht) */
.matrix-table th, .matrix-table td{ white-space:nowrap; }
.matrix-table .matrix-label{ font-weight:800; }
.matrix-table td:first-child,
.matrix-table th:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
  min-width:220px;
}
.matrix-table th:first-child{
  background:var(--card-2);
  z-index:3;
}
.matrix-table .matrix-sep td{
  background:rgba(87,6,140,0.06);
  color:#3b2550;
  font-weight:900;
  border-bottom:1px solid rgba(87,6,140,0.18);
}

/* Accordion (details/summary) */
details.accordion{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  background:var(--card);
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
  overflow:hidden;
  margin:10px 0;
}
details.accordion > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
details.accordion > summary::-webkit-details-marker{ display:none; }
details.accordion > summary::after{
  content:"▾";
  font-size:14px;
  color:var(--muted);
  transform: rotate(0deg);
  transition: transform .15s ease;
}
details.accordion:not([open]) > summary::after{ transform: rotate(-90deg); }
details.accordion .acc-title{ font-weight:900; }
details.accordion .acc-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
details.accordion > summary > div{ display:flex; flex-direction:column; }
details.accordion .acc-body{ padding:0 14px 14px 14px; }

/* Print baseline (pages can override) */
@media print{
  .app-header, .btn{ display:none!important; }
  body{ background:#fff; }
  .card{ box-shadow:none; }
}

.big{font-size:32px;font-weight:800;}


/* Update Banner (v58) */
.update-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.update-banner.hidden{ display:none; }

.update-banner__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
}
.update-banner__text{ line-height: 1.1; }
.update-banner__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.btn.small{
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
}

/* =========================================================
   Mobile Bottom Navigation (shared)
   ========================================================= */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:999;
  display:none;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
}
.bottom-nav .bn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:10px 6px 12px;
  color:var(--muted);
  font-weight:950;
  font-size:11px;
  text-decoration:none;
}
.bottom-nav .bn-ico{ font-size:16px; line-height:1; }
.bottom-nav .bn-dot{ font-size:14px; line-height:1; }
.bottom-nav .bn-item.active{ color:var(--evonik-purple); }

@media (max-width: 980px){
  body{ padding-bottom:72px; }
  .bottom-nav{ display:flex; }
}