/* ============================================================================
   .reveal CSS-driven Fade-Up — Welle 5.14 (Reaktivierung)
   ----------------------------------------------------------------------------
   IntersectionObserver in premium-polish.js fügt `.is-visible` hinzu wenn das
   Element ins Viewport kommt. CSS macht den Fade-Up.

   Architektur (IO-first, robust gegen ScrollTrigger-Race-Conditions):
   - .reveal       → invisible Initial-State (CSS-Variable steuerbar)
   - .is-visible   → eingeblendet (gesetzt vom IO in premium-polish.js)
   - Reduced-Motion → instant sichtbar, keine Transition

   Welle 5.11.3-5.11.4 NUCLEAR-Override entfernt (war global opacity:1!important).
   Detail-Regeln stehen in style.css §19 inkl. reveal-delay-1..6 Stagger.
   ============================================================================ */

/* ============================================================================
   Premium-Polish CSS — Welle 5.9.5
   ----------------------------------------------------------------------------
   Aus AI-Audit Top-Hebel #5:
   - Focus-Ring-Polish (Tastatur-A11y auf Premium-Niveau)
   - font-feature-settings für Inter (kerning, contextual alternates, tabular nums)
   - Thai-spezifische Typo-Anpassungen (line-height, word-break)
   - Selection-Color in Brand-Farben
   ============================================================================ */

/* ── 1. Focus-Ring-Polish ─────────────────────────────────────────
   Apple/Stripe-Pattern: dual-ring mit Brand-Color + warmem Glow.
   Nur :focus-visible (Tastatur-Nav) — keine Maus-Klicks ärgern. */

