/* ==========================================================================
   Vista City — Regelwerk
   ---------------------------------------------------------------------------
   Der vorige Entwurf war eine dreispaltige Tabelle: Nummer, Text, Strafmaß.
   Funktional, aber ohne Führung — man musste alles lesen, um irgendetwas zu
   finden. Jetzt führt die Seite: häufigste Verstöße zuerst, Filter nach
   Schweregrad, farbige Marke je Regel und am Ende, was bei einem Verstoß
   tatsächlich passiert.
   ========================================================================== */

/* --- Kopf mit Kenndaten ---------------------------------------------------- */

.rulehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(8rem, 6rem + 6vw, 12rem) clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.rulehero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(60% 90% at 0% 100%,
    color-mix(in oklab, var(--accent) 15%, transparent), transparent 68%);
}

.rulehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
}
.rulehero__text { display: grid; gap: 1.1rem; max-width: 54rem; }
.rulehero__title { font-size: clamp(2.4rem, 1.5rem + 4vw, 5.5rem); }

/* Kenndaten wie der Aufdruck auf einem Aktendeckel. */
.rulefacts {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.rulefacts > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.4rem;
  background: var(--surface);
}
.rulefacts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rulefacts dd {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

/* --- Schnellzugriff ---------------------------------------------------------
   Die vier Regeln, an denen die meisten scheitern — vor dem Werk selbst.
   ---------------------------------------------------------------------------- */

.quickrules { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.quickrules__head { margin-bottom: 1.25rem; }
.quickrules__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.quickrules__head p { margin-top: 0.35rem; color: var(--ink-mute); font-size: var(--text-sm); }

.quickrules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.quickrule {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone, var(--line-hi));
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.quickrule:hover { background: var(--surface-hi); border-color: var(--line-hi); border-left-color: var(--tone); }
.quickrule--crit { --tone: var(--state-crit); }
.quickrule--warn { --tone: var(--state-warn); }
.quickrule--info { --tone: var(--state-info); }

.quickrule__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--tone);
}
.quickrule__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.quickrule__text { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }

/* --- Raster ---------------------------------------------------------------- */

.rulebook {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-section);
}

/* --- Verzeichnis ------------------------------------------------------------ */

.rulenav { position: sticky; top: 6.5rem; display: grid; gap: 1.5rem; }
.rulenav > h2,
.rulenav__legend h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.75rem;
}
.rulenav nav { display: grid; gap: 0.1rem; }
.rulenav a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.rulenav a:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--ink); }
.rulenav a span:first-child { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.rulenav__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}
/* Aktiver Abschnitt beim Lesen (setzt rules.js). */
.rulenav a.is-active {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.rulenav__legend { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.legenditem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.legenditem + .legenditem { margin-top: 0.45rem; }
.legenditem span {
  width: 0.7rem;
  height: 2px;
  background: var(--tone);
}
.legenditem--crit { --tone: var(--state-crit); }
.legenditem--warn { --tone: var(--state-warn); }
.legenditem--info { --tone: var(--state-info); }

/* --- Filterleiste ----------------------------------------------------------- */

.filterbar--rules {
  position: sticky;
  top: 5.25rem;
  z-index: 5;
  padding-block: 0.75rem;
  margin-bottom: 0;
  background: var(--bg);
}

/* --- Abschnitte ------------------------------------------------------------- */

.rulesection { margin-top: clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: 8rem; }
.rulesection[hidden] { display: none; }

.rulesection__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--line-hi);
}
.rulesection__num {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}
.rulesection__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.rulesection__intro { margin-top: 0.35rem; color: var(--ink-mute); font-size: var(--text-sm); }

/* --- Einzelregel -----------------------------------------------------------
   Als Block mit farbiger Kante links: der Schweregrad ist ablesbar, bevor
   man den Text gelesen hat.
   ---------------------------------------------------------------------------- */

.rule {
  display: grid;
  gap: 0.6rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone, var(--line-hi));
  border-radius: var(--r-md);
  background: var(--surface);
  scroll-margin-top: 9rem;
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.rule + .rule { margin-top: 0.5rem; }
.rule:hover { background: var(--surface-hi); border-color: var(--line-hi); border-left-color: var(--tone); }
.rule[hidden] { display: none; }

.rule--crit { --tone: var(--state-crit); }
.rule--warn { --tone: var(--state-warn); }
.rule--info { --tone: var(--state-info); }

/* Kurz hervorgehoben, wenn man aus dem Schnellzugriff herspringt. */
.rule:target { border-color: var(--tone); background: color-mix(in oklab, var(--tone) 8%, var(--surface)); }

.rule__top {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: 0.85rem;
}
.rule__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--tone);
}
.rule__top h3 { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.rule__sev {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tone);
}

.rule__text {
  grid-column: 1 / -1;
  padding-left: 3.85rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 68ch;
}

/* Beispiel und Strafmaß als abgesetzte Zeilen mit vorangestelltem Label. */
.rule__example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-left: 3.85rem;
  font-size: var(--text-sm);
}
.rule__example { color: var(--ink-mute); font-style: italic; }
.rule__example span {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 5.5rem;
}

/* Suchtreffer */
mark {
  padding: 0 0.15em;
  border-radius: 2px;
  background: color-mix(in oklab, var(--accent) 32%, transparent);
  color: inherit;
}

/* --- Stufenmodell ------------------------------------------------------------ */

.escalation {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.escalation header { display: grid; gap: 0.8rem; max-width: 44ch; }
.escalation header h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); line-height: 0.98; }
.escalation header p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }

/* --- Umbrüche --------------------------------------------------------------- */

@media (max-width: 68rem) {
  .rulehero__inner { grid-template-columns: 1fr; align-items: start; }
  .rulefacts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 62rem) {
  .rulebook { grid-template-columns: 1fr; }
  .rulenav { position: static; }
  .rulenav nav { grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr); overflow-x: auto; }
  .rulenav a { grid-template-columns: 1fr; gap: 0.15rem; }
  .rulenav__count { display: none; }
  .filterbar--rules { position: static; }
}
@media (max-width: 44rem) {
  .rulefacts { grid-template-columns: repeat(2, 1fr); }
  .rule__top { grid-template-columns: 3rem 1fr; }
  .rule__sev { grid-column: 2; }
  .rule__text, .rule__example { padding-left: 0; margin-left: 0; }
}

/* --- Regeln mit Wort statt Nummer -----------------------------------------
   Zwei Regeln tragen als Kennung ein Wort („Grundsatz", „Legale
   Fraktionen"). In der 3rem schmalen Nummernspalte laufen sie in den Titel.
   Sie stehen deshalb als kleine Zeile darüber, und der Text rückt nach links.
   ---------------------------------------------------------------------------- */

.rule--label .rule__top { grid-template-columns: 1fr auto; }
.rule--label .rule__num {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0.35rem;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rule--label .rule__text { padding-left: 0; }