/* Rogue PT · Zusatz-CSS zu Pats Bundle (Homer, 2026-09-11)
 * Deckt: aktiver Menuepunkt via body[data-page], Hover-Effekte
 * (Button-Pfeil, Nav-Underline von der Mitte, Footer-Underline).
 * Basis: Vinces Hover-Feinwerte-Spec 15:20 UTC.
 */

:root {
  --ease-out: cubic-bezier(.2, .65, .2, 1);

  /* Fluid-Typo-Skala (R4 Vince 13:38 UTC, Utopia-Formel xvw + ypx).
     Vier Stufen fuer Micro/Body/Lead und drei Headline-Groessen.
     Range 375 -> 1920, Cap-Wert wird bei 1920 erreicht. */
  --step--1: clamp(13px, 0.72vw + 11px, 15px);
  --step-0:  clamp(16px, 0.8vw + 13px, 19px);
  --step-1:  clamp(20px, 1.3vw + 15px, 26px);
  --step-2:  clamp(28px, 2.4vw + 19px, 46px);
  --step-3:  clamp(36px, 3.5vw + 22px, 68px);
  --step-4:  clamp(34px, 2.72vw + 24px, 76px);

  /* Sektions- und Gap-Tokens (R4 Vince 13:38 UTC). */
  --section-y:    clamp(72px, 8vw + 8px, 160px);
  --section-y-lg: clamp(96px, 10vw + 12px, 200px);
  --gap-sm:       clamp(12px, 1vw + 8px, 24px);
  --gap-md:       clamp(24px, 2vw + 16px, 48px);
  --gap-lg:       clamp(40px, 4vw + 20px, 80px);

  /* Button-Tokens (R3e, Vince 14:27 UTC, Standard-Default mit zwei begründeten Abweichungen) */
  --btn-height:         48px;
  --btn-padding-x:      20px;
  --btn-radius:         6px;
  --btn-font-size:      15px;
  --btn-line-height:    1;
  --btn-letter-spacing: 0.02em;
  --btn-font-weight:    500;
}

