/* ============================================================
   mahnbescheid - Infografik im Beitrag (Block mahnbescheid/grafik)

   Gebaut von theme/inc/grafik.php aus den Daten des Bausteins
   `grafik` (doku/BLOECKE.md, „Grafik"). Dieselbe Zeichnung wie das
   PNG aus werkzeuge/erzeugen/infografik.mjs, das darunter zum
   Herunterladen steht - aber als Text: Die Suche liest ihn, am
   Telefon bricht er um, ein Screenreader liest ihn vor.

   Nur Tokens (doku/DESIGN.md). Kantig, Linien statt Schatten, die
   Eyebrow mit Strich, das Amber von --c-warn nur für Balken und
   Rahmen; die hervorgehobene Zeile trägt zusätzlich ein Wort.

   Erst untereinander (Telefon), ab 560 px Breite der Grafik selbst
   Name und Angaben links, Balken rechts - per Container-Abfrage, weil
   die Spalte des Blatts nicht an der Fensterbreite hängt. Ein Browser
   ohne Container-Abfragen bekommt die Fassung untereinander.

   Die Selektoren beginnen mit .rg-infografik und tragen eine Klasse
   mehr als die allgemeinen Regeln für .rg-text in ratgeber.css
   (Listen, Tabellen, h3) - sonst gewönnen jene.
   ============================================================ */

.rg-text .rg-infografik,
.rg-infografik{
  container-type: inline-size;
  margin: 32px 0;
  max-width: none;
}
.rg-infografik .rg-ig-blatt{
  border: 1px solid var(--rg-rule, var(--c-line));
  padding: 22px 20px 16px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.45;
}
/* Diese Regel wiegt (0,2,1) und schlägt damit jeden Abstand, den eine
   einzelne Klasse einem Absatz gibt: Notiz, Unterzeile und Fundstellenzeile
   standen bis zum 06.10.2026 ohne Abstand am Inhalt. Wer einem Absatz im
   Blatt einen Rand gibt, schreibt deshalb .rg-ig-blatt mit davor. */
.rg-infografik .rg-ig-blatt p{ margin: 0; }
/* Eine Fundstelle im Fließtext der Grafik bricht nicht um (grafik.php,
   mb_grafik_satz) - die eigene Fundstellenzeile trägt .rg-norm. */
.rg-infografik .rg-ig-fs{ white-space: nowrap; }

/* Kopf: Eyebrow mit Strich, Titel */
.rg-infografik .rg-ig-eyebrow{
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary-700);
}
.rg-infografik .rg-ig-eyebrow::before{
  content: ""; flex: none; width: 22px; height: 2px; background: var(--c-primary);
}
.rg-infografik h3.rg-ig-titel{
  margin: 6px 0 18px;
  font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.005em;
  color: var(--c-ink);
}
.rg-infografik .rg-ig-name{
  font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--c-ink);
}
.rg-infografik .rg-norm{ white-space: nowrap; font-weight: 600; color: var(--c-primary-700); }
.rg-infografik .rg-ig-blatt .rg-ig-meta{ margin-top: 3px; font-size: 14px; color: var(--c-ink-soft); }

/* Notiz und Fuß */
.rg-infografik .rg-ig-blatt .rg-ig-notiz{
  margin-top: 16px;
  font-size: 14px; color: var(--c-ink-soft);
}
/* Die Antrags-Schaltfläche (grafik.php, mb_grafik_aktion): unter Schaubild
   und Notiz, über dem Fuß. Am Telefon über die ganze Breite wie in den
   Rechnern, breiter nur so breit wie ihr Text. Im Druck nicht. */
