/*
Theme Name:  Skydive Exit Child
Theme URI:   https://www.skydive-exit.com
Template:    betheme
Author:      Skydive Exit e.V.
Description: Child-Theme fuer skydive-exit.com. Zentrale Design-Tokens und wiederverwendbare Bausteine fuer die schrittweise Modernisierung. Erster Baustein: Preisliste Tandemsprung.
Version:     1.0.0
*/

/* =====================================================================
   1. DESIGN-TOKENS  –  hier zentral pflegen, gilt fuer die ganze Seite
   ===================================================================== */
:root {
  --sx-brand:      #7d1622;   /* Weinrot – Ueberschriften, Buttons        */
  --sx-brand-dark: #5e0f19;   /* Hover / aktiv                            */
  --sx-accent:     #c0392b;   /* Logo-Rot – Akzente, Icons, Rabatte       */
  --sx-ink:        #2b2b2b;   /* Fliesstext                               */
  --sx-muted:      #7a7a7a;   /* Sekundaertext / Hinweise                 */
  --sx-line:       #e7e3dc;   /* feine Trennlinien                        */
  --sx-soft:       #faf6f2;   /* dezenter Hintergrund                     */
  --sx-radius:     10px;
}

/* =====================================================================
   2. WIEDERVERWENDBARE BAUSTEINE  –  site-weit einsetzbar
   ===================================================================== */

/* Eyebrow / Kicker ------------------------------------------------- */
.sx-eyebrow {
  margin: 0 0 .3rem;
  color: var(--sx-accent);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Abschnitts-Ueberschrift ----------------------------------------- */
.sx-section-title {
  margin: 0 0 1.8rem;
  color: var(--sx-brand);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

/* Buttons ---------------------------------------------------------- */
.sx-btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: var(--sx-radius);
  background: var(--sx-brand);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease;
}
.sx-btn,
a.sx-btn,
a.sx-btn:hover,
a.sx-btn:focus { color: #fff; text-decoration: none; }
.sx-btn:hover,
.sx-btn:focus { background: var(--sx-brand-dark); }

.sx-btn--ghost { background: #fff; border: 1px solid var(--sx-brand); }
.sx-btn--ghost,
a.sx-btn--ghost,
a.sx-btn--ghost:hover,
a.sx-btn--ghost:focus { color: var(--sx-brand); }
.sx-btn--ghost:hover,
.sx-btn--ghost:focus { background: var(--sx-soft); }

/* CTA-Leiste ------------------------------------------------------- */
.sx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--sx-line);
}
.sx-cta__note { margin: 0; color: var(--sx-muted); font-size: 13px; }

/* =====================================================================
   3. BAUSTEIN: PREISLISTE (Tandemsprung)
   ===================================================================== */
.sx-pricelist {
  max-width: 720px;
  color: var(--sx-ink);
  font-family: inherit;   /* uebernimmt die Betheme-Schrift */
}

.sx-pricelist__section { margin-bottom: 1.7rem; }
.sx-pricelist__section:last-of-type { margin-bottom: 0; }

/* Sektions-Kopf (Tandemsprung / Fotoserie / …) – neutralisiert Betheme-Heading-Styles */
.sx-pricelist .sx-pricelist__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 .6rem !important;
  padding: 0 0 .5rem !important;
  border-bottom: 2px solid var(--sx-brand);
  color: var(--sx-brand) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.sx-pricelist__heading svg {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: var(--sx-accent);
}

/* Preiszeile: Label … Punkte … Wert */
.sx-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: .5rem 0;
}
.sx-price-row__label { font-size: 15px; }
.sx-price-row__desc  { display: block; margin-top: 2px; color: var(--sx-muted); font-size: 12px; }
.sx-price-row__dots  { flex: 1 1 auto; border-bottom: 1px dotted #cfc9bf; transform: translateY(-4px); }
.sx-price-row__value { white-space: nowrap; font-size: 16px; font-weight: 500; }
.sx-price-row__value--discount { color: var(--sx-accent); }

.sx-pricelist__fine {
  margin: .4rem 0 0;
  color: var(--sx-muted);
  font-size: 12px;
  font-style: italic;
}

/* Responsive ------------------------------------------------------- */
@media (max-width: 480px) {
  .sx-section-title { font-size: 20px; }
  .sx-price-row { flex-wrap: wrap; }
  .sx-price-row__dots { display: none; }
  .sx-price-row__value { margin-left: auto; }
}

/* =====================================================================
   4. BAUSTEIN: Story / Bild-Text-Karten (Magazin-Layout)
   ===================================================================== */
.sx-story {
  max-width: 1080px;
  color: var(--sx-ink);
  font-family: inherit;
}

/* gemeinsames Bild-Element (Bild kommt per background-image aus dem Snippet) */
.sx-story__img {
  background: var(--sx-soft) center center / cover no-repeat;
}

/* Feature-Karte (gross, oben) */
.sx-story__feat {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  align-items: center;
  overflow: hidden;
  margin-bottom: 1.1rem;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
}
.sx-story__feat .sx-story__img { aspect-ratio: 16 / 10; height: 100%; }
.sx-story__feat-body { padding: 1.5rem 1.6rem 1.5rem 0; }

/* Karten-Raster */
.sx-story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}
.sx-story__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
}
.sx-story__card .sx-story__img { aspect-ratio: 16 / 10; }
.sx-story__card-body { padding: 1.1rem 1.15rem; }

/* Textbausteine */
.sx-story__kicker {
  margin: 0 0 .35rem;
  color: var(--sx-accent);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sx-story .sx-story__title {
  margin: 0 0 .4rem !important;
  color: var(--sx-brand) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.sx-story .sx-story__title--feat { font-size: 18px; }
.sx-story__text { margin: 0; font-size: 14px; line-height: 1.65; }
.sx-story__text + .sx-story__text { margin-top: .6rem; }

/* Responsive */
@media (max-width: 560px) {
  .sx-story__feat { grid-template-columns: 1fr; }
  .sx-story__feat .sx-story__img { aspect-ratio: 16 / 10; height: auto; }
  .sx-story__feat-body { padding: 0 1.2rem 1.2rem; }
}

/* =====================================================================
   5. BAUSTEIN: Responsives Video-Embed (16:9)
   ===================================================================== */
.sx-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-soft);
}
.sx-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video-Block innerhalb der Story */
.sx-story__video { margin-top: 1.4rem; }