/* ============================================================================
   Pricing Trio — Welle 5.26 v12 Clean & Simple
   ----------------------------------------------------------------------------
   3 Preise nebeneinander, schlicht gestaltet:
   - Mobile (base): 1-spaltig, horizontale Hairline-Dividers
   - Tablet/Desktop (768+): 3-spaltig, vertikale Hairline-Dividers
   - Marketing (Mitte) mit dezenter Coral-Akzent-Linie oben + Star-Badge
   - Pure Typography + Whitespace, keine Card-Container, keine Animationen
   ============================================================================ */

.pricing-trio {
  --brand: #1498D5;
  --accent: #FF7A4D;
  --accent-deep: #E55A2B;
  --ink: var(--at-ink, #0A1B33);
  --ink-soft: var(--at-ink-soft, rgba(10, 27, 51, 0.62));
  --hairline: rgba(10, 27, 51, 0.1);

  list-style: none;
  /* Welle 5.26 v25: zurück auf margin auto — Card-Grid centered im Container.
     Editorial-Pattern: Header narrow links (880px), Body wider centered (1100px).
     Profi-Standard 2026 (Apple, Stripe, Mandarin Oriental). */
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
}

body.is-dark-bg .pricing-trio {
  --hairline: rgba(240, 244, 250, 0.12);
}

/* Welle 5.26 v20: Logo-HÖHE fix für alle, Breite folgt aus Aspect-Ratio.
   Kleiner als v19 (128→80) damit Trio in 3-col Layout bei 1100px nicht overflowed. */
.pricing-trio-logo {
  grid-area: logo;
  align-self: start;
  display: block;
  height: clamp(56px, 7vw, 80px);
  width: auto;
  max-width: 130px;
  flex-shrink: 0;
}
body.is-dark-bg .pricing-trio-logo {
  /* Logo ist Schwarz-auf-Transparent → im Dark-Mode invertieren */
  filter: invert(1) brightness(1.15);
}

/* Text-Elemente in die rechte Grid-Spalte */
.pricing-trio-label { grid-area: label; }
.pricing-trio-price { grid-area: price; }
.pricing-trio-sub   { grid-area: sub;   }

/* ─── Item ─────────────────────────────────────────────────────────────── */
.pricing-trio-item {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  /* Welle 5.26 v15: links bündig, konsequent zur Editorial-Linie */
  text-align: left;
  /* Welle 5.26 v23: Sub-Note rückt in die Text-Spalte ein (nicht mehr unter Logo),
     damit sie semantisch direkt zum Preis darüber gehört. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo label"
    "logo price"
    ".    sub";
  column-gap: clamp(0.7rem, 1.5vw, 1rem);
  row-gap: clamp(0.35rem, 0.8vw, 0.55rem);
  align-content: start;
}

/* Mobile: horizontale Hairline zwischen Items (nicht oben/unten) */
.pricing-trio-item + .pricing-trio-item {
  border-top: 1px solid var(--hairline);
}

/* ─── Label (Service-Name, mono uppercase) ────────────────────────────── */
.pricing-trio-label {
  font-family: var(--at-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

body.is-dark-bg .pricing-trio-label {
  color: rgba(240, 244, 250, 0.6);
}

/* ─── Preis ────────────────────────────────────────────────────────────── */
.pricing-trio-price {
  display: flex;
  align-items: baseline;
  /* Welle 5.26 v15: justify center→flex-start — Preis links bündig */
  justify-content: flex-start;
  gap: 0.35rem;
  font-family: var(--at-font-display, var(--font-main, 'Inter', system-ui, sans-serif));
  flex-wrap: wrap;
}

.pricing-trio-amount {
  /* Welle 5.26 v21: kleiner (max 42→32px) damit "from 2,500 ฿" 1-zeilig in
     die Trio-Spalte passt und nicht ins Nachbar-Item überläuft. */
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
}

body.is-dark-bg .pricing-trio-amount {
  color: rgba(240, 244, 250, 0.96);
}

.pricing-trio-period {
  font-family: var(--at-font-body, inherit);
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

body.is-dark-bg .pricing-trio-period {
  color: rgba(240, 244, 250, 0.55);
}

/* ─── Sub-Note (Welle 5.26 v22+v24: Mono-Uppercase, kompakt für 1-Zeile) ── */
.pricing-trio-sub {
  font-family: var(--at-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  /* v24: kleiner + weniger letter-spacing + nowrap damit alle 3 Subs in 1 Zeile passen */
  font-size: clamp(0.6rem, 0.72vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  white-space: nowrap;
}

body.is-dark-bg .pricing-trio-sub {
  color: rgba(240, 244, 250, 0.55);
}

/* ─── Featured (Marketing) — Coral-Akzent ─────────────────────────────── */
.pricing-trio-item--featured .pricing-trio-label {
  color: var(--accent-deep);
}

.pricing-trio-item--featured .pricing-trio-amount {
  color: var(--accent-deep);
}

body.is-dark-bg .pricing-trio-item--featured .pricing-trio-label,
body.is-dark-bg .pricing-trio-item--featured .pricing-trio-amount {
  color: #FF9F7A;
}

.pricing-trio-star {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--accent);
  font-size: 0.95em;
}

body.is-dark-bg .pricing-trio-star {
  color: #FF9F7A;
}

/* ─── Tablet/Desktop (768+): 3-spaltig mit vertikalen Hairlines ───────── */
@media (min-width: 768px) {
  .pricing-trio {
    /* Welle 5.26 v20: minmax(0,1fr) verhindert Overflow wenn min-content
       der Items (Logo + Preis-Text) breiter wäre als 1/3 des Containers. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Horizontale Hairlines wieder weg (waren für Mobile-Stack) */
  .pricing-trio-item + .pricing-trio-item {
    border-top: none;
  }

  /* Vertikale Hairlines ZWISCHEN den Spalten (nicht außen) */
  .pricing-trio-item + .pricing-trio-item {
    border-left: 1px solid var(--hairline);
  }
}