/* Aktiver Menuepunkt (Desktop und Mobile-Menu-Overlay) --------------------- */
body[data-page="home"]     header nav a[href="/"]         { color: #6B3690; }
body[data-page="about"]    header nav a[href="/about/"]    { color: #6B3690; }
body[data-page="services"] header nav a[href="/services/"] { color: #6B3690; }
body[data-page="team"]     header nav a[href="/team/"]     { color: #6B3690; }
body[data-page="faq"]      header nav a[href="/faq/"]      { color: #6B3690; }
body[data-page="contact"]  header nav a[href="/contact/"]  { color: #6B3690; }

/* Underline permanent unter aktivem Link (Purple) */
body[data-page="home"]     header nav a[href="/"]::after,
body[data-page="about"]    header nav a[href="/about/"]::after,
body[data-page="services"] header nav a[href="/services/"]::after,
body[data-page="team"]     header nav a[href="/team/"]::after,
body[data-page="faq"]      header nav a[href="/faq/"]::after,
body[data-page="contact"]  header nav a[href="/contact/"]::after {
  transform: scaleX(1) !important;
}

/* Nav-Underline (wächst aus der Mitte auf Hover). R4 Blocker: Ausnahme auf
   :not(.btn) umgestellt, weil der Nav-CTA jetzt auf janeapp.com zeigt und
   der href-Check nicht mehr greift. Sonst bekommt der Button display:inline-
   block + ::after + wird von Flex gestreckt. */
header nav > a:not(.btn):not(.nav-logo),
header nav > div > a:not(.btn) {
  position: relative;
  display: inline-block;
}
header nav > div > a:not(.btn) {
  width: fit-content;
}
header nav > div > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: #6B3690;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
  pointer-events: none;
}
header nav > div > a:not(.btn):hover::after {
  transform: scaleX(1);
}

/* Nav-CTA-Button in Flex-Nav vertikal zentrieren (R4 Blocker) -------------- */
header nav .btn {
  align-self: center;
}

/* Footer-Underline (gleich wie Nav, nur auf dem Text) ---------------------- */
footer a {
  position: relative;
  display: inline-block;
  width: fit-content;
}
footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
  pointer-events: none;
}
footer a:hover::after {
  transform: scaleX(1);
}

/* Button-Pfeil-Hover · gilt für alle .arrow-Spans in Links (Vince R3 16.09.) - */
.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms var(--ease-out), letter-spacing 200ms var(--ease-out);
}
a:hover .arrow,
a:focus-visible .arrow {
  transform: translateX(0.5rem);
  letter-spacing: 0.05em;
}

/* Reduced-Motion-Fallback ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  header nav > div > a::after,
  footer a::after,
  .arrow {
    transition: none;
  }
}

/* Nav-Text-Links · Ruhe- und Hover-Farbe (R3e, Vince 14:27 UTC) ------------
   Ruhe-Farbe hier statt inline, damit :hover ohne !important greift. */
header nav a:not(.nav-logo):not(.btn) {
  color: #231E1A;
}
header nav a:not(.nav-logo):not(.btn):hover,
header nav a:not(.nav-logo):not(.btn):focus-visible {
  color: #6B3690;
}

/* Footer-Nav-Kolumne (Navigation) · Ruhe-Farbe. Hover-Regel steht weiter
   unten kombiniert mit .footer-contact (R4, Pat 21:45). */
footer .footer-nav a {
  color: #F9F5F3;
  text-decoration: none;
}

/* Footer-Legal-Kolumne (Privacy/Terms/Accessibility) · Ruhe + Hover (R3g, Moe 15:11) */
footer .footer-legal a {
  color: #F9F5F3;
  text-decoration: none;
}
footer .footer-legal a:hover,
footer .footer-legal a:focus-visible {
  color: #C9AD97;
}

/* Content-Inline-Links im main-Bereich · Hover-Farbe ---------------------- */
main a:not(.btn):hover,
main a:not(.btn):focus-visible {
  color: #6B3690;
}

/* Übergreifende Transition für Text-Link-Farben --------------------------- */
header nav a, footer a, main a {
  transition: color 200ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  header nav a, footer a, main a { transition: none; }
}

/* Nav-CTA (JaneApp-Button) · keine Unterstreichung (Vince R3 16.09.) --------
   Vinces Selektor `[href="/contact/#book"]` traf nicht: der Book-Now-
   Button im Nav zeigt auf `https://roguephysicaltherapy.janeapp.com/`. Deshalb
   href*="janeapp.com" plus explizites Ausschalten des animierten ::after aus
   der Nav-Underline-Regel oben. */
header nav a[href*="janeapp.com"],
header nav a[href*="janeapp.com"]:hover,
header nav a[href*="janeapp.com"]:focus-visible {
  text-decoration: none;
}
header nav a[href*="janeapp.com"]::after {
  display: none;
}
/* Nav-Logo · text-decoration entfernen (Vince R3 16.09.) --------------------- */
header nav a.nav-logo,
header nav a.nav-logo:hover,
header nav a.nav-logo:focus-visible {
  text-decoration: none;
}

/* Footer-Contact-Kolumne · dieselbe Underline-Regel wie Footer-Nav (R4, Pat 21:45).
   R3b-Ausnahme (::after display:none) zurückgenommen, damit `footer a::after`
   greift. Ruhe-Farbe in CSS statt inline. */
footer .footer-contact a {
  color: #F9F5F3;
  text-decoration: none;
}
footer .footer-nav a:hover,
footer .footer-nav a:focus-visible,
footer .footer-contact a:hover,
footer .footer-contact a:focus-visible {
  color: #C9AD97;
}

/* Contact-Formular · Ruhe + Hover + Focus (Vince R3 16.09.) ----------------
   Ruhezustands-Border+BG hier statt inline, damit :hover/:focus greifen
   ohne !important. */
#contact-form input,
#contact-form textarea {
  border: 1px solid #D9C6B5;
  background-color: #F9F5F3;
  transition:
    border-color 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
}
#contact-form input:hover,
#contact-form textarea:hover {
  border-color: #B99D8D;
  background-color: #FDFAF7;
}
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: #9264AA;
  background-color: #FDFAF7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(146, 100, 170, 0.18);
}
#contact-form input:focus:hover,
#contact-form textarea:focus:hover {
  border-color: #9264AA;
  background-color: #FDFAF7;
}
@media (prefers-reduced-motion: reduce) {
  #contact-form input,
  #contact-form textarea { transition: none; }
}

