/* ==========================================================================
   services.css — Leistungsuebersicht (Route "leistungen", views/services.php)

   Ergaenzt base.css, layout.css und components.css. Alle eigenen Klassen
   tragen das Praefix "services"; Komponenten aus dem Klassen-Kontrakt werden
   nur dort nachjustiert, wo sie innerhalb dieser Seite stehen.

   Gliederung
     1. Kopfbereich
     2. Kartenraster
     3. Leistungskarte und ihre Akzentfarbe
     4. Kosten und Verordnung
     5. Abschlussband
     6. Druck
   ========================================================================== */


/* ==========================================================================
   1. KOPFBEREICH
   ========================================================================== */

/* Die Deko-Blobs sitzen mit negativen Versaetzen — ohne Beschnitt wuerden sie
   ueber die Sektionskante hinaus in die Kopfleiste laufen. */
.servicesHero{
  overflow:hidden;
}

.servicesHero__head{
  max-width:58ch;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}

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

.servicesHero__badges{
  max-width:none;
}


/* ==========================================================================
   2. KARTENRASTER
   ========================================================================== */

/* Ueber einem dreispaltigen Raster wirkt ein schmalerer Kopf ruhiger als die
   62ch der Vorgabe, und er darf naeher an die Karten ruecken. */
.servicesList__head{
  max-width:52ch;
}

.servicesList .sectionHead{
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}

/* Das Raster ist eine Liste: Punkte, Einzug und Textbreite fallen weg,
   ebenso der Zeilenabstand zwischen <li>-Geschwistern aus base.css. */
.servicesGrid{
  max-width:none;
  margin:0;
  padding:0;
  list-style:none;
}

.servicesGrid__cell{
  display:flex;
  margin:0;
}

/* Die Zelle traegt den Versatz des Rasters, die Karte das Einblenden —
   so geraten die beiden transform-Werte einander nicht in die Quere. */
.servicesGrid__cell > .serviceCard{
  width:100%;
}


/* ==========================================================================
   3. LEISTUNGSKARTE UND IHRE AKZENTFARBE
   ========================================================================== */

/* Jede Karte bleibt hell und ruhig; getauscht wird nur der Akzent. Die Werte
   kommen aus dem Feld "accent" in data/services.json.
     --servicesInk   Textfarbe fuer Links und Titel  (AA-sicher auf Weiss)
     --servicesIcon  Zeichenfarbe im Icon-Kreis
     --servicesTint  Fuellung des Icon-Kreises, --servicesTintHover beim Zeigen
     --servicesNo    dezente Ziffer (Grossdisplay, reines Dekor)
     --servicesEdge  Haarlinie an der Kartenoberkante */
.servicesCard--clay{
  --servicesInk:var(--clay-800);
  --servicesIcon:var(--clay-700);
  --servicesTint:var(--clay-50);
  --servicesTintHover:var(--clay-100);
  --servicesNo:var(--clay-200);
  --servicesEdge:var(--clay-400);
}

.servicesCard--stone{
  --servicesInk:var(--stone-800);
  --servicesIcon:var(--stone-700);
  --servicesTint:var(--stone-50);
  --servicesTintHover:var(--stone-100);
  --servicesNo:var(--stone-200);
  --servicesEdge:var(--stone-400);
}

/* .card bringt eine eigene, kurze transition mit und wuerde damit die des
   Reveal-Systems ersetzen — die Karte erschiene ohne Ueberblendung. Hier
   stehen beide Listen zusammen: lang beim Einblenden, kurz beim Zeigen. */
.servicesCard.rv{
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft),
    background-color var(--t-base) var(--ease-soft);
}

.servicesCard.rv.is-in{
  transition:
    opacity .8s var(--ease-out),
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft),
    background-color var(--t-base) var(--ease-soft);
}

/* Haarlinie in der Akzentfarbe, die nach rechts ausblendet. */
.servicesCard::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background-image:linear-gradient(90deg,var(--servicesEdge),transparent 72%);
  opacity:.75;
  pointer-events:none;
  transition:opacity var(--t-base) var(--ease-soft);
}