.rg-infografik .rg-ig-blatt .rg-ig-aktion{ margin-top: 20px; }
.rg-infografik .rg-ig-aktion .rg-btn{ display: flex; justify-content: center; box-sizing: border-box; width: 100%; }
.rg-infografik .rg-ig-fuss{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--rg-rule, var(--c-line));
  font-size: 14px; color: var(--c-muted);
}
.rg-infografik .rg-ig-download{
  color: var(--c-primary-700);
  font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.rg-infografik .rg-ig-download:hover{ color: var(--c-ink); }
.rg-infografik .rg-ig-download:focus-visible{
  outline: 2px solid var(--c-primary); outline-offset: 2px;
}
.rg-infografik > figcaption.wp-element-caption{
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--c-muted);
}

/* --- fristen -------------------------------------------------
   Die Skala ist die volle Länge, hell unterlegt: So steht die Dauer
   an derselben Stelle, und der Abstand zum Balken liest sich als
   Maßstab, nicht als Lücke. */
.rg-infografik ul.rg-ig-fristen{ list-style: none; margin: 0; padding: 0; }
.rg-infografik .rg-ig-frist{
  display: grid; gap: 6px;
  margin: 0; padding: 12px 0;
  border-top: 1px solid var(--rg-rule-soft, var(--c-line-soft));
}
.rg-infografik .rg-ig-frist:first-child{ border-top: 0; padding-top: 0; }

/* Am Telefon löst sich die rechte Spalte auf: Balken und Marken stehen als
   eigene Zeilen im Raster der Frist. */
.rg-infografik .rg-ig-rechts{ display: contents; }
.rg-infografik .rg-ig-spur{ display: flex; align-items: center; gap: 10px; }
.rg-infografik .rg-ig-skala{ display: flex; flex: 0 1 60%; min-width: 0; background: var(--c-line-soft); }
.rg-infografik .rg-ig-balken{
  position: relative; display: block; flex: none;
  min-width: 5px; height: 14px;
  background: var(--c-primary);
}
.rg-infografik .rg-ig-balken.is-warn{ background: var(--c-warn); }
/* Die zweite Stufe hell an der ersten, mit Rand in der Hausfarbe */
.rg-infografik .rg-ig-balken.is-dann{
  background: var(--c-primary-100);
  outline: 1px solid var(--c-primary); outline-offset: -1px;
}
/* Gekürzt gezeichnet: ein Bruch kurz vor dem Ende, in der Farbe des Blatts */
.rg-infografik .rg-ig-balken.is-lang::after{
  content: ""; position: absolute; top: -3px; bottom: -3px; right: 14%;
  width: 6px; transform: skewX(-20deg);
  background: var(--rg-paper, var(--c-surface));
}
.rg-infografik .rg-ig-dauer{
  flex: 1 1 auto;
  font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--c-ink);
}

.rg-infografik .rg-ig-marken{ display: flex; flex-wrap: wrap; gap: 6px; }
.rg-infografik .rg-ig-marke{
  display: inline-block; padding: 1px 7px;
  border: 1px solid var(--c-line);
  font-size: 13px; font-weight: 500; color: var(--c-ink-soft);
}
.rg-infografik .rg-ig-marke.is-warn{ border-color: var(--c-warn); color: var(--c-ink); }

.rg-infografik dl.rg-ig-angaben{
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 2px 10px;
  margin: 0; font-size: 14px; color: var(--c-ink-soft);
}
.rg-infografik .rg-ig-angaben > div{ display: contents; }
.rg-infografik .rg-ig-angaben dt{
  padding-top: 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted);
}
.rg-infografik .rg-ig-angaben dd{ margin: 0; }
.rg-infografik .rg-ig-angaben strong{ color: var(--c-ink); font-weight: 600; }

