/* SeedHub Core — Struktur-CSS.
 *
 * Hier steht ausschliesslich, WIE die Bauteile aufgebaut sind: Scroll-Snap,
 * Spaltenbreiten, Seitenverhaeltnisse, Lage der Bedienelemente. Kein Farbwert,
 * keine Schriftgroesse, kein Radius — das alles kommt aus dem Theme
 * (hgi-promo.css auf Basis von hgi-tokens.css). Dadurch bleibt ein Farb- oder
 * Schriftwechsel eine Aenderung an einer Datei im Theme.
 *
 * KEIN 100vw. Die Vorlage macht Abschnitte mit "width: 100vw" vollbreit. 100vw
 * zaehlt die Scrollleiste mit — auf Windows ergibt das rund 15px waagerechten
 * Ueberlauf und eine Scrollleiste am Seitenfuss. Hier wird stattdessen die
 * Breite des Elternelements (100%) genutzt; vollbreit wird der Abschnitt durch
 * WordPress' "alignfull", das das Theme bereits behandelt.
 */

/* ─── Laufband ─────────────────────────────────────────────────────────── */

/* Das Laufband muss seine Breite selbst begrenzen.
 *
 * Als direktes Kind eines Blockelements ergibt sich die Fensterbreite von
 * selbst — so lief es im Pruefstand. In Astras Header-Grid sind die Eltern
 * aber INHALTSBREIT: dort wuchs das Laufband auf die Breite seiner eigenen
 * Spur (gemessen 3311px bei 1695px Fenster), und overflow:hidden beschnitt
 * nichts, weil es nichts zu beschneiden gab. min-width:0 ist der Teil, der
 * in Flex- und Grid-Eltern wirklich zaehlt — ohne ihn setzt die
 * Mindestinhaltsbreite width:100% ausser Kraft. */
