/* ============================================================
   WETTERZENTRALE · CI-Komponenten (final · Design-Runde 07/2026)
   Benötigt: ci-tokens.css. Reines CSS, beide Themes.
   Markup-Beispiele: siehe README.md.
   ============================================================ */

/* ---- 1 · Karten-Kopfzeile — EIN Muster für alle Cards (Prio A) ---- */
.card-head{
  display:grid; grid-template-columns:1fr auto auto; align-items:end;
  gap:2px 16px; padding:14px 18px 12px; border-bottom:1px solid var(--border);
}
.card-head h3{ margin:2px 0 0 }
.card-head__count{
  font:500 11px/1 var(--mono); color:var(--text-mute);
  background:var(--surface-2); border-radius:var(--radius-pill);
  padding:3px 8px; vertical-align:2px;
}
.card-head__meta{ font:400 11px/16px var(--mono); color:var(--text-mute); text-transform:uppercase }
.card-head__act{ font:500 12px/16px var(--mono); color:var(--accent); text-decoration:none }
.card-head__act:hover{ color:var(--accent-2) }
/* Regel: max. EINE Aktion im Kopf; Buttons gehören unter die Karte. */

/* ---- 2 · Lagekopf — above the fold auf /dashboard (Prio B) ---- */
.lagekopf{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px;
}
.lk-badge{
  width:66px; height:66px; border-radius:var(--radius-sm); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.lk-badge strong{ font:800 24px/1 var(--font-ui) }
.lk-badge span{ font:600 8px/1 var(--mono); letter-spacing:.12em }
.lagekopf[data-stufe="0"] .lk-badge{ background:var(--ok-fill); color:var(--ok-ink) }
.lagekopf[data-stufe="1"] .lk-badge{ background:var(--s1-fill); color:var(--s1-ink) }
.lagekopf[data-stufe="2"] .lk-badge{ background:var(--s2-fill); color:var(--s2-ink) }
.lagekopf[data-stufe="3"] .lk-badge{ background:var(--s3-fill); color:var(--s3-ink) }
.lagekopf[data-stufe="4"] .lk-badge{ background:var(--s4-fill); color:var(--s4-ink) }
.lk-text h2{ margin:0; font:600 17px/24px var(--font-ui) }
.lk-meta{ margin:5px 0 0; font:400 11px/16px var(--mono); color:var(--text-mute); text-transform:uppercase }
.lk-nums{ display:flex; gap:22px; padding-left:22px; border-left:1px solid var(--border) }
.lk-nums b{ display:block; font:600 22px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--text) }
.lk-nums small{ font:400 10px/13px var(--font-ui); color:var(--text-mute) }
.lk-ribbon{ grid-column:1/-1; display:flex; gap:3px; margin:0; padding:0; list-style:none }
.lk-ribbon li{
  flex:1; height:28px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font:500 9px/1 var(--mono); color:var(--text-mute);
}
.lk-ribbon li[data-stufe="1"]{ background:var(--s1-fill); border-color:var(--s1-fill); color:var(--s1-ink) }
.lk-ribbon li[data-stufe="2"]{ background:var(--s2-fill); border-color:var(--s2-fill); color:var(--s2-ink) }
.lk-ribbon li[data-stufe="3"]{ background:var(--s3-fill); border-color:var(--s3-fill); color:var(--s3-ink) }
.lk-ribbon li[data-stufe="4"]{ background:var(--s4-fill); border-color:var(--s4-fill); color:var(--s4-ink) }

/* ---- 3 · Warnstufen-Kapseln (Zeitstrahl, Badges) — Prio A ---- */
.s-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  font:700 12px/1 var(--mono); text-decoration:none;
}
.s-chip[data-stufe="1"]{ background:var(--s1-fill); color:var(--s1-ink) }
.s-chip[data-stufe="2"]{ background:var(--s2-fill); color:var(--s2-ink) }
.s-chip[data-stufe="3"]{ background:var(--s3-fill); color:var(--s3-ink) }
.s-chip[data-stufe="4"]{ background:var(--s4-fill); color:var(--s4-ink) }
.s-chip--line{ background:var(--surface); border:1.5px solid currentColor }
.s-chip--line[data-stufe="1"]{ color:var(--s1) } .s-chip--line[data-stufe="2"]{ color:var(--s2) }
.s-chip--line[data-stufe="3"]{ color:var(--s3) } .s-chip--line[data-stufe="4"]{ color:var(--s4) }

