/* ==========================================================================
   Sabay Sabay – Traditionelle Thai-Massagen
   Design-Tokens + globale Styles
   ========================================================================== */

:root{
  /* Farben – abgeleitet aus Original-Logo (Navy/Orchidee) + Motivbildern */
  --color-navy: #1B1A4E;
  --color-navy-light: #2A2870;
  --color-orchid: #B8508E;
  --color-orchid-light: #D888B5;
  --color-gold: #C08A45;
  --color-cream: #FBF6EF;
  --color-cream-dim: #F3E9DC;
  --color-ink: #241F2E;
  --color-ink-soft: #55506750;
  --color-white: #FFFFFF;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --radius-md: .75rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 60px -20px rgba(27,26,78,.35);
  --shadow-card: 0 10px 30px -12px rgba(36,31,46,.18);

  --container: 1180px;
  --transition: .35s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-2); color: var(--color-navy); }
h1{ font-size: clamp(2.4rem, 5vw, 4rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }
p{ margin: 0 0 var(--space-2); }
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--space-3); }
section{ padding-block: var(--space-6); }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--color-navy); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--color-gold); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--font-body); font-weight:600; font-size:1rem;
  padding: .95rem 1.9rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-primary{ background: var(--color-orchid); color:#fff; box-shadow: 0 12px 30px -10px rgba(184,80,142,.55); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(184,80,142,.65); }
.btn-ghost{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.12); }
.btn-outline{ background: transparent; border-color: var(--color-navy); color: var(--color-navy); }
.btn-outline:hover{ background: var(--color-navy); color:#fff; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(251,246,239,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27,26,78,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: .9rem;
  gap: var(--space-3);
}
.logo-link{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; text-decoration:none; }
.logo-mark{
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-orchid));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  flex-shrink:0;
}
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text strong{ font-family: var(--font-display); font-size:1.15rem; color:var(--color-navy); white-space:nowrap; }
.logo-text span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--color-orchid); white-space:nowrap; }