.hgi-ticker {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hgi-ticker__viewport {
  overflow: hidden;
  min-width: 0;
}

.hgi-ticker__track {
  display: flex;
  width: max-content;
}

.hgi-ticker__set {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hgi-ticker__item { flex: 0 0 auto; }

/* Die Animation haengt an "is-ready", das erst das Skript setzt — vorher (und
   ohne JS) steht das Band still und ist lesbar. Verschoben wird um exakt die
   halbe Spur; das Skript sorgt dafuer, dass die halbe Spur einer ganzen Zahl
   von Saetzen entspricht und breiter als das Fenster ist. */
.hgi-ticker.is-ready .hgi-ticker__track {
  animation: hgi-ticker-lauf var(--hgi-ticker-duration, 80s) linear infinite;
}

@keyframes hgi-ticker-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hgi-ticker.is-ready .hgi-ticker__track { animation: none; }
}

/* ─── Vollbreiten-Rahmen ──────────────────────────────────────────────── */

/* Bricht aus der Inhaltsspalte auf Fensterbreite aus — dieselbe Technik, die
   das Theme fuer WordPress' "alignfull" nutzt und die Jonas in v84 fuer
   .hgi-offers-wrap verwendet. Gefahrlos NUR, weil das Theme "overflow-x: clip"
   auf dem Body setzt; ohne das ergaeben 100vw auf Windows rund 15px
   waagerechten Ueberlauf samt Scrollleiste am Seitenfuss.
   Der Rahmen ist ausserdem der Bezugspunkt der Pfeile. */
/* Der Selektor ist ABSICHTLICH doppelt qualifiziert.
 *
 * Das Theme setzt in hgi-blocks.css ".entry-content > * { max-width:
 * var(--hgi-max) }" — gleiche Spezifitaet wie eine bare Klasse. Und weil
 * WordPress Plugin-Stylesheets VOR Theme-Stylesheets ausgibt, gewinnt bei
 * Gleichstand das Theme: der Ausbruch verpuffte, der Hero blieb in der
 * Inhaltsspalte (aufgefallen Dirk, 15.09.).
 *
 * Eine Abhaengigkeit auf ein Theme-Handle waere der naheliegende Weg, ist aber
 * falsch — das Plugin darf nicht voraussetzen, dass dieses Theme aktiv ist.
 * Deshalb ueber die Spezifitaet statt ueber die Reihenfolge: .entry-content
 * .hgi-carousel-wrap schlaegt .entry-content > * unabhaengig davon, wer zuerst
 * geladen wird. Die bare Klasse bleibt fuer Verwendungen ausserhalb des
 * Inhaltsbereichs daneben stehen.
 */
.hgi-carousel-wrap {
  position: relative;
  box-sizing: border-box;
}

/* Vollbreite NUR beim Hero — die Kartenreihe bleibt in der Inhaltsspalte
   (Vorgabe Dirk, 15.09.: vollflaechig war dort schlechter). */
.hgi-carousel-wrap--slider,
.entry-content .hgi-carousel-wrap--slider {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
}

/* Kein seitlicher Innenabstand mehr (Dirk, 24.09.2026): Der Umschlag lag
   zwar auf der Achse, schob seinen Inhalt aber um die Rinne nach innen —
   die erste Karte begann dadurch an JEDER Breite 28px neben der Linie, an
   der Hero, Spec-Strip, Signup und SEO-Block alle beginnen. Direkt darunter
   steht der Spec-Strip auf der Achse; die beiden Kanten lagen im Blick
   uebereinander. Gemessen, nicht vermutet: 380,5 statt 352,5 bei 1920px. */
.hgi-carousel-wrap--cta { padding: 24px 0 32px; }

/* ─── Karussell: gemeinsamer Aufbau ────────────────────────────────────── */

.hgi-carousel {
  position: relative;
  --hgi-carousel-gap: 24px;
}

/* Die Buehne umschliesst nur den Streifen und ist der Bezugspunkt der Pfeile.
   Vorher hingen sie am Rahmen — der ist durch Innenabstand und Punkteleiste
   hoeher als die Karten, wodurch top:50% sichtbar unterhalb der Kartenmitte
   landete. Kein overflow hier: die Pfeile muessen in die Gosse ragen. */
.hgi-carousel__stage {
  position: relative;
}

.hgi-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* Die eigene Scrollleiste des Streifens wird ausgeblendet — gescrollt wird
     per Wischen, Pfeil oder Punkt. Tastaturbedienung bleibt moeglich, weil das
     Skript dem Bereich tabindex="0" gibt. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hgi-carousel__viewport::-webkit-scrollbar { display: none; }

/* Der Selektor ist doppelt qualifiziert, und zwar aus einem gemessenen Grund.
 *
 * Das Theme setzt ".entry-content ul, .entry-content ol { padding: revert;
 * margin: revert }". "revert" holt die Browser-Vorgabe zurueck, fuer ein <ul>
 * also den linken Innenabstand. Der Track IST ein <ul> in .entry-content, und
 * ".entry-content ul" (0-1-1) schlaegt ".hgi-carousel__track" (0-1-0) — dazu
 * laedt das Theme nach dem Plugin. Gemessen am Hero: padding-left 20px,
 * box-sizing border-box, Rahmen 1710px, Inhaltsbox also 1690px. Damit war jede
 * Folie 20px zu schmal, und weil der Scrollschritt der Folienbreite folgt,
 * schaute die naechste Folie dauerhaft 20px rechts hervor (Dirk, 15.09.).
 */
.hgi-carousel__track,
.entry-content .hgi-carousel__track {
  display: flex;
  gap: var(--hgi-carousel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hgi-carousel__slide {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
}

.hgi-slide__media {
  position: absolute;
  inset: 0;
  display: block;
}

.hgi-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hgi-fokus-d, center center);
  display: block;
}

@media (max-width: 921px) {
  .hgi-slide__media img { object-position: var(--hgi-fokus-m, center center); }
}

.hgi-slide__body {
  position: relative;
  /* 0 = Bild, 1 = Verlauf (::before, im Theme), 2 = Text. Das Pseudoelement
     wird als erstes Kind eingefuegt und wuerde bei gleichem z-index UNTER dem
     Bild landen — deshalb sind die drei Ebenen hier explizit. */
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hgi-slide__actions { display: flex; flex-wrap: wrap; align-items: center; }

/* ─── Variante Hero ───────────────────────────────────────────────────── */

.hgi-carousel--slider .hgi-carousel__track { gap: 0; }

.hgi-carousel--slider .hgi-carousel__slide {
  flex-basis: 100%;
  aspect-ratio: 3000 / 950;
}

.hgi-carousel--slider .hgi-slide__body {
  padding-inline: var(--hgi-gutter, 28px);
  align-items: flex-start;
  text-align: left;
}

/* Mobil ein eigenes Hochformat statt des Breitbanners.
 *
 * Das Desktop-Verhaeltnis 3000/950 ergaebe bei 390px Fensterbreite 123px Hoehe
 * fuer rund 300px Inhalt. In v34 gab es dafuer nur einen Notbehelf (Verhaeltnis
 * aufheben, Mindesthoehe). v84 liefert einen echten Hochformat-Zuschnitt
 * (1080x1500) — damit ist das Verhaeltnis wieder tragfaehig: 390px Breite
 * ergeben 542px Hoehe, der Inhalt passt mit Luft.
 *
 * Text steht oben statt unten, wie in v84. Die Mindesthoehe bleibt als Boden
 * fuer Folien, denen jemand kein Mobilbild gegeben hat.
 */
@media (max-width: 921px) {
  .hgi-carousel--slider .hgi-carousel__slide {
    aspect-ratio: 1080 / 1500;
    min-height: 420px;
  }

  /* Zentriert bleibt bewusst: v84 zeigt den Text mobil linksbuendig, das ist
     dort aber Folge einer globalen Regel und keine eigene Mobil-Entscheidung.
     Dirks ausdrueckliche Vorgabe vom 14.09. lautet "mobil zentriert wie
     bisher" — die gilt, bis er sie widerruft. */
  .hgi-carousel--slider .hgi-slide__body {
    justify-content: flex-start;
    padding-block: 20px 0;
    align-items: center;
    text-align: center;
  }
}

/* ─── Variante CTA-Karten ─────────────────────────────────────────────── */

/* Drei sichtbar. Die Spaltenbreite ist der EINZIGE Ort, an dem die Anzahl
   steht — PHP und JS wissen nichts davon. */
.hgi-carousel--cta .hgi-carousel__slide {
  flex-basis: calc((100% - 2 * var(--hgi-carousel-gap)) / 3);
  aspect-ratio: 16 / 9;
}

@media (max-width: 921px) {
  .hgi-carousel--cta .hgi-carousel__slide {
    flex-basis: calc((100% - var(--hgi-carousel-gap)) / 2);
  }
}

/* 4:3 und nicht 9:16 auf dem Handy — so steht es in v84, Entscheidung Dirk am
   15.09. Der Unterschied ist erheblich: bei 390px Fensterbreite waere eine
   9:16-Karte 594px hoch, eine 4:3-Karte ist 260px hoch. Drei Karten
   uebereinander waeren im Hochformat knapp drei Bildschirme gewesen; die
   Wischreihe bleibt trotzdem, weil mobil eine Karte sichtbar ist. */
@media (max-width: 544px) {
  .hgi-carousel--cta .hgi-carousel__slide {
    flex-basis: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* Ganze Karte klickbar ueber den gestreckten Link: das Pseudoelement des
   ersten Buttons deckt die Karte ab. Button 2 liegt mit z-index darueber und
   bleibt erreichbar — sonst waere er unter der Flaeche begraben.
   Nebenwirkung, bewusst in Kauf genommen: Text in der Karte laesst sich nicht
   markieren. */
.hgi-carousel--cta .hgi-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hgi-carousel--cta .hgi-btn--link {
  position: relative;
  z-index: 1;
}

/* ─── Bedienelemente ──────────────────────────────────────────────────── */

/* Die Pfeile sitzen im Rahmen, nicht im Karussell — dadurch stehen sie
   ausserhalb der 1200px-Inhaltsspalte, 20px in der Gosse, so wie in v84
   (.hgi-offers-arrow). Der Klemmwert -8px laesst sie bei schmalen Fenstern
   leicht ueber die Kante ragen, statt in den Inhalt zu wandern.
   Anders als v84 werden sie NICHT unter 921px ausgeblendet: mobil laeuft die
   Kartenreihe einzeln und braucht sie (Vorgabe Dirk, 15.09.). */
.hgi-carousel__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Beim Hero ist der Rahmen vollbreit. Die Pfeile stehen GANZ ausserhalb der
   1200er-Spalte, in der Gosse, mit dem regulaeren Seitenabstand von 28px —
   gemessen von der SEITENBREITE, nicht von der Container-Breite (Dirk,
   21.09.2026).

   Vorher: max(-8px, calc(var(--hgi-gutter, 28px) - 20px)). Das ergab 180px
   und stellte den 40er-Kreis mit 173–213px genau AUF die Rasterkante bei
   193px — halb drin, halb draussen. Die Absicht "20px ausserhalb der Spalte"
   war richtig gedacht, traf die Kante aber mittig statt daneben.

   Einschraenkung, benannt statt versteckt: Der Rahmen ist ueber
   "width: 100vw; margin-left: calc(-50vw + 50%)" vollbreit gemacht, und
   100vw zaehlt eine klassische Bildlaufleiste mit. Wo der Browser eine
   solche zeichnet, steht der Pfeil deshalb um deren halbe Breite weiter
   links als 28px. Auf macOS mit ueberlagerten Leisten ist die Abweichung
   null. Das zu beheben hiesse, die Vollbreite des Rahmens umzubauen — ein
   eigener Vorgang, nicht Teil dieser Aenderung. */
.hgi-carousel--slider .hgi-carousel__nav--prev { left: 28px; }
.hgi-carousel--slider .hgi-carousel__nav--next { right: 28px; }

/* Bei der Kartenreihe endet der Kreis genau auf der Rasterkante — er steht
   vollstaendig ausserhalb des Rasters, ohne es zu beruehren (Dirk,
   21.09.2026, Lage bestaetigt am 24.09.).

   Seit dem 24.09. hat der Umschlag keinen seitlichen Innenabstand mehr, sein
   Rand IST die Achse. Damit genuegen die 40px Kreisbreite; die fruehere
   Rechnung "40px + Rinne" wuerde den Pfeil jetzt um eine Rinne zu weit nach
   links setzen.

   Die Untergrenze haelt ihn im Fenster: links der Achse steht nur
   --hgi-gutter-vw zur Verfuegung, und unterhalb von rund 1245px ist das
   weniger als der Kreis breit ist. Dort geht der Ueberschuss nach AUSSEN
   und nicht nach innen ueber die erste Karte (Vorgabe Dirk, 24.09.) — der
   Pfeil wandert bis an die Fensterkante und bleibt dort stehen.

   Ungenauigkeit, benannt statt versteckt: --hgi-gutter-vw rechnet mit 100vw
   und zaehlt damit eine klassische Bildlaufleiste mit. Wo der Browser eine
   zeichnet, steht der Pfeil an schmalen Fenstern um deren halbe Breite
   weiter links als die Fensterkante. Auf macOS mit ueberlagerten Leisten
   ist die Abweichung null. Derselbe Mechanismus wie beim Hero-Rahmen.

   max() und nicht min(), weil beide Werte negativ sind: gesucht ist der
   groessere, also der weniger weit nach links reichende. */
/* Der Kreis sitzt MITTIG AUF der Aussenkante der ersten und letzten Karte
   (Dirk, 24.09.2026, mit dem Mockup als Beleg) — halbe Kreisbreite nach
   aussen, also -20px bei 40px Durchmesser.
   
   Das ist ausdruecklich NICHT die Lage vom 21.09., als "halb drin, halb
   draussen" als Fehler beanstandet wurde. Dort war sie ungewollt und
   entstand aus einer Fehlrechnung; hier ist sie die Vorgabe aus dem
   Entwurf. Wer das spaeter wieder "korrigiert", macht es kaputt. */
/* Der Marken-Slider der Startseite (Theme, [hgi_marken]) nutzt dieselben
   Pfeile in derselben Lage (Dirk, 09.10.2026). */
:is(.hgi-carousel--cta, .hgi-marken-slider) .hgi-carousel__nav--prev {
  left: -20px;
}

:is(.hgi-carousel--cta, .hgi-marken-slider) .hgi-carousel__nav--next {
  right: -20px;
}

/* Das HTML-Attribut hidden ist im Browser-Stylesheet nur "[hidden]{display:
   none}" — jede eigene display-Angabe schlaegt es. Die Regel oben setzt
   display:flex, dadurch blieben Pfeile und Pausenknopf sichtbar, obwohl das
   Skript sie korrekt auf hidden gesetzt hatte (Dirk, 15.09.). Deshalb hier
   ausdruecklich zurueckgeholt. */
.hgi-carousel__nav[hidden],
.hgi-carousel__pause[hidden],
.hgi-carousel__bar [hidden] {
  display: none;
}

/* Pfeile und Pausenknopf erscheinen erst beim Ueberfahren — sie sind Werkzeug,
   nicht Gestaltung, und lagen im Ruhezustand als Fremdkoerper auf dem Bild.
   :focus-within ist dabei nicht optional: ohne sie waere die Bedienung fuer
   Tastaturnutzer unerreichbar, und der Pausenknopf ist bei Automatik ueber
   5 Sekunden Pflicht (WCAG 2.2.2). Nur fuer Geraete mit Zeigegeraet — auf
   Touch gibt es kein Hover, dort regelt die Regel weiter unten. */
@media (hover: hover) {
  /* Zwei Dauern mit Absicht: die Blende beim Erscheinen liegt auf der
     Hover-Regel und dauert 300 ms, die Grunddauer von 150 ms gilt damit nur
     beim Verschwinden. Ein Werkzeug darf ruhig auftauchen und soll zuegig
     wieder gehen — gleiche Dauer in beide Richtungen fuehlt sich beim
     Verlassen traege an. */
  .hgi-carousel__nav,
  .hgi-carousel__pause {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .hgi-carousel:hover .hgi-carousel__nav,
  .hgi-carousel:hover .hgi-carousel__pause,
  .hgi-carousel:focus-within .hgi-carousel__nav,
  .hgi-carousel:focus-within .hgi-carousel__pause,
  .hgi-marken-slider:hover .hgi-carousel__nav,
  .hgi-marken-slider:focus-within .hgi-carousel__nav {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
  }
}

/* Auf Touch keine Bedienung: gewischt wird ohnehin, und das Autoplay laeuft
   weiter (Entscheidung Dirk, 15.09., Variante 3 von drei vorgelegten).
   Bewusst in Kauf genommen: damit gibt es auf dem Handy keinen Weg, die
   Bewegung anzuhalten — WCAG 2.2.2 verlangt das bei Automatik ueber 5
   Sekunden. Die Alternative waere gewesen, auf Touch nicht automatisch zu
   wechseln; sie wurde verworfen. Bei reduzierter Bewegung laeuft das Autoplay
   ohnehin nicht, dort greift die Einstellung des Systems. */
@media (hover: none) {
  .hgi-carousel__nav,
  .hgi-carousel__pause,
  .hgi-carousel__bar {
    display: none;
  }
}

/* Drei Spalten statt zentriertem Flex, damit die Punkte wirklich in der
   Mitte stehen (Jonas/Dirk, 24.09.2026).
   
   Vorher war die Leiste ein zentrierter Flex-Container mit zwei Kindern:
   den Punkten und dem Pausenknopf. Der Knopf steht auf opacity:0, bis er
   gebraucht wird — unsichtbar, aber 63px breit. Zentriert wurde damit die
   GRUPPE, und die Punktreihe sass gemessene 39,5px links der Mitte. Ein
   Versatz, den man sieht, ohne zu erkennen, woran er liegt, weil das
   verantwortliche Element nicht zu sehen ist.

   Der Knopf bleibt im Fluss und fokussierbar, er haengt jetzt in der
   rechten Spalte an den Punkten. Die mittlere Spalte ist genau so breit
   wie die Punkte, die beiden aeusseren teilen sich den Rest — damit steht
   die Reihe mittig, unabhaengig davon, was daneben liegt. */
/* Die Leiste mit Punktreihe und Pausenknopf ist am 24.09.2026 entfallen
   (Dirk). Der Pausenknopf ist geblieben, aber nur noch fuer die Tastatur:
   Der Hero laeuft von selbst weiter, und WCAG 2.2.2 verlangt dafuer eine
   Anhaltemoeglichkeit. Aus dem Lesefluss genommen wie ein
   Sprunglink — nicht ueber display:none, denn was nicht dargestellt wird,
   ist auch fuer Screenreader und Tastatur weg. Beim Fokus kommt er zurueck. */
.hgi-carousel__pause--nurfokus {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hgi-carousel__pause--nurfokus:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 12px auto 0;
  padding: 6px 14px;
  overflow: visible;
  clip-path: none;
  display: block;
  background: var(--hgi-surface, #fff);
  border: 1px solid var(--hgi-primary, #3d1b04);
  border-radius: 999px;
  font-size: 12px;
}

/* Ebenfalls doppelt qualifiziert: die Punkte sind ein <ol> und fielen sonst
   derselben revert-Regel zum Opfer wie der Track. */
.hgi-carousel__dots,
.entry-content .hgi-carousel__dots {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hgi-carousel__dot { cursor: pointer; }

.hgi-carousel__pause { cursor: pointer; }

/* ─── Zwei Zustaende ohne Karussell ───────────────────────────────────── */

/* is-single kommt aus PHP: ein einziger Eintrag, also gar keine
   Karussell-Struktur — kein Viewport, keine Spur, keine Bedienelemente. Die
   Folie liegt direkt im Container.
   is-idle kommt aus dem Skript: die Struktur ist da, aber in DIESER
   Fensterbreite ist nichts zu schieben (drei Karten, drei sichtbar). Beide
   Zustaende bewusst getrennt benannt — mit einer gemeinsamen Klasse wuerde die
   Grid-Regel unten im zweiten Fall auf Viewport und Leiste angewendet und das
   Layout zerlegen. */

/* Eine einzelne CTA-Karte behaelt die Breite, die sie in der Dreierreihe
   haette, statt auf die volle Inhaltsbreite zu wachsen — ein 16:9-Block ueber
   1200px waere 675px hoch. */
.hgi-carousel--cta.is-single {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hgi-carousel-gap);
}

@media (max-width: 921px) {
  .hgi-carousel--cta.is-single { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 544px) {
  .hgi-carousel--cta.is-single { grid-template-columns: 1fr; }
}

/* Ohne Spur ist die Folie kein Flex-Item mehr; flex-basis greift nicht, das
   Seitenverhaeltnis und der eigene Flex-Kontext der Folie schon. */
.hgi-carousel.is-single .hgi-carousel__slide { flex-basis: auto; }

/* Nichts zu schieben: die leere Leiste soll keinen Abstand aufspannen. */
.hgi-carousel.is-idle .hgi-carousel__bar { display: none; }

/* ─── Bearbeiten-Stift (nur Redakteure) ───────────────────────────────── */

/* z-index 4 liegt ueber allem in der Folie: Bild 0, Verlauf 1, Text 2,
   Pfeile 3. Entscheidend ist der Abstand zur CTA-Karte, deren erster Button
   per gestrecktem Link die ganze Flaeche abdeckt — ohne die hoehere Ebene
   waere der Stift nicht anklickbar, sondern der Kartenlink. */
.hgi-slide__edit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}

.hgi-slide__edit svg {
  width: 14px;
  height: 14px;
  display: block;
}