/* =========================================================
   FlexCards – Farbvariablen
   =========================================================
   Kartengestaltung über zusätzliche Klassen am Ende der Datei:
   Modifikatoren.

   Namensschema:
   fc-layout-*   Layout:
                 fc-layout-left, fc-layout-right,
                 fc-layout-gap-sm, fc-layout-gap-lg

   fc-frame-*    Kartenstil:
                 fc-frame-flat, fc-frame-bordered,
                 fc-frame-shadow-soft, fc-frame-shadow-strong,
                 fc-frame-round-lg, fc-frame-hover

   fc-content-*  Inhalt:
                 fc-content-img-top, fc-content-img-top-sm,
                 fc-content-img-top-lg, fc-content-product,
                 fc-content-product-sm, fc-content-product-lg,
                 fc-content-pad-sm, fc-content-pad-lg,
                 fc-content-img-contain, fc-content-img-separated

   fc-theme-*    Farben:
                 fc-theme-muted, fc-theme-accent,
                 fc-theme-contrast, fc-theme-green,
                 fc-theme-red, fc-theme-blue,
                 fc-theme-sand, fc-theme-dark
   ========================================================= */

:root {
  /* Ganze Karte, Fallback wenn Titel, Inhalt oder Fußbereich
     keine eigenen Werte haben bzw. transparent sind */

  /* ===== Farbschema Grau ===== */
  /* Hintergrund gesamte Karte */
  --fc-card-bg: #f5f5f5;

  /* Titelbereich */
  --fc-header-bg: #616161;
  --fc-header-color: #ffffff;

  /* Inhaltsbereich */
  --fc-content-bg: #cccccc;
  --fc-content-color: #ffffff;

  /* Fußbereich */
  --fc-footer-bg: #bdbdbd;
  --fc-footer-color: #333333;

  /* ===== Basiswerte für die gesamte Karte ===== */
  --fc-border-color: #d6d6d6;
  --fc-card-shadow: 0 4px 8px rgba(0,0,0,0.20);
  --fc-card-radius: 5px;
  --fc-pad: 0.625rem;

  /* Abstand zwischen Karten */
  --fc-gap: 20px;

  /* Breite einzelner Karten */
  --fc-card-min-width: 200px;
  --fc-card-max-width: 1500px;
}

/* =========================================================
   FlexCards – Basis
   ========================================================= */

.flexcards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--fc-gap);
}

.flexcards-container > br {
  display: none;
}

.flexcards-container .card {
  flex-shrink: 0;
}

.flexcards-container .card[style*="%"] {
  flex: 0 0 auto;
}

/* =========================================================
   Card – Grundlayout
   ========================================================= */

.card {
  display: flex;
  flex-direction: column;
  min-width: var(--fc-card-min-width);
  max-width: var(--fc-card-max-width);
  min-height: 0;
  margin: 0;
  overflow: hidden;

  border-radius: var(--fc-card-radius);
  background: var(--fc-card-bg);
  box-shadow: var(--fc-card-shadow);
}

/* =========================================================
   Card – Bereiche
   ========================================================= */

.card > .card-header {
  flex: 0 0 auto;
  padding: var(--fc-pad);
  background: var(--fc-header-bg);
  color: var(--fc-header-color);
}

.card > .card-content {
  flex: 1 1 auto;
  padding: var(--fc-pad);
  background: var(--fc-content-bg);
  color: var(--fc-content-color);
  overflow-wrap: break-word;
}

.card > .card-footer {
  flex: 0 0 auto;
  padding: var(--fc-pad);
  background: var(--fc-footer-bg);
  color: var(--fc-footer-color);
}

/* =========================================================
   Bilder und Medien im Content – robuste Basis
   ========================================================= */

.card-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Hinweise zu Modifikatoren
   ---------------------------------------------------------
   Modifikator-Klassen werden beim Aufruf des Containers als
   Parameter übergeben. Mehrere Klassen sind möglich.
   Sie wirken nur auf die Cards innerhalb des Containers.

   Beispiel:
   {FlexCards|Row|fc-layout-left fc-frame-flat fc-frame-hover|...}

   Erklärung:
   - fc-layout-left   --> Karten im Container linksbündig
   - fc-frame-flat    --> Karten ohne Schatten
   - fc-frame-hover   --> Karten heben sich beim Hover leicht an
   ========================================================= */

/* =========================================================
   Modifikatoren – Layout
   Prefix: fc-layout-
   ========================================================= */

/* Karten linksbündig ausrichten 
fc-layout-left */
.flexcards-container.fc-layout-left {
  justify-content: flex-start;
}

/* Karten rechtsbündig ausrichten 
fc-layout-right */
.flexcards-container.fc-layout-right {
  justify-content: flex-end;
}

/* kleiner Abstand zwischen Karten 
fc-layout-gap-sm */
.flexcards-container.fc-layout-gap-sm {
  gap: 10px;
}

/* größerer Abstand zwischen Karten 
fc-layout-gap-lg */
.flexcards-container.fc-layout-gap-lg {
  gap: 32px;
}

