/* DRK Cockpit Connector – DRK Styleguide orientierte Darstellung
   Primärfarben: DRK-Rot #e60005, Weiß, Schwarz
   Sekundärfarben Web: Dunkelblau #002d55, Hellblau #ebf5ff */
.drk-cockpit{
  --drk-red:#e60005;
  --drk-blue:#002d55;
  --drk-lightblue:#ebf5ff;
  --drk-white:#ffffff;
  --drk-black:#000000;
  --drk-gray:#f2f2f2;
  --drk-border:#d8d8d8;
  --drk-text:#000000;
  --drk-muted:#555555;
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:var(--drk-text);
  background:transparent;
}
.drk-cockpit *{box-sizing:border-box}
.drk-cockpit h1,.drk-cockpit h2,.drk-cockpit h3{
  font-family:Merriweather,Georgia,serif;
  font-weight:700;
  color:var(--drk-red);
  line-height:1.18;
  margin-top:0;
}
.drk-cockpit h2{
  font-size:clamp(1.65rem,2.8vw,2.35rem);
  border:0;
  padding:0;
  margin-bottom:.35rem;
}
.drk-cockpit h2::after{
  content:"";
  display:block;
  width:72px;
  height:6px;
  background:var(--drk-red);
  margin:.65rem 0 1.1rem;
}
.drk-cockpit h3{
  color:var(--drk-blue);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:1.08rem;
  font-weight:700;
  margin:0 0 14px;
}
.drk-section{
  margin:30px 0;
  padding:24px;
  background:var(--drk-white);
  border-top:8px solid var(--drk-red);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.drk-section-intro{
  color:var(--drk-blue);
  font-weight:700;
  margin:0 0 18px;
}
.drk-kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin:24px 0;
}
.drk-card{
  background:var(--drk-white);
  border:1px solid var(--drk-border);
  border-top:6px solid var(--drk-red);
  border-radius:0;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.drk-card-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--drk-lightblue);
  color:var(--drk-blue);
  font-size:24px;
  line-height:1;
}
.drk-card-label{
  font-size:13px;
  color:var(--drk-blue);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.drk-card-value{
  font-size:32px;
  font-weight:700;
  color:var(--drk-black);
  line-height:1.1;
}
.drk-table-wrap{overflow-x:auto;margin:18px 0;background:var(--drk-white)}
.drk-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  background:var(--drk-white);
  font-size:15px;
}
.drk-table th,.drk-table td{
  padding:11px 12px;
  border-bottom:1px solid var(--drk-border);
  text-align:left;
}
.drk-table th{
  background:var(--drk-blue);
  color:var(--drk-white);
  font-weight:700;
}
.drk-table tbody tr:nth-child(even){background:#fafafa}
.drk-table tbody tr:hover{background:var(--drk-lightblue)}
.drk-table td:nth-child(2),.drk-table td:nth-child(3){font-weight:700;color:var(--drk-blue)}
.drk-chart-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
  margin-top:20px;
}
.drk-chart-card{
  background:var(--drk-lightblue);
  border:0;
  border-left:8px solid var(--drk-red);
  border-radius:0;
  padding:18px;
  box-shadow:none;
  min-height:360px;
}
.drk-chart-card canvas{
  background:rgba(255,255,255,.72);
  padding:8px;
}
.drk-cockpit-chart{
  width:100%!important;
  height:300px!important;
  max-height:420px;
}
.drk-cockpit-error{
  border-left:8px solid var(--drk-red);
  background:#fff5f5;
  color:var(--drk-black);
  padding:14px 16px;
  margin:16px 0;
  font-family:"Helvetica Neue",Arial,sans-serif;
}
.drk-single-stat strong{color:var(--drk-red);font-weight:700}
.drk-single-stat{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--drk-black)}
@media (max-width:640px){
  .drk-section{padding:18px 14px}
  .drk-chart-grid{grid-template-columns:1fr}
  .drk-card-value{font-size:28px}
}