/* =========================================================
   GridCards 1.0.20 23.09.2026
   =========================================================
   Responsive Karten- und Rasterlayouts.

   Grundprinzip:
   - gc-grid   = gemeinsame Grid-Basis
   - gc-cards  = Standardmodus
   - gc-raster = kompakter Rastermodus
   - gc-itemcards = Artikelkartenmodus
   - gc-sidecards = kompakte Bild-Text-Karten
   - gc-splitcards = große Bild-Text-Flächen

   Gestaltung und Verhalten werden möglichst vollständig
   über CSS Custom Properties gesteuert.

   Modifikatorklassen sollen später vorzugsweise nur
   Variablen verändern.
   ========================================================= */


/* =========================================================
   1. Gemeinsame Variablen
   ========================================================= */

.gc-grid {

  /* ---------------------------------------------------------
     Grid / Layout
     --------------------------------------------------------- */

  --gc-min: 18rem; /* Mindestbreite einer Rasterspalte; z. B. 16rem–24rem. */
  --gc-gap: 1.5rem; /* Abstand zwischen den Karten; z. B. 1rem–2rem. */
  --gc-max-width: 1400px; /* Maximale Breite des gesamten Grids; z. B. 70rem oder 1400px. */
  --gc-grid-padding: clamp(.75rem, 2vw, 1rem); /* Innenabstand am äußeren Grid-Rand; z. B. 0 oder 1rem. */


  /* ---------------------------------------------------------
     Element / Frame
     --------------------------------------------------------- */

  --gc-item-background: #fff; /* Hintergrund jeder Karte; z. B. #fff oder #263238. */
  --gc-item-color: inherit; /* Grundfarbe des Kartentextes; inherit übernimmt die Layoutfarbe. */

  --gc-item-border-width: 1px; /* Breite des Kartenrahmens; 0 entfernt ihn. */
  --gc-item-border-style: solid; /* Linienart des Kartenrahmens; z. B. solid oder dashed. */
  --gc-item-border-color: #ddd; /* Farbe des Kartenrahmens; z. B. #ddd. */

  --gc-item-radius: .5rem; /* Abrundung der Kartenecken; 0 ergibt eckige Karten. */
  --gc-item-shadow: 0 1px 3px rgba(0, 0, 0, .08); /* Kartenschatten; none entfernt ihn. */


  /* ---------------------------------------------------------
     Card
     --------------------------------------------------------- */

  --gc-card-padding: 1.25rem; /* Innenabstand von Karteninhalt und Titel; z. B. 1rem–2rem. */


  /* ---------------------------------------------------------
     Artikelkarte
     --------------------------------------------------------- */

  --gc-itemcard-image-ratio: 16 / 9; /* Seitenverhältnis des Kopfbilds; z. B. 16 / 9 oder 4 / 3. */
  --gc-itemcard-image-fit: cover; /* Bildanpassung im Rahmen; cover beschneidet, contain zeigt alles. */
  --gc-itemcard-image-position: center; /* Position des Bildausschnitts; z. B. center oder center top. */
  --gc-item-overlay-min-height: 30rem; /* Mindesthöhe einer Overlay-Karte; z. B. 24rem–36rem. */
  --gc-item-overlay-color: #fff; /* Textfarbe auf der Overlay-Karte; z. B. #fff. */
  --gc-item-overlay-shade-top: rgba(0, 0, 0, .28); /* Abdunklung am oberen Bildrand; rgba-Farbe mit Deckkraft. */
  --gc-item-overlay-shade-middle: rgba(0, 0, 0, .38); /* Abdunklung in der Bildmitte; rgba-Farbe mit Deckkraft. */
  --gc-item-overlay-shade-bottom: rgba(0, 0, 0, .78); /* Abdunklung am unteren Bildrand; rgba-Farbe mit Deckkraft. */
  --gc-details-duration: 350ms; /* Dauer der Details-Animation; z. B. 250ms–500ms. */


  /* ---------------------------------------------------------
     Sidecard / Splitcard
     --------------------------------------------------------- */

  --gc-sidecard-image-width: 160px; /* Breite des Sidecard-Bildes; z. B. 120px–200px. */
  --gc-sidecard-image-ratio: 1 / 1; /* Seitenverhältnis des Sidecard-Bildes; 1 / 1 ist quadratisch. */
  --gc-sidecard-gap: 0; /* Abstand zwischen Sidecard-Bild und Text; z. B. 0 oder 1rem. */

  --gc-splitcard-image-share: 45%; /* Breitenanteil des Medienbereichs; mit Textanteil zusammen 100%. */
  --gc-splitcard-text-share: 55%; /* Breitenanteil des Textbereichs; mit Medienanteil zusammen 100%. */
  --gc-splitcard-media-min-height: 14rem; /* Mindesthöhe des Medienbereichs; z. B. 14rem–24rem. */
  --gc-splitcard-image-background: var(--gc-item-background); /* Farbe freier Medienflächen; Standard folgt dem Kartenhintergrund. */
  --gc-splitcard-image-fit: cover; /* Anpassung einzelner Medienbilder; cover oder contain. */
  --gc-splitcard-image-position: center; /* Ausschnitt einzelner Medienbilder; z. B. center top. */
  --gc-splitcard-heading-size: clamp(1.75rem, 4.25cqi, 4.5rem); /* Größe einer Überschrift in der breiten Medienhälfte. */
  --gc-splitcard-heading-size-mobile: clamp(1.75rem, 8cqi, 2.5rem); /* Überschriftgröße bei schmaler Karte; z. B. 2rem. */

  --gc-split-open-gap: clamp(1.5rem, 4vw, 4rem); /* Abstand zwischen Medien und Text im offenen Modus. */
  --gc-split-open-padding-block: clamp(1rem, 3vw, 3rem); /* Vertikaler Innenabstand des offenen Textbereichs. */
  --gc-split-open-image-radius: var(--gc-item-radius); /* Abrundung des offenen Medienbildes; 0 oder Kartenradius. */

  --gc-side-image-fit: cover; /* Anpassung des Sidecard-Bildes; cover oder contain. */
  --gc-side-image-position: center; /* Ausschnitt des Sidecard-Bildes; z. B. center top. */


  /* ---------------------------------------------------------
     Rasterzelle
     --------------------------------------------------------- */

  --gc-cell-padding: .75rem; /* Innenabstand der Rasterzellen; z. B. .5rem–1rem. */
  --gc-cell-min-height: 5rem; /* Mindesthöhe einer Rasterzelle; z. B. 4rem–7rem. */
  --gc-cell-background: #f5f5f0; /* Hintergrund der Rasterzellen; z. B. #fff. */
  --gc-cell-radius: .35rem; /* Abrundung der Rasterzellen; 0 ergibt eckige Zellen. */


  /* ---------------------------------------------------------
     Titel
     --------------------------------------------------------- */

  --gc-title-margin: 0 0 .75rem; /* Außenabstand am Kartentitel; z. B. 0 0 .75rem. */
  --gc-title-size: 1.2rem; /* Schriftgröße des Kartentitels; z. B. 1.1rem–1.5rem. */
  --gc-title-weight: 600; /* Schriftstärke des Kartentitels; z. B. 600 oder 700. */
  --gc-title-color: inherit; /* Titelfarbe; inherit übernimmt die Kartenfarbe. */

  --gc-title-padding-left: .75rem; /* Abstand zwischen Titelbalken und Titeltext. */
  --gc-title-border-width: 4px; /* Breite des Titelbalkens; 0 entfernt ihn. */
  --gc-title-border-color: var(--clr-primary, #444); /* Farbe des Titelbalkens; Standard nutzt --clr-primary. */


  /* ---------------------------------------------------------
     Bilder – allgemeine Grundeinstellungen

     Die Variablen erlauben später u.a.:
     - feste oder flexible Breite
     - feste Höhe
     - Seitenverhältnis
     - contain / cover
     - Ausrichtung links / Mitte / rechts
     - eigene Rundung
     --------------------------------------------------------- */

  --gc-img-width: auto; /* Breite normaler Inhaltsbilder; auto oder z. B. 16rem. */
  --gc-img-max-width: 100%; /* Maximalbreite normaler Inhaltsbilder; 100% schützt vor Überlauf. */

  --gc-img-height: auto; /* Höhe normaler Inhaltsbilder; auto wahrt das Seitenverhältnis. */
  --gc-img-max-height: none; /* Maximalhöhe normaler Inhaltsbilder; none hebt die Grenze auf. */

  --gc-img-ratio: auto; /* Seitenverhältnis normaler Inhaltsbilder; auto oder z. B. 4 / 3. */
  --gc-img-fit: contain; /* Anpassung normaler Inhaltsbilder; contain oder cover. */
  --gc-img-position: center; /* Position normaler Inhaltsbilder; z. B. center top. */

  --gc-img-radius: 0; /* Abrundung normaler Inhaltsbilder; 0 oder z. B. .5rem. */

  --gc-img-margin-start: auto; /* Linker Außenabstand normaler Inhaltsbilder; auto zentriert. */
  --gc-img-margin-end: auto; /* Rechter Außenabstand normaler Inhaltsbilder; auto zentriert. */
  --gc-content-image-gap-bottom: 0; /* Abstand nach einem mozilo-Inhaltsbild; z. B. 0 oder .75rem. */


  /* ---------------------------------------------------------
     Float-Bilder

     --gc-float-min-text:
       Mindestbreite, die dem Text neben dem Bild
       erhalten bleiben soll
     --gc-float-gap:
       Abstand zwischen Bild und Text

     --------------------------------------------------------- */

  --gc-float-min-text: 10rem; /* Mindestbreite des Textes neben einem umflossenen Bild. */
  --gc-float-gap: .9rem; /* Abstand zwischen umflossenem Bild und Text. */
  --gc-float-margin-block-start: .35em; /* Abstand oberhalb eines umflossenen Bildes. */
  --gc-float-margin-block-end: .75em; /* Abstand unterhalb eines umflossenen Bildes. */


  /* ---------------------------------------------------------
     Gemeinsames Grid
     --------------------------------------------------------- */

  display: grid;
  gap: var(--gc-gap);

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, var(--gc-min)), 1fr)
    );

  width: 100%;
  max-width: var(--gc-max-width);

  margin-inline: auto;
  padding: var(--gc-grid-padding);

  box-sizing: border-box;
}


