/* Fristenrechner — was allein diese Seite betrifft.
 *
 * Tafel, Bausteine und der Aufbau der einfachen Seiten stehen in
 * `gemeinsam/`; hier steht die Rechnertabelle und der Satz der gesetzlichen
 * Grundlagen. Eine Farbe wird nicht hingeschrieben, sondern aus der Tafel
 * geholt — sonst folgte sie der dunklen Fassung nicht.
 */

/* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
   Übersicht — derselbe Ton, den `icon.svg` bereits trägt. Die Kopfleiste holt
   ihn sich daraus; alles übrige bleibt bei `--primaer`. */
:root {
  --ton-app: var(--ton-violett);
}

/* ------------------------------------------------------------- Die Eingabe */

#calculator {
  border-top: 3px solid var(--primaer);
}

#calculator > header {
  display: flex;
  justify-content: center;
  padding: 0 0 1rem;
}

#calculator label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 26rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-leise);
}

/* --------------------------------------------------------- Die Rechnertafel */

/* Die eigentliche Auskunft der Seite. Sie ist bewusst kräftiger gehalten als
   der Rest: Wer hier hersieht, sucht ein Datum und sonst nichts. */
table.rechner {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
}

table.rechner thead th {
  padding: 0.6rem 0.5rem;
  background: var(--primaer);
  color: var(--auf-farbe);
  text-align: center;
  border-bottom: 0;
  white-space: normal;
}

table.rechner thead th:first-child {
  border-top-left-radius: 6px;
}

table.rechner thead th:last-child {
  border-top-right-radius: 6px;
}

/* Die Zeilenköpfe („mit“ / „ohne“ verhandlungsfreie Zeit) tragen die Frage,
   die Zellen die Antwort. */
table.rechner th[scope="row"] {
  width: 14%;
  padding-right: 0.8rem;
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-leise);
  border-right: 2px solid var(--primaer);
}

table.rechner td {
  width: 21.5%;
  padding: 0.6rem 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--linie);
}

table.rechner td:last-child {
  border-right: 0;
}

/* Gemischt statt gemalt: So trägt die Streifung in beiden Fassungen. Die
   Rechtskraftspalten (jede zweite) stehen etwas zurück — sie sind die Folge
   des Datums daneben, nicht die Auskunft selbst. */
table.rechner tbody tr:nth-child(odd) td,
table.rechner tbody tr:nth-child(odd) th {
  background: color-mix(in srgb, var(--primaer) 7%, transparent);
}

table.rechner tbody tr:nth-child(even) td,
table.rechner tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--primaer) 13%, transparent);
}

#dauer {
  display: block;
  font-weight: 600;
}

#slider {
  width: 100%;
  margin-top: 0.4rem;
  accent-color: var(--auf-farbe);
}

/* ----------------------------------------------------------- Der Hinweis */

#hinweis {
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--fehler) 45%, var(--flaeche));
  border-radius: var(--rundung);
  background: color-mix(in srgb, var(--fehler) 12%, var(--flaeche));
  color: var(--fehler);
}

/* ----------------------------------------------- Die gesetzlichen Grundlagen */

.gl-content {
  padding: 0.9rem;
}

/* Die Paragraphennummer steht in einer eigenen Spalte links vom Text — so
   findet das Auge sie, ohne den Absatz zu lesen. */
.para-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.para-item:last-child {
  margin-bottom: 0;
}

.para-item p {
  margin-bottom: 0;
}

.para-num,
.art-num,
.anl-num {
  flex-shrink: 0;
  min-width: 4rem;
  font-weight: 600;
  color: var(--primaer);
}

.para-num::before { content: "§ "; }
.para-num::after  { content: "."; }
.art-num::before  { content: "Art. "; }
.anl-num::before  { content: "Anl. "; }

/* Die Absatzzahl im Fließtext. */
span.abs {
  margin-right: 0.5ch;
  font-weight: 600;
  color: var(--primaer);
}

span.abs::before { content: "("; }
span.abs::after  { content: ")"; }

@media (max-width: 600px) {
  .para-item {
    flex-direction: column;
    gap: 0.25rem;
  }

  .para-num,
  .art-num,
  .anl-num {
    min-width: auto;
  }
}