.main-nav ul{ display:flex; align-items:center; gap: clamp(1rem, 2vw, 2rem); }
.main-nav a{
  text-decoration:none; font-weight:600; font-size:.95rem; color: var(--color-ink);
  white-space:nowrap; padding: .4rem .1rem; position:relative;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background: var(--color-orchid); transition: width var(--transition);
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ width:100%; }
.header-cta{ flex-shrink:0; display:flex; align-items:center; gap: var(--space-2); }
.header-cta .btn{ padding: .7rem 1.4rem; font-size:.9rem; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:.5rem;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:26px; height:2px; background: var(--color-navy); border-radius:2px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height: min(92vh, 820px);
  display:flex; align-items:center;
  color:#fff;
  padding-block: var(--space-5);
}
.hero-layer{ position:absolute; inset:0; will-change: transform; }
.hero-layer-bg{
  background: linear-gradient(160deg, var(--color-navy) 0%, #100f38 60%, #0b0a26 100%);
  z-index:1;
}
.hero-layer-photo{
  z-index:2; inset:auto -10% -15% auto; top:8%; width:62%; height:100%;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transform: rotate(2deg);
}
.hero-layer-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-layer-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(27,26,78,.35), transparent 40%);
}
.hero-layer-orchid{
  z-index:3; position:absolute; right:4%; top:6%; width:min(220px, 22vw);
  opacity:.9; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
  border-radius: var(--radius-md); overflow:hidden;
}
.hero-layer-orchid img{ width:100%; height:auto; display:block; }
.hero-layer-glow{
  z-index:1; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(184,80,142,.35), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(192,138,69,.25), transparent 50%);
}
.hero-content{
  position:relative; z-index:4; max-width: 620px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-orchid-light); font-weight:700; margin-bottom: var(--space-2);
}
.hero-content h1{ color:#fff; margin-bottom: var(--space-2); }
.hero-content p.lead{ font-size:1.15rem; color: rgba(255,255,255,.85); max-width:520px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero-meta{ display:flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap:wrap; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{ font-family: var(--font-display); font-size:1.6rem; color:#fff; }
.hero-meta span{ font-size:.82rem; color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce){
  .hero-layer{ transform:none !important; }
}

/* ---------- Section headers ---------- */
.section-head{ max-width:640px; margin-bottom: var(--space-4); }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color: var(--color-orchid); margin-bottom:.6rem;
}
.section-head p{ color:#4b465a; font-size:1.05rem; }
.section-alt{ background: var(--color-cream-dim); }
.section-dark{ background: var(--color-navy); color:#fff; }
.section-dark h2, .section-dark .section-head p{ color:#fff; }
.section-dark .eyebrow{ color: var(--color-orchid-light); }

/* ---------- Leistungen (Cards) ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.service-card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 44px -18px rgba(27,26,78,.28); }
.service-card .img-wrap{ aspect-ratio: 4/3; overflow:hidden; }
.service-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.service-card:hover img{ transform: scale(1.06); }
.service-card .body{ padding: var(--space-3); flex:1; display:flex; flex-direction:column; }
.service-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
.service-card p{ color:#57536a; font-size:.95rem; flex:1; }
.service-card .card-link{ margin-top:.75rem; font-weight:700; color: var(--color-orchid); text-decoration:none; font-size:.9rem; }

/* ---------- About / split ---------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:center;
}
.split-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.split-badge{
  position:absolute; bottom: var(--space-2); left: var(--space-2);
  background: rgba(251,246,239,.94); backdrop-filter: blur(6px);
  padding: .9rem 1.2rem; border-radius: var(--radius-md);
  display:flex; align-items:center; gap:.8rem; box-shadow: var(--shadow-card);
}
.split-badge strong{ display:block; font-family: var(--font-display); font-size:1.4rem; color: var(--color-navy); }
.split-badge span{ font-size:.78rem; color:#57536a; }
.value-list{ margin-top: var(--space-3); display:grid; gap: var(--space-2); }
.value-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.value-list .dot{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background: var(--color-orchid); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

/* ---------- Preise ---------- */
.price-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.price-table th, .price-table td{ padding: 1.1rem 1.4rem; text-align:left; border-bottom: 1px solid rgba(27,26,78,.08); }
.price-table thead th{ background: var(--color-navy); color:#fff; font-family: var(--font-display); font-weight:600; }
.price-table tbody tr:last-child td{ border-bottom:none; }
.price-table tbody tr:hover{ background: var(--color-cream-dim); }
.price-note{ margin-top: var(--space-2); font-size:.9rem; color:#5c5770; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3); }
.testimonial-card{
  background:#fff; border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-orchid);
}
.stars{ color: var(--color-gold); letter-spacing:.15em; margin-bottom:.6rem; font-size:1.05rem; }
.testimonial-card p{ font-style:italic; color:#3a3550; }
.testimonial-card footer{ margin-top:.8rem; font-size:.85rem; color:#6c6780; font-style:normal; }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap: var(--space-2); max-width: 820px; }
.faq-item{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow:hidden; }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-2);
  padding: 1.1rem 1.4rem; font-family: var(--font-body); font-weight:700; font-size:1.02rem;
  color: var(--color-navy);
}
.faq-question .icon{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background: var(--color-cream-dim); display:flex; align-items:center; justify-content:center; transition: transform var(--transition); }
.faq-item[data-open="true"] .faq-question .icon{ transform: rotate(45deg); background: var(--color-orchid); color:#fff; }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height var(--transition); }
.faq-item[data-open="true"] .faq-answer{ max-height: 400px; }
.faq-answer p{ padding: 0 1.4rem 1.2rem; color:#57536a; }

/* ---------- Kontakt / Karte ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items:stretch; }
.contact-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); }
.contact-list{ display:grid; gap: var(--space-3); margin-top: var(--space-3); }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-list .ic{ flex-shrink:0; width:42px; height:42px; border-radius:50%; background: var(--color-cream-dim); display:flex; align-items:center; justify-content:center; color: var(--color-orchid); }
.contact-list strong{ display:block; color: var(--color-navy); }
.contact-list a{ text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }
.map-embed{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); min-height:340px; height:100%;
  background: radial-gradient(circle at 30% 20%, rgba(184,80,142,.18), transparent 55%), linear-gradient(160deg, var(--color-cream-dim), #e9ddc9); }
.map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.map-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  padding: var(--space-3); text-align:center; color: var(--color-navy);
}
.map-fallback-icon{ font-size:2.2rem; }
.map-fallback strong{ font-family: var(--font-display); font-size:1.2rem; }
.map-fallback p{ color:#5c5770; font-size:.92rem; max-width:280px; }
.map-fallback .btn{ margin-top:.4rem; }

/* ---------- Booking note (Calendly Platzhalter) ---------- */
.booking-box{
  background: linear-gradient(135deg, var(--color-orchid), #8f3a6c);
  color:#fff; border-radius: var(--radius-lg); padding: var(--space-4);
  display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; justify-content:space-between;
}
.booking-box h3{ color:#fff; margin-bottom:.4rem; }
.booking-box p{ color: rgba(255,255,255,.88); margin:0; max-width:480px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-navy); color: rgba(255,255,255,.85); padding-block: var(--space-5) var(--space-3); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand strong{ font-family: var(--font-display); font-size:1.3rem; color:#fff; display:block; margin-bottom:.6rem; }
.footer-brand p{ color: rgba(255,255,255,.65); font-size:.92rem; }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom: var(--space-2); }
.footer-col ul{ display:grid; gap:.6rem; }
.footer-col a{ text-decoration:none; color: rgba(255,255,255,.75); font-size:.94rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ padding-top: var(--space-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-2); font-size:.82rem; color: rgba(255,255,255,.55); }
.social-row{ display:flex; gap:.8rem; }
.social-row a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; text-decoration:none; color:#fff; transition: background var(--transition); }
.social-row a:hover{ background: var(--color-orchid); }

/* ---------- Legal pages ---------- */
.legal-page{ padding-block: var(--space-5); }
.legal-notice{
  background: #fff4e6; border: 1px solid #e8c391; color:#7a4d10;
  border-radius: var(--radius-md); padding: 1rem 1.3rem; margin-bottom: var(--space-4); font-weight:600;
}
.legal-content h2{ margin-top: var(--space-4); }
.legal-content p, .legal-content li{ color:#3f3a4d; }
.legal-content ul{ list-style:disc; padding-left:1.4rem; margin-bottom: var(--space-2); }

.page-hero{ background: var(--color-navy); color:#fff; padding-block: var(--space-5) var(--space-4); }
.page-hero h1{ color:#fff; margin-bottom:.5rem; }
.page-hero p{ color: rgba(255,255,255,.75); }
.breadcrumb{ font-size:.85rem; color: rgba(255,255,255,.6); margin-bottom: var(--space-2); }
.breadcrumb a{ color: rgba(255,255,255,.85); text-decoration:none; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-4{ margin-top: var(--space-4); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split-media img{ aspect-ratio: 16/9; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-layer-photo{ width:78%; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: 0 0 0 auto; width:min(320px,85vw); height:100vh;
    background: var(--color-cream); box-shadow: -20px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform var(--transition);
    padding: 6rem var(--space-3) var(--space-3); z-index:99;
  }
  .main-nav[data-open="true"]{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap: var(--space-2); }
  .main-nav a{ font-size:1.1rem; }
  .nav-toggle{ display:flex; }
  .header-cta .btn-label{ display:none; }
  .header-cta .btn-outline{ padding: .7rem; width:44px; height:44px; }
  .header-cta .btn-icon{ font-size:1.15rem; line-height:1; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .hero-layer-photo{ display:none; }
  .hero-layer-orchid{ width:110px; top:4%; right:4%; }
  .hero{ min-height:auto; padding-block: var(--space-5) var(--space-4); }
}

@media (max-width: 640px){
  .services-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap: var(--space-3); }
  .booking-box{ flex-direction:column; align-items:flex-start; }
  .price-table th, .price-table td{ padding: .8rem 1rem; font-size:.92rem; }
  section{ padding-block: var(--space-5); }
}