/* =========================================================
   2. Card-Modus
   ========================================================= */

.gc-cards {
  /* reserviert für Card-spezifische Variablen */
}


.gc-card {
  min-width: 0;

  padding: var(--gc-card-padding);

  color: var(--gc-item-color);
  background: var(--gc-item-background);

  border-width: var(--gc-item-border-width);
  border-style: var(--gc-item-border-style);
  border-color: var(--gc-item-border-color);

  border-radius: var(--gc-item-radius);
  box-shadow: var(--gc-item-shadow);

  box-sizing: border-box;
}


/* =========================================================
   3. Artikelkarten-Modus
   ========================================================= */

.gc-itemcards {
  align-items: stretch;
}

.gc-itemcard {
  display: flex;
  flex-direction: column;

  padding: 0;

  overflow: hidden;
}

.gc-itemcard-image {
  flex: 0 0 auto;

  width: 100%;
  aspect-ratio: var(--gc-itemcard-image-ratio);

  overflow: hidden;
}

.gc-card.gc-itemcard > .gc-itemcard-image img {
  float: none;

  display: block;

  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;

  margin: 0;

  object-fit: var(--gc-itemcard-image-fit);
  object-position: var(--gc-itemcard-image-position);

  border-radius: 0;
}

.gc-itemcard-image > a,
.gc-itemcard-image > picture,
.gc-itemcard-image > a > picture,
.gc-sidecard-image > a,
.gc-sidecard-image > picture,
.gc-sidecard-image > a > picture,
.gc-splitcard-media > a,
.gc-splitcard-media > picture,
.gc-splitcard-media > a > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gc-itemcard > .gc-card-title {
  margin: var(--gc-card-padding) var(--gc-card-padding) .75rem;
}