/* Hero-Slot Placeholder-Farbe (weniger auffaellige Text→Bild-Uebergang) ---- */
image-slot {
  background: #E3D8CE;
  display: block;
}

/* Nav-Logo · Desktop-Lockup und Mobile-Mark umschalten (R3b, Vince 12:46 UTC) */
.nav-logo .nav-logo-mobile  { display: none; }
.nav-logo .nav-logo-desktop { display: block; }
@media (max-width: 767px) {
  .nav-logo .nav-logo-desktop { display: none; }
  .nav-logo .nav-logo-mobile  { display: block; width: 44px; height: 44px; }
}

/* FAQ-Accordion (Runde 2 Punkt 4 + Pat-Sichtung 18:20 UTC) ---------------- */
.faq-item .faq-plus {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #D9C6B5;
  border-radius: 6px;
  display: inline-block;
  box-sizing: border-box;
}
.faq-item .faq-plus::before,
.faq-item .faq-plus::after {
  content: "";
  position: absolute;
  background: #6B3690;
  transition: transform 250ms var(--ease-out);
}
.faq-item .faq-plus::before {
  top: 50%; left: 6px; right: 6px; height: 2px;
  transform: translateY(-50%);
  transform-origin: center;
}
.faq-item .faq-plus::after {
  left: 50%; top: 6px; bottom: 6px; width: 2px;
  transform: translateX(-50%);
  transform-origin: center;
}
.faq-item.open .faq-plus::after {
  transform: translateX(-50%) scaleY(0);
}
.faq-item .faq-summary:hover .faq-plus {
  border-color: #9264AA;
}
.faq-item .faq-summary:focus-visible {
  outline: 2px solid #9264AA;
  outline-offset: 4px;
  border-radius: 4px;
}
/* Rocket 11.09. 23:42: max-height-mit-JS-scrollHeight-Messung raus, ersetzt
   durch grid-template-rows-Trick (Vinces Variante). Grund: die alte Loesung
   berechnete scrollHeight beim Klick, Wert war bei nicht-final-gerendertem
   Layout 0 → Panel blieb geschlossen ODER falsche Hoehe → Items ueberlappten.
   Grid 0fr→1fr ist CSS-only, kein Hoehen-Read, animiert flueessig. */
.faq-item .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 260ms var(--ease-out), opacity 220ms ease;
}
.faq-item .faq-panel > * {
  min-height: 0;
}
.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-panel { transition: none; }
}

/* Lenis-Pflicht-CSS (Moe 14.09.). Die Seite setzt `html { scroll-behavior: smooth }`
   (Zeile 19 der index.html). Ohne diese Regel animiert der Browser jede
   scrollTop-Schreibung von Lenis nochmal nativ nach: zwei Animationen
   übereinander, die Seite „hängt nach und wirkt kaputt" (Pat). Offizielle
   Lenis-Empfehlung, hier erweitert auf `html.lenis`, damit die Sperre gilt,
   sobald Lenis aktiv ist, nicht nur während eines Smooth-Frames. */
html.lenis, html.lenis body { height: auto; }
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* How-it-works: Grid statt Flex (Vince 21.09. 13:25 UTC).
   Loest die 15.09.-Waise-Zentrierung ab. Jeremy will vertikale Ausrichtung
   der Ziffern, das braucht feste Spalten statt zentriertem Flex-Wrap.
   Bei 5 Cards auf 3 Spalten ergibt sich 3+2, letzte Reihe linksbuendig,
   Ziffern aller Cards sitzen auf denselben drei X-Positionen. */
.hiw-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px clamp(28px, 4vw, 64px);
}
@media (min-width: 768px) {
  .hiw-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hiw-cards { grid-template-columns: repeat(3, 1fr); }
}
/* #approach hat vier Cards, 2x2 statt 3+1-Waise (Vince 21.09. 14:22 UTC). */
.hiw-cards--four { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .hiw-cards--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hiw-cards--four { grid-template-columns: repeat(2, 1fr); }
}

