/* =================================================================
   Signifikanzrechner – was nur dieses Werkzeug braucht. Karte, Felder
   und Knöpfe kommen aus werkzeug.css.

   Eigenes Layout statt Formular neben Ergebnisspalte: drei Felder in
   einer Reihe, darunter das Ergebnis über die ganze Kartenbreite in
   bis zu drei Spalten – Urteil, Belegstufe, Grenzen. So steht alles
   auf einen Blick im Bild, und unter 1024px folgt das Ergebnis direkt
   auf die Felder, ohne Ergebnisleiste.
   ================================================================= */

/* --- Eingabe ----------------------------------------------------- */
.sig-eingabe{padding:22px 24px 20px}   /* 22px oben, 24px seitlich, 20px unten */
.sig-felder{display:grid;gap:16px}     /* 16px zwischen den Feldern */
.sig-felder .feld{margin-bottom:0}
@media (min-width:640px){
  .sig-felder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.sig-eingabe .formular-fuss{margin-top:16px}

/* Zahlenfeld mit Einheit dahinter */
.feld-einheit{position:relative}
.feld-einheit input{padding-right:36px}
.feld-einheit .einheit{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:1rem;color:var(--ink-faint);pointer-events:none;
}

/* --- Ausgabe ----------------------------------------------------- */
/* Spalten nebeneinander ab 1024px, darunter gestapelt. Versteckte
   Spalten fallen heraus, die übrigen teilen sich die Breite. */
.sig-ausgabe{border-top:1px solid var(--line)}
.sig-spalte{padding:20px 24px 24px}
.sig-spalte + .sig-spalte{border-top:1px solid var(--line)}
@media (min-width:1024px){
  .sig-ausgabe{display:flex}
  .sig-spalte{flex:1 1 0;min-width:0}
  .sig-spalte + .sig-spalte{border-top:0;border-left:1px solid var(--line)}
}
.sig-spalte .bereich-titel{margin-bottom:10px}

/* Urteil: die eine Zeile, die man mitnimmt */
.sig-urteil{
  margin:0 0 10px;
  font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;   /* Schriftgröße 24px */
  color:var(--ink);
}
.sig-urteil.ist-sig{color:var(--accent)}

.sig-zeilen p{margin:0 0 6px;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}   /* Schriftgröße 14px */
.sig-zeilen p:first-child{font-size:1rem;color:var(--ink)}
.sig-pz{color:var(--ink-faint)}

#ergStufe p.sig-stufe-name{margin:0 0 6px;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--ink)}   /* Schriftgröße 18px */
#ergStufe p:not(.sig-stufe-name){margin:0 0 8px;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.sig-ohne-wert{margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-faint)}


/* --- Skala ---------------------------------------------------------
   Grauer Zufallsbereich zwischen den beiden Grenzen, schwarze Marke
   für den Vergleichszeitraum, Punkt für den aktuellen Zeitraum – Berry,
   wenn er außerhalb des Zufallsbereichs liegt. Gestrichelte Berry-Linien
   zeigen die Relevanzgrenzen, sofern ein Wert eingetragen ist. */
.sig-urteil.ist-sig{color:var(--accent)}
.sig-skala{padding:8px 40px 4px;border-top:1px solid var(--line)}
.skala-achse{position:relative;height:116px}
.skala-achse::before{               /* die Achse selbst */
  content:"";position:absolute;left:0;right:0;top:72px;height:1px;background:var(--line-strong);
}
.skala-band{
  position:absolute;top:58px;height:28px;border-radius:6px;
  background:var(--code-bg);border:1px dashed var(--line-strong);
}
.skala-legende{display:flex;flex-wrap:wrap;gap:4px 24px;margin:2px -16px 14px}
.skala-legende p{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.8125rem;line-height:1.4;color:var(--ink-faint);
}
.skala-legende-rel{flex:0 0 auto;width:0;height:14px;border-left:2px dashed var(--accent)}
.skala-relevanz{position:absolute;top:44px;height:42px;width:0;border-left:2px dashed var(--accent);margin-left:-1px}
.skala-rel-text{
  position:absolute;top:-4px;left:0;transform:translate(-50%,-100%);white-space:nowrap;
  font-family:var(--mono);font-size:.75rem;color:var(--accent);
}
.skala-legende-band{
  flex:0 0 auto;width:22px;height:12px;border-radius:3px;
  background:var(--code-bg);border:1px dashed var(--line-strong);
}
.skala-grenze{
  position:absolute;top:94px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.skala-marke{position:absolute;top:0;bottom:0;width:0}
.skala-marke::after{content:"";position:absolute;left:-1px;top:50px;width:2px;height:44px;background:var(--ink)}
.skala-text{
  position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;
  font-size:.8125rem;color:var(--ink-soft);
}
.skala-text b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.skala-vergleich .skala-text{top:0}
.skala-aktuell .skala-text{top:0}
.skala-aktuell::after{
  left:-9px;top:63px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink);
}
.skala-aktuell.ist-sig::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}
.skala-aktuell.ist-sig .skala-text b{color:var(--accent)}

@media (max-width:639px){
  .sig-eingabe,.sig-spalte{padding-left:16px;padding-right:16px}
  .sig-skala{padding-left:28px;padding-right:28px}
}

/* Die Unterzeile ist länger als beim UTM-Generator und steht deshalb
   auch ab 1024px unter der Überschrift statt daneben – so bleibt sie
   auf dem Desktop in einer Zeile. */
@media (min-width:1024px){
  .werkzeug-kopf{display:block}
  .werkzeug-kopf .lead{margin-top:8px}
}

/* --- Modi ---------------------------------------------------------
   Vor dem Skript schalten :has()-Regeln die Panels anhand der
   Radiofelder um; danach übernimmt data-modus aus werkzeug.css. */
.werkzeug:has(#modusZeitraum:checked) .werkzeug-panel[data-panel="ab"],
.werkzeug:has(#modusAb:checked) .werkzeug-panel[data-panel="zeitraum"]{display:none}

/* Eine Variante im A/B-Test: Besucher und Conversions untereinander */
.sig-gruppe{margin:0;padding:0;border:0;min-width:0;display:grid;gap:12px}
.sig-gruppe legend{
  padding:0;margin-bottom:10px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.sig-gruppe .feld{margin:0}

/* Hinweis, wenn die Daten für die eingetragene Relevanz nicht reichen:
   abgesetzt wie ein Kasten, mit Berry-Strich links */
#ergStufe .sig-warnung{
  margin:14px 0 0;padding:12px 14px 12px 14px;
  border-left:3px solid var(--accent);border-radius:0 var(--radius-s) var(--radius-s) 0;
  background:var(--code-bg);
}
#ergStufe .sig-warnung p{margin:0;color:var(--ink)}
#ergStufe .sig-warnung p.sig-warnung-titel{margin-bottom:4px;font-weight:600}

/* Liegen die beiden Punktbeschriftungen zu dicht, rückt die linke nach
   links und die rechte nach rechts, statt sich zu überdecken */
.skala-text.nach-links{transform:translateX(calc(-100% + 6px))}
.skala-text.nach-rechts{transform:translateX(-6px)}