.gc-itemcard > .gc-card-content {
  flex: 1 1 auto;

  padding: 0 var(--gc-card-padding) var(--gc-card-padding);
}

.gc-itemcard > .gc-card-content:first-child,
.gc-itemcard > .gc-itemcard-image + .gc-card-content {
  padding-top: var(--gc-card-padding);
}


/* ---------------------------------------------------------
   Itemcard – aufklappbarer Zusatzinhalt
   --------------------------------------------------------- */

.gc-item-details {
  width: 100%;
}

.gc-item-details > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  gap: .75rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
}

.gc-item-details > summary::-webkit-details-marker {
  display: none;
}

.gc-item-details__summary-text {
  min-width: 0;
}

.gc-item-details__symbol {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.gc-item-details__symbol::before,
.gc-item-details__symbol::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .8rem;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--gc-details-duration) ease;
}

.gc-item-details__symbol::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.gc-item-details[open] .gc-item-details__symbol::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gc-item-details[open] .gc-item-details__symbol::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gc-item-details__content {
  overflow: hidden;
}

.gc-item-details__content > div {
  padding-top: 1rem;
  opacity: 0;
  transform: translateY(-.35rem);
  transition:
    opacity var(--gc-details-duration) ease,
    transform var(--gc-details-duration) ease;
}

