/* ==========================================================================
   GRÖTSCH & PARTNER · Abfindungsrechner · Live-Graph · Version 1.0.0

   Grundsätze (wie abfindung.css)
   1. Jede Selektorliste beginnt mit .gp-abr. Kein globaler Reset, keine Regel
      für html, body oder :root. Nur @media-Hüllen kommen dazu.
   2. Farben aus der Avada-Palette mit Rückfallwert. Der Graph steht in einem
      dunklen Ergebnisbereich; er bringt seine eigene anthrazitfarbene Fläche
      mit, damit die Kontraste unabhängig von der Umgebung feststehen.
      Beschriftungen mindestens 4,5 : 1, Linien mindestens 3 : 1.
   3. Schrift wird vom Theme geerbt. Keine Webfont-Ladung, keine eingebundenen
      Fremddateien, keine Verweise auf fremde Server.
   4. Achsenbeschriftungen nie unter 12 px. Das SVG wird vom Modul in echten
      Pixeln der Zeichenfläche erzeugt, hier wird es nicht herunterskaliert.
   5. Übergänge stehen ausschließlich in der @media-Hülle
      (prefers-reduced-motion: no-preference).

   Gemessene Kontraste auf der Fläche #2b2b2b:
     Text   #f2f2f2  12,2 : 1      gedämpfter Text #d5d5d5   9,3 : 1
     Gold   #d9b96f   7,2 : 1      Vergleichslinie #c2c2c2   7,6 : 1
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rahmen und Farbwerte
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-figur {
  --gp-abrg-grund: var(--awb-color8, #2b2b2b);   /* Anthrazit */
  --gp-abrg-text: #f2f2f2;
  --gp-abrg-gedaempft: #d5d5d5;
  --gp-abrg-gold: var(--awb-color5, #d9b96f);    /* Gold: Linie und Fläche */
  --gp-abrg-vergleich: #c2c2c2;
  --gp-abrg-raster: rgba(255, 255, 255, 0.16);
  --gp-abrg-achse: rgba(255, 255, 255, 0.45);
  --gp-abrg-hell: var(--awb-color2, #f5f5f5);

  margin: 0;
  /* Oben und unten knapper als an den Seiten: Der Block soll flach bleiben,
     seitlich aber weiter Luft zum Rand des Rechners haben. */
  padding: 0.625rem clamp(0.9rem, 2.2vw, 1.35rem);
  background: var(--gp-abrg-grund);
  color: var(--gp-abrg-text);
  border-radius: 12px;
  min-width: 0;
}

.gp-abr .gp-abr-graph-kopf {
  display: block;
  margin: 0 0 0.5em;
}

/* Über dem Bild steht nur noch der Modellsatz. Die Überschrift des Blocks
   steht einmal darüber, der Titel zusätzlich als <title> im SVG; eine dritte
   Fassung an dieser Stelle kostete nur Höhe. */
.gp-abr .gp-abr-graph-untertitel {
  display: block;
  margin-top: 0;
  font-size: 0.833em;
  line-height: 1.5;
  color: var(--gp-abrg-gedaempft);
}

/* Hypothetische Vorschau bei ausgeschaltetem IAB-Szenario: als Hinweis
   gekennzeichnet, nicht nur blass gezeichnet. */
.gp-abr .gp-abr-graph-vorschau {
  margin: 0 0 0.5em;
  padding: 0.6em 0.9em;
  font-size: 0.833em;
  line-height: 1.5;
  color: var(--gp-abrg-text);
  background: rgba(217, 185, 111, 0.16);
  border-left: 4px solid var(--gp-abrg-gold);
  border-radius: 0 8px 8px 0;
}

/* --------------------------------------------------------------------------
   Zeichenfläche
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-flaeche {
  min-width: 0;
  max-width: 100%;
}

.gp-abr .gp-abr-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.gp-abr .gp-abr-graph-svg:focus-visible {
  outline: 3px solid var(--gp-abrg-gold);
  outline-offset: 2px;
}

/* Achsen, Raster, Beschriftungen */
.gp-abr .gp-abr-graph-raster {
  stroke: var(--gp-abrg-raster);
  stroke-width: 1;
}

.gp-abr .gp-abr-graph-nulllinie,
.gp-abr .gp-abr-graph-teilstrich {
  stroke: var(--gp-abrg-achse);
  stroke-width: 1;
}

.gp-abr .gp-abr-graph-tick {
  font-family: inherit;
  font-size: 13px;
  fill: var(--gp-abrg-gedaempft);
  font-variant-numeric: tabular-nums;
}

.gp-abr .gp-abr-graph-achsentitel {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  fill: var(--gp-abrg-text);
}

/* Vergleichslinie: grau und gestrichelt, dadurch auch ohne Farbe von der
   goldenen Linie zu unterscheiden. */
.gp-abr .gp-abr-graph-vergleich {
  stroke: var(--gp-abrg-vergleich);
  stroke-width: 2;
  fill: none;
}

/* Die Linie der Jahressteuer: durchgezogen und kräftig. */
.gp-abr .gp-abr-graph-kurve {
  stroke: var(--gp-abrg-gold);
  stroke-width: 3;
  fill: none;
}

/* Vorschau: gedämpft und zusätzlich gestrichelt. Die Deckkraft bleibt bei
   0,7; darunter fiele der Kontrast der Linie unter die geforderten 3 : 1. */
.gp-abr .gp-abr-graph-kurve--vorschau {
  stroke-width: 2.5;
  opacity: 0.7;
}

/* Marker am gewählten Punkt */
.gp-abr .gp-abr-graph-lot {
  stroke: var(--gp-abrg-gold);
  stroke-width: 1.5;
  opacity: 0.8;
}

.gp-abr .gp-abr-graph-punkt {
  fill: #ffffff;
  stroke: var(--gp-abrg-gold);
  stroke-width: 3;
}

.gp-abr .gp-abr-graph-fahne {
  fill: rgba(20, 20, 20, 0.92);
  stroke: var(--gp-abrg-gold);
  stroke-width: 1;
}

.gp-abr .gp-abr-graph-fahne-wert {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  fill: #ffffff;
  font-variant-numeric: tabular-nums;
}

.gp-abr .gp-abr-graph-fahne-iab {
  font-family: inherit;
  font-size: 12px;
  fill: var(--gp-abrg-gedaempft);
  font-variant-numeric: tabular-nums;
}

.gp-abr .gp-abr-graph-marker:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Legende: Symbol, Beschriftung und Wert. Die Symbole wiederholen Strichart
   und Form, damit die Einträge auch ohne Farbe unterscheidbar bleiben.
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.5em;
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
}

