/* pages/ruderampel.css — Layer: pages. Lädt nur auf dem Template ruderampel.
 * Das Startseiten-Widget (.ampel-zeile) steht dagegen in components.css,
 * weil es auf der Startseite erscheint. */
@layer pages {

.ampel-seite { padding-bottom: var(--sp-8); }

/* ---- Hero ---- */
.ampel-hero {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  background: var(--color-surface);
  border-left: 4px solid var(--ampel-unbekannt);
}
.ampel-hero--frei           { border-left-color: var(--ampel-frei); }
.ampel-hero--eingeschraenkt { border-left-color: var(--ampel-limit); background: var(--warn-bg); }
.ampel-hero--gesperrt       { border-left-color: var(--ampel-sperre); background: var(--frgs-red-soft); }

.ampel-hero-eyebrow { margin: 0 0 var(--sp-1); }
.ampel-hero-status {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2);
}
.ampel-hero--eingeschraenkt .ampel-hero-status { color: var(--warn-ink); }
.ampel-hero--gesperrt .ampel-hero-status       { color: var(--ampel-sperre); }
.ampel-hero-grund { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); }
.ampel-hero-zeit  { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Skalen ---- */
.ampel-skalen {
  margin-top: var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--sp-2) var(--sp-6);
}
.ampel-skala { padding: var(--sp-4) 0; border-top: 1px solid var(--ink-100); }
.ampel-skala:first-child { border-top: 0; }

.ampel-skala-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.ampel-skala-label { font-weight: 600; }
.ampel-skala-tag {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ampel-skala-wert { font-variant-numeric: tabular-nums; }
.ampel-skala-wert em { font-style: normal; color: var(--color-text-muted); font-size: var(--fs-sm); }

.ampel-bar { position: relative; display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.ampel-zone { display: block; height: 100%; }
.ampel-zone--frei           { background: var(--ampel-frei); }
.ampel-zone--eingeschraenkt { background: var(--ampel-limit); }
.ampel-zone--gesperrt       { background: var(--ampel-sperre); }

.ampel-mark {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink-900);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.ampel-skala-enden {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.ampel-hinweis {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 60ch;
}

}