.gc-item-details[open] .gc-item-details__content > div {
  opacity: 1;
  transform: translateY(0);
}

.gc-item-details.gc-details-is-animating {
  overflow: hidden;
}


/* ---------------------------------------------------------
   Itemcard-Modifikator: vollflächiges Hintergrundbild
   --------------------------------------------------------- */

.gc-itemcards.gc-layout-item-overlay {
  align-items: start;
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard {
  position: relative;
  isolation: isolate;
  min-height: var(--gc-item-overlay-min-height);
  color: var(--gc-item-overlay-color);
  background: var(--gc-item-background);
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard.gc-itemcard-no-image {
  color: var(--gc-item-color);
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard.gc-itemcard-no-image::after {
  display: none;
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--gc-item-overlay-shade-top) 15%,
    var(--gc-item-overlay-shade-middle) 48%,
    var(--gc-item-overlay-shade-bottom) 100%
  );
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.gc-itemcards.gc-layout-item-overlay
  .gc-card.gc-itemcard
  > .gc-itemcard-image
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gc-itemcard-image-position);
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard > .gc-card-title {
  position: relative;
  z-index: 2;
  margin: clamp(2rem, 8%, 3.5rem) var(--gc-card-padding) auto;
  padding-left: 0;
  color: inherit;
  text-align: center;
  border-left: 0;
}

.gc-itemcards.gc-layout-item-overlay .gc-itemcard > .gc-card-content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  padding: var(--gc-card-padding);
  color: inherit;
}

.gc-itemcards.gc-layout-item-overlay
  .gc-itemcard
  > .gc-card-content:first-child,
.gc-itemcards.gc-layout-item-overlay
  .gc-itemcard
  > .gc-itemcard-image
  + .gc-card-content {
  margin-top: auto;
  padding-top: var(--gc-card-padding);
}

.gc-itemcards.gc-layout-item-overlay .gc-item-details__content {
  color: var(--gc-item-overlay-color);
}

.gc-itemcards.gc-layout-item-overlay .gc-item-details__content a {
  color: inherit;
}

.gc-itemcards.gc-layout-item-overlay
  .gc-itemcard.gc-itemcard-no-image
  .gc-item-details__content {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .gc-item-details__symbol::before,
  .gc-item-details__symbol::after,
  .gc-item-details__content > div {
    transition: none;
  }
}


/* =========================================================
   4. Sidecard-Modus
   ========================================================= */

.gc-sidecards {
  align-items: stretch;
}

.gc-sidecard {
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
}

.gc-sidecard-layout {
  display: grid;
  grid-template-columns: var(--gc-sidecard-image-width) minmax(0, 1fr);
  gap: var(--gc-sidecard-gap);
  min-height: 100%;
}

.gc-sidecard-image {
  width: var(--gc-sidecard-image-width);
  aspect-ratio: var(--gc-sidecard-image-ratio);
  overflow: hidden;
}

.gc-card.gc-sidecard .gc-sidecard-image img {
  float: none;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: var(--gc-side-image-fit);
  object-position: var(--gc-side-image-position);
  border-radius: 0;
}


/* =========================================================
   5. Splitcard-Modus
   ========================================================= */

.gc-splitcards {
  align-items: stretch;
}

.gc-splitcard {
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
}

.gc-splitcard-layout {
  display: grid;
  grid-template-columns:
    minmax(0, var(--gc-splitcard-image-share))
    minmax(0, var(--gc-splitcard-text-share));
  min-height: 100%;
}

.gc-splitcard-media {
  min-width: 0;
  min-height: var(--gc-splitcard-media-min-height);
  overflow: hidden;
  background: var(--gc-splitcard-image-background);
}

