/* Matrix Marketing – Startseite: «Aus dem MEISTERWERK» (13.10.2026). Gilt zusammen mit assets/js/heft-galerie.js.
   Die Lesefassung der Magazinseiten: alle 27 Arbeiten in drei Reitern (Titelseiten, Firmenporträts, Geschäftsempfehlungen),
   je ein seitlich schiebbares Band; am Ende der Titelseiten das leere Heft «Ihr Betrieb» (Titel-Vorschau, titel-probe.js/.css).
   Ohne JS: keine Reiterleiste, die drei Gruppen stehen mit ihrer h3 untereinander, jedes Band lässt sich schieben.
   Ausgangszustände der Bewegung gelten nur unter .hg-bereit (setzt das Skript); Bewegung nur mit transform und opacity,
   bei «weniger Bewegung» nur Einblenden. Keine Schatten, keine Rundungen. */

.hg { --hg-h: min(clamp(300px, 29vw, 460px), 62vh); }   /* Bildhöhe im Band */
/* Pflicht: main.css kennt keine allgemeine [hidden]-Regel, display: flex würde hidden sonst überschreiben */
.hg-leiste[hidden], .hg-tafel[hidden] { display: none; }

/* ------------------------------------------------------------------ Reiterleiste (Optik wie die Rubrikleiste von /arbeiten) */
.hg-leiste {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: clamp(40px, 4vw, 56px);
  border-block: 1px solid var(--linie);
}
.hg-reiter {
  display: flex; align-self: stretch; min-width: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  /* 12 px nach links: der Fokusrahmen des ersten Reiters liegt so neben dem Wort, nicht darüber; 1 px nach unten: die Goldlinie
     liegt auf der Haarlinie der Leiste */
  margin: 0 0 -1px -12px; padding-bottom: 1px;
}
.hg-reiter::-webkit-scrollbar { display: none; }
.hg-reiter [role="tab"] {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 26px;
  font: 500 15px/1 var(--f-text); letter-spacing: .005em; color: var(--text-2); white-space: nowrap;
  transition: color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.hg-reiter [role="tab"]:first-child { padding-left: 12px; }
.hg-reiter [role="tab"] + [role="tab"] { border-left: 1px solid var(--linie); }
.hg-reiter [role="tab"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease);
}
.hg-reiter [role="tab"]:first-child::after { left: 12px; }
.hg-reiter [role="tab"][aria-selected="true"] { color: var(--elfenbein); }
.hg-reiter [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .hg-reiter [role="tab"]:hover { color: var(--gold); } }   /* am Touchscreen bleibt sonst der angetippte Reiter gold */
.hg-reiter [role="tab"]:focus-visible { outline-offset: -6px; }
.hg-reiter__zahl { font-size: 12px; letter-spacing: .04em; color: var(--grau); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.hg-reiter [role="tab"][aria-selected="true"] .hg-reiter__zahl { color: var(--gold); }
.hg-reiter__kurz { display: none; }

/* Pfeile: blättern das Band des gewählten Reiters */
.hg-pfeile { display: flex; gap: 8px; flex: none; }
.hg-pfeil {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--linie-stark); background: none; color: var(--gold);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.hg-pfeil .pfeil { width: 24px; height: 11px; }
.hg-pfeil--zurueck .pfeil { transform: scaleX(-1); }
@media (hover: hover) { .hg-pfeil:hover { border-color: var(--gold); } }
.hg-pfeil[aria-disabled="true"] { opacity: .35; cursor: default; }
.hg-pfeil[aria-disabled="true"]:hover { border-color: var(--linie-stark); }

/* ------------------------------------------------------------------ Tafeln */
.hg-tafel { margin-top: clamp(28px, 3vw, 44px); scroll-margin-top: 8px; }
/* Sprung zu einem Anker: die Leiste steht sichtbar über der Reihe (html hat scroll-padding für den Kopf) */
.hg-bereit .hg-tafel { scroll-margin-top: calc(60px + clamp(28px, 3vw, 44px) + 8px); }
.hg:not(.hg-bereit) .hg-leiste + .hg-tafel { margin-top: clamp(40px, 4vw, 56px); }   /* ohne JS: Abstand wie die Leiste */
.hg:not(.hg-bereit) .hg-tafel + .hg-tafel { margin-top: 48px; }
.hg-tafel__titel {
  margin-bottom: 18px;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 11px; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--elfenbein);
}
.hg-bereit .hg-tafel__titel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Band: reicht bis zum Rand von .rahmen, das angeschnittene Bild rechts zeigt, dass es weitergeht; nie breiter als das Fenster.
   Oben 16 px Luft (ausgeglichen mit −8 px): Platz für das Anheben um 4 px und die Ecken des gefächerten Stapels. */