@container (min-width: 560px){
  .rg-infografik .rg-ig-blatt{ padding: 26px 28px 18px; }
  .rg-infografik h3.rg-ig-titel{ font-size: 22px; }
  .rg-infografik .rg-ig-aktion .rg-btn{ display: inline-flex; width: auto; }
  /* Rechts eine Spalte aus Balken und Marken über die ganze Höhe der
     Frist: Bricht die Dauer um („zwölf Monate, dann drei Jahre"), wuchs
     sonst die Zeile des Namens mit, und zwischen Name und Angaben stand
     eine Lücke (bis 06.10.2026). */
  .rg-infografik .rg-ig-frist{
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas: "name rechts" "angaben rechts";
    grid-template-rows: auto 1fr;
    gap: 6px 24px;
  }
  .rg-infografik .rg-ig-frist .rg-ig-name{ grid-area: name; }
  .rg-infografik .rg-ig-rechts{
    grid-area: rechts; align-self: start;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    margin-top: 2px;
  }
  .rg-infografik .rg-ig-rechts .rg-ig-spur{ align-self: stretch; }
  .rg-infografik .rg-ig-frist .rg-ig-angaben{ grid-area: angaben; align-self: start; }
  .rg-infografik .rg-ig-skala{ flex: 0 0 120px; }
}

/* --- schritte ------------------------------------------------ */
.rg-infografik ol.rg-ig-schritte{ list-style: none; margin: 0; padding: 0; }
.rg-infografik .rg-ig-schritt{
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px;
  margin: 0; padding-bottom: 14px;
}
.rg-infografik .rg-ig-schritt:not(:last-child)::before{
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 0;
  width: 2px; background: var(--c-primary-100);
}
.rg-infografik .rg-ig-nr{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-primary-050);
  font-size: 15px; font-weight: 600;
}
.rg-infografik .rg-ig-schritt .rg-ig-name{ margin-top: 5px; }
.rg-infografik .rg-ig-schritt p + p{ margin-top: 2px; color: var(--c-ink-soft); }

/* --- vergleich ----------------------------------------------- */
.rg-infografik .rg-ig-spalten{ display: grid; gap: 12px; }
.rg-infografik .rg-ig-karte{
  border: 1px solid var(--c-line);
  padding: 14px 14px 8px;
}
.rg-infografik .rg-ig-blatt .rg-ig-unter{ margin-top: 2px; color: var(--c-ink-soft); }
.rg-infografik .rg-ig-karte ul{ list-style: none; margin: 10px 0 0; padding: 0; }
.rg-infografik .rg-ig-karte li{
  position: relative; margin: 0; padding: 0 0 6px 16px;
}
.rg-infografik .rg-ig-karte li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; background: var(--c-primary);
}
@container (min-width: 560px){
  .rg-infografik .rg-ig-spalten[data-anzahl="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-infografik .rg-ig-spalten[data-anzahl="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- rechnung ------------------------------------------------ */
.rg-text .rg-infografik table.rg-ig-rechnung,
.rg-infografik table.rg-ig-rechnung{
  width: 100%; border: 0; border-collapse: collapse; background: none;
  font-size: 15px;
}
.rg-text .rg-infografik .rg-ig-rechnung th,
.rg-text .rg-infografik .rg-ig-rechnung td,
.rg-infografik .rg-ig-rechnung th,
.rg-infografik .rg-ig-rechnung td{
  padding: 8px 0; background: none;
  border: 0; border-top: 1px solid var(--c-line-soft);
  text-align: left; vertical-align: top;
  font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal;
  color: var(--c-ink);
}
.rg-text .rg-infografik .rg-ig-rechnung tbody tr:first-child th,
.rg-text .rg-infografik .rg-ig-rechnung tbody tr:first-child td{ border-top: 0; }
.rg-text .rg-infografik .rg-ig-rechnung td.rg-wert,
.rg-infografik .rg-ig-rechnung td.rg-wert{
  padding-left: 16px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rg-infografik .rg-ig-rechnung .rg-ig-meta{ display: block; }
.rg-text .rg-infografik .rg-ig-rechnung tfoot th,
.rg-text .rg-infografik .rg-ig-rechnung tfoot td,
.rg-infografik .rg-ig-rechnung tfoot th,
.rg-infografik .rg-ig-rechnung tfoot td{
  border-top: 2px solid var(--c-ink);
  font-weight: 600; font-size: 16px;
}

@media print{
  .rg-infografik .rg-ig-download,
  .rg-infografik .rg-ig-aktion{ display: none; }
}