/* ==========================================================================
   GRÖTSCH & PARTNER · Abfindungsrechner · Version 1.1.0

   Grundsätze
   1. Jede Selektorliste beginnt mit .gp-abr. Kein globaler Reset, keine Regel
      für html, body oder Theme-Klassen. Andere Seiten bleiben unberührt.
      @media- und @supports-Hüllen sind erlaubt; ihre Selektoren werden von
      node pruefung/check.mjs rechner-code normal geprüft.
   2. Farben aus der Avada-Palette (--awb-color…) mit Rückfallwert.
      Gold ist Flächen- und Linienfarbe; als Textfarbe nur auf Anthrazit
      (7,5 : 1) oder in der abgedunkelten Fassung --gp-abr-gold-text auf Hell.
   3. Schrift wird vom Theme geerbt, keine Webfont-Ladung.
   4. Bedienelemente mindestens 44 px hoch, Fokus mit 3 px Rahmen, keine
      Schrift unter 12 px.
   5. Kompakt: Eingaben links, Ergebnis rechts, Diagramm darunter über die
      volle Breite. Dauerhafte Erklärtexte stehen in aufklappbaren Bereichen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variablen und Grundwerte
   -------------------------------------------------------------------------- */
.gp-abr {
  --gp-abr-text: var(--awb-color8, #2b2b2b);          /* Anthrazit, 14,2 : 1 auf Weiß */
  --gp-abr-grund: var(--awb-color1, #ffffff);
  --gp-abr-flaeche: var(--awb-color2, #f5f5f5);
  --gp-abr-gold: var(--awb-color5, #d9b96f);          /* Fläche, Linie, Markierung */
  --gp-abr-gold-hell: #f7f0de;                        /* goldene Tönung für Hinweiskästen */
  --gp-abr-gold-text: #8a6d2f;                        /* Gold als Text, 4,87 : 1 auf Weiß */
  --gp-abr-grau-text: #5f5f5f;                        /* Hilfstext, 6,39 : 1 auf Weiß */
  --gp-abr-linie: #e6e2d8;                            /* warme Haarlinie */
  --gp-abr-rand: #767676;                             /* Feldrand, 4,54 : 1 auf Weiß */
  --gp-abr-fehler: #8a2b2b;                           /* Fehlertext, 7,4 : 1 auf Weiß */
  --gp-abr-dunkel-text: #e3e3e3;                      /* Text auf Anthrazit, 11 : 1 */
  --gp-abr-radius: var(--form_border_radius, 10px);
  --gp-abr-feldhoehe: 44px;                           /* zugleich die Zielgröße, nie darunter */
  --gp-abr-fokus: var(--awb-color8, #2b2b2b);
  --gp-abr-abstand: clamp(0.7rem, 1.6vw, 1rem);

  font-family: var(--awb-typography4-font-family, "Open Sans", Arial, Helvetica, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gp-abr-text);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: left;
  scroll-margin-top: 140px;                           /* fixierter Header 116 px */
}

.gp-abr *,
.gp-abr *::before,
.gp-abr *::after {
  box-sizing: border-box;
}

/* Sprungziele und Fokusziele nicht unter dem fixierten Header verstecken. */
.gp-abr [id] {
  scroll-margin-top: 140px;
}

/* Das hidden-Attribut gewinnt immer, auch gegen display-Regeln unten. */
.gp-abr [hidden] {
  display: none !important;
}

/* Nur für Screenreader sichtbar. */
.gp-abr .gp-abr-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;
}

.gp-abr p {
  margin: 0 0 0.6em;
}

.gp-abr p:last-child {
  margin-bottom: 0;
}

.gp-abr strong {
  font-weight: 700;
}

/* Sichtbarer Fokus für alle Bedienelemente: 3 px Anthrazit mit Abstand. */
.gp-abr a:focus-visible,
.gp-abr button:focus-visible,
.gp-abr input:focus-visible,
.gp-abr select:focus-visible,
.gp-abr summary:focus-visible,
.gp-abr [tabindex]:focus-visible {
  outline: 3px solid var(--gp-abr-fokus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Überschriften
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-titel {
  font-family: inherit;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--gp-abr-text);
  margin: 0 0 0.25em;
  padding: 0;
  text-transform: none;
}

.gp-abr .gp-abr-titel:focus {
  outline: none;
}

.gp-abr .gp-abr-untertitel {
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gp-abr-text);
  margin: 0 0 0.5em;
  padding: 0;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Aufbau: links Eingaben, rechts Ergebnis, darunter das Diagramm.
   Unter 900 px wird sinnvoll gestapelt (Eingaben zuerst).
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-oben {
  display: grid;
  grid-template-columns: minmax(0, 22em) minmax(0, 1fr);
  gap: 0.9em;
  align-items: start;
}

@media (max-width: 900px) {
  .gp-abr .gp-abr-oben {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gp-abr .gp-abr-formular {
  min-width: 0;
  background: var(--gp-abr-flaeche);
  border: 1px solid var(--gp-abr-linie);
  border-radius: 12px;
  padding: var(--gp-abr-abstand);
}

.gp-abr .gp-abr-unten {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.gp-abr .gp-abr-tabellenbereich,
.gp-abr .gp-abr-hinweise {
  min-width: 0;
  background: var(--gp-abr-grund);
  border: 1px solid var(--gp-abr-linie);
  border-radius: 12px;
  padding: var(--gp-abr-abstand);
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
/* Kopfzeile des Formulars. Die Überschrift „Ihre Angaben“ steht nur für
   Screenreader (.gp-abr-nurvorleser): Der Rechner sitzt sichtbar unter der
   Seitenüberschrift, und die rechte Spalte trägt „Ihr Ergebnis“. Sichtbar
   bleibt der Datenschutzsatz, jetzt in einer Zeile. */
.gp-abr .gp-abr-formularkopf {
  margin-bottom: 0.4em;
}

.gp-abr .gp-abr-einleitung {
  font-size: 0.813em;
  line-height: 1.4;
  color: var(--gp-abr-grau-text);                     /* 5,9 : 1 auf der hellen Fläche */
  margin: 0;
}

.gp-abr .gp-abr-beispiel {
  background: var(--gp-abr-gold-hell);
  border-left: 4px solid var(--gp-abr-gold);
  border-radius: 0 8px 8px 0;
  padding: 0.3em 0.7em;
  margin: 0 0 0.6em;
  font-size: 0.875em;
  /* Text und Knopf nebeneinander: Der Knopf braucht 44 px Zielhöhe, die dann
     nicht zusätzlich zum Text anfallen. Der sichtbare Text ist auf die kurze
     Marke „Beispielrechnung.“ verkürzt, damit beides in eine Zeile passt;
     die Aufzählung der Beträge steht in „Hilfe zu den Eingaben“. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75em;
}

.gp-abr .gp-abr-beispiel p {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.gp-abr .gp-abr-beispiel .gp-abr-textknopf {
  flex: none;
}

.gp-abr .gp-abr-textknopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0.25em 0;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--gp-abr-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.gp-abr .gp-abr-textknopf:hover {
  text-decoration-thickness: 2px;
}

.gp-abr .gp-abr-feld,
.gp-abr .gp-abr-gruppe {
  margin: 0 0 0.5em;
  min-width: 0;
}

.gp-abr .gp-abr-gruppe {
  border: 0;
  padding: 0;
}

/* Ein Betragsfeld: Beschriftung in einer eigenen Zeile, darunter Schieberegler
   und Zahlenfeld nebeneinander. Beide sind 44 px hoch; nebeneinander kosten
   sie eine Zeile statt zweier, und der Wert steht neben seinem Regler. */
.gp-abr .gp-abr-feldzeile {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
}

.gp-abr .gp-abr-label {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gp-abr-text);
  margin: 0 0 0.2em;
  padding: 0;
}

.gp-abr .gp-abr-hilfe {
  font-size: 0.813em;
  line-height: 1.4;
  color: var(--gp-abr-grau-text);
  margin: 0.15em 0 0;
}

.gp-abr .gp-abr-hinweistext {
  font-size: 0.813em;
  color: var(--gp-abr-text);
  background: var(--gp-abr-gold-hell);
  border-radius: 8px;
  padding: 0.45em 0.7em;
  margin: 0.5em 0 0;
}

/* Kennzeichnung „Beispielwert“ und „Beispielrechnung“ */
.gp-abr .gp-abr-marke {
  display: inline-block;
  vertical-align: 0.1em;
  margin-left: 0.35em;
  padding: 0.05em 0.5em;
  /* Feste Größe statt em: In der Beschriftung (0.938em) ergäbe ein relativer
     Wert unter 12 px, und keine Schrift im Rechner geht unter 12 px. */
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--gp-abr-text);
  background: var(--gp-abr-gold-hell);
  border: 1px solid var(--gp-abr-gold);
  border-radius: 999px;
  white-space: nowrap;
}

/* Textfeld für Beträge: schmal, weil der Regler die grobe Einstellung macht. */
.gp-abr .gp-abr-eingabe {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 7.5em;
  max-width: 100%;
}

.gp-abr .gp-abr-eingabe input.gp-abr-zahl {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--gp-abr-feldhoehe);
  min-height: 44px;
  margin: 0;
  padding: 0 1.9em 0 0.6em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gp-abr-text);
  background: var(--gp-abr-grund);
  border: 1px solid var(--gp-abr-rand);
  border-radius: var(--gp-abr-radius);
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: none;
}

.gp-abr .gp-abr-eingabe input.gp-abr-zahl:focus {
  border-color: var(--gp-abr-text);
}

.gp-abr .gp-abr-eingabe input.gp-abr-zahl[aria-invalid="true"] {
  border: 2px solid var(--gp-abr-fehler);
}

.gp-abr .gp-abr-einheit {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gp-abr-grau-text);
  font-weight: 600;
  pointer-events: none;
}

/* Schieberegler: volle Breite, 44 px Zielgröße, Gold als Bedienfarbe. */
.gp-abr .gp-abr-regler {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: var(--gp-abr-gold-text);
  cursor: pointer;
}

.gp-abr .gp-abr-feldzeile .gp-abr-regler {
  flex: 1 1 7em;
  width: auto;
  min-width: 0;
}

.gp-abr .gp-abr-regler:focus-visible {
  outline: 3px solid var(--gp-abr-fokus);
  outline-offset: 2px;
}

/* Sichtbare Kennzeichnung, wenn eine Direkteingabe den Bereich erweitert hat. */
.gp-abr .gp-abr-bereichshinweis {
  margin: 0.3em 0 0;
  padding: 0.35em 0.6em;
  font-size: 0.813em;
  line-height: 1.45;
  color: var(--gp-abr-text);
  background: var(--gp-abr-gold-hell);
  border-left: 3px solid var(--gp-abr-gold);
  border-radius: 0 6px 6px 0;
}

/* Auswahllisten */
.gp-abr .gp-abr-auswahl {
  position: relative;
  max-width: 100%;
}

.gp-abr .gp-abr-auswahl select {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--gp-abr-feldhoehe);
  min-height: 44px;
  margin: 0;
  padding: 0 2.5em 0 0.75em;
  font-family: inherit;
  font-size: 1em;
  line-height: 1.4;
  color: var(--gp-abr-text);
  background-color: var(--gp-abr-grund);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2b2b' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.75em;
  border: 1px solid var(--gp-abr-rand);
  border-radius: var(--gp-abr-radius);
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.gp-abr .gp-abr-auswahl select[aria-invalid="true"] {
  border: 2px solid var(--gp-abr-fehler);
}

/* Auswahlknöpfe (Veranlagung) als ganze, anklickbare Karten */
.gp-abr .gp-abr-wahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.gp-abr .gp-abr-wahl {
  position: relative;
  flex: 1 1 12em;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5em;
  align-items: start;
  padding: 0.6em clamp(0.55em, 2.2vw, 0.9em);
  background: var(--gp-abr-grund);
  border: 1px solid var(--gp-abr-rand);
  border-radius: var(--gp-abr-radius);
}

.gp-abr .gp-abr-wahl:has(input:checked) {
  border-color: var(--gp-abr-text);
  box-shadow: inset 0 0 0 1px var(--gp-abr-text);
}

.gp-abr .gp-abr-wahl:has(input:focus-visible) {
  outline: 3px solid var(--gp-abr-fokus);
  outline-offset: 2px;
}

.gp-abr .gp-abr-wahl input[type="radio"] {
  position: relative;
  z-index: 1;                                         /* über der Klickfläche der Karte */
  grid-row: 1 / span 2;
  width: 1.25em;
  height: 1.25em;
  margin: 0.15em 0 0;
  accent-color: var(--gp-abr-text);
  cursor: pointer;
}

.gp-abr .gp-abr-wahl label {
  font-weight: 600;
  font-size: 0.938em;
  line-height: 1.35;
  hyphens: auto;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* Die ganze Karte ist Klickfläche des Knopfes. */
.gp-abr .gp-abr-wahl label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--gp-abr-radius);
}

.gp-abr .gp-abr-wahl-hilfe {
  grid-column: 2;
  font-size: 0.813em;
  line-height: 1.4;
  color: var(--gp-abr-grau-text);
  margin: 0.15em 0 0;
}

/* Kontrollkästchen mit Beschriftung */
.gp-abr .gp-abr-schalter {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0;
}

.gp-abr .gp-abr-schalter input[type="checkbox"] {
  flex: none;
  width: 1.375em;
  height: 1.375em;
  margin: 0;
  accent-color: var(--gp-abr-gold-text);
  cursor: pointer;
}

/* Die Beschriftung ist die Klickfläche des Kästchens und deshalb mindestens
   44 px hoch, auch wenn der Text nur eine Zeile braucht. Sie wächst dazu auf
   die Höhe ihrer Zeile im Schalter, ohne die Zeile selbst höher zu machen. */
.gp-abr .gp-abr-schalter label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.938em;
  line-height: 1.4;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* IAB-Szenario deutlich als Zusatz abgesetzt. Die Legende ist seit 1.1.0 nur
   noch der Gruppenname für Screenreader (.gp-abr-nurvorleser), weil die
   Beschriftung des Schalters dasselbe sagt; sie braucht deshalb keine Regel
   mehr, die sie im Textfluss hält. */
.gp-abr .gp-abr-zusatz {
  border-top: 1px dashed var(--gp-abr-rand);
  padding-top: 0.5em;
}

.gp-abr .gp-abr-iab-bereich {
  margin-top: 0.4em;
  padding: 0 0 0 0.75em;
  border-left: 3px solid var(--gp-abr-gold);
}

.gp-abr .gp-abr-iab-bereich .gp-abr-feld {
  margin: 0;
}

/* Weitere Einstellungen: zugeklappt mit sichtbarer Zusammenfassung. */
.gp-abr .gp-abr-einstellungen {
  margin: 0;
  border-top: 1px dashed var(--gp-abr-rand);
  padding-top: 0.3em;
}

.gp-abr .gp-abr-einstellungen > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.6em;
  min-height: 44px;
  padding: 0.25em 0;
  font-size: 0.938em;
  font-weight: 600;
  color: var(--gp-abr-text);
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}

.gp-abr .gp-abr-einstellungen > summary::-webkit-details-marker {
  display: none;
}

.gp-abr .gp-abr-einstellungen > summary::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-einstellungen[open] > summary::before {
  transform: rotate(45deg);
}

.gp-abr .gp-abr-einstellungen-kurz {
  font-weight: 400;
  font-size: 0.875em;
  color: var(--gp-abr-grau-text);
}

.gp-abr .gp-abr-einstellungen-inhalt {
  padding-top: 0.6em;
}

.gp-abr .gp-abr-einstellungen-inhalt .gp-abr-feld:last-child,
.gp-abr .gp-abr-einstellungen-inhalt .gp-abr-gruppe:last-child {
  margin-bottom: 0;
}

/* Fehlermeldungen am Feld: Text, Symbol und Rahmen, nicht nur Farbe */
.gp-abr .gp-abr-fehlertext {
  position: relative;
  margin: 0.3em 0 0;
  padding-left: 1.6em;
  font-size: 0.813em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gp-abr-fehler);
}

.gp-abr .gp-abr-fehlertext::before {
  content: "!";
  content: "!" / "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--gp-abr-fehler);
  color: #ffffff;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
}

/* Aufklappbare Zusatzhilfe */
.gp-abr .gp-abr-mehr {
  margin: 0.15em 0 0;
}

.gp-abr .gp-abr-mehr summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.25em 0;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--gp-abr-text);
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}