.gc-splitcard-media > br {
  display: none;
}

.gc-card.gc-splitcard .gc-splitcard-media > img,
.gc-card.gc-splitcard .gc-splitcard-media > a > img,
.gc-card.gc-splitcard .gc-splitcard-media > picture > img,
.gc-card.gc-splitcard .gc-splitcard-media > a > picture > img {
  float: none;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: var(--gc-splitcard-image-fit);
  object-position: var(--gc-splitcard-image-position);
  border-radius: 0;
}

.gc-splitcard-media > a,
.gc-splitcard-media > picture,
.gc-splitcard-media > a > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gc-splitcard-media > :is(h1, h2, h3) {
  margin: 0;
  padding: var(--gc-card-padding);
  font-size: var(--gc-splitcard-heading-size);
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: auto;
}

.gc-splitcard-media:has(> :is(h1, h2, h3):only-child) {
  display: flex;
  align-items: center;
}

/* PicSlide bleibt als vollständiger Medienblock erhalten. */
.gc-splitcard-media > .picslide {
  width: 100%;
  max-width: none;
  margin: 0;
}

/*
   Allgemeine Bildregeln des verwendeten Layouts dürfen weder
   Abstände noch die PicSlide-Variablen im Medienblock überschreiben.
*/
.gc-card.gc-splitcard
  .gc-splitcard-media
  .picslide-slide img {
  float: none;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: var(--picslide-image-fit, cover);
  object-position: var(--picslide-image-position, center);
  border-radius: 0;
}

.gc-splitcards:not(.gc-layout-split-open)
  .gc-splitcard-media > .picslide {
  height: 100%;
}

.gc-splitcards:not(.gc-layout-split-open)
  .gc-splitcard-media > .picslide .picslide-viewport {
  height: 100%;
  aspect-ratio: auto;
}

/* Splitcard-Bilder werden standardmäßig flächig gefüllt. */
.gc-splitcards.gc-layout-split-contain {
  --gc-splitcard-image-fit: contain;
}

.gc-card-body {
  min-width: 0;
  padding: var(--gc-card-padding);
}

.gc-card-layout-no-image {
  grid-template-columns: minmax(0, 1fr);
}


/* ---------------------------------------------------------
   Splitcard-Modifikator: offene Darstellung

   Bild und Text liegen ohne eigenen Kartenrahmen direkt auf
   dem Hintergrund des umgebenden Containers. Der Abstand
   zwischen Bild und Text wird auf der äußeren Textseite
   wiederholt.
   --------------------------------------------------------- */

.gc-splitcards.gc-layout-split-open .gc-splitcard {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.gc-splitcards.gc-layout-split-open .gc-splitcard-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gc-split-open-gap);
  align-items: center;
}

.gc-splitcards.gc-layout-split-open .gc-splitcard-media {
  min-height: 0;
  background: transparent;
  border-radius: var(--gc-split-open-image-radius);
}

.gc-splitcards.gc-layout-split-open .gc-splitcard-media > img,
.gc-splitcards.gc-layout-split-open .gc-splitcard-media > a > img,
.gc-splitcards.gc-layout-split-open .gc-splitcard-media > picture > img,
.gc-splitcards.gc-layout-split-open .gc-splitcard-media > a > picture > img {
  border-radius: var(--gc-split-open-image-radius);
}

.gc-splitcards.gc-layout-split-open .gc-card-body {
  align-self: center;
  padding:
    var(--gc-split-open-padding-block)
    var(--gc-split-open-gap)
    var(--gc-split-open-padding-block)
    0;
  background: transparent;
}

.gc-splitcards.gc-layout-split-open .gc-card-title {
  padding-left: 0;
  border-left: 0;
}

.gc-splitcards.gc-layout-split-open
  .gc-splitcard-layout.gc-card-layout-no-image {
  grid-template-columns: minmax(0, 1fr);
}

.gc-splitcards.gc-layout-split-open
  .gc-splitcard-layout.gc-card-layout-no-image
  .gc-card-body {
  padding-inline: var(--gc-split-open-gap);
}


/* ---------------------------------------------------------
   Splitcard-Modifikator: Bild und Text vertauschen
   --------------------------------------------------------- */