.servicesCard .card__icon{
  background-color:var(--servicesTint);
  color:var(--servicesIcon);
}

.servicesCard .serviceCard__no{
  color:var(--servicesNo);
}

.servicesCard .linkArrow{
  color:var(--servicesInk);
}

/* Die ganze Karte ist klickbar: ihr Link legt sich als Flaeche darueber.
   Deshalb erreicht :hover den Pfeil-Link nie — die Karte uebernimmt. */
@media (hover:hover){
  .servicesCard:hover::before{
    opacity:1;
  }

  .servicesCard:hover .card__icon{
    background-color:var(--servicesTintHover);
    color:var(--servicesIcon);
  }

  .servicesCard:hover .card__title{
    color:var(--servicesInk);
  }

  .servicesCard:hover .linkArrow{
    color:var(--servicesInk);
    gap:.7rem;
  }

  .servicesCard:hover .linkArrow .btn__icon{
    transform:translateX(4px);
  }
}

.servicesCard:focus-within::before{
  opacity:1;
}

.servicesCard:focus-within .card__icon{
  background-color:var(--servicesTintHover);
  color:var(--servicesIcon);
}

.servicesCard:focus-within .card__title{
  color:var(--servicesInk);
}

.servicesCard:focus-within .linkArrow .btn__icon{
  transform:translateX(4px);
}


/* ==========================================================================
   4. KOSTEN UND VERORDNUNG
   ========================================================================== */

/* Direkt darunter beginnt die Welle des Abschlussbandes — der letzte Abschnitt
   braucht deshalb unten weniger Luft als oben. */
.servicesTerms{
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}

.servicesTerms__head{
  max-width:52ch;
}

.servicesTerms__grid{
  align-items:start;
}

.servicesTerms__note{
  align-self:start;
  max-width:none;
}

.servicesTerms__actions{
  margin-top:clamp(1.75rem,4vw,2.5rem);
}

/* Zwischen 680 und 900 px wird die Spalte fuer den Fliesstext eng.
   Dort bekommt der Text mehr Platz als der Hinweis. */
@media (min-width:680px) and (max-width:1023px){
  .servicesTerms__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  }
}


/* ==========================================================================
   5. ABSCHLUSSBAND
   ========================================================================== */

.servicesCta{
  position:relative;
}

/* Die Zugabe fuer die Fusswelle (layout.css) gehoert hier ins farbige Band —
   in der durchsichtigen Huelle schiene der helle Seitengrund durch. */
main > .servicesCta::after{
  content:none;
}

.servicesCta > .ctaBand::after{
  content:'';
  display:block;
  height:calc(var(--footer-wave-h) * .55);
}

/* Die Welle liegt vor dem Band und traegt dessen Grundfarbe. */
.servicesCta__wave{
  color:var(--clay-700);
  height:clamp(40px,5.5vw,88px);
  margin-bottom:-1px;
}

/* Der helle Verlauf des Bandes setzt etwas tiefer an, damit an der Unterkante
   der einfarbigen Welle keine sichtbare Kante entsteht. */
.servicesCta .ctaBand{
  background-image:
    radial-gradient(80% 120% at 14% 18%,var(--clay-600),transparent 58%),
    radial-gradient(60% 100% at 92% 100%,var(--clay-800),transparent 62%);
}

.servicesCta__head{
  margin-bottom:0;
}

.servicesCta__actions{
  justify-content:center;
  margin-top:var(--s3);
}


/* ==========================================================================
   6. DRUCK — Deko weg, Inhalt bleibt lesbar
   ========================================================================== */

@media print{
  .servicesHero .bgBlob,
  .servicesCta__wave{
    display:none;
  }

  .servicesGrid{
    display:block;
  }

  .servicesGrid__cell{
    break-inside:avoid;
    margin-bottom:.6rem;
  }

  .servicesCard::before{
    display:none;
  }

  .servicesCta .ctaBand{
    background:none;
    color:#000;
  }
}