/* ============================================================
   Resuelve — statische SEO-/Landing-Schicht (Token-Gesetz)
   Einzige Stilquelle für die server-gerenderten Seiten
   (Home-Shell in index.html + /comida /servicios /marketplace
   /propiedades /aventuras /vida-nocturna).

   Designsprache „Trópico / Cielo Caribe" — EXAKT die iOS-App:
   - Grund = der karibische Sonnenuntergang (Pfirsich → Koralle-
     Rosa → Lila), identisch zu CieloCaribeBackground der App
     (#FFE1C4 → #FFCFD6 → #F3DCEF). Kein Papier-Poster mehr.
   - Karten = weiß, schwebend, weiche Rosé-Schatten, runde
     Radien (12/20) — wie Balance/Pedidos/Perfil in der App.
   - GENAU EIN Aktions-Akzent: die Trópico-Koralle
     (#FF5A7C → #E8436B, weißer Text; = AppColors.action).
   - Jede Sektions-Seite behält ihre Hero-Wandfarbe (body[data-v]
     → --wall), jetzt als sanftes Trópico-Pastell mit runder
     Unterkante statt harter Tintenkante. Vida nocturna = die
     Abend-Seite (Noche-Violett, helle Schrift) — Inhalt = Form.
   - Motion-Budget: ein Entrance-Moment, Micro-Feedback nur auf
     CTAs, prefers-reduced-motion global respektiert.
   ============================================================ */

/* ---- Fonts (selbst gehostet, versionierte Dateinamen → in
   render.yaml immutable cachebar; latin-Subset deckt es-DO ab).
   Display = Archivo fett/eng (App-nah, wie SF Pro Display) —
   Alfa Slab bleibt gehostet, wird aber nicht mehr eingesetzt. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/archivo-v25-latin.woff2') format('woff2');
}

:root {
  /* Cielo Caribe — die eine Leinwand (Werte = App-Canvas). */
  --sky-top: #FFE1C4;
  --sky-mid: #FFCFD6;
  --sky-low: #F3DCEF;
  --sky: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 44%, var(--sky-low) 100%);
  --paper: var(--sky-top); /* Fallback-Flachfarbe (alte Konsumenten) */

  /* Karten: weiß, schwebend (wie cieloCardDecoration der App) */
  --card: rgba(255, 255, 255, 0.92);
  --card-border: rgba(255, 255, 255, 0.95);
  --hair: #F3E4E0;
  --shadow-card: 0 14px 30px -14px rgba(120, 50, 80, 0.30);

  /* Tinte (Text) — Trópico-Ink */
  --ink: #241B27;
  --ink-2: #6E6470;

  /* DER Akzent — Trópico-Koralle (= AppColors.action/actionDeep).
     Flächen nutzen den dunklen Ton, damit weißer Text AA erreicht. */
  --accent: #E8436B;
  --accent-soft: #FF5A7C;
  --on-accent: #FFFFFF;

  /* Wand: Default = Sky-Top (Home/Shell → nahtlos zum App-Boot),
     Seiten überschreiben via body[data-v]. */
  --wall: #FFE1C4;

  /* Milchglas des klebenden Kopfes beim Scrollen. */
  --head-glass: rgba(255, 250, 246, 0.82);
  /* Abendhimmel, der beim Scrollen aufzieht. Bewusst hell gehalten —
     die Tinte behält darauf über die ganze Seite mehr als 10:1. */
  --dusk: linear-gradient(180deg, #F7D9E4 0%, #E9CDE9 52%, #D9C2E6 100%);

  /* Typo-Skala — genau 6 Stufen, nichts daneben */
  --t1: 0.8125rem;   /* 13 klein/Meta        */
  --t2: 0.9375rem;   /* 15 sekundär          */
  --t3: 1.0625rem;   /* 17 Body              */
  --t4: 1.375rem;    /* 22 Karten-/Subhead   */
  --t5: 1.875rem;    /* 30 H2                */
  --t6: clamp(2.5rem, 6vw, 3.75rem); /* Display-H1 */

  --font-display: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Abstände (8er-Raster wie UI-Master-System) */
  --s2: 0.5rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem; --s6: 3rem; --s7: 4rem;

  /* Runde iOS-Radien statt Print-Kanten */
  --r-s: 12px; --r-m: 20px;
  --edge: 1px solid var(--card-border);
}