.gc-splitcards.gc-layout-split-reverse:not(.gc-layout-split-open)
  .gc-splitcard-layout:not(.gc-card-layout-no-image) {
  grid-template-columns:
    minmax(0, var(--gc-splitcard-text-share))
    minmax(0, var(--gc-splitcard-image-share));
}

.gc-splitcards.gc-layout-split-reverse
  .gc-splitcard-layout:not(.gc-card-layout-no-image)
  .gc-splitcard-media {
  grid-column: 2;
  grid-row: 1;
}

.gc-splitcards.gc-layout-split-reverse
  .gc-splitcard-layout:not(.gc-card-layout-no-image)
  .gc-card-body {
  grid-column: 1;
  grid-row: 1;
}

.gc-splitcards.gc-layout-split-open.gc-layout-split-reverse
  .gc-splitcard-layout:not(.gc-card-layout-no-image)
  .gc-card-body {
  padding-right: 0;
  padding-left: var(--gc-split-open-gap);
}

@container (max-width: 30rem) {
  .gc-sidecard-layout {
    grid-template-columns:
      var(--gc-sidecard-image-width)
      minmax(0, 1fr);
    grid-template-areas:
      "image title"
      "content content";

    /* Freier Raum gleich hoher Karten bleibt unter dem Inhalt. */
    align-content: start;
  }

  .gc-sidecard-layout.gc-card-layout-no-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "content";
  }

  .gc-sidecard-image {
    grid-area: image;
    width: var(--gc-sidecard-image-width);
    max-width: 100%;
    min-height: 0;
    aspect-ratio: var(--gc-sidecard-image-ratio);
  }

  /*
     Im schmalen Zustand werden Titel und Inhalt zu direkten
     Bestandteilen des Sidecard-Rasters. Dadurch kann der Titel
     neben dem Bild stehen, während der Text darunter die volle
     Kartenbreite nutzt.
  */
  .gc-sidecard .gc-card-body {
    display: contents;
  }

  .gc-sidecard .gc-card-title {
    grid-area: title;
    align-self: center;
    margin: var(--gc-card-padding);
    min-width: 0;
  }

  .gc-sidecard .gc-card-content {
    grid-area: content;
    padding: var(--gc-card-padding);
  }

  .gc-splitcard-layout {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  /*
     Die spezifischeren Modifikator-Regeln oberhalb dürfen im
     einspaltigen Zustand keine zweite, leere Spalte erhalten.
     Medien- und Inhaltsbereich stehen dann zuverlässig in einer
     Spalte und bleiben Bestandteile derselben Karte.
  */
  .gc-splitcards.gc-layout-split-open .gc-splitcard-layout,
  .gc-splitcards.gc-layout-split-reverse .gc-splitcard-layout,
  .gc-splitcards.gc-layout-split-reverse:not(.gc-layout-split-open)
    .gc-splitcard-layout:not(.gc-card-layout-no-image) {
    grid-template-columns: minmax(0, 1fr);
  }

  .gc-splitcard-media,
  .gc-splitcards.gc-layout-split-reverse
    .gc-splitcard-layout:not(.gc-card-layout-no-image)
    .gc-splitcard-media {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }

  .gc-card.gc-splitcard .gc-splitcard-media > img,
  .gc-card.gc-splitcard .gc-splitcard-media > a > img,
  .gc-card.gc-splitcard .gc-splitcard-media > picture > img,
  .gc-card.gc-splitcard .gc-splitcard-media > a > picture > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .gc-splitcard-media > :is(h1, h2, h3) {
    font-size: var(--gc-splitcard-heading-size-mobile);
  }

  .gc-splitcards:not(.gc-layout-split-open)
    .gc-splitcard-media > .picslide,
  .gc-splitcards:not(.gc-layout-split-open)
    .gc-splitcard-media > .picslide .picslide-viewport {
    height: auto;
  }

  .gc-splitcards:not(.gc-layout-split-open)
    .gc-splitcard-media > .picslide .picslide-viewport {
    aspect-ratio: var(--picslide-frame-ratio, 16 / 9);
  }

  .gc-splitcard-layout .gc-card-body,
  .gc-splitcards.gc-layout-split-reverse
    .gc-splitcard-layout:not(.gc-card-layout-no-image)
    .gc-card-body {
    grid-column: 1;
    grid-row: 2;
  }

  /*
     Die breite reverse-Regel setzt den Text ausdrücklich in Zeile 1.
     Für die einspaltige Darstellung muss dieselbe Spezifität erreicht
     werden, damit Medienblock und Text nicht übereinanderliegen.
  */
  .gc-splitcards.gc-layout-split-open.gc-layout-split-reverse
    .gc-splitcard-layout:not(.gc-card-layout-no-image)
    .gc-card-body {
    grid-column: 1;
    grid-row: 2;
  }

  .gc-splitcards.gc-layout-split-open .gc-splitcard-layout .gc-card-body {
    padding:
      var(--gc-split-open-padding-block)
      var(--gc-split-open-gap);
    border-left: 0;
  }
}


