/* ==========================================================================
   prices.css — Seitenstil „Preise“ (views/prices.php)

   Ergänzt base.css, layout.css und components.css. Hier stehen ausschliesslich
   Klassen mit dem Seitenpraefix „prices“; alle Farben, Abstaende und Kurven
   kommen aus den Tokens in base.css. Keine festen Textbreiten, kein !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kopf: Ueberschrift, Kassenhinweis, ein Handlungsaufruf
   -------------------------------------------------------------------------- */
.pricesIntro__head{
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}

.pricesIntro__note{
  max-width:68ch;
}

.pricesIntro__cta{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   2. Das hervorgehobene Angebot (prices.json: "feature": true)
   -------------------------------------------------------------------------- */
.pricesFeature__inner{
  display:grid;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}

@media (min-width:900px){
  .pricesFeature__inner{
    grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  }
}

.pricesFeature__text{
  max-width:52ch;
}

.pricesFeature__hint{
  max-width:50ch;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

/* Das Abzeichen ragt oben ueber den Kartenrand — dafuer etwas Luft lassen. */
.pricesFeature__card{
  align-self:start;
  margin-top:var(--s3);
}

.pricesFeature__price{
  margin:0;
}

/* --------------------------------------------------------------------------
   3. Die Preisliste — eine Spalte wie die gedruckte Liste der Praxis:
      links Name mit Bestandteilen und Dauer, rechts der Preis
   -------------------------------------------------------------------------- */
.pricesList{
  max-width:56rem;
  padding:clamp(.5rem,1.5vw,1rem) clamp(1.25rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background-color:var(--paper);
  box-shadow:var(--sh-xs);
}

.pricesList__items{
  max-width:none;
  margin:0;
  padding:0;
}

.pricesList__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4) var(--s6);
  padding-block:clamp(1rem,2.2vw,1.35rem);
  border-bottom:1px solid var(--line-soft);
}

.pricesList__row + .pricesList__row{
  margin-top:0;
}

.pricesList__service{
  min-width:0;
}

.pricesList__name{
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--ink);
}

.pricesList__name + .pricesList__details{
  margin-top:.3rem;
}

.pricesList__details{
  max-width:62ch;
  font-size:var(--fs-xs);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.pricesList__price{
  flex:0 0 auto;
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--clay-800);
  white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}

/* Der Schlusssatz der gedruckten Liste; das Symbol laeuft im Text mit. */
.pricesList__gift{
  max-width:none;
  margin-top:clamp(1.5rem,3vw,2rem);
  font-size:var(--fs-base);
  font-weight:500;
  color:var(--clay-700);
  text-align:center;
  hyphens:manual;
  -webkit-hyphens:manual;
}

.pricesList__gift > svg{
  display:inline-block;
  margin-inline-end:var(--s2);
  vertical-align:-.2em;
}

/* Auf schmalen Bildschirmen mehr Platz fuer lange Namen wie
   „Fußreflexzonenmassage“, damit der Preis rechts stehen bleiben kann. */
@media (max-width:519.98px){
  .pricesList{
    padding-inline:var(--s4);
  }

  .pricesList__row{
    gap:var(--s3);
  }

  .pricesList__name,
  .pricesList__price{
    font-size:var(--fs-base);
  }
}

/* Fussnote: Preisstand und Umsatzsteuerhinweis aus data/prices.json. */
.pricesFoot{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  max-width:68ch;
  margin-top:clamp(2rem,4vw,3rem);
  margin-bottom:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.pricesFoot > svg{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:.25em;
  color:var(--clay-600);
}

/* --------------------------------------------------------------------------
   4. Fragen und Antworten
   -------------------------------------------------------------------------- */
.pricesFaq .faq__a p{
  margin:0;
}

/* Ohne Skript bleibt keine Antwort verborgen. */
html.no-js .pricesFaq .faq__a{
  grid-template-rows:1fr;
}

@media (scripting:none){
  .pricesFaq .faq__a{
    grid-template-rows:1fr;
  }
}

/* --------------------------------------------------------------------------
   5. Abschlussband
   -------------------------------------------------------------------------- */

/* Die Welle traegt den Ton der vorangehenden Sektion und laeuft in das Band hinein. */
.pricesCta__wave{
  color:var(--sand-2);
}

.pricesCta__inner{
  display:grid;
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem);
}

@media (min-width:900px){
  .pricesCta__inner{
    grid-template-columns:minmax(0,1.15fr) auto;
  }
}

.pricesCta__text{
  max-width:52ch;
}

.pricesCta__actions{
  gap:var(--s4) var(--s5);
  margin:0;
}

.pricesCta__phone{
  font-size:var(--fs-base);
  font-weight:600;
}

/* --------------------------------------------------------------------------
   6. Druck: die Preisliste soll auf Papier lesbar bleiben
   -------------------------------------------------------------------------- */
@media print{
  .pricesIntro__cta,
  .pricesCta,
  .pricesFeature__card .card__foot{
    display:none;
  }

  .pricesList{
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
  }

  .pricesList__row{
    break-inside:avoid;
  }

  .pricesList__price{
    color:#000;
  }

  .pricesFeature__card{
    border-color:#999;
    box-shadow:none;
  }

  .pricesFaq .faq__a{
    grid-template-rows:1fr;
  }
}