/* ==========================================================================
   GRÖTSCH & PARTNER · Abfindungsrechner · Seite um den Rechner · Version 1.1.0

   Gestaltung der Seite /abfindungsrechner/ (Hero, Sprungnavigation, Anker,
   Überschriftengrößen, Beispieltabellen, FAQ, Druck). Der Seiteninhalt kommt
   aus seite/inhalt-abfindungsrechner.txt (Avada-Shortcodes); jeder Container
   dort trägt die Klasse gp-abr-seite.

   Seit 1.1.0 ist der Rechner selbst kompakt (drei Schieberegler, Ergebnis
   daneben, Diagramm darunter über die volle Rechnerbreite). Das Aussehen des
   Rechners steht in abfindung.css und abfindung-graph.css; hier steht nur,
   was um ihn herum liegt. Neu ist der Abschnitt „Rechnerabschnitt“ weiter
   unten: Überschrift und Einleitung fluchten mit dem Rechner.

   Grundsätze
   1. Jede Regel beginnt mit .gp-abr-seite. Keine Regel für html, body oder
      fremde Seitenteile. Die Datei lädt wie die Rechner-CSS nur auf Seiten
      mit dem Shortcode [gp_abfindungsrechner].
   2. Regeln treffen nur eigene Klassen (gp-abr-…) oder Avada-Elemente
      innerhalb der eigenen Container, nie das Innere des Rechners (.gp-abr).
   3. !important nur dort, wo Avada selbst !important setzt: Die responsive
      Schriftgröße der Überschriften rechnet Avada unter 1024 px mit
      „font-size: calc(…) !important“ (Klasse
      fusion-responsive-typography-calculated).
   4. @media für die Bruchstellen des Themes (1024 px Tablet, 640 px Handy)
      und den Druck; alles andere passt sich stufenlos an (clamp).
   ========================================================================== */