.hg-band {
  display: flex; align-items: flex-start; gap: var(--spalt);
  margin: -8px calc(-1 * var(--rand)) 0; padding: 16px var(--rand) 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand);
  scrollbar-width: none; list-style: none;
}
.hg-band::-webkit-scrollbar { display: none; }
/* Mit Skript (14.10.2026): randabfallend bis an die Fensterkanten (--hg-l/--hg-r: Abstand der Inhaltsspalte zum Fensterrand,
   misst heft-galerie.js); der erste Eintrag steht bündig mit der Inhaltsspalte, am Ende schliesst der letzte mit ihr ab.
   Rechts läuft das Band weich aus (zeigt «hier geht es weiter»), links nur über dem Rand neben der Spalte. */
@property --hg-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hg-bereit .hg-band {
  --hg-fl: min(var(--hg-l, var(--rand)), 160px);
  --hg-fr: clamp(40px, var(--hg-r, var(--rand)), 160px);
  margin-inline: calc(-1 * var(--hg-l, var(--rand))) calc(-1 * var(--hg-r, var(--rand)));
  padding-inline: var(--hg-l, var(--rand)) calc(var(--hg-r, var(--rand)) + var(--hg-ende, 0px));   /* --hg-ende: heft-galerie.js */
  scroll-padding-inline: var(--hg-l, var(--rand)) var(--hg-r, var(--rand));
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .03) max(0px, calc(var(--hg-fl) - var(--spalt))), #000 var(--hg-fl), #000 calc(100% - var(--hg-fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .03) max(0px, calc(var(--hg-fl) - var(--spalt))), #000 var(--hg-fl), #000 calc(100% - var(--hg-fr)), transparent);
  transition: --hg-fr .35s var(--ease);
}
/* Runde 9 (14.10.2026, Gutachten: «nach ‹weiter› ragt links ein ~70 px schmaler, hart abgeschnittener Rest in den Rand»): die Pfeile
   rasten auf den Anfang eines Eintrags ein (heft-galerie.js); der Rest der vorigen Arbeit liegt dann ganz im linken Rand und ist dort
   bis auf einen Hauch ausgeblendet (bis eine Spaltlücke vor der Spalte unter 3 %, danach weich bis zur Spaltenkante) */
.hg-bereit .hg-band.is-ende { --hg-fr: 0px; }
.hg-band { position: relative; }   /* Runde 9: Lage der Einträge (offsetLeft) unabhängig vom Blättern und von der Auftritts-Bewegung */
.hg-arbeit { flex: none; width: calc(var(--hg-h) * .7071); scroll-snap-align: start; }
.hg-tafel--quer .hg-arbeit { width: calc(var(--hg-h) * 1.3998); }
.hg-arbeit img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; background: #151515; }
.hg-tafel--titel .hg-arbeit img { aspect-ratio: 1200 / 1697; }
.hg-tafel--quer .hg-arbeit img { aspect-ratio: 1376 / 983; }
.hg-arbeit figcaption {
  display: grid; align-content: start; gap: 2px; margin-top: 12px; min-height: calc(3 * 1.4em);   /* alle Reiter gleich hoch */
  font-size: 13.5px; line-height: 1.4;
  font-size: clamp(12px, calc(var(--hg-h) * .045), 13.5px);   /* niedrige Fenster (Handy quer): schmale Blätter, kleinere Legende */
}
/* Zeigen oder Fokus auf eine Arbeit: der Kundenname wird gold – wie bei den Arbeiten auf /arbeiten und im früheren «Aus dem
   Heft» (die Regel in main.css gilt nur in .ref-stark); am Touchscreen nicht, dort bliebe der angetippte Name gold */
@media (hover: hover) { .hg-arbeit figure:has(.ref-stark__link:hover) .arbeit__kunde { color: var(--gold); } }
.hg-arbeit figure:has(.ref-stark__link:focus-visible) .arbeit__kunde { color: var(--gold); }

