/* Thai Therapie Massage — Landingpage
   Tokens und Layout stammen 1:1 aus dem Entwurf. */

:root {
  --tt-ink: #000000;
  --tt-muted: #6F6F6F;
  --tt-line: #E6E6E6;
  --tt-green: #0b4623;
  --tt-green-light: #1f6534;
  --tt-sand: #F2F0ED;
  --tt-header-h: 88px;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

html { scroll-behavior: smooth; }
body.tt-landing {
  margin: 0;
  background: #FFFFFF;
  color: var(--tt-ink);
  font-family: 'Inter Var', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.tt-landing a { color: var(--tt-green); }
body.tt-landing a:hover { color: var(--tt-green-light); }
body.tt-landing img { max-width: 100%; }
body.tt-landing *, body.tt-landing *::before, body.tt-landing *::after { box-sizing: border-box; }

@keyframes fadeRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kenburns { from { transform: scale(1.04) translate3d(-1.2%, 0.8%, 0); } to { transform: scale(1.16) translate3d(1.4%, -1.2%, 0); } }
@keyframes slotFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none !important; }
  [data-kenburns] { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Sprachumschaltung: beide Sprachen stehen im Markup, CSS blendet eine aus.
   display:contents, damit die Wrapper kein eigenes Layout erzeugen. */
.lang { display: contents; }
html[data-lang="en"] .lang-de { display: none; }
html:not([data-lang="en"]) .lang-en { display: none; }

[data-set-lang] { transition: color .2s ease; }
html:not([data-lang="en"]) [data-set-lang="de"],
html[data-lang="en"] [data-set-lang="en"] { color: #000000 !important; }

[data-nav-toggle] { display: none; }
[data-drawer][hidden] { display: none !important; }

/* Hover-Zustände aus dem Entwurf (die Elemente tragen Inline-Styles,
   deshalb hier mit !important). */
.hv1:hover { color: #000000 !important; }
.hv2:hover { transform: scale(1.03) !important; }
.hv3:hover { border-color: #0b4623 !important; }
.hv4:hover { color: #0b4623 !important; border-bottom-color: #0b4623 !important; }

@media (max-width: 960px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-toggle] { display: inline-flex !important; }
  [data-header] { padding: 8px 18px !important; }
  [data-sec] { padding-left: 18px !important; padding-right: 18px !important; }
  [data-hero] { padding: 132px 18px 96px !important; }
  [data-navcta] { padding: 13px 22px !important; }
  [data-lang] button { min-width: 44px; min-height: 44px; font-size: 14px !important; }
}
/* Fusszeile auf schmalen Bildschirmen: Logo, Copyright und der Hinweis zur
   Webentwicklung stehen untereinander und mittig statt umgebrochen nebeneinander. */
@media (max-width: 780px) {
  body.tt-landing footer {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
    gap: 18px !important;
    padding: 28px 18px !important;
  }
  body.tt-landing footer > div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    line-height: 1.6;
  }
  body.tt-landing footer > div > span[style*="C9C9C9"] { display: none; }
}

/* Einspaltige Darstellung: in "Unsere Massagen" steht der Text zuerst,
   das Bild darunter. Im Markup ist das Bild das erste Kind, es wird hier
   ans Ende gesetzt; der Zickzack der zweispaltigen Ansicht entfaellt. */
@media (max-width: 620px) {
  #behandlungen article > div { order: 0 !important; }
  #behandlungen article > div:first-child { order: 1 !important; }
}

@media (max-width: 520px) {
  [data-navcta] { display: none !important; }
  [data-price-grid] { grid-template-columns: 1fr 1fr !important; }
}

/* Admin-Bar soll die fixe Kopfzeile nicht überdecken */
body.tt-landing.admin-bar [data-header] { top: 32px; }
@media screen and (max-width: 782px) {
  body.tt-landing.admin-bar [data-header] { top: 46px; }
}