/* Wandfarben — je Seite genau eine, nur hier definiert.
   Trópico-Pastelle: hell genug für Tinten-Text, sunset-verwandt. */
body[data-v='comida']        { --wall: #FFC49A; }
body[data-v='servicios']     { --wall: #C9BDF2; }
body[data-v='marketplace']   { --wall: #BCE4AC; }
body[data-v='propiedades']   { --wall: #F5DCA6; }
body[data-v='aventuras']     { --wall: #ABE2DC; }
body[data-v='vida-nocturna'] { --wall: #3A1C44; }
body[data-v='salud']         { --wall: #A9D6F0; }
body[data-v='mascotas']      { --wall: #F5C6D8; }
body[data-v='envios']        { --wall: #D6E9A8; }
body[data-v='alquiler']      { --wall: #CBD5DE; }
body[data-v='eventos']       { --wall: #E8C4F2; }
body[data-v='hoteles']       { --wall: #FFC7BC; }

/* ---- Grundgerüst ---- */
#seo-shell, .seo-page {
  font-family: var(--font-body);
  font-size: var(--t3);
  line-height: 1.6;
  color: var(--ink);
  background: var(--sky);
  -webkit-font-smoothing: antialiased;
}
.seo-page { margin: 0; min-height: 100vh; }
#seo-shell[hidden] { display: none; }

#seo-shell *, .seo-page *,
#seo-shell *::before, .seo-page *::before,
#seo-shell *::after, .seo-page *::after { box-sizing: border-box; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--s4); }

/* Sanfter Farb-Übergang bei Theme- UND Wand-Wechsel: die Tokens (--wall,
   --ink …) springen hart, aber die Farb-Eigenschaften, die sie
   konsumieren, interpolieren — so färbt sich der Himmel weich um, und der
   Text passt sich automatisch mit an. (.cta hat eine eigene, ergänzte
   Transition; reduced-motion schaltet alles ab, s. u.) */
.seo-page,
.site-head, .brand, .site-nav a,
.hero, .kicker, .hero h1, .lead, .ltr,
.sections section, .sections h2, .sections h3, .sections p, .sections a,
.chips li, .ph,
.steps li, .steps li::before,
.site-foot, .site-foot h2, .site-foot a, .site-foot .fine {
  transition: background-color 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
              color 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Tastatur-Fokus: immer sichtbar, nie outline:none */
#seo-shell a:focus-visible, .seo-page a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff;
  padding: var(--s2) var(--s3); border-radius: 0 0 var(--r-s) 0;
  font-weight: 700; z-index: 30; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---- Header: schwebt transparent auf dem Himmel ---- */
.site-head { background: transparent; }
.site-head .wrap {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 4.25rem; flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s2);
}
.brand {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.02em;
  font-size: var(--t4); color: var(--ink);
  text-decoration: none;
}
.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--s2) var(--s4); margin: 0; padding: 0;
}
.site-nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t2); font-weight: 600;
  padding: var(--s2) 0;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom: 3px solid var(--accent);
}

/* ---- DER CTA: Koralle-Pill wie in der App (Touch-Ziel ≥ 52px) ---- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 var(--s5);
  background: linear-gradient(120deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  border: 0; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(232, 67, 107, 0.55);
  font-family: var(--font-body); font-weight: 700; font-size: var(--t3);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(232, 67, 107, 0.6);
}
.cta:active {
  transform: scale(0.98);
  box-shadow: 0 6px 14px -8px rgba(232, 67, 107, 0.55);
}

/* ---- Hero: steht auf der Cielo-Caribe-Leinwand, nicht auf einer Wand ----
   Bis 2026-07-24 legte der Hero eine Vollton-Wand (--wall) über den
   Himmel — zwölf verschiedene Flächen, die mit der App nichts zu tun
   hatten. Jetzt trägt die Seite durchgehend dieselbe Leinwand wie die
   Kunden-App, und die Kategorie zeigt sich als Akzent (Punkt am Kicker,
   Rahmen am Foto) statt als ganze Wandfarbe. Owner-Entscheid nach
   Entwurfsvorlage. */
.hero {
  padding: var(--s7) 0 var(--s6);
  background: transparent;
  color: var(--ink);
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6); align-items: center;
}
/* Ohne Hero-Foto (Start-Shell): eine ruhige Textspalte, nichts leer */
.hero--solo .wrap { grid-template-columns: 1fr; max-width: 52rem; }
.kicker {
  font-size: var(--t1); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s3);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
/* Die Kategorie-Farbe — früher die ganze Wand, jetzt ein Punkt. Rein
   dekorativ: die Kategorie steht als Wort daneben, Farbe allein trägt
   nie eine Aussage (WCAG 1.4.1). */
.kicker::before {
  content: ''; width: 0.625rem; height: 0.625rem; border-radius: 4px;
  background: var(--wall); flex: 0 0 auto;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t6); line-height: 1.06;
  margin: 0 0 var(--s4); letter-spacing: -0.025em;
  color: var(--ink);
}
/* Volle Tinte, nicht die Sekundärtinte: dieser Absatz steht direkt auf
   dem Verlauf, und dort erreicht --ink-2 nur 4,07–4,52:1 (gemessen gegen
   alle drei Farbstopps). Auf weißen Karten ist --ink-2 dagegen richtig. */
.lead { font-size: var(--t4); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s5); }

/* Signature „El Letrero": Koralle-Swipe hinter EINEM Wort (weiße Schrift —
   funktioniert auf jeder Wand, auch der Noche-Wand). */
.ltr {
  font-style: normal;
  color: var(--on-accent);
  background: linear-gradient(120deg, var(--accent-soft), var(--accent));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.14em 0.05em;
  border-radius: 8px;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ---- Fotos: schwebende App-Karten statt geklebter Abzüge ---- */
.ph {
  position: relative; overflow: hidden;
  background: var(--card);
  border: var(--edge);
  border-radius: var(--r-m);
  padding: 0;
  box-shadow: var(--shadow-card);
}
.ph img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
}
.hero .ph { aspect-ratio: 4 / 3; }

/* ---- Sektionen: weiße Karten schweben auf dem Himmel ---- */
.sections { padding: var(--s6) 0; }
.sections section {
  background: var(--card);
  border: var(--edge);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.sections .cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--s5); align-items: center;
}
.sections .cols .ph { aspect-ratio: 3 / 2; }
.sections h2 {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--t5); line-height: 1.2; margin: 0 0 var(--s3);
  color: var(--ink);
}
.sections h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t4); line-height: 1.3;
  margin: var(--s4) 0 var(--s2); color: var(--ink);
}
.sections h3:first-child { margin-top: 0; }
.sections p { margin: 0 0 var(--s3); color: var(--ink-2); }
.sections p:last-child { margin-bottom: 0; }
.sections a {
  color: var(--ink); font-weight: 700;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sections a:hover { text-decoration-color: var(--ink); }

/* „Cómo funciona"-Schritte: Koralle-getönte Nummern (App-Chip-Sprache) */
.steps { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.steps li {
  counter-increment: paso;
  position: relative; padding: var(--s3) 0 var(--s3) 3.25rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 67, 107, 0.12); color: var(--accent);
  border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t2);
}
.steps strong { color: var(--ink); }