/* Fees-Tabelle Mobile-Cards (Jeremy R2 P18, 15.09.). Unter 600px keine
   horizontale Tabelle mehr, sondern gestapelte Karten pro Zeile. Kategorie
   klein oben, Termin mittig, Preis groß rechts. Direct-Billing-Chip bleibt
   sichtbar. */
@media (max-width: 600px) {
  #pricing table { min-width: 0; }
  #pricing table thead { display: none; }
  #pricing table, #pricing tbody, #pricing tr, #pricing td { display: block; width: 100%; }
  #pricing tr {
    border-bottom: 1px solid #D9C6B5;
    padding: 14px 16px;
    background: transparent !important;
  }
  #pricing tr:last-child { border-bottom: 0; }
  #pricing td { padding: 2px 0; text-align: left; white-space: normal; }
  #pricing td:first-child {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7A5A45;
    font-weight: 500;
  }
  #pricing td:nth-child(2) { font-size: 16px; font-weight: 500; color: #231E1A; }
  #pricing td:last-child {
    font-weight: 700;
    font-size: 20px;
    color: #231E1A;
    margin-top: 4px;
  }
  #pricing td:last-child span { font-size: 12px; }
  #pricing > div > div[style*="overflow-x:auto"] { overflow-x: visible; }
}

/* Insurer-Marquee (R4, Vince 21:52 UTC am 16.09.) ---------------------------
   Endlos-Schleife, CSS-only, Pause bei Hover/Focus, reduced-motion zeigt
   statische Wrap-Reihe. Zwei identische .marquee-set sind Pflicht: die
   Animation translated auf -50% und muss dort nahtlos wieder bei Set 1
   anschließen. Padding-right am Set gibt die Lücke am Übergang. */
.marquee {
  overflow: hidden;
  padding: clamp(20px, 3vw, 32px) 0;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
  will-change: transform;
}
/* Direct-billing-Reihen (Vince 21.09. 13:47 UTC): drei Zustaende, jede Reihe
   eigene Geschwindigkeit und Richtung, damit die Ebenen visuell voneinander
   getrennt bleiben ohne Grau-Stil-Trick. */
.dbill-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}
.dbill-row + .dbill-row {
  margin-top: 24px;
}
.dbill-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A5A45;
  white-space: nowrap;
}
.dbill-row--live .marquee-track { animation-duration: 22s; }
.dbill-row--soon .marquee-track { animation-duration: 60s; animation-direction: reverse; }
.dbill-row--telus .marquee-track { animation-duration: 75s; }

@media (max-width: 767px) {
  .dbill-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dbill-label { white-space: normal; }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee-set {
  display: flex;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  flex: none;
  padding-right: clamp(40px, 5vw, 72px);
}
.marquee-set .insurer-logo {
  height: 32px;
  width: auto;
  flex: none;
  filter: grayscale(1) opacity(0.7);
  transition: filter 200ms var(--ease-out);
}
.marquee-set .insurer-logo:hover {
  filter: grayscale(0) opacity(1);
}
.marquee-set .insurer-name {
  display: inline-flex;
  align-items: center;
  height: 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--sub, #7A5A45);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: none;
  opacity: 0.7;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
  }
  .marquee-set[aria-hidden="true"] {
    display: none;
  }
  .marquee-set {
    flex-wrap: wrap;
  }
}

