/* =========================================================
   GridCards 1.0.11 12.08.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;


  /* ---------------------------------------------------------
     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-mobile-radius: var(--gc-item-radius);

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


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

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

/* Das optionale -mobile-Bild ist im breiten Zustand nicht sichtbar. */
.gc-splitcard-mobile-image {
  display: none;
}

.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-image {
  min-height: 0;
  background: transparent;
  border-radius: var(--gc-split-open-image-radius);
}

.gc-splitcards.gc-layout-split-open .gc-splitcard-image > 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-image {
  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.
     Sobald das Bild ausgeblendet ist, nutzt der Text immer die
     gesamte verfügbare Kartenbreite.
  */
  .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-image {
    display: none;
  }

  /*
     Ein vorbereitetes Bild mit dem Dateizusatz -mobile ersetzt
     das große Seitenbild. Die seitlichen Innenabstände verhindern,
     dass es an den Rand des umgebenden Abschnitts stößt.
  */
  .gc-splitcard-layout.gc-card-layout-has-mobile-image
    .gc-splitcard-mobile-image {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding:
      var(--gc-card-padding)
      var(--gc-card-padding)
      0;
  }

  .gc-splitcard-layout.gc-card-layout-has-mobile-image
    .gc-splitcard-mobile-image > img {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    object-fit: contain;
    border-radius: var(--gc-splitcard-mobile-radius);
  }

  .gc-splitcard-layout.gc-card-layout-has-mobile-image .gc-card-body,
  .gc-splitcards.gc-layout-split-reverse
    .gc-splitcard-layout.gc-card-layout-has-mobile-image
    .gc-card-body {
    grid-column: 1;
    grid-row: 2;
  }

  .gc-splitcards.gc-layout-split-open
    .gc-splitcard-layout.gc-card-layout-has-mobile-image
    .gc-splitcard-mobile-image {
    padding:
      var(--gc-split-open-padding-block)
      var(--gc-split-open-gap)
      0;
  }

  .gc-splitcards.gc-layout-split-reverse .gc-splitcard-layout .gc-card-body {
    grid-column: 1;
    grid-row: 1;
  }

  /*
     Im schmalen Zustand steht der Inhalt im Mittelpunkt.
     Die Akzentleiste kennzeichnet die Splitcard weiterhin dezent,
     obwohl ihr Bild vollständig aus dem Layout entfernt wird.
  */
  .gc-splitcard-layout:not(.gc-card-layout-no-image) .gc-card-body {
    border-left:
      var(--gc-title-border-width)
      solid
      var(--gc-title-border-color);
  }

  .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
   ========================================================= */