/* =============================================================================
   pages/service.css — Leistungsdetail (views/service.php)

   Laedt nach base.css, layout.css und components.css. Hier stehen ausschliesslich
   Klassen mit dem Praefix "service" — alle uebrigen Bausteine (card, listCheck,
   note, priceCard, ctaBand, tag, btn) kommen unveraendert aus components.css.
   Farben, Abstaende, Kurven und Keyframes stammen aus den Tokens in base.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Kopfstreifen
   Warmer Verlauf statt Vollfarbe, damit der Kopf die Kopfleiste ruhig traegt.
   -------------------------------------------------------------------------- */
.serviceHero{
  overflow:hidden;
  background-image:
    radial-gradient(120% 92% at 6% 0%,var(--clay-50),transparent 58%),
    radial-gradient(96% 86% at 100% 14%,var(--stone-50),transparent 62%);
}

.serviceHero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.25rem,5vw,4.5rem);
  align-items:center;
}

.serviceHero__text{
  display:grid;
  gap:var(--s4);
  justify-items:start;
}

.serviceHero__title{
  max-width:16ch;
}

.serviceHero__tags{
  margin-top:var(--s2);
}

.serviceHero__actions{
  margin-top:var(--s3);
  gap:var(--s4);
}

/* -----------------------------------------------------------------------------
   2. Motiv im Kopf
   Mit Foto: Blob-Ausschnitt plus Icon-Kreis an der Kante.
   Ohne Foto: gezeichnete Flaeche, in deren Mitte das Icon sitzt.
   -------------------------------------------------------------------------- */
.serviceHero__media{
  position:relative;
  width:min(100%,30rem);
  margin-inline:auto;
  aspect-ratio:1;
}

.serviceHero__media--photo{
  aspect-ratio:5 / 4;
}

.serviceHero__photo{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:var(--blob-a);
  background-color:var(--sand-3);
  box-shadow:var(--sh-lg);
  animation:blobMorph 18s linear infinite alternate;
}

.serviceHero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);   /* verhindert helle Raender waehrend der Formwanderung */
}

/* Gezeichnete Flaeche: Scheibe, gestrichelter Ring, zwei Wellenlinien. */
.serviceHero__draw{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.serviceHero__drawDisc{
  fill:var(--clay-50);
}

.serviceHero__drawRing{
  fill:none;
  stroke:var(--clay-200);
  stroke-width:1.6;
  stroke-dasharray:5 11;
  transform-origin:center;
  animation:breathe 11s var(--ease-soft) infinite alternate;
}

.serviceHero__drawPath{
  --dash:520;
  fill:none;
  stroke:var(--stone-400);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:520;
  animation:drawLine 1.9s var(--ease-out) both;
}

.serviceHero__drawPath--b{
  stroke:var(--clay-300);
  animation-delay:.4s;
}

/* Salbei-Leistungen bekommen den ruhigen Gegenpol als Grundton. */
.serviceHero__media--stone .serviceHero__drawDisc{fill:var(--stone-50)}
.serviceHero__media--stone .serviceHero__drawRing{stroke:var(--stone-200)}
.serviceHero__media--stone .serviceHero__drawPath{stroke:var(--clay-300)}
.serviceHero__media--stone .serviceHero__drawPath--b{stroke:var(--stone-400)}

.serviceHero__icon{
  --heroIcon:clamp(4.75rem,11vw,6.5rem);
  position:absolute;
  display:grid;
  place-items:center;
  width:var(--heroIcon);
  height:var(--heroIcon);
  border-radius:50%;
  background-color:var(--paper);
  color:var(--clay-700);
  box-shadow:var(--sh-lg);
  animation:floatSoft 7s var(--ease-soft) infinite alternate;
}

.serviceHero__icon > svg{
  width:52%;
  height:52%;
}

.serviceHero__media--photo .serviceHero__icon{
  inset-inline-start:-.5rem;
  bottom:7%;
}

/* Mittig gesetzt ueber negative Raender — kein transform, damit floatSoft frei bleibt. */
.serviceHero__media--drawn .serviceHero__icon{
  --heroIcon:clamp(7rem,17vw,9.5rem);
  inset-inline-start:50%;
  top:50%;
  margin-inline-start:calc(var(--heroIcon) * -.5);
  margin-top:calc(var(--heroIcon) * -.5);
  box-shadow:var(--sh-md);
}

.serviceHero__media--stone .serviceHero__icon{
  color:var(--stone-700);
}

/* -----------------------------------------------------------------------------
   3. Beschreibung, Einsatzgebiete, Hinweis
   -------------------------------------------------------------------------- */
.serviceBody__grid{
  align-items:start;
}

.serviceScope{
  align-self:start;
}

.serviceScope .card__title{
  margin-bottom:var(--s2);
}

.serviceScope__list{
  max-width:none;
}

.serviceBody__note{
  margin-top:clamp(2rem,4vw,3rem);
}

/* -----------------------------------------------------------------------------
   4. Preis-Teaser
   Die Spaltenzahl richtet sich nach der Zahl der Posten, damit eine einzelne
   Karte nicht ueber die volle Breite laeuft.
   -------------------------------------------------------------------------- */
.servicePrices__grid--1{
  max-width:26rem;
}

.servicePrices__grid--2{
  max-width:48rem;
}

.servicePrices__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  margin-top:clamp(2rem,4vw,3rem);
}