/* Insurer-Zeile Home (Vince R2 P7, 15.09., R4 durch Marquee ersetzt) ------ */
.insurers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 62ch;
}
.insurer-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  filter: grayscale(1) opacity(0.65);
  transition: filter 200ms var(--ease-out);
}
.insurer-logo:hover {
  filter: grayscale(0) opacity(1);
}
.insurer-name {
  display: inline-flex;
  align-items: center;
  height: 28px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--sub);
  letter-spacing: 0.01em;
}
.insurers-note {
  margin-top: clamp(16px, 2.5vw, 24px);
  font-size: 13px;
  color: var(--sub);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .insurers-row { gap: 20px 28px; max-width: none; }
  .insurer-logo, .insurer-name { height: 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .insurer-logo { transition: none; }
}

/* Rogue Button-System (R3d, Moe 14:05; Standard: shared-tools/design-system/button-und-typo-standard.md)
   Basis-Reset in .btn, Farbrolle in .btn--primary. Kontextspezifische
   padding/font-size/border-radius/letter-spacing bleiben inline, damit die
   drei bestehenden Hero-/Nav-/Form-Größen erhalten sind. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  border: 0;
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn--primary {
  background-color: #9264AA;
  color: #FFFFFF;
}
.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible {
  background-color: #7F5596;
  color: #FFFFFF;
}
.btn--primary:focus-visible {
  outline: 2px solid #9264AA;
  outline-offset: 3px;
}

/* Bär-Blink · zwei Lider treffen sich in der Mitte (R3b, Pat 12:42 UTC) ---- */
.bear-eye-lid-top,
.bear-eye-lid-bottom {
  transform-box: fill-box;
  transform: scaleY(0);
}
.bear-eye-lid-top    { transform-origin: 50% 0%; }
.bear-eye-lid-bottom { transform-origin: 50% 100%; }

/* Nav-Trigger */
.nav-logo:hover .bear-eye-lid-top,
.nav-logo:hover .bear-eye-lid-bottom,
.nav-logo:focus-visible .bear-eye-lid-top,
.nav-logo:focus-visible .bear-eye-lid-bottom {
  animation: rogue-bear-blink 320ms ease-in-out 1;
}

/* CTA-Trigger (fünf #book-Sections). R3d: Selektor auf Button-Klasse, nicht href,
   weil der Services-Button auf /contact/ zeigt, nicht auf janeapp.com. */
#book:has(.btn--primary:hover) .bear-eye-lid-top,
#book:has(.btn--primary:hover) .bear-eye-lid-bottom,
#book:has(.btn--primary:focus-visible) .bear-eye-lid-top,
#book:has(.btn--primary:focus-visible) .bear-eye-lid-bottom {
  animation: rogue-bear-blink 320ms ease-in-out 1;
}

@keyframes rogue-bear-blink {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bear-eye-lid-top,
  .bear-eye-lid-bottom,
  .nav-logo:hover .bear-eye-lid-top,
  .nav-logo:hover .bear-eye-lid-bottom,
  .nav-logo:focus-visible .bear-eye-lid-top,
  .nav-logo:focus-visible .bear-eye-lid-bottom,
  #book:has(.btn--primary:hover) .bear-eye-lid-top,
  #book:has(.btn--primary:hover) .bear-eye-lid-bottom,
  #book:has(.btn--primary:focus-visible) .bear-eye-lid-top,
  #book:has(.btn--primary:focus-visible) .bear-eye-lid-bottom {
    animation: none;
    transform: scaleY(0);
  }
}

/* ---------- R4 Jeremy A3: Nav-Social-Icons (Instagram + Facebook) -----
   Vince-Spec 2026-09-17 10:45 UTC. Werte 1:1, aber ohne Inline-Styles
   (Moe-Korrektur: Inline-Style schluckt :hover). Position rechts vor
   dem Nav-CTA. Auf Mobile (<768px) ausgeblendet, kommt ins Menu-Overlay. */
.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 24px;
}
.nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #231E1A;
  transition: color 200ms cubic-bezier(.2, .65, .2, 1);
}
.nav-social a:hover,
.nav-social a:focus-visible {
  color: #6B3690;
}
@media (max-width: 767px) {
  header nav .nav-social { display: none; }
}

/* Menu-Overlay Variante fuer Mobile-Nav (unter Menu-Links, 24x24). */
.menu-social {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0 4px;
  border-top: 1px solid #E3D8CE;
  margin-top: 6px;
}
.menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #231E1A;
  transition: color 200ms cubic-bezier(.2, .65, .2, 1);
}
.menu-social a:hover,
.menu-social a:focus-visible {
  color: #6B3690;
}

/* ---------- R4 Jeremy A8: Quick-Contact unter Send-Message ------------
   Vince-Spec 2026-09-17 10:45 UTC. Werte 1:1, ohne Inline-Styles.
   Sitzt in contact/#form, direkt nach dem Submit-Button. */
