/*
Theme Name: Golf del Sur
Theme URI: https://www.golfdelsur.es
Description: Kind-Theme von Hello Elementor. Das Design kommt 1:1 aus dem
  kompilierten CSS der React-Seite (css/tailwind.css). Diese Datei enthält
  ausschliesslich die Bruecke zu Elementor — nichts vom Design selbst.
Author: elisabit
Template: hello-elementor
Version: 2.0.0
Text Domain: golfdelsur
*/

/* ============================================================
   ELEMENTOR-BRUECKE

   Das Design liegt in css/tailwind.css und ist dasselbe CSS, das die
   React-Seite ausliefert. Damit Tailwind-Klassen an Elementor-Elementen
   genauso wirken wie im Original, muessen hier nur drei Dinge passieren.
   ============================================================ */

/* --- 1. Wrapper aus dem Layout nehmen ------------------------------------

   Elementor rendert pro Container und Widget zusaetzliche Divs:

     .e-con > .e-con-inner > .elementor-element > .elementor-widget-container

   Ein Tailwind-`grid` am Container traefe also nur .e-con-inner statt der
   Kinder. `display: contents` loest die Wrapper aus dem Layoutbaum, ohne
   sie aus dem DOM zu nehmen — die Kinder werden zu direkten Grid-/Flex-
   Kindern, genau wie im React-Markup.

   Gezielt ueber `gds-unwrap`, nicht global: Bereiche ohne diese Klasse
   behalten normales Elementor-Verhalten. */

.gds-unwrap > .e-con-inner {
  display: contents;
}

.gds-unwrap > .elementor-element > .elementor-widget-container,
.gds-unwrap > .e-con-inner > .elementor-element > .elementor-widget-container {
  display: contents;
}

.gds-unwrap-self > .elementor-widget-container {
  display: contents;
}

/* --- 2. Elementor-Vorgaben neutralisieren --------------------------------

   Elementor setzt an Containern eigene Breiten, Abstaende und Flex-Regeln.
   Wo Tailwind das Layout bestimmt, muessen die weg — sonst addieren sich
   Elementor-Padding und Tailwind-Padding. */

.gds-plain {
  /* Elementor steuert Breite, Abstaende und Anzeigeart ueber eigene
     CSS-Variablen. Die werden hier auf neutral gesetzt — sonst addieren
     sie sich zu den Tailwind-Werten (doppeltes Padding, falsche Breite).

     Wichtig: hier nur Variablen und `display` setzen, keine konkreten
     Layout-Eigenschaften wie padding oder max-width. Die kommen aus
     Tailwind, das nach dieser Datei geladen wird und bei gleicher
     Spezifitaet gewinnen soll. */
  --display: block;
  --content-width: 100%;
  --container-max-width: none;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --flex-wrap: nowrap;

  /* Schlaegt Elementors `.e-flex { display: flex }`. Tailwind-Klassen wie
     `grid` oder `flex` gewinnen danach wieder, weil Tailwind spaeter laedt. */
  display: block;
}

.gds-plain .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.gds-plain .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Elementors Standard-Zeilenhoehe/Farbe darf die Tailwind-Klassen nicht
   ueberschreiben, wenn ein Widget direkt Markup ausgibt. */
.gds-plain .elementor-widget-html,
.gds-plain .elementor-widget-html > .elementor-widget-container {
  color: inherit;
  font-family: inherit;
}


/* --- 4. Elementor-Typografie neutralisieren -------------------------------

   Das Elementor-Kit faerbt und formatiert Ueberschriften global:

     .elementor-widget-heading .elementor-heading-title {
       color: var(--e-global-color-primary); font-family: ...; }

   Die Tailwind-Klassen sitzen aber am umgebenden Widget-Div, nicht am
   h1/h3/span selbst. Ohne diese Regel gewinnt Elementor — sichtbar wurde
   das als dunkler Text auf dunklem Grund, also unsichtbarem Inhalt.

   `inherit` gibt die Kontrolle an den Wrapper zurueck, wo die
   Original-Klassen stehen. */

