/* Regeln (regeln.html) */

/* Sprungleiste unter dem Titel */
.sprungleiste{margin:0 0 var(--s-6)}
.sprungleiste ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5)}
.sprungleiste a{display:inline-flex;align-items:center;min-height:var(--ziel-min)}
[id]{scroll-margin-top:var(--s-4)}

.vorspann{font-size:1.1875rem;line-height:1.55;color:var(--pergament)}
.vorspann p{margin-bottom:var(--s-3)}
.abschnitt > h2,.spalten > * > h2{margin-bottom:var(--s-4)}
#strafen .lesetext + .tarif{margin-top:var(--s-5)}

/* Regel in der Hauptspalte, Rechnung in der Nebenspalte (.spalten wie auf allen Seiten):
   eine Randrechnung im Kontobuch. Die Beispiele beginnen auf der Höhe der Abschnittsüberschrift. */

/* ---------- Tarif: Betrag links in Alegreya, rechtsbündig, Regel daneben ---------- */
/* Eine feste Zahlenspalte für beide Listen (DKP bekommen, Strafen): Alle Regeltitel stehen auf einer Kante */
.tarif{display:grid;grid-template-columns:9.5rem minmax(0,var(--masz-text));column-gap:var(--s-5);row-gap:var(--s-5);margin:0}
.tarif > div{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:start}
.tarif dt{grid-column:2;grid-row:1;font-weight:700;font-size:var(--text-l);line-height:1.3;color:var(--pergament-hell)}
.tarif .tarif-betrag{grid-column:1;grid-row:1 / span 2;margin:0;text-align:right;white-space:nowrap;
  font-family:var(--schrift-zahl);font-weight:700;font-size:var(--titel-m);line-height:1;color:var(--pergament-hell);
  font-variant-numeric:lining-nums tabular-nums;padding-top:.0625rem}
.tarif .tarif-betrag.minus{color:var(--rot)}
.tarif .tarif-text{grid-column:2;grid-row:2;margin:var(--s-1) 0 0;font-size:var(--text-l);color:var(--pergament)}
.bedingungen{list-style:none;margin:var(--s-2) 0 var(--s-3);padding:0;display:grid;gap:var(--s-1)}
.bedingungen li{display:flex;align-items:flex-start;gap:var(--s-2)}
.bedingungen .haken{flex:none;margin-top:.0625rem}

/* ---------- Beispiele mit kleiner Rechnung ---------- */
.beispiele{display:grid;gap:var(--s-6)}
.beispiele:empty{display:none}
.beispiel h3{margin-bottom:var(--s-2)}
.beispiel > .zart{max-width:44ch;margin-top:var(--s-2)}

/* Die Rechnung selbst (table.tabelle.rechnung) kommt aus app.css; hier füllt sie nur die Nebenspalte */
.tabelle.rechnung{width:100%;max-width:22rem;margin:0}

/* ---------- Lootregeln und Fälle ---------- */
.regelliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6);margin:var(--s-5) 0 0}
.regelliste dt{font-weight:700;font-size:var(--text-l);color:var(--pergament-hell)}
.regelliste dd{margin:2px 0 0;color:var(--pergament)}

.faelle-titel{margin:var(--s-7) 0 var(--s-4);font-family:var(--schrift-zahl);font-weight:600;font-size:1.25rem;color:var(--pergament-hell)}
/* Fälle stehen im Drittelraster von .zf-faelle (app.css), wie die Zuordnungsfälle */
.fall h3,.fall h4{margin-bottom:var(--s-2);color:var(--pergament-hell)}
.fall p{margin:0}
.fall-item{font-size:var(--text-l)}
.fall-art,.fall-wo{padding-left:1.125rem;font-size:var(--text-s);color:var(--sand)}
.fall-wo{color:var(--kamel)}
.fall-gebote{padding-left:1.125rem;margin-top:var(--s-3)}
.fall .gebote-tabelle td:last-child{white-space:nowrap}
/* Schmale Spalte: Anmerkung unter den Namen, wie am Telefon (statt umzubrechen und Lücken zu reißen) */
.fall-gebote{container-type:inline-size}
@container (max-width:30rem){
  .fall .gebote-tabelle,.fall .gebote-tabelle tbody{display:block}
  .fall .gebote-tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) 2.25rem 3.25rem;column-gap:var(--s-3);align-items:baseline;padding-block:.1875rem}
  .fall .gebote-tabelle th,.fall .gebote-tabelle td{padding:0}
  .fall .gebote-tabelle td.gebot-notiz{grid-column:1 / -1;font-size:var(--text-s);white-space:normal}
  .fall .gebote-tabelle td.gebot-notiz:empty{display:none}
}
.fall .gebote-satz + .gebote-satz{margin-top:var(--s-1)}

/* ---------- Auslegung ---------- */
.auslegung{padding-left:1.25em;display:grid;gap:var(--s-2)}
.auslegung li{max-width:var(--masz-text)}
.auslegung li::marker{color:var(--sand)}

/* ---------- Wortlaut ---------- */
.wortlaut{margin:0}
.wortlaut blockquote{margin:0 0 var(--s-4);color:var(--pergament);font-size:var(--text-m)}
.wortlaut blockquote p{margin:0 0 var(--s-2)}
.wortlaut-intro{max-width:var(--masz-text);font-size:var(--text-l)}
.wortlaut-gruppen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--s-4) var(--s-7);margin-top:var(--s-4)}
.wortlaut blockquote ul{margin:0;padding-left:1.1em;display:grid;gap:2px}
.wortlaut blockquote li::marker{color:var(--sand)}
.wortlaut-kopf{font-weight:700;color:var(--pergament-hell)}
.wortlaut figcaption{font-size:var(--text-s);color:var(--sand)}

/* ---------- Telefon ---------- */
@media (max-width:720px){
  .vorspann{font-size:var(--text-l)}
  .sprungleiste{margin-bottom:var(--s-5)}
  .sprungleiste ul{gap:0 var(--s-4)}
  .sprungleiste a{min-height:var(--ziel-touch)}
  /* Betrag als eigene Zeile über dem Titel: Alle Titel und Erklärungen beginnen an derselben Kante */
  .tarif{display:block}
  .tarif > div{display:flex;flex-direction:column}
  .tarif > div + div{margin-top:var(--s-5)}
  .tarif .tarif-betrag{order:-1;margin-bottom:var(--s-1);text-align:left;font-size:1.5rem;padding-top:0}
  .tarif .tarif-text{font-size:var(--text-m)}
  .regelliste{grid-template-columns:minmax(0,1fr)}
  .fall-art,.fall-wo,.fall-gebote{padding-left:0}
  .faelle-titel{margin-top:var(--s-6)}
}

/* Kleinste Breiten: die Gebotsleiter rückt enger zusammen */
@media (max-width:360px){
  .fall .gebote-tabelle th,.fall .gebote-tabelle td{padding-right:var(--s-2)}
  .fall .gebot{min-width:1.8em}
}