.servicePrices__note{
  flex:1 1 22rem;
  margin:0;
}

/* -----------------------------------------------------------------------------
   5. Weitere Leistungen
   -------------------------------------------------------------------------- */
.serviceMore__card .card__foot{
  margin-top:auto;
}

.serviceMore__foot{
  justify-content:center;
  margin-top:clamp(2rem,4vw,3rem);
}

/* -----------------------------------------------------------------------------
   6. Abschlussband
   Die Welle traegt die Farbe der Sektion darueber (--sand aus .waveTop), der
   Innenabstand sitzt im Koerper, damit die Welle buendig oben abschliesst.
   -------------------------------------------------------------------------- */
.serviceCta__wave{
  position:relative;
  z-index:1;
}

.serviceCta__body{
  position:relative;
  z-index:1;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3.75rem,9vw,6.5rem);
}

.serviceCta__inner{
  display:grid;
  gap:var(--s4);
  justify-items:center;
  max-width:62ch;
  margin-inline:auto;
  text-align:center;
}

.serviceCta__actions{
  justify-content:center;
  gap:var(--s5);
  margin-top:var(--s3);
}

.serviceCta__actions .linkHeart > svg{
  flex:0 0 auto;
  width:1.1em;
  height:1.1em;
}

/* -----------------------------------------------------------------------------
   7. Fehlender Datensatz
   -------------------------------------------------------------------------- */
.serviceMissing__title{
  margin-block:var(--s3) var(--s4);
}

.serviceMissing__actions{
  margin-top:var(--s5);
  gap:var(--s4);
}

/* -----------------------------------------------------------------------------
   8. Bildschirmbreiten
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .serviceHero__grid{
    gap:clamp(2rem,4vw,3rem);
  }

  .serviceHero__title{
    max-width:20ch;
  }
}

/* Ab hier steht das Motiv unter dem Text; die Einsatzgebiete duerfen zweispaltig. */
@media (max-width:899px){
  .serviceHero__grid{
    grid-template-columns:minmax(0,1fr);
  }

  .serviceHero__media{
    width:min(100%,26rem);
    margin-inline:0;
  }

  .serviceHero__title{
    max-width:none;
  }
}

@media (min-width:680px) and (max-width:1023px){
  .serviceScope__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s5);
  }
}

@media (max-width:679px){
  .serviceHero__media{
    width:min(100%,20rem);
    margin-inline:auto;
  }

  .serviceHero__actions,
  .serviceMissing__actions,
  .serviceCta__actions{
    gap:var(--s3);
  }

  .servicePrices__grid--2,
  .servicePrices__grid--3{
    max-width:26rem;
  }

  .servicePrices__foot{
    justify-content:flex-start;
  }
}