.gds-plain .elementor-heading-title,
.gds-unwrap-self .elementor-heading-title,
.gds-plain .elementor-widget-text-editor,
.gds-plain .elementor-widget-html {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

/* Grundschrift der Ueberschriften.

   Die Vorlage stellt sie am Element ein:

     h1, h2, h3, h4, h5, h6 { font-family: var(--font-display);
                              font-weight: 400; letter-spacing: -0.02em; }

   In der WordPress-Fassung sitzt die Ueberschrift in einem Widget, dessen
   Klassen an einem <div> haengen — und die Regel oben gibt dem Inneren
   `font-family: inherit`, also die Schrift dieses <div>. Damit erbt sie die
   Grundschrift des Fliesstextes statt der Auszeichnungsschrift. Von den 779
   Ueberschriften der Seite tragen 194 keine eigene Schriftklasse; genau die
   standen falsch — sichtbar etwa an „Información General" auf der Seite zur
   Upuparock Winter Series.

   `:has(:where(…))` traegt die Regel an die Huelle, sobald darin eine echte
   Ueberschrift steckt. Das `:where` setzt die Spezifitaet des `:has` auf null,
   die Regel bleibt also bei (1,1,0) — genau wie die Tailwind-Klassen. Weil
   Tailwind spaeter geladen wird, gewinnt eine ausdrueckliche Klasse wie
   `font-body` oder `font-semibold` an derselben Huelle weiterhin.

   Die Einschraenkung auf `.elementor-widget-heading` ist noetig: ohne sie
   greift die Regel auch an einer Huelle, die einen ganzen Bereich MIT
   Ueberschriften enthaelt — die Fusszeile bekam dadurch die
   Auszeichnungsschrift bis hinunter zur Zeile mit dem Urheberrecht.
   `:where` haelt auch hier die Spezifitaet bei (1,1,0). */
#gds .gds-unwrap-self:where(.elementor-widget-heading):has(:where(h1, h2, h3, h4, h5, h6)) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Bild-Widgets: Elementor rahmt <img> in <figure> und setzt eigene Breiten.
   Im Original traegt das <img> selbst die Klassen (w-full h-full object-cover). */
.gds-plain .elementor-widget-image,
.gds-plain .elementor-widget-image figure,
.gds-plain .elementor-widget-image .elementor-image {
  display: contents;
}

/* Elementor gibt Bildern eine Standardbreite; die Klassen am img zaehlen. */
.gds-plain .elementor-widget-image img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ============================================================
   3. HERO-SLIDER
   Das Elementor-Slides-Widget bringt Ken Burns und Überblendung mit,
   aber nicht die Details des Originals. Nachgebaut werden:
   - zwei gestapelte Farbverläufe (vertikal + horizontal) über dem Bild
   - Untertitel ÜBER der Überschrift (Elementor rendert ihn darunter)
   - Balken statt Punkte als Indikatoren, mit goldenem Fortschritt
   - Foliennummer und Scroll-Hinweis

   Zur Spezifität: Elementors widget-slides.css lädt NACH dem Theme-CSS und
   adressiert Überschrift/Text/Button mit drei Klassen
   (.elementor-slides .swiper-slide-inner .elementor-slide-heading).
   Die Regeln hier brauchen deshalb vier Klassen, sonst gewinnt Elementor.

   Nicht anfassen: `position` auf .swiper-slide-inner — Elementor setzt dort
   `absolute; inset:0`, und ein `relative` von hier lässt den Inhalt hinter
   den Verläufen verschwinden.
   ============================================================ */

.elementor-widget-slides.gds-hero .swiper-slide {
  position: relative;
}

/* Verlauf 1: vertikal, verde-pandion 50% → 20% → 70% */
.elementor-widget-slides.gds-hero .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    hsl(var(--verde-pandion) / 0.5) 0%,
    hsl(var(--verde-pandion) / 0.2) 50%,
    hsl(var(--verde-pandion) / 0.7) 100%
  );
}

