/* ==========================================================================
   Pakete-Seite: Leistungs-Buehne statt SaaS-Pricing
   Additiv zu style.css (Tokens/Primitives, nur konsumiert - kein Hex-Wert
   hier). Scope: ausschliesslich site/pakete/index.html.
   ========================================================================== */

/* ---------- Page-Hero: Riesen-Headline + Grain-Buehne ---------- */
.page-hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page-hero h1 {
  font-size: var(--size-loud);
  margin-top: clamp(18px, 2.5vw, 28px);
}

/* ---------- Preiskarten: Papier-Look statt Schwebe-Karte,
   alle drei gleich gross - die featured-Hochskalierung faellt weg.
   .paper-card liefert Ring + Kartenfarbe; Radius/Border hier zurueckgesetzt,
   damit die Kartenproportionen unveraendert bleiben. ---------- */
.price-card.paper-card {
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  transition: box-shadow .3s var(--ease);
}
.price-card.paper-card:hover {
  transform: none; /* Per-Property-Falle: style.css-Hub bleibt sonst aktiv */
}
.price-card.paper-card:focus-within {
  transform: none;
  box-shadow: var(--ring-strong);
}
@media (hover: hover) {
  .price-card.paper-card:hover {
    box-shadow: var(--ring-strong);
  }
}

/* Business-Karte: kein Skalieren/Anheben mehr, kein Verlaufs-Rahmen -
   stattdessen eine 2px-Verlaufskante als oberer Abschluss. Badge bleibt
   Text-Badge (unveraendert aus style.css). */
.price-card.featured.paper-card {
  border: none;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--ring);
  transform: none;
}
.price-card.featured.paper-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.price-card.featured.paper-card:hover {
  transform: none;
}
.price-card.featured.paper-card:focus-within {
  transform: none;
  box-shadow: var(--ring-strong);
}
@media (hover: hover) {
  .price-card.featured.paper-card:hover {
    box-shadow: var(--ring-strong);
  }
}

/* Typo-Hierarchie schaerfen: Festpreis-Wort laut, Betreuungszeile fluestert */
.sec-pricing .pc-price .amt-wort {
  font-size: clamp(28px, 3.2vw, 34px);
  letter-spacing: -.02em;
}
.sec-pricing .pc-care {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  letter-spacing: .01em;
}

/* ---------- Mobil (<900px): Preiskarten als horizontaler Scroll-Snap-Slider
   statt drei gestapelter Voll-Screens. Setzt die Stapelregel aus style.css
   (.price-grid { grid-template-columns:1fr; max-width:440px; margin:auto })
   fuer diesen Breakpoint zurueck - .sec-pricing-Praefix gibt die noetige
   Spezifitaet. margin-inline/padding-inline/scroll-padding-inline spiegeln
   den .wrap-Clamp, damit die Reihe exakt an die Viewport-Kante blutet;
   padding-top haelt Raum fuer den ueberstehenden .badge-pop (-13px), sonst
   berechnet overflow-x:auto ein overflow-y:auto und schneidet ihn ab. */
@media (max-width: 900px) {
  .sec-pricing .price-grid {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: 16px;
    max-width: none;
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
    padding: 22px clamp(20px, 5vw, 40px) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: clamp(20px, 5vw, 40px);
    scrollbar-width: none;
  }
  .sec-pricing .price-grid::-webkit-scrollbar {
    display: none;
  }
  .sec-pricing .price-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    padding: 28px 24px 26px;
  }
  .sec-pricing .pc-feats {
    gap: 10px;
    margin: 18px 0 22px;
  }
}
@media (max-width: 520px) {
  .sec-pricing .price-card {
    flex-basis: 88%;
  }
}

/* ---------- Betreuung-Erklaerblock: Aside-Cards auf Papier-Look ---------- */
.care-aside-card.paper-card {
  border: none;
  transition: box-shadow .25s var(--ease);
}
@media (hover: hover) {
  .care-aside-card.paper-card:hover {
    box-shadow: var(--ring-strong);
  }
}

/* Leistungsliste (Betreuung): Verlaufs-Checkmarks statt gefuellter Icon-
   Kacheln - Gradient nur als 1.5px-Ring (Linie), keine Flaeche. Reused
   Haekchen-Glyph aus den Preiskarten-Leistungslisten. */
.care-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  box-shadow: none;
  color: var(--c3);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Mobil (<900px): Care-Sektion straffen. Duennere Zeilenabstaende
   statt der Desktop-Grosszuegigkeit; .care-aside faellt bereits in style.css
   auf zwei Karten nebeneinander um - hier nur der Innenabstand. ---------- */
@media (max-width: 900px) {
  .care-inner {
    gap: 32px;
  }
  .care-text > p {
    margin-top: 10px;
  }
  .care-list {
    gap: 12px;
    margin-top: 18px;
  }
  .care-list li {
    gap: 12px;
  }
  .care-aside {
    gap: 12px;
  }
  .care-aside-card {
    padding: 18px 20px;
  }
  .care-aside-value {
    font-size: 24px;
    margin-top: 4px;
  }
  .care-aside-note {
    margin-top: 6px;
  }
}

/* ---------- FAQ: Marker wird zur Verlaufslinie statt +/x,
   verlaengert sich beim Oeffnen ueber background-size (Muster
   .grad-underline). Summary-Hover nutzt dasselbe Muster auf dem Fragetext. --------- */
.faq-list details {
  border: none;
  box-shadow: var(--ring);
  transition: box-shadow .25s var(--ease);
}
.faq-list details:focus-within,
.faq-list details[open] {
  box-shadow: var(--ring-strong);
}
@media (hover: hover) {
  .faq-list details:hover {
    box-shadow: var(--ring-strong);
  }
}

.faq-list summary::after {
  content: "";
  width: 26px;
  height: 2px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--grad) no-repeat left center / 46% 100%;
  transition: background-size .35s var(--ease);
}
.faq-list details[open] summary::after {
  background-size: 100% 100%;
  transform: none;
}

.faq-list summary:hover .grad-underline,
.faq-list summary:focus-visible .grad-underline {
  background-size: 100% 2px;
}

/* ---------- Mobil (<900px): FAQ-Liste kompakter. min-height 48px haelt den
   Touch-Target ueber der 44px-Grenze, obwohl das Padding schrumpft. ---------- */
@media (max-width: 900px) {
  .faq-inner h2 {
    margin-bottom: 22px;
  }
  .faq-list {
    gap: 6px;
    margin-top: 22px;
  }
  .faq-list summary {
    padding: 15px 18px;
    min-height: 48px;
    gap: 12px;
  }
  .faq-list .faq-body {
    padding: 0 18px 15px;
  }
}

/* ---------- Textlink-Hover: Verlaufs-Underline statt statischer
   Unterstreichung (Business-Karte, Referenz-Link) ---------- */
.ref-inline {
  text-decoration: none;
}

/* ---------- Reduced Motion: neue background-size-Transitions bewegen
   sich nicht mehr (globaler Block in style.css deckt dies bereits ab,
   hier zusaetzlich explizit fuer die Marker/Ring-Uebergaenge dieser
   Seite abgesichert) ---------- */
@media (prefers-reduced-motion: reduce) {
  .price-card.paper-card,
  .care-aside-card.paper-card,
  .faq-list details,
  .faq-list summary::after {
    transition: none;
  }
}