.gp-abr .gp-abr-graph-legende-eintrag {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  font-size: 0.833em;
  line-height: 1.5;
  color: var(--gp-abrg-gedaempft);
}

.gp-abr .gp-abr-graph-symbol {
  flex: none;
  width: 26px;
  height: 14px;
}

.gp-abr .gp-abr-graph-symbol-kurve {
  stroke: var(--gp-abrg-gold);
  stroke-width: 3;
}

.gp-abr .gp-abr-graph-symbol-kurve--vorschau {
  stroke-width: 2.5;
  opacity: 0.7;
}

.gp-abr .gp-abr-graph-symbol-vergleich {
  stroke: var(--gp-abrg-vergleich);
  stroke-width: 2;
}

.gp-abr .gp-abr-graph-symbol-marker {
  fill: #ffffff;
  stroke: var(--gp-abrg-gold);
  stroke-width: 2;
}

.gp-abr .gp-abr-graph-legende-wert {
  font-weight: 600;
  color: var(--gp-abrg-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Fußzeile: links der gewählte Wert, rechts der Knopf der Datentabelle.
   Beides stand früher untereinander; nebeneinander spart eine ganze Zeile,
   ohne dass der Knopf seine Zielgröße von 44 px verliert. Wird der Bereich
   zu schmal, rutscht der Knopf von selbst in die nächste Zeile.
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 1.2em;
  margin: 0.5em 0 0;
  padding-top: 0.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   Der aktuelle Wert als gewöhnlicher Text (auch ohne Grafik erreichbar)
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-wert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.6em;
  flex: 1 1 20em;
  min-width: 0;
  min-height: 44px;   /* gleiche Zeilenhöhe wie der Knopf daneben */
  margin: 0;
  padding: 0;
  border: 0;
}

.gp-abr .gp-abr-graph-wert-name {
  font-size: 0.833em;
  color: var(--gp-abrg-gedaempft);
}

/* Jede Zahl trägt ihre eigene Beschriftung, damit die Jahressteuer nicht
   wie die Höhe des IAB gelesen werden kann. */
.gp-abr .gp-abr-graph-wert-teil {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.gp-abr .gp-abr-graph-wert-marke {
  font-size: 0.833em;
  color: var(--gp-abrg-gedaempft);
}

.gp-abr .gp-abr-graph-wert-zahl {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--gp-abrg-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gp-abr .gp-abr-graph-wert-iab {
  font-size: 0.833em;
  color: var(--gp-abrg-gedaempft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Kompakte Datentabelle, aufklappbar und mit der Tastatur erreichbar
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph-daten {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0 0 0 auto;   /* rechts in der Fußzeile */
}

/* Aufgeklappt braucht die Werteliste Platz für beide Spalten. Ohne diese
   Breite bliebe sie so schmal wie ihr Knopf und bekäme einen eigenen
   waagerechten Schieber. Ist der Bereich schmaler, greift max-width. */
.gp-abr .gp-abr-graph-daten[open] {
  flex: 0 1 22em;
}

.gp-abr .gp-abr-graph-daten-knopf {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.25em 0;
  font-size: 0.889em;
  font-weight: 600;
  color: var(--gp-abrg-text);
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}

.gp-abr .gp-abr-graph-daten-knopf::-webkit-details-marker {
  display: none;
}

.gp-abr .gp-abr-graph-daten-knopf::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin: 0 0.15em 0 0.1em;
}

.gp-abr .gp-abr-graph-daten[open] > .gp-abr-graph-daten-knopf::before {
  transform: rotate(45deg);
}

.gp-abr .gp-abr-graph-daten-knopf:focus-visible {
  outline: 3px solid var(--gp-abrg-gold);
  outline-offset: 2px;
}

.gp-abr .gp-abr-graph-tabellenrahmen {
  max-width: 100%;
  max-height: 22em;
  overflow: auto;
  margin: 0.5em 0 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

.gp-abr .gp-abr-graph-tabelle {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.833em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  background: transparent;
}

.gp-abr .gp-abr-graph-tabelle th,
.gp-abr .gp-abr-graph-tabelle td {
  padding: 0.45em 0.8em;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-align: right;
  white-space: nowrap;
  color: var(--gp-abrg-text);
  background: transparent;
}

.gp-abr .gp-abr-graph-tabelle thead th {
  position: sticky;
  top: 0;
  font-weight: 700;
  background: var(--gp-abrg-grund);
  border-bottom: 2px solid var(--gp-abrg-gold);
}

.gp-abr .gp-abr-graph-tabelle th[scope="row"] {
  text-align: left;
  font-weight: 400;
}

.gp-abr .gp-abr-graph-tabelle tbody tr:last-child th,
.gp-abr .gp-abr-graph-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

/* Die Zeile des gewählten Punktes ist auch ohne Farbe erkennbar (fett). */
.gp-abr .gp-abr-graph-zeile--aktuell th,
.gp-abr .gp-abr-graph-zeile--aktuell td {
  font-weight: 700;
  background: rgba(217, 185, 111, 0.18);
}

/* Nur für Screenreader */
.gp-abr .gp-abr-graph-nurvorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Bewegung nur auf ausdrücklichen Wunsch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Bewegt wird nur das Dreieck beim Auf- und Zuklappen. Die Schriftfarbe
     bekommt bewusst keinen Übergang: Sie ändert sich ohnehin nie, und beim
     Wechsel in die Druckansicht würde ein Übergang die Umstellung auf die
     dunkle Druckfarbe verzögern. */
  .gp-abr .gp-abr-graph-daten-knopf::before {
    transition: transform 0.15s ease;
  }
}

/* --------------------------------------------------------------------------
   Druck: heller Grund, dunkle Linien. Gold ist auf Weiß zu hell, deshalb
   übernimmt der dunklere Goldton (#8a6d2f, 4,87 : 1 auf Weiß) die Linie.
   -------------------------------------------------------------------------- */
@media print {
  .gp-abr .gp-abr-graph-figur {
    background: #ffffff;
    color: #2b2b2b;
    border: 1px solid #9a9a9a;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .gp-abr .gp-abr-graph-achsentitel,
  .gp-abr .gp-abr-graph-fahne-wert,
  .gp-abr .gp-abr-graph-legende-wert,
  .gp-abr .gp-abr-graph-daten-knopf {
    fill: #2b2b2b;
    color: #2b2b2b;
  }

  .gp-abr .gp-abr-graph-untertitel,
  .gp-abr .gp-abr-graph-legende-eintrag,
  .gp-abr .gp-abr-graph-wert-name,
  .gp-abr .gp-abr-graph-wert-marke,
  .gp-abr .gp-abr-graph-wert-iab {
    color: #4a4a4a;
  }

  .gp-abr .gp-abr-graph-vorschau {
    background: #f5f0e2;
    color: #2b2b2b;
    border-left-color: #8a6d2f;
  }

  .gp-abr .gp-abr-graph-tick,
  .gp-abr .gp-abr-graph-fahne-iab {
    fill: #4a4a4a;
  }

  .gp-abr .gp-abr-graph-raster {
    stroke: #d0d0d0;
  }

  .gp-abr .gp-abr-graph-nulllinie,
  .gp-abr .gp-abr-graph-teilstrich {
    stroke: #6a6a6a;
  }

  .gp-abr .gp-abr-graph-kurve,
  .gp-abr .gp-abr-graph-symbol-kurve {
    stroke: #8a6d2f;
  }

  .gp-abr .gp-abr-graph-vergleich,
  .gp-abr .gp-abr-graph-symbol-vergleich {
    stroke: #5f5f5f;
  }

  .gp-abr .gp-abr-graph-lot {
    stroke: #8a6d2f;
  }

  .gp-abr .gp-abr-graph-punkt,
  .gp-abr .gp-abr-graph-symbol-marker {
    fill: #ffffff;
    stroke: #2b2b2b;
  }

  .gp-abr .gp-abr-graph-fahne {
    fill: #ffffff;
    stroke: #2b2b2b;
  }

  /* Auf Papier stehen gewählter Wert und Werteliste wieder untereinander:
     Die Liste bekommt so die volle Breite des Blattes. */
  .gp-abr .gp-abr-graph-fuss {
    display: block;
    border-top-color: #b6b6b6;
  }

  .gp-abr .gp-abr-graph-daten {
    margin: 0.5em 0 0;
  }

  .gp-abr .gp-abr-graph-wert-zahl {
    color: #2b2b2b;
  }

  /* Die Werte des Verlaufs sollen auf Papier nicht hinter einem zugeklappten
     Bereich verschwinden. Browser, die das nicht umsetzen, drucken weiterhin
     den Graphen mit Legende und dem ausgewählten Wert. */
  .gp-abr .gp-abr-graph-daten > .gp-abr-graph-tabellenrahmen {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .gp-abr .gp-abr-graph-tabelle th,
  .gp-abr .gp-abr-graph-tabelle td {
    color: #2b2b2b;
    border-bottom-color: #d0d0d0;
  }

  .gp-abr .gp-abr-graph-tabelle thead th {
    background: #ffffff;
    border-bottom-color: #8a6d2f;
  }

  .gp-abr .gp-abr-graph-zeile--aktuell th,
  .gp-abr .gp-abr-graph-zeile--aktuell td {
    background: #f5f0e2;
  }
}