/* Verlauf 2: horizontal, verde-pandion 40% → transparent */
.elementor-widget-slides.gds-hero .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    hsl(var(--verde-pandion) / 0.4) 0%,
    transparent 50%,
    transparent 100%
  );
}

/* Inhalt über die Verläufe heben — ohne `position` zu überschreiben. */
.elementor-widget-slides.gds-hero .swiper-slide-inner {
  z-index: 2;
}

/* Untertitel steht im Original über der Überschrift. */
.elementor-widget-slides.gds-hero .elementor-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-description {
  order: -1;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--blanco) / 0.9);
  margin-bottom: 1.5rem;
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 6vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: hsl(var(--blanco));
  text-shadow: 0 2px 40px hsl(var(--azul-atlantico) / 0.4);
  max-width: 14ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-heading {
    max-width: none;
  }
}

/* Button: Elementor setzt hier border 2px solid #fff — überschreiben. */
.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-button {
  position: relative;
  margin-top: 3rem;
  padding: 1rem 2.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: hsl(var(--blanco));
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.5s;
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid hsl(var(--blanco) / 0.5);
  transition: border-color 0.3s;
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-button::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--ancient-grain) / 0.8),
    hsl(var(--blanco)),
    hsl(var(--ancient-grain) / 0.8),
    transparent
  );
  background-size: 200% 100%;
  animation: borderGlow 3s ease-in-out infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 1px;
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-button:hover {
  background: hsl(var(--blanco));
  color: hsl(var(--azul-atlantico));
  box-shadow: 0 0 25px hsl(var(--ancient-grain) / 0.5);
}

.elementor-widget-slides.gds-hero .swiper-slide-inner .elementor-slide-button:hover::before {
  border-color: transparent;
}

/* Indikatoren: Balken statt Punkte, wie im Original */
.elementor-widget-slides.gds-hero .swiper-pagination-bullets {
  bottom: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  z-index: 20;
}

.elementor-widget-slides.gds-hero .swiper-pagination-bullet {
  width: 1.5rem;
  height: 2px;
  border-radius: 0;
  background: hsl(var(--blanco) / 0.3);
  opacity: 1;
  transition: all 0.5s;
  position: relative;
}

.elementor-widget-slides.gds-hero .swiper-pagination-bullet:hover {
  background: hsl(var(--blanco) / 0.5);
}

.elementor-widget-slides.gds-hero .swiper-pagination-bullet-active {
  width: 3rem;
  background: hsl(var(--blanco));
}

/* Goldener Fortschrittsbalken auf dem aktiven Indikator */
.elementor-widget-slides.gds-hero .swiper-pagination-bullet-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: hsl(var(--ancient-grain));
  animation: gdsHeroProgress var(--gds-slide-duration, 7s) linear forwards;
}

@keyframes gdsHeroProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Foliennummer unten rechts */
.elementor-widget-slides.gds-hero .gds-slide-counter {
  position: absolute;
  bottom: 3rem;
  right: 2rem;
  z-index: 20;
  display: none;
  align-items: baseline;
  gap: 0.25rem;
  color: hsl(var(--blanco) / 0.6);
  pointer-events: none;
}

.elementor-widget-slides.gds-hero .gds-slide-counter .gds-current {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: hsl(var(--blanco));
}

.elementor-widget-slides.gds-hero .gds-slide-counter .gds-sep,
.elementor-widget-slides.gds-hero .gds-slide-counter .gds-total {
  font-size: 0.875rem;
}

/* Scroll-Hinweis unten links */
.elementor-widget-slides.gds-hero .gds-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--blanco) / 0.4);
  pointer-events: none;
}

.elementor-widget-slides.gds-hero .gds-scroll-hint span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-90deg) translateY(2rem);
  transform-origin: center;
}

.elementor-widget-slides.gds-hero .gds-scroll-hint i {
  display: block;
  width: 1px;
  height: 4rem;
  background: linear-gradient(to bottom, hsl(var(--blanco) / 0.5), transparent);
  animation: gdsScrollPulse 2s ease-in-out infinite;
}