/* ---- 4 · Meldestufen (nur Pegel): amtliche Farbe, EIGENE FORM ---- */
.ms-chip{
  font:700 10px/1 var(--mono); letter-spacing:.06em;
  border:1.5px solid; border-radius:4px; padding:4px 7px;   /* eckig, nie Kapsel */
}
.ms-chip[data-ms="1"]{ border-color:var(--ms1); color:var(--ms1-text) }
.ms-chip[data-ms="2"]{ border-color:var(--ms2); color:var(--ms2-text) }
.ms-chip[data-ms="3"]{ border-color:var(--ms3); color:var(--ms3-text) }
.ms-chip[data-ms="4"]{ border-color:var(--ms4); color:var(--ms4-text) }
.pegel-card{ border-left:3px solid transparent }
.pegel-card[data-ms="1"]{ border-left-color:var(--ms1) }
.pegel-card[data-ms="2"]{ border-left-color:var(--ms2) }
.pegel-card[data-ms="3"]{ border-left-color:var(--ms3) }
.pegel-card[data-ms="4"]{ border-left-color:var(--ms4) }

/* ---- 5 · Lade- & Leerzustände (Prio B) ---- */
.skel{
  border-radius:6px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 45%,var(--surface-2) 65%)
             0 0/400% 100%;
  animation:skel 1.4s linear infinite;
}
@keyframes skel{ to{ background-position:-135% 0 } }
.empty{
  min-height:132px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center;
  font:400 12px/18px var(--mono); color:var(--text-mute); text-transform:uppercase;
}
.empty::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ok-fill) }

/* ---- 6 · Öffentlicher Warn-Header /warnung (Prio B) ---- */
.warn-hero{
  display:grid; grid-template-columns:118px 1fr; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
}
.wh-level{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:18px 10px }
.wh-level strong{ font:800 46px/1 var(--font-ui) }
.wh-level span{ font:700 9px/1 var(--mono); letter-spacing:.16em }
.warn-hero[data-stufe="1"] .wh-level{ background:var(--s1-fill); color:var(--s1-ink) }
.warn-hero[data-stufe="2"] .wh-level{ background:var(--s2-fill); color:var(--s2-ink) }
.warn-hero[data-stufe="3"] .wh-level{ background:var(--s3-fill); color:var(--s3-ink) }
.warn-hero[data-stufe="4"] .wh-level{ background:var(--s4-fill); color:var(--s4-ink) }
.wh-body{ padding:18px 22px; display:flex; flex-direction:column; gap:8px }
.wh-body h1{ margin:0; font:800 22px/26px var(--font-ui) }
.wh-valid{ margin:0; font:500 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--text-dim); text-transform:uppercase }
.wh-text{ margin:0; font:var(--t-body); color:var(--text) }
.wh-scale{ display:flex; align-items:center; gap:6px; margin:2px 0 0; padding:0; list-style:none }
.wh-scale li{ width:34px; height:8px; border-radius:var(--radius-pill); opacity:.35 }
.wh-scale li:nth-child(1){ background:var(--s1-fill) } .wh-scale li:nth-child(2){ background:var(--s2-fill) }
.wh-scale li:nth-child(3){ background:var(--s3-fill) } .wh-scale li:nth-child(4){ background:var(--s4-fill) }
.wh-scale li[aria-current]{ height:12px; opacity:1;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px currentColor }

/* ---- 7 · Mikro-Feinschliff (Prio C) ---- */
.card{ transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) }
.card:hover{
  border-color:color-mix(in oklab, var(--accent) 28%, var(--border));
  box-shadow:0 2px 6px rgba(15,23,32,.08);
}
/* Nie transform auf Karten; Übergänge nur border/box-shadow/opacity. */

@media(max-width:700px){
  .lagekopf{grid-template-columns:auto 1fr;gap:12px 14px}
  .lk-text h2{font:600 15px/1.35 var(--font-ui)}
  .lk-nums{grid-column:1/-1;padding-left:0;border-left:none;border-top:1px solid var(--border);padding-top:10px;justify-content:space-between;gap:8px}
  .lk-badge{width:58px;height:58px}
  .card-head{grid-template-columns:1fr;gap:2px}
  .warn-hero{grid-template-columns:92px 1fr}
  .wh-level strong{font-size:38px}
}