.gp-abr .gp-abr-mehr summary::-webkit-details-marker {
  display: none;
}

.gp-abr .gp-abr-mehr summary::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-mehr[open] > summary::before {
  transform: rotate(45deg);
}

.gp-abr .gp-abr-mehr summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gp-abr .gp-abr-mehr-inhalt {
  font-size: 0.875em;
  color: var(--gp-abr-text);
  padding: 0.25em 0 0.25em 0.9em;
  border-left: 2px solid var(--gp-abr-gold);
  margin: 0.25em 0 0 0.25em;
}

/* Knöpfe: Anthrazit auf Gold (7,5 : 1), Maße wie die Theme-Knöpfe. */
.gp-abr .gp-abr-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 3em;
  margin: 0;
  padding: 15px clamp(20px, 5vw, 36px);
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  color: var(--gp-abr-text);
  background: var(--gp-abr-gold);
  border: 2px solid transparent;
  border-radius: var(--gp-abr-radius);
  box-shadow: none;
  cursor: pointer;
}

.gp-abr .gp-abr-knopf:hover {
  background: #e4c889;
  border-color: transparent;
  color: var(--gp-abr-text);
}

.gp-abr .gp-abr-knopf[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Ergebnis: dunkler Bereich in Anthrazit mit Gold.

   Im dunklen Bereich werden die Farbvariablen neu belegt. So erhält jeder
   Hilfstext darin automatisch genügend Kontrast (mindestens 4,5 : 1), ohne
   dass jede einzelne Regel überschrieben werden muss.
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-ergebnis {
  --gp-abr-text: #ffffff;
  --gp-abr-grau-text: #d5d5d5;                        /* 9,8 : 1 auf #2b2b2b */
  --gp-abr-linie: rgba(255, 255, 255, 0.18);
  --gp-abr-fokus: var(--awb-color5, #d9b96f);
  --gp-abr-gold-text: var(--awb-color5, #d9b96f);     /* 7,5 : 1 auf #2b2b2b */

  min-width: 0;
  background: var(--awb-color8, #2b2b2b);
  color: #ffffff;
  border-radius: 12px;
  padding: var(--gp-abr-abstand);
}

.gp-abr .gp-abr-ergebnis-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.6em;
  margin-bottom: 0.35em;
}

.gp-abr .gp-abr-ergebnis-kopf .gp-abr-titel {
  margin-bottom: 0.2em;
  color: #ffffff;
}

.gp-abr .gp-abr-ergebnis .gp-abr-untertitel {
  color: #ffffff;
}

.gp-abr .gp-abr-marke--ergebnis {
  margin-left: 0;
  color: var(--awb-color8, #2b2b2b);
}

.gp-abr .gp-abr-status {
  color: var(--gp-abr-grau-text);
  padding: 0.75em 0;
}

.gp-abr .gp-abr-status--fehler {
  color: #ffd2d2;
  font-weight: 600;
}

/* Steht seit 1.1.0 in der Kopfzeile des Ergebnisses statt als eigener Block
   darunter: dieselbe Aussage, eine Zeile weniger. */
.gp-abr .gp-abr-beispielhinweis {
  flex: 1 1 12em;
  min-width: 0;
  border-left: 3px solid var(--awb-color5, #d9b96f);
  padding: 0 0 0 0.6em;
  font-size: 0.813em;
  line-height: 1.4;
  color: var(--gp-abr-grau-text);                     /* 9,8 : 1 auf Anthrazit */
  margin: 0;
}

.gp-abr .gp-abr-klein {
  font-size: 0.813em;
  line-height: 1.45;
  color: var(--gp-abr-grau-text);
}

/* Hauptzahl: Steuerentlastung im Abfindungsjahr */
.gp-abr .gp-abr-kern {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--gp-abr-linie);
}

.gp-abr .gp-abr-kern-label {
  font-weight: 600;
  font-size: 0.938em;
  letter-spacing: 0.01em;
  margin: 0;
  color: #ffffff;
}

.gp-abr .gp-abr-kern-zahl {
  font-size: clamp(1.9em, 1.2em + 2.2vw, 2.5em);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0.05em 0 0.1em;
  color: var(--awb-color5, #d9b96f);
}

.gp-abr .gp-abr-kern-zusatz {
  color: var(--gp-abr-grau-text);
  font-size: 0.813em;
  line-height: 1.4;
  margin-bottom: 0.4em;
}

/* Aufteilung der Entlastung */
.gp-abr .gp-abr-aufteilung {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
  margin: 0;
  padding: 0;
}

.gp-abr .gp-abr-aufteilung li {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
  font-size: 0.875em;
}

.gp-abr .gp-abr-aufteilung-label {
  color: var(--gp-abr-grau-text);
}

.gp-abr .gp-abr-aufteilung-wert {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #ffffff;
}

/* Drei Vergleichskarten mit der Jahressteuer */
.gp-abr .gp-abr-vergleich {
  margin-bottom: 0.5em;
}

/* Die Karten richten sich nach dem Platz, den sie wirklich haben, nicht nach
   der Fensterbreite. Auf der Seite ist die Rechnerspalte nur 671 px breit und
   der Kartenbereich darin nur rund 273 px: Drei feste Spalten ergaben dort
   61 px je Zahlenfeld, und der Betrag brach mitten in der Zahl um, „169.358 €“
   also als „169.35“ über „8 €“. Mit auto-fit bekommt jede Karte mindestens
   150 px; reicht der Platz für drei nebeneinander nicht, rücken sie von selbst
   untereinander. min(150px, 100%) hält sie auch in sehr schmalen Behältern
   innerhalb der Breite, damit nichts waagerecht überläuft. */
.gp-abr .gp-abr-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.5em;
  margin-bottom: 0.5em;
}

/* Auf dem Telefon bleibt es bei einer Karte je Zeile, auch wenn rechnerisch
   zwei nebeneinander passen würden: So bleibt der Betrag groß und ruhig. */
@media (max-width: 560px) {
  .gp-abr .gp-abr-karten {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gp-abr .gp-abr-karte {
  min-width: 0;
  padding: 0.6em 0.7em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gp-abr-linie);
  border-radius: 10px;
}

.gp-abr .gp-abr-karte--jahressteuer_fuenftel_iab {
  border-color: var(--awb-color5, #d9b96f);
  background: rgba(217, 185, 111, 0.12);
}

/* Liefert der Rechenkern kein IAB-Szenario (fuenftel_iab === null), ist die
   dritte Karte sichtbar als nicht aktiv gekennzeichnet: keine goldene
   Hervorhebung, dazu ein erklärender Satz. Sie zeigt dann den Wert der
   Fünftelregelung; ihr maschinenlesbarer data-wert bleibt leer. */
.gp-abr .gp-abr-karte--inaktiv {
  border-color: var(--gp-abr-linie);
  border-style: dashed;
  background: rgba(255, 255, 255, 0.04);
}

.gp-abr .gp-abr-karte-notiz {
  font-size: 0.813em;
  line-height: 1.35;
  color: var(--gp-abr-grau-text);
  margin: 0.25em 0 0;
}

/* Muss ein langes Wort wie „Fünftelregelung“ doch einmal umbrechen, dann mit
   Trennstrich und nicht stumm mitten im Wort. */
.gp-abr .gp-abr-karte-titel {
  font-size: 0.813em;
  font-weight: 600;
  line-height: 1.3;
  hyphens: auto;
  color: var(--gp-abr-grau-text);
  margin: 0 0 0.3em;
}

/* Ein Betrag steht immer in einer Zeile. Ohne white-space: nowrap greift das
   von .gp-abr geerbte overflow-wrap: break-word und trennt notfalls innerhalb
   der Ziffern; „169.35“ über „8 €“ liest sich als 169,35 und wäre damit eine
   falsche Zahl. Den nötigen Platz dafür schafft die Spaltenregel der Karten
   weiter oben. */
.gp-abr .gp-abr-karte-zahl {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
  color: #ffffff;
}

/* IAB-Kurzhinweis und Mindestinvestition */
.gp-abr .gp-abr-iabblock {
  padding: 0.5em 0.65em;
  margin-bottom: 0.5em;
  border: 1px dashed var(--gp-abr-linie);
  border-radius: 10px;
}

.gp-abr .gp-abr-werte {
  margin: 0.4em 0;
  padding: 0;
}

.gp-abr .gp-abr-werte > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1em;
  padding: 0.25em 0;
}

.gp-abr .gp-abr-werte dt {
  font-size: 0.813em;
  font-weight: 400;
  margin: 0;
  color: var(--gp-abr-grau-text);
}

.gp-abr .gp-abr-werte dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #ffffff;
}

/* Abfindungsnetto als kleinere Zusatzinformation */
.gp-abr .gp-abr-netto {
  padding-top: 0.5em;
  border-top: 1px solid var(--gp-abr-linie);
}

.gp-abr .gp-abr-wert-label {
  font-weight: 600;
  font-size: 0.875em;
  margin: 0;
  color: #ffffff;
}

.gp-abr .gp-abr-zahl-mittel {
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin: 0.05em 0 0.2em;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Diagrammbereich: volle Rechnerbreite, direkt unter der Bedieneinheit.
   Die Gestaltung des SVG selbst steht in abfindung-graph.css.
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-graph {
  margin-top: 0.8em;
  padding: var(--gp-abr-abstand);
  background: var(--gp-abr-grund);
  border: 1px solid var(--gp-abr-linie);
  border-radius: 12px;
}

.gp-abr .gp-abr-graph-vorschau {
  padding: 0.4em 0.7em;
  background: var(--gp-abr-gold-hell);
  border-left: 3px solid var(--gp-abr-gold);
  border-radius: 0 6px 6px 0;
  color: var(--gp-abr-text);
  margin-bottom: 0.6em;
}

.gp-abr .gp-abr-graph-flaeche {
  min-width: 0;
}

/* Der statische Tabellenbehälter ist nur der Platz für die Datentabelle des
   Moduls. Solange er leer ist, nimmt er keinen Raum ein. */
.gp-abr .gp-abr-graph-flaeche [data-gp-abr-graph-tabelle]:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Hinweislisten
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-hinweisliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-abr .gp-abr-hinweisliste:empty {
  display: none;
}

.gp-abr .gp-abr-hinweisliste li {
  position: relative;
  margin: 0;
  padding: 0.6em 0 0.6em 1.25em;
  border-top: 1px solid var(--gp-abr-linie);
  font-size: 0.875em;
  line-height: 1.45;
  break-inside: avoid;
}

.gp-abr .gp-abr-hinweisliste li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 1.1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--gp-abr-gold);
}

.gp-abr .gp-abr-hinweisliste li strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0.1em;
}

/* Wichtige Hinweise heben sich als goldene Fläche ab; Text bleibt Anthrazit. */
.gp-abr .gp-abr-hinweisliste li.gp-abr-hinweis--wichtig {
  margin: 0.35em 0;
  padding: 0.6em 0.8em 0.6em 1.5em;
  background: var(--gp-abr-gold-hell);
  border-top-color: transparent;
  border-radius: 8px;
}

.gp-abr .gp-abr-hinweisliste li.gp-abr-hinweis--wichtig::before {
  left: 0.6em;
  background: var(--gp-abr-gold-text);
}

.gp-abr .gp-abr-hinweisliste li.gp-abr-hinweis--wichtig + li {
  border-top-color: transparent;
}

.gp-abr .gp-abr-hinweis-mehr {
  margin: 0.1em 0 -0.4em;
}

.gp-abr .gp-abr-hinweis-mehr summary {
  width: fit-content;
  max-width: 100%;
  font-size: 1em;
  padding: 0 0.25em 0 0;
}

.gp-abr .gp-abr-hinweis-mehr[open] {
  margin-bottom: 0;
}

.gp-abr .gp-abr-hinweis-mehr .gp-abr-mehr-inhalt {
  font-size: 1em;
  margin-top: 0;
}

.gp-abr .gp-abr-grenzen-kurz {
  font-size: 0.875em;
  line-height: 1.45;
  margin: 0 0 0.25em;
}

.gp-abr .gp-abr-grenzen-mehr {
  margin: 0;
}

.gp-abr .gp-abr-grenzen-mehr > .gp-abr-hinweisliste {
  margin: 0.4em 0 0;
}

.gp-abr .gp-abr-hinweisliste--grenzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr));
  column-gap: 2em;
  align-items: start;
}