@keyframes gdsScrollPulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.5); }
}

/* Beides nur ab Tablet — im Original `hidden md:flex` */
@media (min-width: 768px) {
  .elementor-widget-slides.gds-hero .gds-slide-counter,
  .elementor-widget-slides.gds-hero .gds-scroll-hint { display: flex; }
}

/* ============================================================
   4. KOPFZEILE — Zustandsabhaengige Farben

   Im Original wechselt die Schriftfarbe der Navigation je nachdem, ob die
   Seite gescrollt ist: ueber dem Hero weiss, auf hellem Grund dunkelgruen.
   In React war das eine Bedingung im Klassennamen; hier haengt es an der
   Klasse `gds-scrolled`, die das Navigations-Skript am Wurzelelement setzt.
   ============================================================ */

.gds-nav-text {
  color: hsl(var(--blanco) / 0.85);
}

.gds-nav-text:hover {
  color: hsl(var(--blanco));
}

.gds-scrolled .gds-nav-text {
  color: hsl(var(--verde-pandion));
}

.gds-scrolled .gds-nav-text:hover {
  color: hsl(var(--azul-atlantico));
}

/* Das Aufklappmenue liegt ueber dem Seiteninhalt. */
.gds-mega {
  position: relative;
  z-index: 45;
}

/* --- 6. Schaltflächen ----------------------------------------------------

   Das Eltern-Theme (hello-elementor/reset.css) gibt jedem <button> einen
   Platzhalter-Stil mit:

       border: 1px solid #CC3366;  color: #CC3366;

   Da `button` (0,0,1) spezifischer ist als Tailwinds `*`-Reset (0,0,0),
   gewinnt es — sichtbar als pinke Rahmen an den Aufklapp-Schaltern in
   Kopf- und Fußzeile. Hier wird auf Tailwinds Grundzustand zurückgesetzt.

   Bewusst ohne `!important` und ohne `color`-Zwang an Stellen, an denen die
   Navigation ihre eigene Farbe braucht (siehe die Regeln darunter, die mit
   zwei Klassen adressieren und deshalb gewinnen). */

button,
[type="button"],
[type="submit"],
[type="reset"] {
  background-color: transparent;
  background-image: none;
  border: 0 solid transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}

/* Tastaturbedienung darf trotzdem sichtbar bleiben. */
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible {
  outline: 2px solid hsl(var(--ancient-grain));
  outline-offset: 2px;
}

/* Navigationsfarbe: zwei Klassen schlagen den Reset oben. */
[data-gds-header-root] .gds-nav-text,
[data-gds-sidemenu] .gds-nav-text {
  color: hsl(var(--blanco) / 0.85);
}

[data-gds-header-root] .gds-nav-text:hover {
  color: hsl(var(--blanco));
}

[data-gds-header-root].gds-scrolled .gds-nav-text {
  color: hsl(var(--verde-pandion));
}

[data-gds-header-root].gds-scrolled .gds-nav-text:hover {
  color: hsl(var(--azul-atlantico));
}

/* --- 5. Flussrichtung und durchgereichtes Markup -------------------------

   Zwei Elementor-Vorgaben, die das Layout des Originals verfälschen:

   a) Elementor-Container sind `flex-direction: column`. Tailwinds `flex`
      setzt nur `display:flex` und erbt sonst die Browservorgabe `row`.
      Ohne diese Zeile zentriert `items-center` horizontal statt vertikal —
      sichtbar als Seitentitel, der oben unter der Kopfzeile klebt statt
      mittig im Hero zu stehen.

      Tailwind lädt nach dieser Datei, `flex-col` gewinnt also weiterhin.

   b) HTML-Bausteine bekommen von Elementor einen eigenen Kasten. Enthält
      der nur absolut positioniertes Markup (Verläufe, Verzierungen), ist er
      null Pixel hoch — und `inset: 0` darin bezieht sich auf diesen Kasten
      statt auf die gemeinte Ebene. `display: contents` nimmt ihn aus dem
      Layout, das Markup hängt dann direkt am richtigen Elternteil.
   ------------------------------------------------------------------- */