/* =========================================================
   Modifikatoren – Kartenstil
   Prefix: fc-frame-
   ========================================================= */

/* stärkerer Schatten 
fc-frame-shadow-strong  */
.flexcards-container.fc-frame-shadow-strong .card {
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

/* größere Rundung 
fc-frame-round-lg */
.flexcards-container.fc-frame-round-lg .card {
  border-radius: 14px;
}

/* Karten beim Hover leicht anheben 
fc-frame-hover */
.flexcards-container.fc-frame-hover .card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.flexcards-container.fc-frame-hover .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* =========================================================
   Modifikatoren – Farben
   Prefix: fc-theme-
   ========================================================= */


/* Farbschema Grün 
fc-theme-green */
.flexcards-container.fc-theme-green .card {
  --fc-card-bg: #f7faf7;

  --fc-header-bg: #2f7d32;
  --fc-header-color: #ffffff;

  --fc-content-bg: #e8f5e9;
  --fc-content-color: #1b5e20;

  --fc-footer-bg: #a5d6a7;
  --fc-footer-color: #1b5e20;
}

/* Farbschema Sand / Beige 
fc-theme-sand */
.flexcards-container.fc-theme-sand .card {
  --fc-card-bg: #faf7f2;

  --fc-header-bg: #a67c52;
  --fc-header-color: #ffffff;

  --fc-content-bg: #f4ede4;
  --fc-content-color: #4b3b2a;

  --fc-footer-bg: #d6c3a5;
  --fc-footer-color: #4b3b2a;
}

/* Farbschema Dunkel 
fc-theme-dark */
.flexcards-container.fc-theme-dark .card {
  --fc-card-bg: #2b2b2b;

  --fc-header-bg: #3a3a3a;
  --fc-header-color: #ffffff;

  --fc-content-bg: #333333;
  --fc-content-color: #e6e6e6;

  --fc-footer-bg: #3a3a3a;
  --fc-footer-color: #cccccc;
}

/* =========================================================
   Modifikatoren – Inhalt
   Prefix: fc-content-
   ========================================================= */

/* Bild oben in definierter Höhe
   Geeignet für Teaser-, Artikel- und Produktkarten
  fc-content-img-top, fc-content-img-top-sm, fc-content-img-top-lg
  fc-content-product, fc-content-product-sm, fc-content-product-lg 
  */

/* Standardhöhe */
.flexcards-container.fc-content-img-top,
.flexcards-container.fc-content-img-top-sm,
.flexcards-container.fc-content-img-top-lg,
.flexcards-container.fc-content-product,
.flexcards-container.fc-content-product-sm,
.flexcards-container.fc-content-product-lg {
  --fc-img-top-height: 180px;
}

/* kleinere Bildhöhe */
.flexcards-container.fc-content-img-top-sm,
.flexcards-container.fc-content-product-sm {
  --fc-img-top-height: 140px;
}

/* größere Bildhöhe */
.flexcards-container.fc-content-img-top-lg,
.flexcards-container.fc-content-product-lg {
  --fc-img-top-height: 220px;
}

/* erster Link im Content als Block */
.flexcards-container.fc-content-img-top .card .card-content > a:first-child,
.flexcards-container.fc-content-img-top-sm .card .card-content > a:first-child,
.flexcards-container.fc-content-img-top-lg .card .card-content > a:first-child,
.flexcards-container.fc-content-product .card .card-content > a:first-child,
.flexcards-container.fc-content-product-sm .card .card-content > a:first-child,
.flexcards-container.fc-content-product-lg .card .card-content > a:first-child {
  display: block;
}

/* erstes Bild direkt im Content oder im ersten Link
   robust auch für img.contentimage */
.flexcards-container.fc-content-img-top .card .card-content > img:first-child,
.flexcards-container.fc-content-img-top .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-img-top .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-img-top .card .card-content > a:first-child > img.contentimage:first-child,

.flexcards-container.fc-content-img-top-sm .card .card-content > img:first-child,
.flexcards-container.fc-content-img-top-sm .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-img-top-sm .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-img-top-sm .card .card-content > a:first-child > img.contentimage:first-child,

.flexcards-container.fc-content-img-top-lg .card .card-content > img:first-child,
.flexcards-container.fc-content-img-top-lg .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-img-top-lg .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-img-top-lg .card .card-content > a:first-child > img.contentimage:first-child,

.flexcards-container.fc-content-product .card .card-content > img:first-child,
.flexcards-container.fc-content-product .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-product .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-product .card .card-content > a:first-child > img.contentimage:first-child,

.flexcards-container.fc-content-product-sm .card .card-content > img:first-child,
.flexcards-container.fc-content-product-sm .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-product-sm .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-product-sm .card .card-content > a:first-child > img.contentimage:first-child,

.flexcards-container.fc-content-product-lg .card .card-content > img:first-child,
.flexcards-container.fc-content-product-lg .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-product-lg .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-product-lg .card .card-content > a:first-child > img.contentimage:first-child {
  width: 100% !important;
  height: var(--fc-img-top-height) !important;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 0 0.625rem 0 !important;
  max-width: none !important;
}

/* erstes BR direkt am Anfang ausblenden */
.flexcards-container.fc-content-img-top .card .card-content > br:first-child,
.flexcards-container.fc-content-img-top-sm .card .card-content > br:first-child,
.flexcards-container.fc-content-img-top-lg .card .card-content > br:first-child,
.flexcards-container.fc-content-product .card .card-content > br:first-child,
.flexcards-container.fc-content-product-sm .card .card-content > br:first-child,
.flexcards-container.fc-content-product-lg .card .card-content > br:first-child {
  display: none;
}

/* BR direkt nach erstem Link mit Bild ausblenden */
.flexcards-container.fc-content-img-top .card .card-content > a:first-child + br,
.flexcards-container.fc-content-img-top-sm .card .card-content > a:first-child + br,
.flexcards-container.fc-content-img-top-lg .card .card-content > a:first-child + br,
.flexcards-container.fc-content-product .card .card-content > a:first-child + br,
.flexcards-container.fc-content-product-sm .card .card-content > a:first-child + br,
.flexcards-container.fc-content-product-lg .card .card-content > a:first-child + br {
  display: none;
}

/* Produktkarten:
   Bild oben, darunter sauber gegliederter Inhalt
   besonders geeignet für Text + Tabellen
*/

.flexcards-container.fc-content-product .card > .card-content,
.flexcards-container.fc-content-product-sm .card > .card-content,
.flexcards-container.fc-content-product-lg .card > .card-content {
  display: flex;
  flex-direction: column;
}

/* gleichmäßige vertikale Abstände im Content */
.flexcards-container.fc-content-product .card > .card-content > * + *,
.flexcards-container.fc-content-product-sm .card > .card-content > * + *,
.flexcards-container.fc-content-product-lg .card > .card-content > * + * {
  margin-top: 0.5rem;
}

/* erstes Element soll keinen zusätzlichen oberen Abstand erzeugen */
.flexcards-container.fc-content-product .card > .card-content > img:first-child,
.flexcards-container.fc-content-product .card > .card-content > a:first-child,
.flexcards-container.fc-content-product-sm .card > .card-content > img:first-child,
.flexcards-container.fc-content-product-sm .card > .card-content > a:first-child,
.flexcards-container.fc-content-product-lg .card > .card-content > img:first-child,
.flexcards-container.fc-content-product-lg .card > .card-content > a:first-child {
  margin-top: 0 !important;
}

/* Tabellen in Produktkarten kompakt und sauber */
.flexcards-container.fc-content-product .card .card-content table,
.flexcards-container.fc-content-product-sm .card .card-content table,
.flexcards-container.fc-content-product-lg .card .card-content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95em;
  line-height: 1.35;
}