.quick-contact {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #D9C6B5;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.quick-contact__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quick-contact__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A5A45;
}
.quick-contact__value {
  font-size: 17px;
  font-weight: 500;
  color: #231E1A;
  text-decoration: none;
}
a.quick-contact__value:hover,
a.quick-contact__value:focus-visible {
  color: #6B3690;
}

/* ---------- R4 Jeremy Text-Selection: Rogue Purple ---------------------
   Pat via Moe 2026-09-17 11:12 UTC. Globale Text-Auswahl-Farbe. Auf
   dunklen Sektionen (background #231E1A: `#book`, Footer) waere Purple
   auf Dark nur mittel lesbar; dort schaltet die Regel auf Paper-Hintergrund
   mit dunklem Text um. `::selection` wirkt nicht ueber `,` mit `::-moz-selection`,
   deshalb doppelt notiert. */
::selection {
  background: #9264AA;
  color: #F9F5F3;
}
::-moz-selection {
  background: #9264AA;
  color: #F9F5F3;
}
#book ::selection,
footer ::selection {
  background: #F9F5F3;
  color: #231E1A;
}
#book ::-moz-selection,
footer ::-moz-selection {
  background: #F9F5F3;
  color: #231E1A;
}

/* ---------- R4 Insurer-Marquee-Detail-Link ----------------------------
   Vince-Spec 11:16/11:21 + Moe-Freigabe 11:19: Textlink mit Pfeil unter
   Marquee, verlinkt auf FAQ-Anker `#direct-billing-insurers`. Klasse
   statt Inline-Style (Moe-Regel). `.arrow`-Transition greift ueber die
   bestehende Button-Standard-Regel. */
.insurers-detail-link {
  font-size: 15px;
  font-weight: 500;
  color: #6B3690;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color 200ms cubic-bezier(.2, .65, .2, 1);
}
.insurers-detail-link:hover,
.insurers-detail-link:focus-visible {
  color: #9264AA;
}

/* ---------- R4 Footer-Balance -----------------------------------------
   Vince-Spec 11:16/11:21 Punkt 7 mit Moe-Korrektur: KEIN !important,
   Grid als Klasse `.footer-grid`. Contact-Spalten dichter, Labels
   kleiner, Font-Size ueberall auf 14 (von 15). Zwei Spalten unter
   900px. Die 6 HTMLs setzen `class="footer-grid"` am aeusseren Grid-Div,
   die Werte hier gelten dann. */
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px) 40px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1fr 1.4fr 1fr;
  gap: 40px 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid .footer-nav > div,
.footer-grid .footer-legal > div { gap: 12px; }
.footer-grid .footer-contact > div { gap: 8px 18px; }
.footer-grid .footer-hours dl { gap: 4px 14px; }

/* Footer-Typo drei Stufen (Vince 22.09. 16:18 UTC, Auftrag Moe 16:15 UTC).
   Eine Skala, Klassen-getrieben, inline-Groessen aus den 9 HTMLs raus.
   14 px = Wert (Klartext und Link, ein Wert ist ein Wert),
   12 px = Label und Feldbezeichner (Uppercase),
   13 px = Copyright/Tagline. */
.footer-grid { font-size: 14px; line-height: 1.5; }
.footer-grid a { font-size: inherit; color: inherit; }
.footer-grid .footer-label,
.footer-grid .footer-field {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-grid .footer-label { font-weight: 500; color: #C9AD97; }
.footer-grid .footer-field { font-weight: 400; color: rgba(249,245,243,.6); }
/* .footer-fine ist eindeutig, kein Prefix noetig. Sitzt ausserhalb .footer-grid,
   damit die Klasse allein greift. Vinces Nachfix 22.09. 16:26 UTC. */
.footer-fine { font-size: 13px; line-height: 1.5; }
.footer-grid { max-width: 1600px; }

/* ---------- R4b Fluid-Container ---------------------------------------
   Vince-Spec 13:38 UTC + Moe-Korrektur 13:39: bis 1920 kein max-width-
   Deckel, nur padding-inline. Bei 1920 ergibt clamp(20,5vw,96) am Cap
   96px je Seite, Inhalt 1728px. Deckel erst ab 2560. */
.container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 96px);
}
.container--narrow { max-width: 900px; }
.container--wide   { width: 100%; padding-inline: 0; }
@media (min-width: 2560px) {
  .container { max-width: 2200px; }
}