/* Anfrage-Kacheln im Format der Nachbarn */
.hg-frei .titelwand__karte { width: 100%; }
/* Runde 9 (14.10.2026): die Einladung bei den Firmenporträts hat Einzelseiten-Breite und die Höhe der Doppelseiten (vorher eine
   fast leere Fläche in Doppelseiten-Grösse) */
.hg-tafel--quer .hg-frei { width: calc(var(--hg-h) * .7071); }
.hg-tafel--quer .hg-frei .titelwand__karte { aspect-ratio: 210 / 297; }

/* ------------------------------------------------------------------ Heft «Ihr Betrieb» (letzter Eintrag der Titelseiten) */
/* Runde 5 (14.10.2026): der Rahmen (1 px Linie + 6 px Abstand) ragte am Bandende 7 px über die rechte Spaltenkante – das Heft
   rückt um genau so viel ein, der Rahmen schliesst bündig mit der Spalte ab */
/* Runde 9 (14.10.2026): Das Heft steht vorne – der Rahmen ragte links 7 px über die Textkante der Spalte. Er liegt jetzt im Eintrag
   (7 px Innenabstand beidseits, das Heft bleibt gleich gross): links bündig mit der Spalte, rechts voller Abstand zur nächsten
   Arbeit; die Zeilen darunter stehen bündig mit dem Rahmen */
.hg-probe { box-sizing: content-box; padding-inline: 7px; }
.hg-probe .hg-probe__text { margin-left: -7px; }
.hg-probe__link { display: block; color: inherit; container-type: inline-size; }
/* titel-probe.css setzt sonst die Breite und das translateY des Dialogs */
.hg-probe .tp-heft {
  width: 100%; transform: none;
  outline: 1px solid var(--linie-stark); outline-offset: 6px;
  transition: outline-color .35s var(--ease);
}
.hg-probe__link:hover .tp-heft { outline-color: var(--gold); }
.hg-probe__link:focus-visible { outline: none; }
.hg-probe__link:focus-visible .tp-heft { outline: 2px solid var(--gold); outline-offset: 6px; }
.hg-probe__link:hover .titelwand__los .pfeil, .hg-probe__link:focus-visible .titelwand__los .pfeil { transform: translateX(4px); }
/* drei Zeilen wie eine Bildunterschrift – so hoch wie die Legenden daneben (alle Reiter gleich hoch) */
.hg-probe__text { display: grid; justify-items: start; gap: 2px; margin-top: 13px; }
/* Schriftgrössen ausdrücklich (die Werte aus main.css gelten nur in .titelwand__karte); in schmalen Bändern (212 px) etwas
   kleiner, damit jede Zeile eine Zeile bleibt */
.hg-probe .titelwand__frage { font-size: clamp(12px, 6.9cqi, 15px); line-height: 1.25; }
.hg-probe .titelwand__frage em { line-height: 1; }
.hg-probe .titelwand__preis { font-size: clamp(12px, 5.8cqi, 12.5px); line-height: 1.3; color: var(--grau); }   /* Runde 5: nie unter 12 px (Handy quer vorher 9,9 px) */
.hg-probe .titelwand__los { font-size: 14px; line-height: 1.3; }
.hg-probe .tp-name.is-neu { animation: hg-name .6s var(--ease) both; }
@keyframes hg-name { from { opacity: 0; } }

/* ------------------------------------------------------------------ Fortschritt und Fuss */
.hg-fortschritt { position: relative; height: 1px; margin-top: 28px; background: var(--linie); overflow: hidden; }
.hg-fortschritt span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--gold); transform-origin: 0 0; transform: scaleX(0); }
.hg-fortschritt.is-voll { visibility: hidden; }
.hg:not(.hg-bereit) .hg-fortschritt { display: none; }

.hg-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-top: 22px; }
.hg-hinweis { max-width: 46em; }
.hg-hinweis__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hg-hinweis__maus { display: none; }
  .hg-hinweis__touch { display: inline; }
}

/* Grafikstudio: zweiter Link «Arbeiten aus dem Grafikstudio» neben «Alle Leistungen und Preise» */
.studio__mehr { display: flex; flex-wrap: wrap; gap: 14px 40px; }

/* ------------------------------------------------------------------ Tablet: kürzere Reiter, damit die Leiste ganz passt */
@media (min-width: 600px) and (max-width: 767px) {
  .hg-reiter [role="tab"] { padding: 0 18px; gap: 8px; }
  .hg-reiter [role="tab"]:first-child { padding-left: 12px; }
  .hg-reiter__voll { display: none; }
  .hg-reiter__kurz { display: inline; }
}

