/* =========================================================
   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 */
.flexcards-container.fc-layout-left {
  justify-content: flex-start;
}

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

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

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

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

/* flache Karten ohne Schatten */
.flexcards-container.fc-frame-flat .card {
  box-shadow: none;
}

/* Karten mit Rahmen statt Schatten */
.flexcards-container.fc-frame-bordered .card {
  border: 1px solid var(--fc-border-color);
  box-shadow: none;
}

/* weicher Schatten */
.flexcards-container.fc-frame-shadow-soft .card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

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

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

/* Karten beim Hover leicht anheben */
.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 – Inhalt
   Prefix: fc-content-
   ========================================================= */

/* ---------------------------------------------------------
   Bild oben in definierter Höhe
   Geeignet für Teaser-, Artikel- und Produktkarten
   --------------------------------------------------------- */

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

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

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

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

/* ---------------------------------------------------------
   großzügigerer Content
   --------------------------------------------------------- */

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

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

/* dezenter Kartenstil */
.flexcards-container.fc-theme-muted .card {
  --fc-card-bg: #fafafa;
  --fc-header-bg: #f0f0f0;
  --fc-header-color: #222222;
  --fc-content-bg: #f7f7f7;
  --fc-content-color: #333333;
  --fc-footer-bg: #f0f0f0;
  --fc-footer-color: #222222;
}

/* Header etwas stärker hervorheben */
.flexcards-container.fc-theme-accent .card {
  --fc-header-bg: #d9d9d9;
  --fc-header-color: #111111;
}

/* höherer Kontrast */
.flexcards-container.fc-theme-contrast .card {
  --fc-card-bg: #ffffff;
  --fc-header-bg: #e2e2e2;
  --fc-header-color: #111111;
  --fc-content-bg: #ffffff;
  --fc-content-color: #222222;
  --fc-footer-bg: #e2e2e2;
  --fc-footer-color: #111111;
}

/* ===== Farbschema Grün ===== */
.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 Blau ===== */
.flexcards-container.fc-theme-blue .card {
  --fc-card-bg: #f5f8fc;

  --fc-header-bg: #1565c0;
  --fc-header-color: #ffffff;

  --fc-content-bg: #e3f2fd;
  --fc-content-color: #0d47a1;

  --fc-footer-bg: #90caf9;
  --fc-footer-color: #0d47a1;
}

/* ===== Farbschema Sand / Beige ===== */
.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 ===== */
.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;
}