/* Grid-Anpassungen fuer 1920 (Vince 13:38 UTC Punkt 3). */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1440px;
  margin-inline: auto;
}
.faq-list {
  max-width: 900px;
  margin-inline: auto;
}

/* Fliesstext-Zeilenlaenge (R4b Vince 13:38 UTC, Moe 14:01 UTC).
   Absaetze und Listen in Content-Sektionen halten Zeilenlaenge nahe
   68ch. Headlines bleiben frei, damit Hero-Typo bei 1920 durchknallt. */
.body-text {
  max-width: 68ch;
}

/* ---------- R6 Mobile-Fixes (Vince 2026-09-17 16:07 UTC) ---------------- */

/* 1) Baeume-Ridge Mobile 2x groesser (Pat R6, Moe-Nachtrag R6i 16:47 UTC).
   Klasse `.ridge-tree` an allen Baum-SVGs im HTML gesetzt (100 Stueck ueber
   9 Seiten). CSS-Regel ueberschreibt die inline-width auf Mobile. */
@media (max-width: 767px) {
  .ridge-tree {
    width: min(6.5vw, 42px) !important;
  }
}

/* 3) Amenity-Karten mobile zentriert (About). Container bekommt
   justify-content:center bei Wrap unter Desktop-Breite. */
.amenity-list {
  justify-content: center;
}

/* 4+5) Sub-Hero-Bild-Container ohne Beige-BG. Sub-Pixel-Kante zwischen
   Container-BG und Bild-Kante war als 1-2px Beige-Streifen sichtbar.
   Container auf Ink (#231E1A) tauscht Beige gegen Bildfarbe, Kante
   loest sich visuell auf. */
.sub-hero-image-wrap {
  background: #231E1A !important;
}

/* 6) Footer mobile 1 Spalte statt 2 (Pat R6). Bisherige 900-Regel
   ueberschreiben. */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
  .footer-grid > div {
    padding-bottom: 12px;
  }
  .footer-grid > div:last-child {
    padding-bottom: 0;
  }
}

/* 7) Footer Bottom-Padding groesser (Vince 16:07 UTC). */
.footer-grid {
  padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 80px);
}

/* 8) R5-B2: Story-Bild sticky nur ab 900px, mobil static + volle Breite.
   Basis-Regel (Vince 22.09. 14:54 UTC): inline-sticky raus, Klasse traegt jetzt,
   damit die Media-Query darunter greifen kann. */
#story .story-photo-col {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 480px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
@media (max-width: 899px) {
  #story .story-photo-col {
    position: static;
    max-width: 100%;
  }
}

/* 9) R5-B4: Services-Karten feste Spalten (statt auto-fit-Waisen). */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 10a) R5-A4 Story-Sticky-Sprung: Font-Load-Shift dämpfen.
   Familjen Grotesk mit Font-Metrics-Overrides (Vinces Startwerte,
   Feinjustierung folgt bei Bedarf) — Text-Höhe stimmt sofort mit
   System-Fallback, kein Layout-Shift beim Font-Swap, sticky rechnet
   nicht neu. Plus `contain: layout` isoliert die Story-Container-
   Berechnung, sodass verbleibende Micro-Shifts nicht auf sticky
   durchschlagen. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/familjen-grotesk-400.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/familjen-grotesk-500.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/familjen-grotesk-700.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
#story .container {
  contain: layout;
}

/* 10) R5-A3 Bild-Ausrichtung (Pat-Regel 2026-09-18, Vince 09:23 UTC):
   Grundwert für Slot-Bilder ist top-aligned, weil Koepfe im oberen Drittel
   sitzen. Mittige Ausrichtung schneidet bei flacheren Rahmen zuerst dort,
   wo das Gesicht ist. Ausnahmen tragen eine Klasse und einen Grund.
   Homer 18.09.10:24: `[data-parallax] > img` ergänzt für Hero-Bild (nicht
   in <image-slot>-Wrapper, deshalb griff die Regel dort nicht). Moe/Vince
   flag: Zeile 130 index.html sollte Grundregel folgen. */