*:focus-visible {
  outline: 2px solid var(--color-brand-accent, #d4a14e);
  outline-offset: 3px;
  border-radius: inherit;
  transition: outline-offset 0.18s ease, outline-color 0.18s ease;
}

/* Buttons + Links: doppelter Ring für extra Sichtbarkeit */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.bento-tile-cta:focus-visible {
  outline: 2px solid var(--color-brand-accent, #d4a14e);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(212, 161, 78, 0.18),    /* warm halo */
    0 4px 20px rgba(26, 37, 64, 0.12);      /* depth shadow */
}

/* Input/textarea Focus auf Forms (DSGVO-Form etc.) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-brand-primary, #2d4a8a);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(45, 74, 138, 0.12);
}

/* ── 2. Inter Font-Feature-Settings (Welle 5.9.5) ──────────────────
   Inter unterstützt OpenType-Features — wir aktivieren:
   - "cv11"   = single-storey 'a' (mehr Modern-Apple-Look)
   - "ss03"   = open digits (4, 6, 9)
   - "tnum"   = tabular numbers (für Stats + Tabellen)
   - "calt"   = contextual alternates (default-on, hier explizit)
   - "kern"   = kerning (default-on, hier explizit)
   Stripe nutzt "ss01" + "cv11" + "tnum" als Standard. */

html {
  font-feature-settings: "kern", "calt", "ss03", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular Numbers für Stats, Prices, Counts (tnum) */
.trust-stat-value,
.bento-tile-stat-num,
.bento-tile-stat-num-row,
.pricing-amount,
.pricing-from,
.price,
[data-tnum] {
  font-feature-settings: "tnum", "kern", "calt", "ss03", "cv11";
  font-variant-numeric: tabular-nums;
}

/* ── 3. Thai-Typo-Polish (Welle 5.9.5) ─────────────────────────────
   Thai-Vokal-Marks brauchen mehr line-height (Tonzeichen).
   word-break: keep-all verhindert dass Thai-Worte in Char-Chunks brechen. */

[lang="th"],
:lang(th) {
  font-family: 'Sarabun', 'Inter', system-ui, sans-serif;
  line-height: 1.65;          /* mehr Luft als Default 1.5 */
  letter-spacing: 0;           /* kein negative letter-spacing für Thai! */
  word-break: keep-all;        /* keine Char-Trennung mitten im Wort */
  hanging-punctuation: first;  /* feiner typografischer Touch */
}

/* Thai Headlines: noch mehr Luft */
[lang="th"] h1,
[lang="th"] h2,
:lang(th) h1,
:lang(th) h2 {
  line-height: 1.45;
  font-weight: 700;
}

/* Ausnahme: Hero-H1 ist auch auf TH-Page English ("Get found / clicks / customers")
   → identische Schrift + Spacing wie EN-Page, kein Sarabun, kein TH-line-height. */
[lang="th"] .hero-h1,
[lang="th"] .hero-h1 .word-line,
[lang="th"] .hero-h1 .word-text,
[lang="th"] .hero-h1 .word-dot,
:lang(th) .hero-h1,
:lang(th) .hero-h1 .word-line,
:lang(th) .hero-h1 .word-text,
:lang(th) .hero-h1 .word-dot {
  font-family: var(--font-main);
  line-height: 0.98;
  letter-spacing: -0.04em;
  word-break: normal;
  hanging-punctuation: none;
}

/* Hero-Tiles (Google-Mockup, Chat-Mockup, Booking-Mockup): line-height = kompakt
   wie EN-Original, sonst expandiert TH-line-height 1.65 die Mockup-Inhalte über
   die geplante Tile-Höhe hinaus (z.B. "324" Stat-Card wird unten abgeschnitten). */
/* Tile-internal compactness (Google/Chat/Booking-Hero-Mockup) — TH-Glyphs
   sind höher als EN durch line-height 1.65; in den Hero-Tiles ist das
   problematisch (Container überfüllt). Suite-Section Mini-Animations
   sind GROSS GENUG — die behalten Default line-height + space-around. */
:lang(th) .tile,
:lang(th) .tile-body,
:lang(th) .tile-bar,
:lang(th) .g-site,
:lang(th) .g-bread,
:lang(th) .g-title,
:lang(th) .g-snippet,
:lang(th) .msg-bubble,
:lang(th) .msg-name,
:lang(th) .msg-status,
:lang(th) .stat-label,
:lang(th) .stat-num {
  line-height: 1.3;
}

/* ── Suite-Section Boxen auf TH: ──────────────────────────────────────────
   TH-Titles sind oft 1-zeilig → Stage-Bereich ist größer als EN.
   Beide Boxen shrinken auf Content-Höhe (flex: 0 0 auto), aber QR-Box
   bekommt min-height damit das Phone-Icon plus Tickets ausreichend Raum
   haben (kein zu enges Layout). */
:lang(th) .ui-bkm-board {
  flex: 0 0 auto !important;
}
:lang(th) .ui-yum-flow {
  flex: 0 0 auto !important;
  min-height: 250px;
}
/* Yummi-Tickets eng stapeln statt mit space-around verteilen */
:lang(th) .ui-yum-tickets {
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

/* ── Google-Tile: KONSTANTE HÖHE über alle Packs (EN + TH) ────────────────
   Probleme die gefixt werden:
   1. `body.is-glass-light .g-title/snippet { line-clamp:2; white-space:normal }`
      (hero-v3.css) erlaubt 2 Zeilen → Pack-Wechsel macht Height-Shift → Zucken.
   2. TH-Glyphen sind breiter als EN → wraps häufiger in 2 Zeilen → Stat-Card
      unten abgeschnitten.
   3. Bei langen EN-Titles (z.B. "Khao Soi Imperator · Local favourite") wird
      ebenfalls 2 Zeilen → Karte überflüssig hoch.

   Lösung: GLOBAL line-clamp:1 + nowrap + ellipsis. Specificity (0,4,1) + !important
   schlägt die hero-v3.css Regel sicher. */
body.is-glass-light .g-title,
body.is-glass-light .g-title-2,
body.is-glass-light .g-snippet,
body.is-glass-light .g-site,
body.is-glass-light .g-bread {
  display: block !important;
  -webkit-line-clamp: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}

/* Min-Height auf Google-Tile damit Pack-Wechsel keinen Reflow auslöst */
body.is-glass-light .tile-google {
  min-height: 340px;
}

/* Stat-Card kompakter für TH (kleinere Reserve gegen Pixel-Drift) */
:lang(th) .tile-stat {
  margin-top: 0.45rem;
  padding: 0.6rem 0.8rem;
}

/* Search-Text-Box soll nur so breit sein wie der Text — sonst sitzt der
   .g-cursor am rechten Rand der Box statt direkt nach dem getippten Text.
   hero-v3.css setzt `flex: 1 1 0` → Box füllt die gesamte verfügbare Breite. */
.tile-body-google .g-search-text {
  flex: 0 1 auto !important;
  max-width: 100%;
}

/* Realistischer Caret: 2px breit (modern Browser-Default), 1.1em hoch
   (matches Text-Höhe), Blink-Rate 600ms (macOS-Standard).
   Während aktivem Tippen (`.is-typing`) blinkt der Cursor NICHT — bleibt
   solid sichtbar, weil echte OS-Caret nur im Idle-State blinkt.

   margin-left negativ kompensiert den `gap: 0.5rem` vom `.g-search`-Container
   → Cursor sitzt DIREKT rechts neben dem letzten Buchstaben. */
.tile-body-google .g-cursor {
  width: 1.2px;
  height: 1.1em;
  margin-left: calc(-0.5rem + 1px) !important;
  background: currentColor;
  border-radius: 0.5px;
  animation: caretBlinkMac 1.06s steps(2) infinite;
}
.tile-body-google .g-cursor.is-typing {
  animation: none;
  opacity: 1;
}
@keyframes caretBlinkMac {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── Booking-Tile: is-confirmed Slot im Dark-Mode sichtbar machen ──────
   Default `--jade-deep` (#5e7d6f) ist im Dark-Mode + Liquid-Glass-Tile zu
   washed-out → "Thai Massage · 60 min" Text + check-icon kaum lesbar.
   Fix: kräftigeres Grün-Gradient + solider Background im Dark-Mode. */
body.is-dark-bg .cal-slot-booked.is-confirmed,
body.is-dark-bg .cal-slot-booked.is-popping {
  background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%) !important;
  color: #ffffff !important;
}
body.is-dark-bg .cal-slot-booked.is-confirmed .cal-time,
body.is-dark-bg .cal-slot-booked.is-popping .cal-time,
body.is-dark-bg .cal-slot-booked.is-confirmed .cal-meta,
body.is-dark-bg .cal-slot-booked.is-popping .cal-meta {
  color: #ffffff !important;
}
body.is-dark-bg .cal-slot-booked.is-confirmed .cal-check,
body.is-dark-bg .cal-slot-booked.is-popping .cal-check {
  background: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
}

/* ── Google-Tile: Reveal-on-Type ──────────────────────────────────────────
   Hide: INSTANT (transition: none) — beim Pack-Wechsel keine alten Results
   die noch verblassen während Typing läuft.
   Show: SNAPPY 0.22s — schneller als Default damit Results "sofort" nach
   Typing-End erscheinen statt langsam zu faden. */
.tile-body-google .g-result,
.tile-body-google .tile-stat {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.tile-body-google.is-pre-results .g-result,
.tile-body-google.is-pre-results .tile-stat {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: none;
}

/* Reduced-Motion: keine Transition, einfach sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .tile-body-google .g-result,
  .tile-body-google .tile-stat {
    transition: none;
    transform: none;
  }
}

/* ── 4. Selection-Color (Brand-Touch) ──────────────────────────────
   Wenn User Text markiert, soll's premium aussehen. */

::selection {
  background: var(--color-brand-accent, #d4a14e);
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: var(--color-brand-accent, #d4a14e);
  color: #ffffff;
}

/* ── 5. Smooth-Scroll für In-Page-Links (Welle 5.9.4-companion) ────
   Wenn User auf Anchor klickt (z.B. von Progress-Indicator Dots),
   smooth statt instant. Außer Reduced-Motion. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ── 6. Hover-Lift auf Cards (subtle Welle-5.9.5 Polish) ───────────
   Bento-Tiles haben schon 3D-Tilt. Andere Cards bekommen subtle lift.
   ACHTUNG: Welle 5.9.7 — pricing-card + process-step Hover-Lift wurde in
   die jeweiligen Component-CSS verschoben (pricing-cards-v2.css /
   process-section-v2.css), um Specificity-Konflikte zu vermeiden.
   Hier nur noch generische Card-Patterns (ref-teaser, about). */

.ref-teaser-card,
.about-card {
  transition: transform 0.45s var(--ease-stripe-enter, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.45s var(--ease-stripe-enter, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) {
  .ref-teaser-card:hover,
  .about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26, 37, 64, 0.10);
  }
}

/* ── 7. Image-Loading-Smooth (Welle 5.9.5) ─────────────────────────
   Beim Laden von WebP-Bildern: subtle fade-in statt harter Pop. */

img[loading="lazy"] {
  transition: opacity 0.4s ease;
}

img[loading="lazy"]:not([src]),
img[loading="lazy"][src=""] {
  opacity: 0;
}

img[loading="lazy"][src]:not([src=""]) {
  opacity: 1;
}

/* Reduced-Motion: alles abschalten */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ref-teaser-card,
  .pricing-card,
  .process-step,
  .about-card {
    transition: none;
  }
  img[loading="lazy"] { transition: none; }
}