/*  Preis-Section der Startseite (#preise).
 *
 *  Die Klassen .pricing-home-wrap, .price-wrapper usw. kommen auf sechs Seiten
 *  vor. Alle Regeln hier sind deshalb unter .cl-preise verschachtelt und
 *  betreffen ausschliesslich diese eine Section.
 *
 *  Ausgangslage: durchsichtige Karten mit Haarlinie auf kräftigem Blau,
 *  dazu .white-text, das im Projekt auf #000 gesetzt ist – schwarzer Text auf
 *  Blau. Ausserdem zentrierte die Umhüllung ihre Inhalte vertikal, wodurch die
 *  Preise je nach Länge der Überschrift auf unterschiedlicher Höhe standen.
 */

.cl-preise {
  --p-blau: #9dc0dc;
  --p-dunkel: #141414;
  --p-leise: #535756;
  --p-akzent: #295b58;
  --p-gelb: #ffdb51;
  background-image: linear-gradient(180deg, #b3d0e6 0%, var(--p-blau) 62%);
}

/* ---------------------------------------------------------- Überschrift */

.cl-preise .section-title { max-width: 720px; margin-bottom: 44px; }

.cl-preise .cl-preise-kicker {
  display: block;
  margin-bottom: 10px;
  font-family: Epilogue, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1f4a46;          /* Petrol wäre mit 4,0:1 grenzwertig */
}

/* Weiss wäre auf diesem hellen Blau nur 1,9:1 – deutlich zu wenig. Ein
   dunkles Blaugrau aus der Palette kommt auf 7:1 und bleibt farblich passend.
   (.white-text ist im Projekt ohnehin auf #000 gesetzt.) */
.cl-preise .section-title h2.white-text { color: #16323d; }

.cl-preise .cl-preise-lead {
  margin: 14px 0 0;
  font-family: Epilogue, sans-serif;
  font-size: 17px;
  line-height: 1.6em;
  color: #24414f;
}

/* ---------------------------------------------------------------- Karten */

.cl-preise .pricing-home-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;      /* gleiche Höhe statt vertikal zentriert */
}

.cl-preise .price-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  padding: 38px 30px 32px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 44, 64, .16);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.cl-preise .price-wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: #e2edec;
}

.cl-preise .price-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(18, 44, 64, .22);
}

/* Hervorgehobene mittlere Karte */
.cl-preise .central-price {
  background: linear-gradient(180deg, #fffdf4 0%, #ffffff 40%);
  box-shadow: 0 18px 44px rgba(18, 44, 64, .24);
}

.cl-preise .central-price::before { background: var(--p-gelb); height: 6px; }

/* ---------------------------------------------------------- Kartentexte */

.cl-preise .price-wrapper h5 {
  min-height: 2.5em;                 /* zweizeilige Titel ausgleichen */
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  font-family: Epilogue, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25em;
  text-align: center;
}

.cl-preise .price-wrapper h5,
.cl-preise .price-wrapper h5 strong { color: var(--p-dunkel); }

/* .primary-text ist Gelb – auf weisser Karte nicht lesbar */
.cl-preise .price-wrapper h5.primary-text,
.cl-preise .price-wrapper h5.primary-text strong { color: var(--p-dunkel); }

.cl-preise .cl-preis-zeile {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 0;
}

.cl-preise .price {
  margin: 0;
  font-family: Epilogue, sans-serif;
  font-size: 62px;
  font-weight: 900;
  line-height: 1em;
  color: var(--p-akzent);
}

.cl-preise .central-price .price { color: var(--p-dunkel); }

.cl-preise .cl-preis-einheit {
  font-family: Epilogue, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--p-leise);
  white-space: nowrap;
}

.cl-preise .price-wrapper p {
  flex: 1 1 auto;                    /* schiebt die Schaltfläche nach unten */
  margin: 20px 0 22px;
  padding-top: 20px;
  border-top: 1px solid #e2edec;
  width: 100%;
  font-size: 15px;
  line-height: 1.65em;
  color: var(--p-leise);
  text-align: center;
  font-weight: 400;
}

/* auch hier: .white-text ist #000 und .dark-text sitzt auf hellem Grund */
.cl-preise .price-wrapper p.white-text { color: var(--p-leise); font-weight: 400; }

/* ------------------------------------------------------------ Schaltfläche */

.cl-preise .cl-preis-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  border: 1.5px solid var(--p-dunkel);
  border-radius: 10px;
  background: transparent;
  font-family: Epilogue, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--p-dunkel);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}

.cl-preise .cl-preis-cta:hover { background: var(--p-gelb); border-color: var(--p-gelb); }

.cl-preise .central-price .cl-preis-cta {
  background: var(--p-gelb);
  border-color: var(--p-gelb);
}

.cl-preise .central-price .cl-preis-cta:hover { background: #ffd126; border-color: #ffd126; }

.cl-preise .cl-preis-cta:focus-visible { outline: 3px solid var(--p-akzent); outline-offset: 2px; }

.cl-preise .cl-preis-cta svg { flex: none; transition: transform .2s; }
.cl-preise .cl-preis-cta:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------------- Fussnote */

.cl-preise .cl-preise-fuss {
  margin: 30px 0 0;
  text-align: center;
  font-family: Epilogue, sans-serif;
  font-size: 15px;
  line-height: 1.6em;
  color: #24414f;
}

/* Wie auf dem Rest der Seite: Links ohne Unterstreichung, erst beim
   Überfahren hervorgehoben. */
.cl-preise .cl-preise-fuss a {
  color: #16323d;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 50, 61, .35);
  transition: color .2s, border-color .2s;
}

.cl-preise .cl-preise-fuss a:hover {
  color: var(--p-akzent);
  border-color: var(--p-akzent);
}

/* ------------------------------------------------------------------ Schmal */

@media (max-width: 991px) {
  .cl-preise .pricing-home-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-preise .price-wrapper h5 { min-height: 0; }
}

@media (max-width: 767px) {
  .cl-preise .pricing-home-wrap { grid-template-columns: 1fr; gap: 18px; }
  .cl-preise .price-wrapper { padding: 30px 22px 26px; }
  .cl-preise .price { font-size: 52px; }
  .cl-preise .section-title { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-preise .price-wrapper,
  .cl-preise .cl-preis-cta svg { transition: none; }
  .cl-preise .price-wrapper:hover { transform: none; }
}