/* ---------------------------------------------------------
   Card-Titel
   --------------------------------------------------------- */

.gc-card-title {
  margin: var(--gc-title-margin);

  padding-left: var(--gc-title-padding-left);

  color: var(--gc-title-color);

  font-size: var(--gc-title-size);
  font-weight: var(--gc-title-weight);

  border-left:
    var(--gc-title-border-width)
    solid
    var(--gc-title-border-color);
}


/* ---------------------------------------------------------
   Card-Inhalt

   flow-root:
   Float-Bilder bleiben zuverlässig innerhalb der Karte.

   container-type:
   Float-Verhalten richtet sich nach der tatsächlichen
   Breite des Karteninhalts und nicht nach dem Viewport
   oder der Breite des gesamten Grids.
   --------------------------------------------------------- */

.gc-card-content {
  display: flow-root;

  min-width: 0;

  container-type: inline-size;

  overflow-wrap: break-word;
}


/* =========================================================
   6. Bilder – gemeinsame robuste Basis
   ========================================================= */

.gc-card img {
  display: block;

  width: var(--gc-img-width);
  max-width: var(--gc-img-max-width);

  height: var(--gc-img-height);
  max-height: var(--gc-img-max-height);

  aspect-ratio: var(--gc-img-ratio);

  object-fit: var(--gc-img-fit);
  object-position: var(--gc-img-position);

  margin-inline-start: var(--gc-img-margin-start);
  margin-inline-end: var(--gc-img-margin-end);

  border: none;
  border-radius: var(--gc-img-radius);

  box-shadow: none;

  box-sizing: border-box;
}

/* mozilo gibt [bild] als direktes img.contentimage aus. Den Abstand
   zum Kartenrand regelt --gc-card-padding; diese Regel bestimmt nur
   den Abstand nach dem Bild und hebt Layout-Margins zuverlässig auf. */
.gc-grid .gc-card .gc-card-content > img.contentimage {
  margin-block: 0 var(--gc-content-image-gap-bottom);
  margin-inline: var(--gc-img-margin-start) var(--gc-img-margin-end);
}

/* Das unmittelbar nach einem mozilo-Bild ausgegebene br erzeugt
   sonst eine zusätzliche Leerzeile. Bei Float-Bildern darf der
   anschließende Text direkt neben dem Bild beginnen. */
.gc-grid .gc-card .gc-card-content > img:is(.contentimage, .leftcontentimage, .rightcontentimage) + br {
  display: none;
}


/* picture darf niemals seine Karte verbreitern */

.gc-card picture {
  display: block;

  max-width: 100%;
}


/* SVG ebenfalls innerhalb der Karte halten */

.gc-card svg {
  max-width: 100%;
  height: auto;
}


/* figure darf das Grid nicht verbreitern */

.gc-card figure {
  max-width: 100%;
}


/* =========================================================
   7. Float-Bilder
   ========================================================= */

/*
   Float-Bilder behalten bis zur definierten Grenze ihre
   sinnvolle Bildgröße.

   Wird die Karte zu schmal, wird der Float vollständig
   aufgehoben. Das Bild wird dann normal und zentriert
   dargestellt.

   Dadurch wird verhindert, dass Float-Bilder immer weiter
   verkleinert werden, nur um noch Text daneben zu halten.
*/


/* ---------------------------------------------------------
   Float links
   --------------------------------------------------------- */

.gc-grid .gc-card img.leftcontentimage {
  float: left;

  width: auto;
  max-width: calc(
    100% - var(--gc-float-min-text) - var(--gc-float-gap)
  );
  height: auto;

  margin:
    var(--gc-float-margin-block-start)
    var(--gc-float-gap)
    var(--gc-float-margin-block-end)
    0;
}


