/* ============================================================
   TCM.ch UI-Primitives (DS-Cohort-2a, 10.10.2026)
   Namespaced (.tcm-*) gegen Kollisionen mit Legacy-.btn-Regeln.
   Nutzt ausschliesslich Tokens aus /styles/tokens.css.
   Geladen bisher NUR auf der Homepage (index.astro); sitewide-
   Verlinkung erst mit der Nav/Footer-Kohorte.
   Brand-Status: Pill = freigegeben (Hero-Referenz); Mint-Primär-CTA
   auf Weiss folgt deployten Mustern, final PENDING BRAND GUIDELINES
   (PDF liegt ausserhalb des Repos) - siehe docs/design-system.md §5.
   ============================================================ */
.tcm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* Box-Metrik bewusst identisch zur Legacy-.glb-btn (46px hoch, padding 14/24):
     Migration darf NICHTS verschieben; 46px erfuellt das 44px-Touch-Minimum. */
  min-height:44px;padding:14px 24px;border:0;border-radius:var(--r-pill,999px);
  font-family:var(--font-sans);font-size:15.5px;font-weight:700;line-height:normal;
  text-decoration:none;cursor:pointer;
  transition:background var(--t-base,200ms) var(--ease-in-out,ease),
             color var(--t-base,200ms) var(--ease-in-out,ease),
             transform var(--t-fast,150ms) var(--ease-out,ease);
}
.tcm-btn:hover{transform:translateY(-1px)}
.tcm-btn:active{transform:translateY(0)}
.tcm-btn:focus-visible{outline:3px solid rgba(2,11,16,.4);outline-offset:3px}

/* Primär-CTA auf hellen Flaechen: Mint-Flaeche, Rich-Black-Text (11.6:1). */
.tcm-btn--mint{background:var(--surface-brand);color:var(--text-on-brand)}
.tcm-btn--mint:hover{background:var(--brand-hover);color:var(--text-on-brand)}

/* ── DS-Cohort-2b (10.10.2026): Zürich-Funnel-CTAs (#s-standorte).
   Paritaets-Nachbau der #home-content-!important-Schicht, die nach dem
   Klassen-Swap nicht mehr greift - einzige gewollte Abweichung: Pill-Radius.
   --lg ist der scoped Size/Glow-Modifier (48px, 15/26, Mint-Schatten),
   damit die deployten 2a-Buttons unveraendert bleiben. */
.tcm-btn--lg{min-height:48px;padding:15px 26px;gap:9px;letter-spacing:-0.01em;white-space:nowrap;box-shadow:0 8px 24px rgba(26,226,136,.35)}
.tcm-btn--lg:hover{box-shadow:0 10px 28px rgba(26,226,136,.45)}
.tcm-btn--outline{min-height:48px;background:transparent;color:#0d0d0d;border:1.5px solid rgba(13,13,13,.22);padding:14px 24px;font-size:15px;font-weight:600;white-space:nowrap}
.tcm-btn--outline:hover{background:rgba(13,13,13,.06);border-color:rgba(13,13,13,.4);transform:none}
@media(max-width:600px){#s-standorte .tcm-btn{justify-content:center;width:100%}}

/* ── DS-Cohort-3b-A (10.10.2026): Homepage-Flaechen auf die Softriver-Palette.
   Nur hier (ui.css laedt ausschliesslich auf der Homepage; ID-Scope schlaegt
   die globalen Klassen-/Zebra-Regeln). home.css bleibt unangetastet:
   - Dark-Baender von Legacy-#0d0d0d auf Rich Black (--brand-black);
   - .svc-section neutralisiert NUR hier die globale
     .section:nth-child(even)-Zebra-Regel (#FAFAFA -> Weiss). */
#home-content .wa-section{background:var(--brand-black)}
#home-content .cta-band.home-cta-merged{background:var(--brand-black)}
#home-content .svc-section{background:#fff}

/* ── DS-Cohort-3c-A (10.10.2026): EINE Karten-Hover-Sprache auf der Homepage.
   city-/svc-Cards hoverten Mint-Tint (prae-Refinement-04); hier - und nur
   hier - auf die monochrome Rich-Black-Border der glb-/hf-Karten angeglichen.
   translateY/Shadow/Transition der Legacy-Regeln bleiben unberuehrt
   (nur border-color wird ueberschrieben); Fremdrouten behalten Mint. */
/* !important + hoehere Spezifitaet noetig: die Legacy-Hover-Schicht
   (#home-content .city-card:hover{...!important}) laedt nach ui.css. */
#home-content #s-standorte .city-card:hover,
#home-content .svc-section .svc-card:hover{border-color:var(--brand-black)!important}

/* ── DS-Cohort-3c-B (10.10.2026): sichtbarer Tastatur-Fokus fuer die Karten.
   Keine konkurrierende Outline-Regel auf city-/svc-Cards (geprueft) -> ohne
   !important. .55 Alpha ergibt auf Weiss ca. 4.5:1 (Fokus-Norm >= 3:1).
   Bekannte Luecke (separat): svc-card ist <div role="button"> ohne
   Enter/Space-Aktivierung - nicht Teil dieser Kohorte. */
#home-content #s-standorte .city-card:focus-visible,
#home-content .svc-section .svc-card:focus-visible{outline:3px solid rgba(2,11,16,.55);outline-offset:3px}

/* ── DS-Cohort-3c-C (10.10.2026): Kraeuter-Feature-Card als native <a>.
   Neutralisiert die UA-Link-Optik. Die 8 svc-Cards tragen die Paritaet
   inline (Massage-Card-Praezedenz), weil ihr Grid zur Buildzeit auch nach
   /standorte/bottighofen/ kopiert wird, wo ui.css nicht laedt. */
#home-content a.kt-feature{color:inherit;text-decoration:none}

@media(prefers-reduced-motion:reduce){
  .tcm-btn{transition:none}
  .tcm-btn:hover,.tcm-btn:active{transform:none}
}