/* mein-karten-style.css - ICON LINKS (GRID), TEXT NICHT EINGERÜCKT, GRÖSSEN OPTIMIERT */

/* ==========================================================================
   1. CSS Variablen
   ========================================================================== */
:root {
  --karten-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --seiten-hintergrund: #f8f9fa;
  --karten-hintergrund: #ffffff;
  --karten-akzent-gruen: #50A73E;
  --karten-schatten: 0 4px 12px rgba(0,0,0,0.08);

  --karten-titel-farbe: #212529;
  --karten-titel-groesse: 1.35em;
  --karten-titel-gewicht: 700;

  --karten-text-farbe: #343a40;

  --karten-datum-text-farbe: #e43535;
  --karten-datum-gewicht: 700;
  --karten-datum-groesse: 1.3em;

  --karten-zeit-farbe: #495057;
  --karten-zeit-groesse: 1.4em;

  --karten-beschreibung-groesse: 0.9em;
  --karten-icon-farbe: var(--karten-akzent-gruen); /* Farbe für das SVG-Icon */

  --karten-padding-vertikal: 18px;
  --karten-padding-horizontal: 22px;
  --karten-randradius: 8px;
  --karten-abstand: 20px;
  --karten-linie-hoehe: 1px;
}

/* ==========================================================================
   2. Optionales Body-Styling
   ========================================================================== */
/*
body {
  font-family: var(--karten-font-family);
  background-color: var(--seiten-hintergrund);
  margin: 0;
  padding: 20px;
}
*/

/* ==========================================================================
   3. Wrapper für die Karten
   ========================================================================== */
body #aktionskarten-container.aktionskarten-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: var(--karten-abstand) !important;
  padding: 20px 0 !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   4. Styling der einzelnen Aktionskarte
   ========================================================================== */
body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte {
  background-color: var(--karten-hintergrund) !important;
  border: 1px solid var(--karten-akzent-gruen) !important;
  border-radius: var(--karten-randradius) !important;
  box-shadow: var(--karten-schatten) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  min-height: 340px;
}

body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
}

/* ==========================================================================
   5. Innerer Container der Karte
   ========================================================================== */
body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte > .karte-link,
body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte > .karte-inhalt {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
}

body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte > .karte-link:hover,
body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte > .karte-link:focus {
  outline: none !important;
}


/* ==========================================================================
   6. Styling der Inhaltsblöcke
   ========================================================================== */

/* 6.1. Datum und Zeit Block - jetzt mit CSS Grid für Icon und Text */
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-inhalt > .karte-datum-zeit,
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-link > .karte-datum-zeit {
  padding: var(--karten-padding-vertikal) var(--karten-padding-horizontal) !important;
  font-size: 1em !important; /* Basis für Icon und Textgrößen hier drin */
  position: relative !important;
  margin: 0 !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  display: grid !important; /* CSS Grid Layout */
  grid-template-columns: auto 1fr; /* Spalte für Icon (auto-Größe), Spalte für Text (restlicher Platz) */
  gap: 12px; /* Abstand zwischen Icon und Textblock, ggf. anpassen */
  align-items: center; /* Vertikale Zentrierung von Icon und Textblock zueinander */
}

/* Linien bleiben gleich */
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit::after {
  content: '' !important;
  position: absolute !important;
  left: var(--karten-padding-horizontal) !important;
  right: var(--karten-padding-horizontal) !important;
  bottom: 0 !important;
  height: var(--karten-linie-hoehe) !important;
  background-color: var(--karten-akzent-gruen) !important;
}
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit::before { display: none !important; }


/* Kalender Icon als img-Tag */
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-icon {
  width: 2.9em;  /* Größe des Icons, relativ zu 1em von .karte-datum-zeit */
  height: 2.9em;
  color: var(--karten-icon-farbe); /* Farbe für SVGs mit fill="currentColor" */
  object-fit: contain; /* Stellt sicher, dass das SVG korrekt skaliert wird */
  grid-column: 1 / 2; /* Platziert das Icon in der ersten Spalte */
  /* 'top' und 'position:relative' sind nicht mehr nötig für die Ausrichtung */
}


