/*-------------------------------------------------------------- */
/*		CardGroup */
/*  -------------------------------------------------------------- */

/* =========================================
   TYPO3 Card Group - Pflegekarten Design
   ========================================= */

.frame-type-card_group .card-group-element {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.frame-type-card_group .card-group-element-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.frame-type-card_group .card-group-element-item .card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-width: 0;

  padding: 40px 36px 32px;
  background: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.frame-type-card_group .card-group-element-item .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* kleine grüne Ecke unten rechts */
.frame-type-card_group .card-group-element-item .card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  background: #dbe8d6;
  border-top-left-radius: 26px;
}

/* Iconbereich */
.frame-type-card_group .card-img-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/* Bild NICHT skalieren – TYPO3 Größe verwenden */
.frame-type-card_group .card-img-top img,
.frame-type-card_group .card-img-top picture img,
.frame-type-card_group .card-img-top svg {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Body */
.frame-type-card_group .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  width: 100%;
  padding: 0;
  text-align: center;
}

/* Titel */
.frame-type-card_group .card-title {
  width: 100%;
  margin: 0 0 12px 0;
  padding: 0;

  line-height: 1.2;
  text-align: center;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* Text */
.frame-type-card_group .card-text {
  width: 100%;
  margin: 0;
  padding: 0;

  line-height: 1.6;
  font-weight: 400;
  color: #6c6c6c;
  text-align: center;

  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* TYPO3 setzt oft text-center auf Wrapper, hier sauber vereinheitlichen */
.frame-type-card_group .text-center,
.frame-type-card_group .card,
.frame-type-card_group .card-body,
.frame-type-card_group .card-title,
.frame-type-card_group .card-text {
  text-align: center;
}

 


.bg-pflege-dunkel {
	background-color: #c8dbc1;
	
}

.bg-pflege-hell {
	background-color: #dde6da;
	
}


/*--------------------------------------------------------------*/
/* Button */
/*--------------------------------------------------------------*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
margin-top: 10px;
  padding: 16px 36px;

  border-radius: 10px;
  border: none;

  background: #e6912a;
  color: #ffffff;

  font-size: 16px;
  font-weight: 600;

  text-decoration: none;

  /* weicher Shadow wie im Screenshot */
  box-shadow:
    0 10px 18px rgba(0,0,0,0.18),
    0 3px 0 rgba(0,0,0,0.12);

  transition: 
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Hover */
.btn:hover {
  background: #dd861f;

  transform: translateY(-2px);

  box-shadow:
    0 14px 22px rgba(0,0,0,0.22),
    0 4px 0 rgba(0,0,0,0.14);
}

/* Active */
.btn:active {
  transform: translateY(1px);

  box-shadow:
    0 4px 10px rgba(0,0,0,0.18);
}

/* Focus */
.btn:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(230,145,42,0.35),
    0 10px 18px rgba(0,0,0,0.18);
}