/* =========================================================
   GridCards 1.0.17 16.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;
  --gc-gap: 1.5rem;
  --gc-max-width: 1400px;
  --gc-grid-padding: clamp(.75rem, 2vw, 1rem);


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

  --gc-item-background: #fff;
  --gc-item-color: inherit;

  --gc-item-border-width: 1px;
  --gc-item-border-style: solid;
  --gc-item-border-color: #ddd;

  --gc-item-radius: .5rem;
  --gc-item-shadow: 0 1px 3px rgba(0, 0, 0, .08);


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

  --gc-card-padding: 1.25rem;


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

  --gc-itemcard-image-ratio: 16 / 9;
  --gc-itemcard-image-fit: cover;
  --gc-itemcard-image-position: center;
  --gc-item-overlay-min-height: 30rem;
  --gc-item-overlay-color: #fff;
  --gc-item-overlay-shade-top: rgba(0, 0, 0, .28);
  --gc-item-overlay-shade-middle: rgba(0, 0, 0, .38);
  --gc-item-overlay-shade-bottom: rgba(0, 0, 0, .78);
  --gc-details-duration: 350ms;


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

  --gc-sidecard-image-width: 160px;
  --gc-sidecard-image-ratio: 1 / 1;
  --gc-sidecard-gap: 0;

  --gc-splitcard-image-share: 45%;
  --gc-splitcard-text-share: 55%;
  --gc-splitcard-image-background: #f5f5f0;
  --gc-splitcard-image-fit: cover;
  --gc-splitcard-image-position: center;
  --gc-splitcard-heading-size: clamp(1.75rem, 4.25cqi, 4.5rem);
  --gc-splitcard-heading-size-mobile: clamp(1.75rem, 8cqi, 2.5rem);

  --gc-split-open-gap: clamp(1.5rem, 4vw, 4rem);
  --gc-split-open-padding-block: clamp(1rem, 3vw, 3rem);
  --gc-split-open-image-radius: var(--gc-item-radius);

  --gc-side-image-fit: cover;
  --gc-side-image-position: center;


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

  --gc-cell-padding: .75rem;
  --gc-cell-min-height: 5rem;
  --gc-cell-background: #f5f5f0;
  --gc-cell-radius: .35rem;


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

  --gc-title-margin: 0 0 .75rem;
  --gc-title-size: 1.2rem;
  --gc-title-weight: 600;
  --gc-title-color: inherit;

  --gc-title-padding-left: .75rem;
  --gc-title-border-width: 4px;
  --gc-title-border-color: var(--clr-primary, #444);


  /* ---------------------------------------------------------
     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;
  --gc-img-max-width: 100%;

  --gc-img-height: auto;
  --gc-img-max-height: none;

  --gc-img-ratio: auto;
  --gc-img-fit: contain;
  --gc-img-position: center;

  --gc-img-radius: 0;

  --gc-img-margin-start: auto;
  --gc-img-margin-end: auto;


  /* ---------------------------------------------------------
     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;
  --gc-float-gap: .9rem;
  --gc-float-margin-block-start: .35em;
  --gc-float-margin-block-end: .75em;


  /* ---------------------------------------------------------
     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: 14rem;
  overflow: hidden;
  background: var(--gc-splitcard-image-background);
}

.gc-card.gc-splitcard .gc-splitcard-media 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;
}

.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 {
  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 {
    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;
}


/* 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-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-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-card img.leftcontentimage,
  .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
   ========================================================= */