.gp-abr-seite {
  --gp-abr-s-text: var(--awb-color8, #2b2b2b);
  --gp-abr-s-grund: var(--awb-color1, #ffffff);
  --gp-abr-s-flaeche: var(--awb-color2, #f5f5f5);
  --gp-abr-s-gold: var(--awb-color5, #d9b96f);        /* nur Fläche und Linie */
  --gp-abr-s-gold-text: #8a6d2f;                      /* 4,87 : 1 auf Weiß */
  --gp-abr-s-gold-hell: #fbf7ec;                      /* wie Fünftel-Spalte im Rechner */
  --gp-abr-s-grau-text: #5f5f5f;                      /* 6,39 : 1 auf Weiß */
  --gp-abr-s-linie: #e6e2d8;
  --gp-abr-s-rand: #cfc7b4;
}

/* --------------------------------------------------------------------------
   Sprungziele: Der Header ist fixiert und 116 px hoch. Die Container-IDs
   (rechner, ergebnis, …) halten deshalb 140 px Abstand zum oberen Rand.
   -------------------------------------------------------------------------- */
.gp-abr-seite[id] {
  scroll-margin-top: 140px;
}

/* --------------------------------------------------------------------------
   Überschriften
   H1: „Abfindungsrechner“ ist ein langes Wort. Mit Avadas Mobilgröße
   (42,6 px bei 360 px) läuft es über den Rand. Die Größe wächst hier
   stufenlos von 30 px (320 px Breite) bis 64 px (ab rund 930 px) und passt
   bei 360 px mit Reserve in die Spalte. Gemessen in seite/vorschau-pruefen.mjs.
   -------------------------------------------------------------------------- */
.gp-abr-seite .fusion-title .fusion-title-heading {
  text-wrap: balance;
  overflow-wrap: break-word;
}

.gp-abr-seite.gp-abr-hero .fusion-title h1.fusion-title-heading {
  font-size: clamp(30px, calc(14px + 5.4vw), 64px) !important;
  line-height: 1.1 !important;
}

@media only screen and (max-width: 1024px) {
  .gp-abr-seite .fusion-title h2.fusion-title-heading {
    font-size: clamp(28px, calc(14px + 3.9vw), 44px) !important;
    line-height: 1.18 !important;
  }

  .gp-abr-seite .fusion-title h3.fusion-title-heading {
    font-size: clamp(22px, calc(15px + 1.9vw), 28px) !important;
    line-height: 1.3 !important;
  }
}

/* --------------------------------------------------------------------------
   Hero: Text links, Projektbild rechts (ab 1025 px), darunter die
   Sprungnavigation. Mobil steht das Bild unter dem Text.
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-hero-hinweis {
  margin-top: 24px;
}

.gp-abr-seite .gp-abr-hero-hinweis p {
  margin: 0 0 0.5em;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gp-abr-s-grau-text);
}

.gp-abr-seite .gp-abr-hero-hinweis p:first-child {
  padding-left: 12px;
  border-left: 3px solid var(--gp-abr-s-gold);
  color: var(--gp-abr-s-text);
}

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

/* Bildrahmen mit reserviertem Platz: Das Seitenverhältnis steht fest, bevor
   das Bild geladen ist (kein Springen). */
.gp-abr-seite .gp-abr-hero-bild {
  position: relative;
}

.gp-abr-seite .gp-abr-hero-rahmen {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gp-abr-s-flaeche);
}

.gp-abr-seite .gp-abr-hero-rahmen picture,
.gp-abr-seite .gp-abr-hero-rahmen img {
  display: block;
  width: 100%;
  height: 100%;
}

.gp-abr-seite .gp-abr-hero-rahmen img {
  max-width: none;
  object-fit: cover;
  object-position: 55% 60%;
}

/* Hellgrauer Versatz hinter dem Bild wie auf der Startseite. */
.gp-abr-seite .gp-abr-hero-bild::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border-radius: 12px;
  background: var(--gp-abr-s-flaeche);
}

@media only screen and (max-width: 1024px) {
  .gp-abr-seite .gp-abr-hero-bild {
    margin-top: 32px;
  }

  .gp-abr-seite .gp-abr-hero-bild::before {
    display: none;
  }

  .gp-abr-seite .gp-abr-hero-rahmen {
    aspect-ratio: 12 / 5;
  }

  .gp-abr-seite .gp-abr-hero-rahmen img {
    object-position: 50% 55%;
  }
}

@media only screen and (max-width: 640px) {
  .gp-abr-seite .gp-abr-hero-bild {
    margin-top: 28px;
  }

  .gp-abr-seite .gp-abr-hero-rahmen {
    aspect-ratio: 3 / 2;
    border-radius: 10px;
  }

  .gp-abr-seite .gp-abr-hero-rahmen img {
    object-position: 50% 58%;
  }

  /* Knöpfe mobil über die volle Breite wie auf der Startseite. Avada stellt
     den Knopf in ein <div style="text-align:left">, nicht in einen
     fusion-button-wrapper; deshalb ohne Wrapper im Selektor und mit
     ausdrücklicher Mitte auch für den Textbaustein im Knopf, sonst beginnt
     die zweite Zeile links (Endkontrolle Runde 1). */
  .gp-abr-seite .gp-abr-hero-knopf,
  .gp-abr-seite .gp-abr-beratung-knopf {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .gp-abr-seite .gp-abr-hero-knopf .fusion-button-text,
  .gp-abr-seite .gp-abr-beratung-knopf .fusion-button-text {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Rechnerabschnitt: Überschrift, Einleitung und Rechner als eine Einheit.

   Die seitliche Flucht entsteht nicht hier, sondern im Aufbau: Seit Version
   1.1.0 steht die Einleitung in einer Spalte mit demselben Spaltentyp (4_5)
   und denselben Spaltenabständen wie die Rechnerspalte
   (seite/bau-seite.py, Funktion rechner_einleitung). Beide Kanten fluchten
   dadurch bei jeder Breite von selbst, auch auf Tablet und Handy; gemessen in
   seite/vorschau-pruefen.mjs.

   Hier bleibt nur der senkrechte Anschluss. Ohne diese Regel käme der Abstand
   zwischen Einleitung und Rechner allein aus dem Standardabstand des Themes
   unter dem letzten Absatz (20 px) und änderte sich mit jeder Theme-Anpassung.
   Deshalb steht er ausdrücklich hier: 16 px plus 12 px Spaltenabstand.
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-rechner-einleitung .gp-abr-fliesstext p:last-child {
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Knöpfe: Farben (Anthrazit auf Gold) stehen am Avada-Element. Hier nur der
   sichtbare Tastaturfokus, den Avada mit fusion-disable-outline abschaltet.
   -------------------------------------------------------------------------- */
.gp-abr-seite .fusion-button:focus-visible {
  outline: 3px solid var(--gp-abr-s-text);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Sprungnavigation: kompakte Zeile aus Verweisen, bricht bei wenig Platz um.
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-sprungnavi ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--gp-abr-s-linie);
}

.gp-abr-seite .gp-abr-sprungnavi li {
  margin: 0;
  padding: 0;
}

.gp-abr-seite .gp-abr-sprungnavi li::before {
  content: none;
}

.gp-abr-seite .gp-abr-sprungnavi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gp-abr-s-text);
  text-decoration: none;
  background: var(--gp-abr-s-grund);
  border: 1px solid var(--gp-abr-s-rand);
  border-radius: 10px;
}

.gp-abr-seite .gp-abr-sprungnavi a:hover {
  color: var(--gp-abr-s-text);
  background: var(--gp-abr-s-gold-hell);
  border-color: var(--gp-abr-s-gold);
}

@media only screen and (max-width: 640px) {
  .gp-abr-seite .gp-abr-sprungnavi ul {
    gap: 8px;
    padding-top: 18px;
  }

  .gp-abr-seite .gp-abr-sprungnavi a {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   Fließtext: Verweise sind unterstrichen, weil die Linkfarbe des Themes
   gleich der Textfarbe ist (sonst nur an der Farbe erkennbar: WCAG 1.4.1).
   Lange Wörter ohne Trennstelle (die E-Mail-Adresse) dürfen bei 360 px
   umbrechen, statt über den Rand zu ragen.
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-fliesstext {
  overflow-wrap: break-word;
}

/* Schmale Bildschirme: deutsche Silbentrennung (lang="de" der Website),
   damit lange Wörter wie „Entlassungsentschädigungen“ sauber trennen. */
@media only screen and (max-width: 640px) {
  .gp-abr-seite .gp-abr-fliesstext {
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

.gp-abr-seite .gp-abr-fliesstext a {
  color: var(--gp-abr-s-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.gp-abr-seite .gp-abr-fliesstext a:hover {
  color: var(--gp-abr-s-text);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gp-abr-s-gold);
}

.gp-abr-seite .gp-abr-fliesstext a:focus-visible,
.gp-abr-seite .gp-abr-sprungnavi a:focus-visible {
  outline: 3px solid var(--gp-abr-s-text);
  outline-offset: 2px;
  border-radius: 2px;
}

.gp-abr-seite .gp-abr-fliesstext ul,
.gp-abr-seite .gp-abr-fliesstext ol {
  margin: 0 0 20px;
  padding-left: 1.3em;
}

.gp-abr-seite .gp-abr-fliesstext li {
  margin: 0 0 0.5em;
  padding-left: 0.2em;
}

.gp-abr-seite .gp-abr-fliesstext ul li::marker {
  color: var(--gp-abr-s-gold-text);
}

.gp-abr-seite .gp-abr-fliesstext ol li::marker {
  font-weight: 700;
}

/* Reine Linklisten (Projekte): ohne Aufzählungszeichen, mit kleinem Winkel. */
.gp-abr-seite .gp-abr-fliesstext .gp-abr-linkliste {
  padding-left: 0;
  list-style: none;
}

.gp-abr-seite .gp-abr-fliesstext .gp-abr-linkliste li {
  position: relative;
  padding-left: 1.1em;
}

.gp-abr-seite .gp-abr-fliesstext .gp-abr-linkliste li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.62em;
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid var(--gp-abr-s-gold-text);
  border-right: 2px solid var(--gp-abr-s-gold-text);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Beispielkarten mit Tabellen
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-beispielkarte .gp-abr-beispiel-text p {
  max-width: 40em;
}

.gp-abr-seite .gp-abr-bsp-rahmen {
  max-width: 100%;
  margin: 6px 0 22px;
  overflow-x: auto;
  border: 1px solid var(--gp-abr-s-linie);
  border-radius: 10px;
  background:
    linear-gradient(to right, var(--gp-abr-s-grund) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--gp-abr-s-grund) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(43, 43, 43, 0.18), rgba(43, 43, 43, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(43, 43, 43, 0.18), rgba(43, 43, 43, 0)) 100% 0;
  background-color: var(--gp-abr-s-grund);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.gp-abr-seite .gp-abr-bsp-rahmen:focus-visible {
  outline: 3px solid var(--gp-abr-s-text);
  outline-offset: 2px;
}

.gp-abr-seite .gp-abr-beispieltabelle {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 17px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  background: transparent;
}

.gp-abr-seite .gp-abr-beispieltabelle th,
.gp-abr-seite .gp-abr-beispieltabelle td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--gp-abr-s-linie);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  color: var(--gp-abr-s-text);
}

.gp-abr-seite .gp-abr-beispieltabelle thead th,
.gp-abr-seite .gp-abr-beispieltabelle thead td {
  font-weight: 700;
  white-space: normal;
  vertical-align: bottom;
  border-bottom: 2px solid var(--gp-abr-s-gold);
}

.gp-abr-seite .gp-abr-beispieltabelle tbody th[scope="row"] {
  min-width: 10em;
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

.gp-abr-seite .gp-abr-beispieltabelle .gp-abr-bsp-fuenftel {
  background: var(--gp-abr-s-gold-hell);
}

.gp-abr-seite .gp-abr-beispieltabelle .gp-abr-zeile-netto th,
.gp-abr-seite .gp-abr-beispieltabelle .gp-abr-zeile-netto td {
  font-weight: 700;
  border-top: 2px solid var(--gp-abr-s-text);
  border-bottom: 0;
}

@media only screen and (max-width: 640px) {
  .gp-abr-seite .gp-abr-beispieltabelle {
    font-size: 14px;
  }

  .gp-abr-seite .gp-abr-beispieltabelle th,
  .gp-abr-seite .gp-abr-beispieltabelle td {
    padding: 10px 8px;
  }

  /* Die Zeilenbeschriftung bleibt beim seitlichen Verschieben stehen. */
  .gp-abr-seite .gp-abr-beispieltabelle tbody th[scope="row"],
  .gp-abr-seite .gp-abr-beispieltabelle thead td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 6em;
    max-width: 8em;
    background: var(--gp-abr-s-grund);
    box-shadow: 1px 0 0 var(--gp-abr-s-linie);
  }

  /* Kopfzeile darf trennen, aber nur in großen Stücken („Regel-besteuerung“). */
  .gp-abr-seite .gp-abr-beispieltabelle thead th {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 5;
  }
}

/* --------------------------------------------------------------------------
   Häufige Fragen (Avada-Toggles, Frage als H3 im Toggle-Titel).
   -------------------------------------------------------------------------- */
.gp-abr-seite .gp-abr-faq .panel-title a:focus-visible {
  outline: 3px solid var(--gp-abr-s-text);
  outline-offset: 2px;
}

@media only screen and (max-width: 640px) {
  .gp-abr-seite .gp-abr-faq .panel-title a {
    font-size: 20px;
  }
}


/* --------------------------------------------------------------------------
   Seitendruck über das Browsermenü: alle Antworten ausgeklappt, keine
   Sprungnavigation, Tabellen ohne Rollbalken.
   -------------------------------------------------------------------------- */
@media print {
  .gp-abr-seite .gp-abr-sprungnavi-block,
  .gp-abr-seite .gp-abr-hero-bild::before {
    display: none;
  }

  .gp-abr-seite .gp-abr-faq .panel-collapse {
    display: block !important;
    height: auto !important;
  }

  .gp-abr-seite .gp-abr-faq .fusion-toggle-icon-wrapper {
    display: none;
  }

  .gp-abr-seite .gp-abr-bsp-rahmen {
    overflow: visible;
    background: none;
  }
}

/* --------------------------------------------------------------------------
   Seitendruck der Überschriften (QA R6): Auf A4 brach die H1 mitten im Wort
   („Abfindungsr|echner“), weil die Bildschirmregel oben umbrechen erlaubt und
   die Größe am Bildschirm gemessen ist. Im Druck kleinere Überschriften, die
   ganz auf eine Zeile passen, und kein Umbruch mitten im Wort. Der fixierte
   Kopf gehört dem Theme und bleibt unberührt.
   -------------------------------------------------------------------------- */
@media print {
  .gp-abr-seite .fusion-title .fusion-title-heading {
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
  }

  .gp-abr-seite.gp-abr-hero .fusion-title h1.fusion-title-heading {
    font-size: 24pt !important;
    line-height: 1.15 !important;
  }

  .gp-abr-seite .fusion-title h2.fusion-title-heading {
    font-size: 18pt !important;
    line-height: 1.2 !important;
  }

  .gp-abr-seite .fusion-title h3.fusion-title-heading {
    font-size: 13pt !important;
    line-height: 1.25 !important;
  }
}