/* ---------------------------------------------------------
   Float rechts
   --------------------------------------------------------- */

.gc-grid .gc-card img.rightcontentimage {
  float: right;

  width: auto;
  max-width: calc(
    100% - var(--gc-float-min-text) - var(--gc-float-gap)
  );
  height: auto;

  margin:
    var(--gc-float-margin-block-start)
    0
    var(--gc-float-margin-block-end)
    var(--gc-float-gap);
}


/* ---------------------------------------------------------
   Kleine Karten: Float vollständig aufheben
   ---------------------------------------------------------
   Unterhalb dieser Breite ist ein Float typografisch
   nicht mehr sinnvoll.
   --------------------------------------------------------- */

@container (max-width: 20rem) {

  .gc-grid .gc-card img.leftcontentimage,
  .gc-grid .gc-card img.rightcontentimage {
    float: none;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto 1rem;
  }
}


/* =========================================================
   8. Raster-Modus
   ========================================================= */

.gc-raster {

  /* Raster arbeitet standardmäßig mit kleineren Zellen */
  --gc-min: 10rem;
}


.gc-cell {
  display: grid;
  place-items: center;

  min-width: 0;
  max-width: 100%;
  min-height: var(--gc-cell-min-height);

  padding: var(--gc-cell-padding);

  background: var(--gc-cell-background);

  border-radius: var(--gc-cell-radius);

  box-sizing: border-box;

  text-align: center;

  /*
     Auch lange URLs, Dateinamen usw. dürfen
     die Zelle nicht verbreitern.
  */
  overflow-wrap: anywhere;
  word-break: normal;
}


/* Direkte Inhalte dürfen die Rasterzelle nicht verbreitern */

.gc-cell > * {
  min-width: 0;
  max-width: 100%;
}


/* ---------------------------------------------------------
   Links und Buttons innerhalb einer Rasterzelle
   --------------------------------------------------------- */

.gc-cell > a,
.gc-cell > button {
  display: grid;
  place-items: center;

  width: 100%;
  max-width: 100%;
  height: 100%;

  color: inherit;
  text-decoration: none;

  overflow-wrap: anywhere;
  word-break: normal;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   Bilder im Raster
   --------------------------------------------------------- */

.gc-cell img,
.gc-cell svg {
  display: block;

  width: var(--gc-img-width);
  max-width: var(--gc-img-max-width);

  height: var(--gc-img-height);
  max-height: var(--gc-img-max-height);

  aspect-ratio: var(--gc-img-ratio);

  object-fit: var(--gc-img-fit);
  object-position: var(--gc-img-position);

  margin-inline-start: var(--gc-img-margin-start);
  margin-inline-end: var(--gc-img-margin-end);

  border-radius: var(--gc-img-radius);

  box-sizing: border-box;
}


.gc-cell picture,
.gc-cell figure {
  max-width: 100%;
}


/* =========================================================
   9. Modifikatorklassen
   =========================================================
   Grundsatz:

   Modifikatoren sollen möglichst nur Variablen verändern.
   Strukturelle CSS-Regeln nur dort einsetzen, wo eine
   Variable allein nicht ausreicht.

   Diese Struktur kann identisch in gc-custom.css
   übernommen werden.
   ========================================================= */


/* =========================================================
   MODIFIER: Layout
   ========================================================= */

/*
   Reserviert für:
   - Gridbreite
   - Mindestbreite der Elemente
   - Abstände
   - Spaltenverhalten
*/


/* =========================================================
   MODIFIER: Frame
   ========================================================= */

/*
   Reserviert für:
   - Rahmen
   - Rundung
   - Schatten
   - Element-Hintergrund
*/


/* =========================================================
   MODIFIER: Theme
   ========================================================= */

/*
   Reserviert für:
   - Farben
   - Titelgestaltung
   - zusammengehörige visuelle Themes
*/


/* =========================================================
   MODIFIER: Content
   ========================================================= */

/*
   Reserviert für:
   - Innenabstände
   - Textausrichtung
   - Bildgröße
   - Bildausrichtung
   - Bildformat / object-fit
   - Float-Verhalten
   - spezielle Karteninhalte
   - spezielle Karteninhalte
*/


/* =========================================================
   Ende Modifikatorklassen
   ========================================================= */