.flexcards-container.fc-content-product .card .card-content th,
.flexcards-container.fc-content-product .card .card-content td,
.flexcards-container.fc-content-product-sm .card .card-content th,
.flexcards-container.fc-content-product-sm .card .card-content td,
.flexcards-container.fc-content-product-lg .card .card-content th,
.flexcards-container.fc-content-product-lg .card .card-content td {
  padding: 0.35rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.flexcards-container.fc-content-product .card .card-content th,
.flexcards-container.fc-content-product-sm .card .card-content th,
.flexcards-container.fc-content-product-lg .card .card-content th {
  padding-right: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.flexcards-container.fc-content-product .card .card-content tr:last-child th,
.flexcards-container.fc-content-product .card .card-content tr:last-child td,
.flexcards-container.fc-content-product-sm .card .card-content tr:last-child th,
.flexcards-container.fc-content-product-sm .card .card-content tr:last-child td,
.flexcards-container.fc-content-product-lg .card .card-content tr:last-child th,
.flexcards-container.fc-content-product-lg .card .card-content tr:last-child td {
  border-bottom: none;
}

/* Bild vollständig sichtbar statt Beschnitt
   Sinnvoll z. B. für Produktfotos, Verpackungen, Geräte
 fc-content-img-contain */

.flexcards-container.fc-content-img-contain .card .card-content > img:first-child,
.flexcards-container.fc-content-img-contain .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-img-contain .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-img-contain .card .card-content > a:first-child > img.contentimage:first-child {
  object-fit: contain;
  background: #ffffff;
}

/* Bild optisch deutlicher vom restlichen Inhalt trennen
fc-content-img-separated */

.flexcards-container.fc-content-img-separated .card .card-content > img:first-child,
.flexcards-container.fc-content-img-separated .card .card-content > img.contentimage:first-child,
.flexcards-container.fc-content-img-separated .card .card-content > a:first-child > img:first-child,
.flexcards-container.fc-content-img-separated .card .card-content > a:first-child > img.contentimage:first-child {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* kompakterer Content
fc-content-pad-sm */

.flexcards-container.fc-content-pad-sm .card > .card-content {
  padding: 0.5rem;
}

/* großzügigerer Content
 fc-content-pad-lg */

.flexcards-container.fc-content-pad-lg .card > .card-content {
  padding: 1rem;
}