body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-textblock {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  grid-column: 2 / 3; /* Platziert den Textblock in der zweiten Spalte */
}

body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-textblock > p.datum {
  color: var(--karten-datum-text-farbe) !important;
  font-weight: var(--karten-datum-gewicht) !important;
  font-size: var(--karten-datum-groesse) !important;
  margin: 0 0 2px 0 !important;
  display: block !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-textblock > p.zeit {
  color: var(--karten-zeit-farbe) !important;
  margin: 0 !important;
  display: block !important;
  font-size: var(--karten-zeit-groesse) !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  background-color: transparent !important;
}


/* 6.2. Header mit Titel */
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-header {
  padding: var(--karten-padding-vertikal) var(--karten-padding-horizontal) !important;
  position: relative !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  background-color: transparent !important;
}

body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-header::after {
  content: '' !important;
  position: absolute !important;
  left: var(--karten-padding-horizontal) !important;
  right: var(--karten-padding-horizontal) !important;
  bottom: 0 !important;
  height: var(--karten-linie-hoehe) !important;
  background-color: var(--karten-akzent-gruen) !important;
}

body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-header > h3 {
  font-size: var(--karten-titel-groesse) !important;
  color: var(--karten-titel-farbe) !important;
  margin: 0 !important;
  font-weight: var(--karten-titel-gewicht) !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  padding: 0 !important;
}


/* 6.3. Beschreibungsblock */
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-beschreibung {
  color: var(--karten-text-farbe) !important;
  line-height: 1.6 !important;
  font-size: var(--karten-beschreibung-groesse) !important;
  padding: var(--karten-padding-vertikal) var(--karten-padding-horizontal) !important;
  flex-grow: 3 !important;
  min-height: 160px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background-color: transparent !important;
}

body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-beschreibung > p {
  margin-top: 0 !important;
  margin-bottom: 0.8em !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-beschreibung > p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   7. Spezifisches Hover-Verhalten
   ========================================================================== */
body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte > .karte-link:hover .karte-header > h3 {
  color: var(--karten-akzent-gruen) !important;
}

/* ==========================================================================
   8. Styling für Ladehinweis und Fehlermeldungen
   ========================================================================== */
body #aktionskarten-container.aktionskarten-wrapper .ladehinweis,
body #aktionskarten-container.aktionskarten-wrapper > p {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 30px 15px !important;
  color: #6c757d !important;
  font-size: 1.1em !important;
  margin: 0 !important;
}

/* ==========================================================================
   9. Responsivität
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --karten-padding-vertikal: 12px;
    --karten-padding-horizontal: 15px;
    --karten-randradius: 4px;
    --karten-titel-groesse: 1.3em;
    --karten-datum-groesse: 1.25em;
    --karten-zeit-groesse: 1.25em;
    --karten-beschreibung-groesse: 0.85em;
  }
  body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit {
    font-size: 0.95em !important; /* Basis für Icon und Text */
    gap: 8px !important; /* Weniger Abstand zwischen Icon und Text */
  }
  body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-icon {
    width: 2.5em; /* Icongröße proportional anpassen */
    height: 2.5em;
  }
  body #aktionskarten-container.aktionskarten-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 15px !important;
  }
  body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte {
    min-height: 330px !important;
  }
   body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-beschreibung {
    min-height: 130px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --karten-titel-groesse: 1.25em;
    --karten-datum-groesse: 1.2em;
    --karten-zeit-groesse: 1.1em;
    --karten-beschreibung-groesse: 0.85em;
  }
  body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-datum-zeit .datum-zeit-icon {
    width: 2.4em; /* Icongröße proportional anpassen */
    height: 2.4em;
  }
  body #aktionskarten-container.aktionskarten-wrapper {
    grid-template-columns: 1fr !important;
    padding: 10px 0 !important;
  }
  body #aktionskarten-container.aktionskarten-wrapper > div.aktionskarte {
    min-height: 310px !important;
  }
   body #aktionskarten-container.aktionskarten-wrapper .aktionskarte .karte-beschreibung {
    min-height: 110px !important;
  }
}