/* ------------------------------------------------------------------ Handy */
@media (max-width: 599px) {
  .hg-reiter__voll { display: none; }
  .hg-reiter__kurz { display: inline; }
  /* Zahl nur für Screenreader */
  .hg-reiter__zahl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hg-reiter [role="tab"] { height: 52px; padding: 0 14px; font-size: 14px; }
  .hg-reiter [role="tab"]:first-child { padding-left: 12px; }
  .hg-pfeile { display: none; }
  .hg-bereit .hg-tafel { scroll-margin-top: calc(52px + 28px + 8px); }
  .hg-band { scroll-snap-type: x mandatory; }
  .hg-arbeit { width: 68vw; }
  .hg-tafel--quer .hg-arbeit { width: 84vw; }
  .hg-arbeit figcaption{ font-size: 13px; }
  .hg-fortschritt { margin-top: 18px; }
  /* Runde 9 (14.10.2026): die Einladung vorne füllte den ersten Bildschirm – sie ist schmaler und niedriger, die nächste Arbeit
     steht rechts sichtbar angeschnitten daneben (390 px: rund 150 px statt 90 px) */
  .hg-arbeit.hg-probe, .hg-arbeit.hg-frei { width: 50vw; }
  .hg-tafel--quer .hg-frei .titelwand__karte { aspect-ratio: auto; height: 60vw; }   /* so hoch wie die Porträts (84vw × 983/1376) */
  .hg-frei .titelwand__karte { padding: 10% 9%; gap: 10px; }
  .hg-frei .titelwand__frage { font-size: clamp(14px, 8.6cqi, 21px); }
  .hg-frei .titelwand__preis { font-size: clamp(12px, 6.6cqi, 14px); line-height: 1.35; }
  .hg-frei .titelwand__los { font-size: clamp(12.5px, 7.2cqi, 15px); }
  /* 17.10.2026 (Gutachten Runde 10): das Vorschau-Heft bei den Titelseiten belegte noch 54 % der Breite (fast ganz schwarz),
     die Porsche-Titelseite daneben war stark angeschnitten – es ist jetzt rund ein Drittel breit (390 px: 133 statt 195 px),
     bleibt aber zuerst; die erste Titelseite steht zu rund vier Fünfteln im Bild */
  .hg-arbeit.hg-probe { width: 34vw; }
  .hg-probe .hg-probe__text { margin-top: 10px; }
  .hg-probe .titelwand__los { display: block; font-size: 13px; }   /* im Textfluss: der Pfeil folgt dem letzten Wort, auch wenn die Zeile umbricht */
  .hg-probe .titelwand__los .pfeil { display: inline-block; vertical-align: middle; margin-left: 6px; }
  .hg-probe .titelwand__frage, .hg-probe .titelwand__los { text-wrap: balance; }   /* «Vorschau / ansehen →» statt Pfeil allein in der Zeile */
}
@media (max-width: 359px) {
  .hg-reiter [role="tab"] { padding: 0 10px; font-size: 13.5px; }
  .hg-reiter [role="tab"]:first-child { padding-left: 12px; }
}