image-slot img,
[data-parallax] > img {
  object-position: 50% 0%;
}
image-slot img.slot-anchor-center {
  object-position: 50% 50%;
}
image-slot img.slot-anchor-left {
  object-position: 25% 50%;
}
image-slot img.slot-anchor-contact {
  /* Kletterer-Kopf bei X~68%, Y~50% — Kopf hoch, X leicht rechts */
  object-position: 60% 20%;
}

/* First-Paint-Fallback: background-position gemeinsam gesetzt, damit die
   Per-Seite-<style>-Blöcke sich nicht mehr voneinander wegentwickeln. */
image-slot#story-photo:not(:defined),
image-slot#clinic-photo-2:not(:defined),
image-slot#clinic-photo-3:not(:defined),
image-slot#services-header-photo:not(:defined),
image-slot#team-photo:not(:defined),
image-slot#photo-jeremy:not(:defined),
image-slot#photo-roo:not(:defined),
image-slot#faq-header-photo:not(:defined),
image-slot#hero-photo:not(:defined) {
  background-position: 50% 0%;
}
image-slot#clinic-photo-1:not(:defined) {
  background-position: 25% 50%;
}
image-slot#contact-header-photo:not(:defined) {
  background-position: 60% 20%;
}

/* ==========================================================================
   Admin-Editor · Login-Modal (Sign-in, Force-Change)
   Panel-UI-Spec Rocket 2026-09-17: Whitespace-Elevation, Pill-Buttons,
   ruhige Fehler, Motion nur mit Zweck.
   Nur sichtbar wenn `?edit` in der URL und keine gueltige Session vorliegt.
   Editor-Toolbar/Panels kommen in einer separaten Runde.
   ========================================================================== */

.rogue-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(35, 30, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rogue-admin-modal--enter {
  opacity: 0;
}
.rogue-admin-modal--enter .rogue-admin-modal__card {
  transform: translateY(8px);
}
.rogue-admin-modal--enter-active {
  opacity: 1;
  transition: opacity 220ms var(--ease-out, cubic-bezier(.2, .65, .2, 1));
}
.rogue-admin-modal--enter-active .rogue-admin-modal__card {
  transform: translateY(0);
  transition: transform 260ms var(--ease-out, cubic-bezier(.2, .65, .2, 1));
}

.rogue-admin-modal__card {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 48px 40px;
  color: #231E1A;
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
}
@media (max-width: 520px) {
  .rogue-admin-modal__card {
    padding: 32px 24px;
    border-radius: 16px;
  }
}

.rogue-admin-modal__title {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw + 12px, 40px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.rogue-admin-modal__sub {
  margin: 0 0 28px;
  font-size: var(--step-0, 16px);
  line-height: 1.4;
  color: #55504B;
}

.rogue-admin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.rogue-admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rogue-admin-field__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #55504B;
}
.rogue-admin-field__hint {
  font-size: 12px;
  color: #8A857F;
  margin-top: -2px;
}
.rogue-admin-field__input {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid #E4DED8;
  border-radius: 10px;
  background: #FAF7F5;
  color: inherit;
  transition: border-color 160ms var(--ease-out, ease), background 160ms var(--ease-out, ease);
}
.rogue-admin-field__input:focus {
  outline: none;
  border-color: #6B3690;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(107, 54, 144, 0.12);
}

.rogue-admin-form__error {
  margin: 0;
  font-size: 13px;
  color: #B4342A;
  line-height: 1.4;
}

.rogue-admin-button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 980px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out, ease), opacity 160ms var(--ease-out, ease);
}
.rogue-admin-button--primary {
  background: #6B3690;
  color: #FFFFFF;
}
.rogue-admin-button--primary:hover {
  background: #58297A;
}
.rogue-admin-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.rogue-admin-button:focus-visible {
  outline: 2px solid #6B3690;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rogue-admin-modal--enter-active,
  .rogue-admin-modal--enter-active .rogue-admin-modal__card {
    transition: none;
  }
}