.gp-abr .gp-abr-hinweise .gp-abr-untertitel + .gp-abr-hinweisliste {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Tabellen (zugänglich, bei Bedarf seitlich verschiebbar)
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-detail > summary {
  font-size: 1em;
}

.gp-abr .gp-abr-tabellenrahmen {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 0.6em;
  border: 1px solid var(--gp-abr-linie);
  border-radius: var(--gp-abr-radius);
}

.gp-abr .gp-abr-tabelle {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.875em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  background: var(--gp-abr-grund);
}

.gp-abr .gp-abr-tabelle caption {
  caption-side: top;
  text-align: left;
  padding: 0.6em 0.75em 0.4em;
  font-size: 0.938em;
  color: var(--gp-abr-grau-text);
}

.gp-abr .gp-abr-tabelle th,
.gp-abr .gp-abr-tabelle td {
  padding: 0.5em 0.75em;
  border: 0;
  border-bottom: 1px solid var(--gp-abr-linie);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  color: var(--gp-abr-text);
  background: transparent;
}

.gp-abr .gp-abr-tabelle thead th {
  font-weight: 700;
  white-space: normal;
  vertical-align: bottom;
  border-bottom: 2px solid var(--gp-abr-gold);
  min-width: 7.5em;
}

.gp-abr .gp-abr-tabelle th[scope="row"],
.gp-abr .gp-abr-tabelle thead th:first-child {
  text-align: left;
  font-weight: 400;
  white-space: normal;
  min-width: 11em;
}

.gp-abr .gp-abr-tabelle thead th:first-child {
  font-weight: 700;
}

.gp-abr .gp-abr-tabelle .gp-abr-spalte-fuenftel {
  background: #fbf7ec;
}

.gp-abr .gp-abr-tabelle .gp-abr-zeile-summe th,
.gp-abr .gp-abr-tabelle .gp-abr-zeile-summe td {
  font-weight: 700;
  border-top: 2px solid var(--gp-abr-text);
}

.gp-abr .gp-abr-tabelle .gp-abr-zeile-mehrsteuer th,
.gp-abr .gp-abr-tabelle .gp-abr-zeile-mehrsteuer td {
  border-bottom: 0;
}

.gp-abr .gp-abr-tabelle .gp-abr-leer {
  color: var(--gp-abr-grau-text);
  font-style: italic;
}

.gp-abr .gp-abr-rechenweg {
  margin-top: 0.5em;
}

.gp-abr .gp-abr-rechenweg .gp-abr-mehr-inhalt {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Nächster Schritt: dunkler Block wie das Fußband der Website
   -------------------------------------------------------------------------- */
.gp-abr .gp-abr-weiter {
  margin-top: 1em;
  padding: var(--gp-abr-abstand);
  background: var(--awb-color8, #2b2b2b);
  color: #ffffff;
  border-radius: 12px;
}

.gp-abr .gp-abr-weiter .gp-abr-untertitel {
  color: #ffffff;
}

.gp-abr .gp-abr-weiter p {
  color: #ffffff;
}

.gp-abr .gp-abr-weiter .gp-abr-klein {
  color: var(--gp-abr-dunkel-text);
}

.gp-abr .gp-abr-weiter a:focus-visible,
.gp-abr .gp-abr-weiter button:focus-visible,
.gp-abr .gp-abr-weiter input:focus-visible {
  outline-color: var(--gp-abr-gold);
  outline-offset: 3px;
}

.gp-abr .gp-abr-weiter-aktionen {
  margin: 0.8em 0 0.6em;
}

.gp-abr .gp-abr-weiter-aktionen .gp-abr-knopf {
  margin-bottom: 0.5em;
}

.gp-abr .gp-abr-direkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 1.25em;
  margin: 0 0 0.6em;
}

.gp-abr .gp-abr-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gp-abr-gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  border-radius: 4px;
}

.gp-abr .gp-abr-link:hover,
.gp-abr .gp-abr-link:focus {
  color: #ffffff;
}

.gp-abr .gp-abr-weiter .gp-abr-schalter input[type="checkbox"] {
  accent-color: var(--gp-abr-gold);
}

.gp-abr .gp-abr-weiter .gp-abr-schalter label {
  color: #ffffff;
}

.gp-abr .gp-abr-eckdaten-hilfe {
  margin-left: 2em;
}

.gp-abr .gp-abr-druck {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.gp-abr .gp-abr-druck .gp-abr-knopf {
  margin-bottom: 0.5em;
}

.gp-abr .gp-abr-knopf--zweit {
  color: #ffffff;
  background: transparent;
  border-color: #ffffff;
}

.gp-abr .gp-abr-knopf--zweit:hover {
  color: var(--awb-color8, #2b2b2b);
  background: #ffffff;
  border-color: #ffffff;
}

/* Verstecktes Druckdokument (eigener Rahmen mit eigenem Stil) */
.gp-abr .gp-abr-druckrahmen {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Stand der Rechenmethode */
.gp-abr .gp-abr-stand {
  margin: 0.8em 0 0;
  font-size: 0.8125rem;
  color: var(--gp-abr-grau-text);
}