/* ------------------------------------------------------------------ Bewegung (nur mit Skript und ohne «weniger Bewegung») */
/* 1. Titelseiten, erster Auftritt ab 600 px: die ersten fünf Hefte liegen als gefächerter Stapel auf dem ersten und legen sich
      in die Reihe (zitiert den Fächer von /arbeiten, ohne feststehende Bühne); die Legenden blenden danach ein */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(-n+5) { transform-origin: 50% 100%; transition: transform 1.1s var(--ease); }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(1) { z-index: 5; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(2) { z-index: 4; transition-delay: 70ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(3) { z-index: 3; transition-delay: 140ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(4) { z-index: 2; transition-delay: 210ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(5) { z-index: 1; transition-delay: 280ms; }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(1) { transform: rotate(-6deg); }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(2) { transform: translateX(calc(-1 * (100% + var(--spalt)))) rotate(-3deg); }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(3) { transform: translateX(calc(-2 * (100% + var(--spalt)))); }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(4) { transform: translateX(calc(-3 * (100% + var(--spalt)))) rotate(3deg); }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(5) { transform: translateX(calc(-4 * (100% + var(--spalt)))) rotate(6deg); }
  .hg-bereit .hg-tafel--titel figcaption, .hg-bereit .hg-tafel--titel .hg-probe__text { transition: opacity .5s var(--ease) .9s; }
  .hg-bereit .hg-tafel--titel:not(.is-da) figcaption, .hg-bereit .hg-tafel--titel:not(.is-da) .hg-probe__text { opacity: 0; }
}
/* 2. Unter 600 px und die anderen Reiter beim ersten Zeigen: die ersten fünf Einträge steigen 24 px auf und blenden ein */
@media (prefers-reduced-motion: no-preference) {
  .hg-bereit .hg-tafel:not(.hg-tafel--titel) .hg-arbeit:nth-child(-n+5) { transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .hg-bereit .hg-tafel:not(.hg-tafel--titel) .hg-arbeit:nth-child(2) { transition-delay: 60ms; }
  .hg-bereit .hg-tafel:not(.hg-tafel--titel) .hg-arbeit:nth-child(3) { transition-delay: 120ms; }
  .hg-bereit .hg-tafel:not(.hg-tafel--titel) .hg-arbeit:nth-child(4) { transition-delay: 180ms; }
  .hg-bereit .hg-tafel:not(.hg-tafel--titel) .hg-arbeit:nth-child(5) { transition-delay: 240ms; }
  .hg-bereit .hg-tafel:not(.hg-tafel--titel):not(.is-da) .hg-arbeit:nth-child(-n+5) { opacity: 0; transform: translate3d(0, 24px, 0); }

  /* 3. Reiterwechsel: die neue Tafel gleitet 16 px aus der Richtung des Reiters herein */
  .hg-tafel.is-rein-vor { animation: hg-rein-vor .5s var(--ease) both; }
  .hg-tafel.is-rein-zurueck { animation: hg-rein-zurueck .5s var(--ease) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(-n+5) { transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(2) { transition-delay: 60ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(3) { transition-delay: 120ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(4) { transition-delay: 180ms; }
  .hg-bereit .hg-tafel--titel .hg-arbeit:nth-child(5) { transition-delay: 240ms; }
  .hg-bereit .hg-tafel--titel:not(.is-da) .hg-arbeit:nth-child(-n+5) { opacity: 0; transform: translate3d(0, 24px, 0); }
}
/* Handy (Runde 5, 14.10.2026: «beim Wischen träge»): die ersten Einträge steigen in 0,45 s auf, Staffelung halb so lang */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .hg-bereit .hg-tafel .hg-arbeit:nth-child(-n+5) { transition-duration: .45s, .45s; }
  .hg-bereit .hg-tafel .hg-arbeit:nth-child(2) { transition-delay: 30ms; }
  .hg-bereit .hg-tafel .hg-arbeit:nth-child(3) { transition-delay: 60ms; }
  .hg-bereit .hg-tafel .hg-arbeit:nth-child(4) { transition-delay: 90ms; }
  .hg-bereit .hg-tafel .hg-arbeit:nth-child(5) { transition-delay: 120ms; }
}
@keyframes hg-rein-vor { from { opacity: 0; transform: translate3d(16px, 0, 0); } }
@keyframes hg-rein-zurueck { from { opacity: 0; transform: translate3d(-16px, 0, 0); } }
@keyframes hg-ein { from { opacity: 0; } }
/* Weniger Bewegung: kein Stapel, keine Verschiebung, beim Reiterwechsel nur Einblenden (die Goldlinie zeichnet sich wie überall
   auf der Seite – keine Bewegung im Raum) */
@media (prefers-reduced-motion: reduce) {
  .hg-tafel.is-rein-vor, .hg-tafel.is-rein-zurueck { animation: hg-ein .4s var(--ease) both; }
}

/* ------------------------------------------------------------------ Druck: alle drei Gruppen, umbrochen */
@media print {
  .hg-leiste, .hg-pfeile, .hg-fortschritt { display: none !important; }
  .hg-tafel[hidden] { display: block; }
  .hg-tafel { animation: none !important; }
  .hg-bereit .hg-tafel__titel { position: static; width: auto; height: auto; margin: 0 0 18px; overflow: visible; clip: auto; white-space: normal; }
  .hg-band { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .hg-arbeit, .hg-arbeit figcaption, .hg-probe__text { opacity: 1 !important; transform: none !important; }
}