/* `#gds`-Anker ist hier nötig: Elementor schreibt Richtung und Ausrichtung
   pro Element mit drei Klassen in post-<id>.css (Spezifität 0,3,0). Eine
   einfache Klassenregel verliert dagegen. Der id-Selektor (1,1,0) gewinnt —
   und Tailwind, das ebenfalls über `#gds` läuft und später geladen wird,
   gewinnt weiterhin gegen diese Zeilen (`flex-col`, `self-start`, `grow` …). */
#gds .gds-plain {
  --flex-direction: row;
  flex-direction: row;

  /* Elementor setzt an Containern zusätzlich `align-self` und `flex-grow`.
     Damit ignoriert ein Kind das `items-center` seines Elternteils — der
     Seitentitel blieb dadurch oben kleben statt mittig im Hero zu sitzen.
     `auto` gibt die Entscheidung an den Elternteil zurück; Tailwind-Klassen
     wie `self-start` oder `grow` gewinnen weiterhin, weil Tailwind später
     geladen wird. */
  --align-self: auto;
  align-self: auto;
  --flex-grow: 0;
  --flex-shrink: 1;

  /* Elementor lässt Container umbrechen. Bei `flex-wrap: wrap` bestimmt
     `align-content` die Lage der Zeile — `align-items: center` zentriert dann
     nur INNERHALB der Zeile, und die Zeile selbst klebt oben. Genau daran lag
     der nicht zentrierte Seitentitel. */
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
  --align-content: center;
  align-content: center;

  /* Elementor setzt an jedem Container `width: var(--width)` und schreibt
     `--width: 100%` pro Element in post-<id>.css. Ein Container, der im
     React-Markup als Flex-Kind auf seine Inhaltsbreite schrumpft, wird damit
     auf die volle Zeile aufgezogen. Auf dem Schreibtisch faellt das kaum auf,
     weil der Text ohnehin schmaler ist als die Spalte; auf dem Handy stand
     dadurch die zentrierte Kopfzeile ueber dem Bild linksbuendig.

     `auto` verhaelt sich im Blockfluss genauso wie 100%, gibt die Entscheidung
     im Flex- und Grid-Kontext aber wieder ans Layout zurueck. Tailwind gewinnt
     weiterhin: `#gds .w-full` hat dieselbe Spezifitaet und laedt spaeter.
     Gesetzt wird nur die Variable, nicht `width` selbst: der Konverter hebt
     Inline-Breiten der Vorlage als eigene Klasse in das erzeugte Stylesheet
     (z. B. `width: max-content` am Laufband der Marken im Pro Shop). Eine
     direkte `width`-Angabe mit #gds-Anker wuerde diese Klasse schlagen und
     das Laufband auf Fensterbreite zusammenstauchen. */
  --width: auto;
}

/* Elementor setzt an Containern und Widgets `min-width: 0`. Damit darf ein
   Flex-Kind unter seine Inhaltsbreite schrumpfen — der Browser laesst das von
   sich aus nicht zu (`min-width: auto` entspricht der Mindestbreite des
   Inhalts). Sichtbar wurde es an den Fortschritts-Plaketten der Driving-Range:
   „COMPLETADO" stand ueber den Rand seiner eigenen Flaeche hinaus, das letzte
   Zeichen lag ausserhalb.

   Im Original gibt es diese Regel nicht, also wird der Normalwert
   wiederhergestellt. Tailwind gewinnt weiterhin: `#gds .min-w-0` hat dieselbe
   Spezifitaet und laedt spaeter. */
#gds .gds-plain,
#gds .gds-unwrap-self {
  min-width: auto;
}

.gds-plain > .elementor-widget-html.gds-unwrap-self {
  display: contents;
}