/* Themen-Chips: weiße Pillen wie in der App */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: var(--t2); font-weight: 600; color: var(--ink);
  background: var(--card);
  border: var(--edge); border-radius: 999px;
  padding: calc(var(--s2) * 0.75) var(--s3);
  box-shadow: 0 6px 14px -8px rgba(120, 50, 80, 0.25);
}

/* ---- Footer: der Abend (Noche-Violett, wie das Sky-Ende vertieft) ---- */
.site-foot { padding: var(--s6) 0; margin-top: var(--s6); background: #2E1B33; color: #F3E9F0; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); }
.site-foot h2 { font-family: var(--font-body); font-size: var(--t1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C9AFC4; margin: 0 0 var(--s3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-foot a { color: #F3E9F0; text-decoration: none; font-size: var(--t2); }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot .fine { color: #C9AFC4; font-size: var(--t1); margin: var(--s5) 0 0; }

/* ---- Ein orchestrierter Entrance-Moment (nur Hero) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-copy { animation: rise 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .ph  { animation: rise 500ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both; }

@media (prefers-reduced-motion: reduce) {
  .seo-page *, .seo-page *::before, .seo-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   SCROLL-BEWEGUNG — „der Abend zieht auf" (2026-07-24)
   ==================================================================
   Die Landing-Seiten sollen sich beim Scrollen anfühlen wie die App,
   nicht wie ein Dokument. Vier Bewegungen, mehr nicht:
     1. Der Himmel wandert von Nachmittag in den Abend.
     2. Der Kopf legt sich beim Scrollen auf Milchglas.
     3. Karten steigen herein, an den Finger gekoppelt.
     4. Das Hero-Foto driftet langsamer als der Rest (Tiefe).

   Warum ganz ohne JavaScript: `animation-timeline` bindet die
   Animation direkt an die Scroll-Position — der Compositor rechnet,
   nicht der Hauptthread. Vor allem aber kann so NIE Inhalt unsichtbar
   bleiben, wenn ein Script scheitert: Browser ohne Unterstützung
   zeigen einfach die fertige Seite. Ein `opacity:0`, das auf JS
   wartet, wäre in einer SEO-Schicht ein Kunstfehler.

   KEINE Dauerschleifen: jede Bewegung ist an den Scroll gebunden und
   steht still, wenn der Finger stillsteht — sonst heizt die Seite auf
   schwachen Geräten (Motion-Regel des Projekts).
   ================================================================== */

/* Anker nicht unter den klebenden Kopf schieben. */
.seo-page { scroll-padding-top: 5.5rem; }

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

/* Milchglas-Fläche des Kopfes — als eigene Ebene, damit nur `opacity`
   animiert wird (billigste Eigenschaft, die es gibt). */
.site-head::before {
  content: ''; position: absolute; inset: 0;
  background: var(--head-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -24px rgba(120, 50, 80, 0.75);
  opacity: 0; pointer-events: none;
}
.site-head > * { position: relative; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1 — Der Himmel zieht in den Abend. Bewusst hell gehalten: der
       Endzustand ist ein tieferes Flieder, kein Dunkel. Tinte behält
       damit über die ganze Seite ≥ 10:1. */
    .seo-page::after {
      content: ''; position: fixed; inset: 0; z-index: -1;
      pointer-events: none;
      background: var(--dusk);
      opacity: 0;
      animation: duskFall linear both;
      animation-timeline: scroll();
      animation-range: 12% 88%;
    }

    /* 2 — Kopf klebt und legt sich auf Milchglas, sobald man
       losscrollt. Das Kleben steht BEWUSST hier drin: ohne
       scroll-gebundene Animation (Safari, Firefox) gäbe es kein
       Milchglas — ein klebender, durchsichtiger Kopf stünde dann über
       dem Text. Dort bleibt der Kopf lieber wie bisher stehen. */
    .site-head { position: sticky; top: 0; z-index: 20; }
    .site-head::before {
      animation: glassIn linear both;
      animation-timeline: scroll();
      animation-range: 0 180px;
    }

    /* 3 — Karten steigen herein, an die Scroll-Position gekoppelt.
       `entry` heißt: die Bewegung läuft, während die Karte ins Bild
       kommt, und endet, wenn sie steht.
       Gemischte Bereiche (`entry 2% cover 26%`) haben im Test eine
       negative Laufzeit ergeben — die Karten blieben im Anfangszustand
       hängen. Deshalb der einfache, gut unterstützte Bereich. */
    .sections section {
      animation: cardRise linear both;
      animation-timeline: view();
      animation-range: entry;
    }

    /* 4 — Tiefe: das Foto zieht langsamer nach als seine Karte. */
    .hero .ph img, .sections .ph img {
      animation: photoDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes duskFall  { to { opacity: 0.62; } }
@keyframes glassIn   { to { opacity: 1; } }
/* BEWUSST OHNE `opacity`: Dekoration darf Inhalt niemals verstecken
   können. Hängt die Zeitachse in irgendeinem Browser, sitzt die Karte
   22 px zu tief — mehr nicht. Ein `opacity: 0`, das hängen bleibt,
   hätte im Test die halbe Seite unsichtbar gemacht (2026-07-24). */
@keyframes cardRise  {
  from { transform: translateY(22px) scale(0.99); }
  to   { transform: none; }
}
/* Das Bild ist größer als sein Rahmen und wandert darin — dadurch
   entsteht Parallaxe ohne dass irgendwo eine Lücke aufreißt. */
@keyframes photoDrift {
  from { transform: translateY(-3.5%) scale(1.07); }
  to   { transform: translateY(3.5%) scale(1.07); }
}

/* ---- Responsive (bis 360 px) ---- */
@media (max-width: 55rem) {
  .hero { padding-top: var(--s6); border-radius: 0 0 24px 24px; }
  .hero .wrap, .sections .cols { grid-template-columns: 1fr; }
  .sections .cols .ph { order: -1; }
  .site-nav { margin-left: 0; width: 100%; }
}
@media (max-width: 35rem) {
  .wrap { padding: 0 var(--s3); }
  .sections section { padding: var(--s4); }
  .cta { width: 100%; }
}

/* ---- Dunkelmodus: „Noche Caribe" ------------------------------------------
   Explizit über [data-theme] gesetzt (Inline-Bootstrap im <head> liest
   localStorage bzw. prefers-color-scheme → kein FOUC). Ohne JS bleibt der
   helle Cielo-Look als Default. Gleiche Sprache wie der App-Dark-Mode:
   tiefer Abendhimmel, dunkle Glas-Karten, leuchtende Koralle. */
:root[data-theme='dark'] {
  --sky-top: #33202B;
  --sky-mid: #2A1B2E;
  --sky-low: #1C1426;
  --paper: var(--sky-top);
  --card: rgba(38, 24, 46, 0.85);
  --card-border: rgba(255, 255, 255, 0.13);
  --hair: rgba(255, 255, 255, 0.10);
  --shadow-card: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
  --ink: #F6EEF4;
  --ink-2: #C4B2C6;
  --accent: #E8436B;
  --accent-soft: #FF6B8A;
  --wall: #3A2430;
  --head-glass: rgba(28, 18, 32, 0.78);
  /* Im Dunkeln zieht die Nacht auf, nicht der Abend — sonst wuerde die
     Ebene die Seite aufhellen statt zu vertiefen. */
  --dusk: linear-gradient(180deg, #2A1B2E 0%, #1F1526 52%, #160F1D 100%);
}
:root[data-theme='dark'] body[data-v='comida']        { --wall: #59301F; }
:root[data-theme='dark'] body[data-v='servicios']     { --wall: #372B58; }
:root[data-theme='dark'] body[data-v='marketplace']   { --wall: #274422; }
:root[data-theme='dark'] body[data-v='propiedades']   { --wall: #55411C; }
:root[data-theme='dark'] body[data-v='aventuras']     { --wall: #17453F; }
:root[data-theme='dark'] body[data-v='vida-nocturna'] { --wall: #241634; }
:root[data-theme='dark'] body[data-v='salud']         { --wall: #1E3A4F; }
:root[data-theme='dark'] body[data-v='mascotas']      { --wall: #4A2436; }
:root[data-theme='dark'] body[data-v='envios']        { --wall: #35441E; }
:root[data-theme='dark'] body[data-v='alquiler']      { --wall: #2B3844; }
:root[data-theme='dark'] body[data-v='eventos']       { --wall: #3E2450; }
:root[data-theme='dark'] body[data-v='hoteles']       { --wall: #5A2E28; }

/* ---- Theme-Umschalter (per seo.js neben der Marke injiziert) ---- */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; min-height: 2.75rem;
  border: var(--edge); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: var(--t4); line-height: 1; cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(120, 50, 80, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease,
              background 120ms ease, color 120ms ease;
}
.theme-toggle:hover  { transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }