/* Cover-Stile fuer GalleryDesign — Split / Centered / Scrapbook Varianten.
   Klassen-Namensraum gd-cover* (Gallery Designed).
   --gd-cover-bg / --gd-cover-h werden ueber Modifier-Klassen + inline-Style gesetzt. */

/* ------- Hoehen-Varianten (cover_height) ------- */
.gd-cover.gd-cover--h-compact, .cover-scrapbook.gd-cover--h-compact { --gd-cover-h: 40vh; --gd-cover-h-min: 320px; }
.gd-cover.gd-cover--h-normal,  .cover-scrapbook.gd-cover--h-normal  { --gd-cover-h: 60vh; --gd-cover-h-min: 420px; }
.gd-cover.gd-cover--h-tall,    .cover-scrapbook.gd-cover--h-tall    { --gd-cover-h: 80vh; --gd-cover-h-min: 540px; }
.gd-cover.gd-cover--h-full,    .cover-scrapbook.gd-cover--h-full    { --gd-cover-h: 100vh; --gd-cover-h-min: 600px; }

/* ------- Basis ------- */
.gd-cover {
  width: 100%;
  margin-bottom: var(--gd-spacing, 1rem);
}

/* ------- Textblock-Transform: liest --text-offset (0-100, 50=neutral).
   Geclampt auf ±40vh, damit Slider-Werte nahe 0/100 den Text fast bis
   an den oberen/unteren Rand des Covers schieben koennen — wichtig fuer
   den Tear-Edge-Look, bei dem Titel/Branding direkt auf der Maske liegen
   sollen. ------- */
.gd-cover__textblock {
  transform: translateY(clamp(-40vh, calc((var(--text-offset, 50) - 50) * 8px), 40vh));
}

/* ------- Text-Bar (Fullscreen): liest --bar-pos / --bar-h / --bar-op,
   im Mobile-Media-Query mit *-mobile-Vars ueberschreibbar. ------- */
.gd-cover__text-bar {
  position: absolute;
  left: 0; right: 0;
  top: var(--bar-pos, 50%);
  transform: translateY(-50%);
  height: var(--bar-h, 25vh);
  opacity: var(--bar-op, 70%);
  pointer-events: none;
  z-index: 0;
}
/* Top-only-Modus: Bar reicht von Position bis Container-Boden — fuer den
   klassischen Overlay-Look mit oberer Riss-Kante und vollflaechiger Farbe
   bis zum unteren Bildrand. Hoehe und translateY werden ueberschrieben.
   bottom:-2px gleicht Sub-Pixel-Rundungen aus, overflow:hidden am Cover-
   Container faengt den Ueberstand ab. */
.gd-cover__text-bar--top-only {
  bottom: -2px;
  height: auto;
  transform: none;
}

/* ------- Boho-Dekoration: Eck- und Title-Divider-Overlays -------
   --gd-deco-size und --gd-deco-opacity werden inline am Cover-Container
   als dimensionslose Zahlen gesetzt (z.B. 100, 150). Das erlaubt im
   calc() eine saubere Multiplikation ohne CSS-Prozent-von-Prozent-Falle. */
.gd-cover__deco {
  pointer-events: none;
  opacity: calc(var(--gd-deco-opacity, 80) / 100);
}
.gd-cover__deco svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Eck-Slots: absolute Position, Groesse skaliert via --gd-deco-size.
   Default-Basis 80px → mit size 100 = 80px, mit 200 = 160px. */
.gd-cover__deco--corner {
  position: absolute;
  width: calc(80px * var(--gd-deco-size, 100) / 100);
  z-index: 2;
}
.gd-cover__deco--top-left     { top: 1.25rem; left: 1.25rem; }
.gd-cover__deco--top-right    { top: 1.25rem; right: 1.25rem; }
.gd-cover__deco--bottom-left  { bottom: 1.25rem; left: 1.25rem; }
.gd-cover__deco--bottom-right { bottom: 1.25rem; right: 1.25rem; }
/* Title-Divider: laeuft im Textblock, schmaler als Cover-Breite. */
.gd-cover__deco--divider {
  width: calc(120px * var(--gd-deco-size, 100) / 100);
}
/* Frame-Slot: Overlay ueber das gesamte Cover. Das SVG nutzt
   preserveAspectRatio="none" und streckt sich auf die volle Flaeche.
   z-index:1 — unter Eck-Icons (z2), unter Text/Logo (z3). */
.gd-cover__deco--frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.gd-cover__deco--frame svg {
  width: 100%;
  height: 100%;
}

/* ------- Boho-Deko Einfade-Animation -------
   Eck-Icons blitzen leicht auf (scale + brightness-Pulse), Title-Divider
   gleiten von oben/unten ein. Animation laeuft auf dem inneren <svg>,
   damit die Container-Opacity (--gd-deco-opacity) als finaler Multiplier
   greift. animation-fill-mode:both haelt Start- und Endzustand.
   prefers-reduced-motion deaktiviert alles. */
@keyframes gd-deco-glow-in {
  0%   { opacity: 0; transform: scale(0.7); filter: brightness(2.5); }
  60%  { opacity: 1; transform: scale(1.08); filter: brightness(1.5); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes gd-deco-slide-from-top {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes gd-deco-slide-from-bottom {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.gd-cover__deco svg {
  animation: gd-deco-glow-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.gd-cover__deco--top-left     svg { animation-delay: 0.20s; }
.gd-cover__deco--top-right    svg { animation-delay: 0.35s; }
.gd-cover__deco--bottom-left  svg { animation-delay: 0.50s; }
.gd-cover__deco--bottom-right svg { animation-delay: 0.65s; }
.gd-cover__deco--divider-top svg {
  animation: gd-deco-slide-from-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}
.gd-cover__deco--divider-bottom svg {
  animation: gd-deco-slide-from-bottom 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.30s both;
}
@keyframes gd-deco-frame-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.gd-cover__deco--frame svg {
  animation: gd-deco-frame-fade-in 0.9s ease-out 0.05s both;
}
@media (prefers-reduced-motion: reduce) {
  .gd-cover__deco svg,
  .gd-cover__deco--divider-top svg,
  .gd-cover__deco--divider-bottom svg,
  .gd-cover__deco--frame svg {
    animation: none;
  }
}

/* ------- Split (40/60 oder 60/40) ------- */
.gd-cover--split {
  display: grid;
  grid-template-columns: 40% 60%;
  height: var(--gd-cover-h, 60vh);
  min-height: var(--gd-cover-h-min, 420px);
  max-height: var(--gd-cover-h, 60vh);
}
.gd-cover--split_right {
  grid-template-columns: 60% 40%;
}
.gd-cover--split_right .gd-cover__text  { order: 2; }
.gd-cover--split_right .gd-cover__image { order: 1; }

.gd-cover__text {
  background: var(--gd-cover-bg, #f5f1ec);
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 5vw, 5rem);
  color: var(--gd-primary);
  overflow: hidden;
  /* Z-Index: Text-Spalte ueber Bild-Spalte. Bei translateY auf
     gd-cover__textblock kann der Text visuell aus der Spalte ragen — wenn er
     ueber der Bild-Spalte landet, soll er sichtbar bleiben statt vom Bild-
     Hintergrund verdeckt zu werden. */
  position: relative;
  z-index: 2;
}
.gd-cover__image {
  position: relative;
  z-index: 1;
}
.gd-cover__text--top    { justify-content: flex-start; }
.gd-cover__text--center { justify-content: center; }
.gd-cover__text--bottom { justify-content: flex-end; }

.gd-cover__image {
  position: relative;
  overflow: hidden;
  /* Bild-Spalten-Hintergrund: erst expliziter Override, dann Text-Spalten-Farbe,
     dann schwarz als Fallback fuer vollflaechige Rechteck-Bilder. */
  background: var(--gd-image-bg, var(--gd-cover-bg, #000));
}
.gd-cover__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------- Centered (Bild + Text gestapelt) ------- */
.gd-cover--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--gd-cover-h, 60vh);
  min-height: var(--gd-cover-h-min, 420px);
  max-height: var(--gd-cover-h, 60vh);
  background: var(--gd-cover-bg);
  padding: clamp(2rem, 5vw, 5rem) 1rem;
  text-align: center;
  overflow: hidden;
}
.gd-cover--centered_dark {
  color: #fff;
}
.gd-cover--centered_dark:not([style*="--gd-cover-bg"]) {
  background: #1a1a1a;
}
.gd-cover--centered_dark .gd-cover__title,
.gd-cover--centered_dark .gd-cover__meta { color: inherit; }

.gd-cover--centered_light {
  color: #1a1a1a;
}
.gd-cover--centered_light:not([style*="--gd-cover-bg"]) {
  background: #f5f1ec;
}

.gd-cover--centered.gd-cover__text--top    { justify-content: flex-start; }
.gd-cover--centered.gd-cover__text--center { justify-content: center; }
.gd-cover--centered.gd-cover__text--bottom { justify-content: flex-end; }

.gd-cover__circle {
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto 2rem;
}
.gd-cover__circle--circle  { border-radius: 50%; aspect-ratio: 1; width: 360px; height: 360px; }
.gd-cover__circle--rounded { border-radius: 16px; }
.gd-cover__circle--rect    { border-radius: 0; }

/* Centered: --image-size skaliert die Default-Bildgroesse (100 = Default, 50 = halb).
   --img-eff ist die effektive Groesse (im Media-Query unten ggf. mit Mobile ueberschrieben). */
.gd-cover--centered .gd-cover__circle {
  --img-eff: var(--image-size, 100);
  width: calc(360px * var(--img-eff) / 100);
  height: auto;
  max-width: calc(400px * var(--img-eff) / 100);
  max-height: calc(400px * var(--img-eff) / 100);
}
.gd-cover--centered .gd-cover__circle--circle {
  width: calc(360px * var(--img-eff) / 100);
  height: calc(360px * var(--img-eff) / 100);
}

/* Split mit Bild-Form: Wrapper positioniert + skaliert das Bild in der Spalte */
.gd-cover__image-shaped {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gd-cover__image-shaped {
  --img-eff: var(--image-size, 80);
}
.gd-cover__image-shaped .gd-cover__circle {
  position: absolute;
  top: var(--image-offset-y, 50%);
  left: 50%;
  /* Translate fuers Zentrieren + optionale Rotation kombiniert.
     Bei rect/rounded/circle ist --image-rotation 0, also kein visueller Effekt. */
  transform: translate(-50%, -50%) rotate(calc(var(--image-rotation, 0) * 1deg));
  width: calc(var(--img-eff) * 1%);
  height: auto;
  max-width: 92%;
  max-height: 92%;
  margin: 0;
}
.gd-cover__image-shaped .gd-cover__circle--circle {
  width: calc(var(--img-eff) * 1%);
  aspect-ratio: 1;
  height: auto;
  max-width: 80%;
  max-height: 80%;
}

/* Drehung fuer alle non-rect Shapes — gemeinsame Regel statt pro Shape duplizieren.
   Im Split-Wrapper (.gd-cover__image-shaped) wird das transform mit translate
   kombiniert; die dortige spezifischere Regel ueberschreibt diese hier. */
.gd-cover__circle--rounded,
.gd-cover__circle--circle,
.gd-cover__circle--framed,
.gd-cover__circle--polaroid {
  transform: rotate(calc(var(--image-rotation, 0) * 1deg));
  transform-origin: center;
}

/* Generischer Schatten fuer abgerundet/rund — fuer framed+polaroid wird er
   weiter unten ueberschrieben, weil der Look dort eigene Tiefe braucht. */
.gd-cover__circle--rounded,
.gd-cover__circle--circle {
  box-shadow:
    0 calc(6px * var(--shadow-pct, 50) / 50) calc(24px * var(--shadow-pct, 50) / 50) rgba(0, 0, 0, calc(0.18 * var(--shadow-pct, 50) / 50));
}

/* Mit Rahmen — wie ein gerahmtes Foto an der Wand.
   Farbe, Breite, Drehung, Schatten kommen als CSS-Variablen. */
.gd-cover__circle--framed {
  border-radius: 0;
  padding: var(--frame-width, 12px);
  background: var(--frame-color, #ffffff);
  box-shadow:
    0 calc(6px * var(--shadow-pct, 50) / 50) calc(28px * var(--shadow-pct, 50) / 50) rgba(0, 0, 0, calc(0.18 * var(--shadow-pct, 50) / 50)),
    0 1px 3px rgba(0, 0, 0, calc(0.10 * var(--shadow-pct, 50) / 50));
  box-sizing: content-box;
}
.gd-cover--centered_dark .gd-cover__circle--framed {
  box-shadow:
    0 calc(6px * var(--shadow-pct, 50) / 50) calc(28px * var(--shadow-pct, 50) / 50) rgba(0, 0, 0, calc(0.45 * var(--shadow-pct, 50) / 50)),
    0 1px 3px rgba(0, 0, 0, calc(0.25 * var(--shadow-pct, 50) / 50));
}

/* Polaroid — dicker Rand unten fuer Beschriftung */
.gd-cover__circle--polaroid {
  border-radius: 2px;
  padding: 14px 14px 56px 14px;
  background: #fdfdfa;
  box-shadow:
    0 calc(8px * var(--shadow-pct, 50) / 50) calc(32px * var(--shadow-pct, 50) / 50) rgba(0, 0, 0, calc(0.20 * var(--shadow-pct, 50) / 50)),
    0 2px 4px rgba(0, 0, 0, calc(0.08 * var(--shadow-pct, 50) / 50));
  box-sizing: content-box;
}
.gd-cover--centered_dark .gd-cover__circle--polaroid {
  background: #f4f0ea;
  box-shadow:
    0 calc(8px * var(--shadow-pct, 50) / 50) calc(32px * var(--shadow-pct, 50) / 50) rgba(0, 0, 0, calc(0.50 * var(--shadow-pct, 50) / 50)),
    0 2px 4px rgba(0, 0, 0, calc(0.20 * var(--shadow-pct, 50) / 50));
}

/* ------- Logo (in Textspalte bei Split, oben bei Centered) ------- */
.gd-cover__logo {
  max-height: calc(2.5rem * var(--gd-logo-scale, 1));
  max-width: calc(180px * var(--gd-logo-scale, 1));
  object-fit: contain;
  margin-bottom: 1.5rem;
  display: block;
}
.gd-cover--centered .gd-cover__logo {
  margin: 0 auto 2rem;
}

.gd-cover__meta {
  font-size: .9375rem;
  margin: .75rem 0 0;
  opacity: .85;
}

/* ------- Typografie-Varianten ------- */
.gd-cover__title {
  margin: 0;
  line-height: 1.1;
  letter-spacing: .01em;
  /* Schrift aus globaler Title-Variable, Fallback auf Body-Font, dann inherit */
  font-family: var(--gd-font-titel, var(--gd-font, inherit));
}
.gd-cover__meta {
  font-family: var(--gd-font-branding, var(--gd-font, inherit));
}
.gd-cover__title--normal {
  font-size: calc(clamp(1.5rem, 5vw, 3rem) * var(--gd-title-scale, 1));
  font-weight: 600;
}
.gd-cover__title--gross {
  font-size: calc(clamp(2.5rem, 8vw, 5rem) * var(--gd-title-scale, 1));
  font-weight: 700;
  letter-spacing: -.02em;
}
/* Editorial = italic + grosszuegig, Schrift erbt von der globalen schriftart-Wahl
   (vorher hardcoded Cormorant Garamond — User-Schriftauswahl griff dort nicht). */
.gd-cover__title--editorial {
  font-size: calc(clamp(2rem, 6vw, 4rem) * var(--gd-title-scale, 1));
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
}

/* ------- Scrapbook (Papierkanten-Look) ------- */
.cover-scrapbook {
  position: relative;
  height: var(--gd-cover-h, 60vh);
  min-height: var(--gd-cover-h-min, 420px);
  max-height: var(--gd-cover-h, 60vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 4rem);
}
.cover-scrapbook__frame {
  position: relative;
  z-index: 1;
  padding: var(--frame-width, 7px);
  max-width: 75%;
  max-height: calc(var(--gd-cover-h, 60vh) - 4rem);
  display: block;
  box-sizing: border-box;
}
.cover-scrapbook__frame--white {
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.cover-scrapbook__frame--dark {
  background: #1a1a1a;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
}
.cover-scrapbook__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(var(--gd-cover-h, 60vh) - 4rem - 2 * var(--frame-width, 7px));
  object-fit: cover;
}
.cover-scrapbook__paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
.cover-scrapbook__placeholder {
  max-width: 480px;
  padding: 1.5rem 2rem;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: .9375rem;
  color: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.cover-scrapbook__placeholder p { margin: 0; line-height: 1.5; }

.cover-scrapbook__title {
  position: absolute;
  z-index: 3;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12%;
  width: min(90%, 720px);
}
.cover-scrapbook__title.gd-cover__text--top    { bottom: auto; top: 8%; }
.cover-scrapbook__title.gd-cover__text--center { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.cover-scrapbook__title.gd-cover__text--bottom { bottom: 12%; top: auto; }

/* ------- Mobile: Splits stapeln. Breakpoint bewusst klein gewaehlt,
   damit der Editor-Preview-Iframe (~700-1000px breit) auf normalen
   Laptop-Bildschirmen das Side-by-Side-Layout zeigt. ------- */
@media (max-width: 600px) {
  /* Mobile: Splits werden wie Centered behandelt — flex-column, gemeinsamer
     Hintergrund am aeusseren Container, beide inneren Container transparent.
     Vermeidet das "Zwei-Felder-Split"-Aussehen und Probleme mit Bild-Clipping
     beim Verschieben. */
  .gd-cover--split,
  .gd-cover--split_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--gd-cover-h, 60vh);
    min-height: var(--gd-cover-h-min, 320px);
    max-height: var(--gd-cover-h, 60vh);
    background: var(--gd-cover-bg, #f5f1ec);
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
    text-align: center;
    overflow: hidden;
    /* Grid-Properties aus dem Desktop-Block neutralisieren */
    grid-template-columns: none;
    grid-template-rows: none;
  }
  /* Beide Spalten verlieren ihren eigenen Hintergrund, Padding und feste Hoehe */
  .gd-cover--split .gd-cover__image,
  .gd-cover--split_right .gd-cover__image,
  .gd-cover--split .gd-cover__text,
  .gd-cover--split_right .gd-cover__text {
    background: transparent;
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
  }
  /* Bild oben: max 55 % der Cover-Hoehe, zentriert, object-fit: contain
     damit es proportional skaliert und nicht abgeschnitten wird */
  .gd-cover--split .gd-cover__image,
  .gd-cover--split_right .gd-cover__image {
    order: 1;
    max-height: 55%;
    max-width: min(420px, 100%);
    margin: 0 auto 1.25rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gd-cover--split .gd-cover__image > img,
  .gd-cover--split_right .gd-cover__image > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* Image-shaped Wrapper (non-rect): feste Hoehe = 55% der Cover-Hoehe */
  .gd-cover--split .gd-cover__image-shaped,
  .gd-cover--split_right .gd-cover__image-shaped {
    width: 100%;
    height: calc(var(--gd-cover-h, 60vh) * 0.55);
    max-height: 100%;
  }
  /* Text unten, zentriert */
  .gd-cover--split .gd-cover__text,
  .gd-cover--split_right .gd-cover__text {
    order: 2;
    align-items: center;
    text-align: center;
  }
  /* Centered: Hoehe aus --gd-cover-h, damit cover_height_mobile (compact/full)
     bis 100vh sichtbar wirkt. Vorher: height:auto ueberschrieb den Mobile-Slider. */
  .gd-cover--centered {
    height: var(--gd-cover-h, 60vh);
    min-height: var(--gd-cover-h-min, 420px);
    max-height: var(--gd-cover-h, 60vh);
  }
  /* Centered+Circle: 220px Default-Mobile-Groesse, ABER nur wenn der User keine
     Mobile-Override gesetzt hat (style enthaelt nicht --image-size-mobile).
     Bei gesetzter Mobile-Override soll --img-eff aus dem Slider regieren. */
  .gd-cover--centered > .gd-cover__circle--circle:not([style*="image-size-mobile"]) {
    width: 220px;
    height: 220px;
  }
  /* Scrapbook: Hoehe aus --gd-cover-h, damit cover_height_mobile bis 100vh
     sichtbar wirkt. __frame/__photo-Regeln entfernt — wurden beim Scrapbook-
     Entkernen obsolet (kein Foto+Rahmen mehr im Layout). */
  .cover-scrapbook {
    height: var(--gd-cover-h, 60vh);
    min-height: var(--gd-cover-h-min, 420px);
    max-height: var(--gd-cover-h, 60vh);
    padding: 1rem;
  }

  /* ------- Mobile-Overrides aus dem Editor (cover_*_mobile-Felder) ------- */
  /* Vertikale Textposition: --text-offset-mobile ueberschreibt --text-offset.
     Range identisch zu Desktop (±40vh / 8px), damit Slider-Werte konsistent
     wirken — wichtig, wenn Tear-Edge aktiv ist und Text auf der Maske liegen soll. */
  .gd-cover__textblock {
    transform: translateY(clamp(-40vh, calc((var(--text-offset-mobile, var(--text-offset, 50)) - 50) * 8px), 40vh));
  }
  /* Text-Bar Mobile-Overrides */
  .gd-cover__text-bar {
    top: var(--bar-pos-mobile, var(--bar-pos, 50%));
    height: var(--bar-h-mobile, var(--bar-h, 25vh));
    opacity: var(--bar-op-mobile, var(--bar-op, 70%));
  }
  /* Top-Only-Modus muss auch auf Mobile bis zum Cover-Boden reichen.
     Spezifischere Regel als der reine .gd-cover__text-bar-Selector oben,
     damit height/transform nicht zurueck auf Bar-Hoehe gesetzt werden. */
  .gd-cover__text-bar--top-only {
    height: auto;
    transform: none;
    bottom: -2px;
  }
  /* Eck-Dekorationen optional auf Mobile ausblenden (Title-Divider bleiben). */
  .gd-cover--deco-hide-corners-mobile .gd-cover__deco--corner {
    display: none;
  }
  /* Bildgroesse: --image-size-mobile ueberschreibt die effektive Groesse */
  .gd-cover__image-shaped {
    --img-eff: var(--image-size-mobile, var(--image-size, 80));
  }
  .gd-cover--centered .gd-cover__circle {
    --img-eff: var(--image-size-mobile, var(--image-size, 100));
  }
  /* Vertikale Bildposition Mobile: --image-offset-y-mobile ueberschreibt --image-offset-y */
  .gd-cover__image-shaped .gd-cover__circle {
    top: var(--image-offset-y-mobile, var(--image-offset-y, 50%));
  }
  /* Cover-Hoehe Mobile via separate Klasse — min-Werte deutlich kleiner als
     Desktop, damit auf Mobile-Mockups (390x844) und kleinen Handys nicht alle
     vier Stufen gleich gross wirken. */
  .gd-cover.gd-cover--h-mobile-compact, .cover-scrapbook.gd-cover--h-mobile-compact { --gd-cover-h: 40vh; --gd-cover-h-min: 240px; }
  .gd-cover.gd-cover--h-mobile-normal,  .cover-scrapbook.gd-cover--h-mobile-normal  { --gd-cover-h: 60vh; --gd-cover-h-min: 320px; }
  .gd-cover.gd-cover--h-mobile-tall,    .cover-scrapbook.gd-cover--h-mobile-tall    { --gd-cover-h: 80vh; --gd-cover-h-min: 480px; }
  .gd-cover.gd-cover--h-mobile-full,    .cover-scrapbook.gd-cover--h-mobile-full    { --gd-cover-h: 100vh; --gd-cover-h-min: 600px; }
}