/* --- 9. Fliesstext der Artikelseite ---------------------------------------

   Die Neuigkeiten kommen aus dem WordPress-Editor. Im Original traegt dort
   jeder Absatz seine Tailwind-Klassen (`text-verde-pandion/80 text-lg
   leading-relaxed mb-6`) — beim Redigieren waeren die nach dem ersten
   Umformatieren weg. Deshalb steht die Gestaltung hier am Rahmen, und der
   Text bleibt schlichtes <p>, <a>, <img>.

   Werte wie im Original: text-lg / leading-relaxed / mb-6 am Absatz,
   Verweise in Azul Atlantico unterstrichen, Bilder mit rounded-xl,
   shadow-lg und my-8. */

#gds .gds-article-body p {
  color: hsl(var(--verde-pandion) / 0.8);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

#gds .gds-article-body p:last-child {
  margin-bottom: 0;
}

#gds .gds-article-body a {
  color: hsl(var(--azul-atlantico));
  text-decoration: underline;
  overflow-wrap: break-word;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

#gds .gds-article-body a:hover {
  color: hsl(var(--verde-pandion));
}

#gds .gds-article-body img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Ueberschriften, die jemand im Editor einfuegt, sollen zur Seite passen. */
#gds .gds-article-body h2,
#gds .gds-article-body h3 {
  font-family: var(--font-display);
  color: hsl(var(--verde-pandion));
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

#gds .gds-article-body h2 { font-size: 1.875rem; }
#gds .gds-article-body h3 { font-size: 1.5rem; }

#gds .gds-article-body ul,
#gds .gds-article-body ol {
  color: hsl(var(--verde-pandion) / 0.8);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

#gds .gds-article-body ul { list-style: disc; }
#gds .gds-article-body ol { list-style: decimal; }

/* --- 10. Farbspalten der Slope-Tabellen ------------------------------------

   `src/pages/Slope.tsx` faerbt die Spalten der roten und orangen Tees ueber
   Tailwind-Klassen mit frei gesetztem Farbwert (Zeilen 235–242):

     bg-[hsl(0,65%,42%)]      bg-[hsl(0,65%,42%)]/85    bg-[hsl(0,65%,42%)]/10
     bg-[hsl(24,90%,52%)]     bg-[hsl(24,90%,52%)]/80   bg-[hsl(24,90%,52%)]/15

   Tailwind erzeugt fuer keine davon eine Regel — auch nicht ueber `safelist`,
   und auch nicht im Produktionsbau der React-Seite (`dist/assets/index-*.css`
   enthaelt sie ebenfalls nicht). Die Kopfzellen stehen dadurch ohne
   Hintergrund da, obwohl ihr Text auf eine dunkle Flaeche gesetzt ist, und
   die getoenten Datenzellen sind nicht mehr von den uebrigen zu
   unterscheiden — auf einer Tabelle, deren einziger Zweck es ist, die
   Abschlagfarben auseinanderzuhalten.

   Angeschrieben ueber `[class~=…]`, weil der Klassenname Klammern, Kommas und
   Prozentzeichen enthaelt; `~=` trifft genau dieses Wort und nicht den
   laengeren Namen mit Deckkraft. Spezifitaet (1,1,0) wie bei Tailwind — sollte
   Tailwind die Regeln eines Tages doch erzeugen, gewinnen sie, weil sie
   spaeter geladen werden. */

#gds [class~="bg-[hsl(0,65%,42%)]"]      { background-color: hsl(0 65% 42%); }
#gds [class~="bg-[hsl(0,65%,42%)]/85"]   { background-color: hsl(0 65% 42% / 0.85); }
#gds [class~="bg-[hsl(0,65%,42%)]/10"]   { background-color: hsl(0 65% 42% / 0.1); }
#gds [class~="bg-[hsl(24,90%,52%)]"]     { background-color: hsl(24 90% 52%); }
#gds [class~="bg-[hsl(24,90%,52%)]/80"]  { background-color: hsl(24 90% 52% / 0.8); }
#gds [class~="bg-[hsl(24,90%,52%)]/15"]  { background-color: hsl(24 90% 52% / 0.15); }