/* =================================================================
   Marcel Schreyer – UTM-Generator
   Wird nur auf tools/utm-generator/ geladen, zusätzlich zu
   werkzeug.css. Dort steht der ganze Rahmen einer Werkzeugseite –
   Kopf, Karte, Bühne, Felder, Ergebnis, Merkliste, Ergebnisleiste.
   Hier steht nur, was diesen einen Generator ausmacht.
   ================================================================= */

/* --- Die drei Modi vor dem Laden des Skripts --------------------- */
/* werkzeug.css schaltet über data-modus und data-aktiv um, und beides
   setzt das Skript. In der Zeitspanne davor greifen diese Regeln, weil
   sie den Zustand der Radiofelder direkt lesen. Sie hängen an den
   Namen der drei Modi und gehören deshalb hierher und nicht in den
   Rahmen. Greift weder :has() noch das Skript, stehen alle drei
   Formulare untereinander: unschön, aber vollständig lesbar.

   Ein neuer Modus braucht drei Stellen: Radiofeld samt Beschriftung,
   ein .werkzeug-panel[data-panel="…"] und hier je eine Zeile. */
.werkzeug:has(#modusKampagne:checked) .werkzeug-panel,
.werkzeug:has(#modusSocial:checked) .werkzeug-panel,
.werkzeug:has(#modusSignatur:checked) .werkzeug-panel{display:none}
.werkzeug:has(#modusKampagne:checked) .werkzeug-panel[data-panel="kampagne"],
.werkzeug:has(#modusSocial:checked) .werkzeug-panel[data-panel="social"],
.werkzeug:has(#modusSignatur:checked) .werkzeug-panel[data-panel="signatur"]{display:block}

/* --- Parameterliste im Erklärteil -------------------------------- */
/* Begriffsliste für die technischen Parameternamen. Die dt stehen in
   Space Mono 700, damit sie als Code lesbar sind. Aufzählungen mit
   normalen Begriffen bekommen stattdessen eine ul mit role="list". */
.param-liste{margin:0 0 18px}      /* 18px Abstand zum nächsten Absatz */
.param-liste dt{
  font-family:var(--mono);font-size:.875rem;font-weight:700;   /* Schriftgröße 14px */
  margin-top:16px;                                             /* 16px Abstand zum Eintrag darüber */
}
.param-liste dt:first-child{margin-top:0}
.param-liste dd{margin:4px 0 0;color:var(--ink-soft)}          /* 4px Abstand zum Begriff */