/* ==========================================================================
   Moça da Ilha — Design System
   Ein einziges, konsistentes Stylesheet. Fluide Typografie & Abstände über
   clamp(): nichts springt mehr zwischen Bildschirmgrößen.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Farben — aus der Bildwelt abgeleitet */
  --sand-50:  #FDF8EF;
  --sand-100: #F7EDDB;
  --sand-200: #EFE0C6;
  --paper:    #FFFDF8;
  --ink-900:  #33231A;
  --ink-700:  #55402F;
  --ink-500:  #7C6350;
  --hibisco:      #D94F41;
  --hibisco-dark: #B4382D;
  --hibisco-soft: #FBEAE6;
  --palm-700: #2E5941;
  --palm-500: #45785B;
  --palm-soft:#E7F0E7;
  --mar-600:  #24798B;
  --mar-soft: #E2F1F2;
  --sol:      #E9A13B;
  --sol-soft: #FBF0DC;

  /* Typografie */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;

  /* Fluide Typo-Skala — kompakt */
  --fs-hero: clamp(1.75rem, 1.25rem + 2.2vw, 2.7rem);
  --fs-h1:   clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --fs-h2:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h3:   clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-body: clamp(0.92rem, 0.9rem + 0.1vw, 1rem);
  --fs-small: 0.82rem;

  /* Fluide Abstände — kompakt */
  --space-1: clamp(0.4rem, 0.35rem + 0.2vw, 0.6rem);
  --space-2: clamp(0.7rem, 0.6rem + 0.35vw, 1rem);
  --space-3: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  --space-4: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem);
  --space-5: clamp(2.2rem, 1.7rem + 2vw, 3.5rem);
  /* Einheitlicher vertikaler Abstand zwischen allen Kacheln */
  --stack: clamp(0.85rem, 0.7rem + 0.6vw, 1.4rem);

  /* Milchglas */
  --glass: rgba(255, 252, 243, 0.78);
  --glass-strong: rgba(255, 252, 243, 0.9);
  --glass-border: rgba(255, 255, 255, 0.65);

  /* Form */
  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 32px;
  --shadow-s: 0 2px 12px rgba(84, 56, 34, 0.1);
  --shadow-m: 0 12px 34px rgba(84, 56, 34, 0.14);
  --shadow-l: 0 26px 64px rgba(84, 56, 34, 0.2);

  --container: 1120px;
  --gutter: clamp(0.9rem, 0.6rem + 1.5vw, 1.75rem);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Deko-Elemente ragen bewusst über Kartenränder hinaus — am Bildschirmrand
   abschneiden, damit nie seitlich gescrollt werden kann ("clip" statt
   "hidden", damit der Sticky-Header weiter funktioniert). */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
}
/* Atmosphärischer Strand-Hintergrund über die ganze Seite — scharf & farbig.
   Desktop: Aquarell-Panorama in voller Auflösung (2172px), kein Blur.
   Hochformat/Mobil: Strandfoto in nativer Auflösung. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(253, 248, 239, 0.1), rgba(253, 248, 239, 0.24)),
    url("../img/hintergrund-sunset-1672.jpg") center / cover no-repeat;
  filter: saturate(1.05);
  pointer-events: none;
}
@media (orientation: portrait) {
  body::before {
    background:
      linear-gradient(rgba(253, 248, 239, 0.12), rgba(253, 248, 239, 0.26)),
      url("../img/hintergrund-sunset-1672.jpg") center / cover no-repeat;
    filter: saturate(1.05);
  }
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.12;
  margin: 0 0 var(--space-2);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-2); }
a { color: var(--hibisco-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hibisco); }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; border-radius: 4px; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Jede Sektion trägt den halben Kachel-Abstand oben und unten:
   zwischen zwei Kacheln entsteht so immer exakt --stack. */
.section { padding-block: calc(var(--stack) / 2); }
.section--tight { padding-block: calc(var(--stack) / 2); }
.section--alt { background: transparent; }
/* Die erste Kachel jeder Seite bekommt etwas mehr Luft zum Header — auf allen Seiten gleich. */
main > section:first-child { padding-top: calc(var(--stack) / 2 + var(--space-2)); }

/* Großer Milchglas-Container: hält ganze Sektionen über dem farbigen Hintergrund */
.shell {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  padding-block: var(--space-2);
}
/* Einheitliche Kachel-Breite: auf großen Screens exakt --container,
   auf kleinen bleibt immer ein Außenabstand zum Bildschirmrand. */
.container.shell,
.container--card {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  max-width: none;
  margin-inline: auto;
}
/* Wrapper für einzelne Glas-Karten (about-band, hero-panel):
   kein Innenabstand, damit die Karte selbst die volle Kachel-Breite hat. */
.container--card { padding-inline: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink-900); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 252, 243, 0.78);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 24px rgba(84, 56, 34, 0.1);
}
/* Header läuft über die volle Bildschirmbreite: Logo+Menü links, Socials rechts */
.site-header .container { max-width: none; }
.site-header__inner {
  /* Logo links, Menü exakt zentriert, Socials rechts */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--space-2);
  min-height: 68px;
}
.site-header__inner .brand,
.site-header__inner .header-left { justify-self: start; }
.site-header__inner .site-nav { justify-self: center; }
/* Zurück-Pfeil (Voltar) neben dem Logo — in allen Ansichten sichtbar */
.header-left { display: flex; align-items: center; gap: clamp(0.5rem, 1.2vw, 1rem); min-width: 0; }
.header-signs { display: flex; align-items: center; gap: 0.45rem; }
.header-sign { display: block; flex: none; }
.header-sign img {
  display: block; width: auto;
  filter: drop-shadow(0 3px 6px rgba(84, 56, 34, 0.22));
  transition: transform 0.15s ease;
}
.header-sign:hover img { transform: translateY(-2px) rotate(-3deg) scale(1.06); }
.brand {
  flex: none;
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--ink-900);
  white-space: nowrap;
}
.brand img {
  width: 50px; height: 50px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 3px;
  box-shadow: var(--shadow-m);
  transition: transform 0.25s ease;
}
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand__name {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.6rem; line-height: 1; padding-top: 0.25rem;
  color: var(--ink-900);
}
/* Trennstrich zwischen Sobre mim und Fale comigo im rechten Menüblock */
.nav-sep {
  width: 1px; height: 1.2em; align-self: center;
  background: rgba(85, 64, 47, 0.35); margin-inline: 0.4rem;
}
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 2px;
}
.site-nav a {
  display: block; padding: 0.5rem 0.75rem;
  color: var(--ink-700); text-decoration: none;
  font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.site-nav a:hover {
  color: var(--hibisco-dark); background: rgba(255, 255, 255, 0.92);
  transform: rotate(-2deg) scale(1.06); box-shadow: var(--shadow-s);
}
.site-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #E56A52, var(--hibisco-dark));
  box-shadow: 0 4px 14px rgba(185, 62, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.site-nav a[aria-current="page"]::before { content: "✿ "; }
.site-header__social { flex: none; display: flex; gap: 0.5rem; }
.site-header__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-900);
  transition: transform 0.15s ease, background 0.15s ease;
}
.site-header__social a:hover { transform: translateY(-2px) rotate(8deg); background: var(--hibisco-dark); }
.site-header__social svg { width: 18px; height: 18px; fill: #fff; }
/* Desktop: Socials rechts, der Sobre-mim/Fale-comigo-Zusatzblock ist ausgeblendet */
.site-header__social { justify-self: end; }
.site-nav--secondary { display: none; }
/* Kleiner Modus: Hauptmenü weg, großes Logo links,
   Socials in der Mitte, rechts "Sobre mim | Fale comigo".
   Greift ab 1339px — darunter würde der Voltar-Pfeil das Hauptmenü berühren
   (gemessen: Berührung ab ca. 1330px Viewport-Breite). */
@media (max-width: 1339px) {
  /* 3-Spalten-Raster: Logo | Socials exakt zentriert | Sobre mim/Fale comigo */
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .brand { justify-self: start; }
  .site-nav { display: none; }
  /* rechtsbündig am Rand — spiegelt das Logo auf der linken Seite */
  .site-nav--secondary,
  .site-header__inner .site-nav--secondary { display: block; justify-self: end; }
  .site-nav--secondary a { font-size: 0.58rem; padding: 0.25rem 0.3rem; letter-spacing: 0.02em; opacity: 0.85; }
  .site-header__social { margin: 0; justify-self: center; }
  .brand__name { display: none; }
  .brand img { width: 66px; height: 66px; }
  .header-sign img { height: clamp(46px, 8vw, 66px); }
}
/* Sehr schmale Handys: alles kompakter, damit die Kopfzeile einzeilig bleibt */
@media (max-width: 520px) {
  .site-header__inner { gap: 0.5rem; }
  .site-header__social { gap: 0.35rem; }
  .site-header__social a { width: 34px; height: 34px; }
  .site-header__social svg { width: 15px; height: 15px; }
  /* Beide Links nebeneinander; alles etwas kompakter, damit die Zeile passt */
  .site-nav--secondary a { padding: 0.25rem 0.15rem; font-size: 0.52rem; letter-spacing: 0.01em; }
  .nav-sep { margin-inline: 0.05rem; height: 1em; }
  .brand img { width: 54px; height: 54px; }
  .header-left { gap: 0.4rem; }
  .header-signs { gap: 0.3rem; }
  .header-sign img { height: 40px; }
}
/* Ganz schmale Handys (≤400px): noch eine Stufe kompakter,
   damit "Sobre mim | Fale comigo" in der Zeile bleibt */
@media (max-width: 400px) {
  .site-header__inner { gap: 0.4rem; }
  .brand img { width: 48px; height: 48px; }
  .btn-voltar { width: 1.9rem; height: 1.9rem; }
  .btn-voltar svg { width: 12px; height: 12px; }
  .site-header__social { gap: 0.3rem; }
  .site-header__social a { width: 30px; height: 30px; }
  .site-header__social svg { width: 13px; height: 13px; }
  .site-nav--secondary a { font-size: 0.5rem; }
}

/* ---------- Voltar-Button im Header ----------
   Bewusst dezent gehalten — gleicher Look wie die Social-Icons,
   damit er nicht zum Zurückgehen "auffordert". */
/* Wie die Pfeil-Buttons im Praia-Hero: cremeweißer Kreis, dunkler Chevron */
.btn-voltar {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink-900); text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-voltar svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-voltar:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 520px) {
  .btn-voltar { width: 2.1rem; height: 2.1rem; }
  .btn-voltar svg { width: 13px; height: 13px; }
}

/* ---------- Buttons, Chips, Kicker ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 800; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); filter: brightness(1.05); }
.btn--primary {
  background: linear-gradient(180deg, #E56A52, var(--hibisco-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(185, 62, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:hover { color: #fff; }
.btn--ghost {
  background: #3f7f47;
  color: #fff;
  box-shadow: 0 6px 18px rgba(63, 127, 71, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover { color: #fff; }
.btn--light {
  background: var(--glass-strong); color: var(--ink-900);
  border-color: var(--glass-border); box-shadow: var(--shadow-s);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hibisco); margin-bottom: var(--space-1);
}
.kicker::before { content: "❁ ·"; color: var(--palm-500); letter-spacing: 0.2em; }

.chip {
  display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-s);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-700);
}
.chip--green { background: var(--palm-soft); border-color: transparent; color: var(--palm-700); }
.chip--red { background: var(--hibisco-soft); border-color: transparent; color: var(--hibisco-dark); }
.chip--sun { background: var(--sol-soft); border-color: transparent; color: #9A6A1B; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 var(--space-2); list-style: none; }

.hand { font-family: var(--font-hand); font-size: 1.3em; color: var(--hibisco-dark); font-weight: 600; }

.section-head { max-width: 640px; margin-bottom: var(--space-2); }
.section-head h1::after, .section-head h2::after {
  content: ""; display: block; width: 64px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--hibisco), var(--sol));
  margin-top: 0.55rem;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center h1::after, .section-head--center h2::after { margin-inline: auto; }
.section-head p { color: var(--ink-500); }
.section-head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
}

/* ---------- Hero (Startseite) ---------- */
.hero { position: relative; padding-block: calc(var(--stack) / 2); }
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-3); align-items: center;
  padding-block: var(--space-3);
}
.hero h1 {
  font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.01em;
}
.hero h1 em { font-style: normal; color: var(--hibisco); }
.hero__lead { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); color: var(--ink-500); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--space-3); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--paper); border: 1px solid var(--sand-200); border-radius: 999px;
  padding: 0.4rem 1rem; font-weight: 800; font-size: 0.9rem; color: var(--palm-700);
  margin-bottom: var(--space-2); box-shadow: var(--shadow-s);
}
.hero__island-note {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1;
  color: var(--mar-600);
  white-space: nowrap;
}
.hero__island-note .hero__island-flower { font-size: 0.85em; line-height: 1; }
.hero__figure { margin: 0; position: relative; }
.hero__figure img { width: 100%; height: auto; }
@media (max-width: 780px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__figure { order: -1; max-width: 340px; margin-inline: auto; }
}

/* Großes Glas-Panel mit "hineingeschnittenem" Foto */
.hero-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.hero-panel__content { padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); position: relative; z-index: 2; }
.hero-panel__figure { margin: 0; position: relative; align-self: stretch; min-height: 360px; }
.hero-panel__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
  mask-image: linear-gradient(to right, transparent 0, #000 26%);
}
@media (max-width: 780px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-panel__figure { order: -1; min-height: 240px; }
  .hero-panel__figure img {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%);
    mask-image: linear-gradient(to top, transparent 0, #000 22%);
  }
  .hero-panel__content { padding: var(--space-3); }
}

/* ---------- Seiten-Hero (Unterseiten) ----------
   Das Bild füllt die ganze Kachel; Kicker, Titel und Untertitel liegen
   auf einem cremefarbenen Verlauf darüber — Desktop links, mobil unten. */
.page-hero { position: relative; }
.page-hero__inner {
  position: relative;
  display: grid; align-items: end; justify-items: start;
  min-height: clamp(320px, 34vw, 440px);
  padding: 0; overflow: hidden;
}
.page-hero__figure { position: absolute; inset: 0; margin: 0; }
.page-hero__figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Halbseitiges Milchglas hinter dem Text: Blur läuft per Maske weich aus,
   die rechte Bildhälfte bleibt gestochen scharf. */
.page-hero__inner::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1; /* über dem Bild, unter dem Text */
  background: rgba(255, 249, 232, 0.34);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 64%);
}
.page-hero__inner::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  /* Zusätzlich ein sanfter Verlauf unten, damit auch Untertitel und Suche ruhig aufliegen */
  background: linear-gradient(0deg, rgba(255, 249, 232, 0.88) 0%, rgba(255, 249, 232, 0.45) 26%, rgba(255, 249, 232, 0) 52%);
}
.page-hero__copy {
  position: relative; z-index: 2;
  max-width: 620px;
  padding: clamp(1.4rem, 4vw, 3.4rem);
}
.page-hero__copy .kicker { color: var(--palm-700); }
/* Sanfter heller Schein hinter der Schrift — hält den Text lesbar, ohne das Bild zu verwischen */
.page-hero__copy .kicker,
.page-hero__copy h1 {
  text-shadow: 0 1px 12px rgba(255, 249, 232, 0.95), 0 0 3px rgba(255, 249, 232, 0.85);
}
.page-hero__copy h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.7rem);
  font-weight: 700; line-height: 1.02;
  color: var(--ink-700);
}
.page-hero p { color: var(--ink-700); font-weight: 800; max-width: 30rem; }
.page-hero p:last-child { margin-bottom: 0; }
/* Maré-Karte oben rechts im Hero (praias.html) — gleiches Panel wie auf der Startseite, kompakt skaliert */
.hero-tide {
  position: absolute;
  top: clamp(0.7rem, 2vw, 1.2rem);
  right: clamp(0.7rem, 2vw, 1.2rem);
  z-index: 2;
  padding: 0.7rem 1rem;
}
.hero-tide .panel__head { margin-bottom: 0.15rem; gap: 0.5rem; }
.hero-tide h3 { font-size: 0.95rem; }
.hero-tide .chip { padding: 0.2rem 0.65rem; font-size: 0.72rem; }
.hero-tide .tide-now--stack { gap: 0; }
.hero-tide .tide-now strong { font-size: 1.35rem; line-height: 1.15; }
.hero-tide .tide-now__height { font-size: 0.78rem; }
.hero-tide .tide-now__small { max-width: none; margin-top: 0.1rem; font-size: 0.75rem; }
@media (max-width: 640px) {
  .hero-tide { padding: 0.45rem 0.7rem; border-radius: 16px; }
  .hero-tide h3 { font-size: 0.8rem; }
  .hero-tide .chip { padding: 0.12rem 0.5rem; font-size: 0.65rem; }
  .hero-tide .tide-now__label { font-size: 0.62rem; }
  .hero-tide .tide-now strong { font-size: 1.1rem; }
  .hero-tide .tide-now__height { font-size: 0.68rem; }
  .hero-tide .tide-now__small { font-size: 0.66rem; margin-top: 0; }
}

/* Suchleiste im Hero */
.hero-search { margin-top: var(--space-2); width: min(100%, 26rem); }
.hero-search input {
  width: 100%; padding: 0.75rem 1.1rem;
  border: 2px solid var(--sand-200); border-radius: 999px;
  font-family: var(--font-body); font-size: 1rem;
  background: var(--paper); box-shadow: var(--shadow-s);
}
.hero-search input:focus { border-color: var(--palm-500); outline: none; }
@media (max-width: 780px) {
  .page-hero__inner { min-height: clamp(360px, 88vw, 470px); }
  /* Mobil sitzt der Text unten — das Milchglas läuft von unten nach oben aus */
  .page-hero__inner::before {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 74%);
    mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 74%);
  }
  .page-hero__inner::after {
    background: linear-gradient(0deg, rgba(255, 249, 232, 0.9) 0%, rgba(255, 249, 232, 0.55) 36%, rgba(255, 249, 232, 0) 72%);
  }
  .page-hero__copy { padding: 1.3rem 1.2rem 1.5rem; }
}

/* ---------- Karten ---------- */
/* Kompakte Karten als GLOBALE Regel: klein, viele pro Zeile (mobil 2 Spalten) */
.card-grid {
  display: grid; gap: var(--space-1);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ---------- Karten-Karussell (Todas as praias / Pousadas e casas) ---------- */
.card-carousel { position: relative; }
.card-carousel__track {
  display: flex; gap: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: var(--space-1); margin: calc(-1 * var(--space-1));
}
.card-carousel__track::-webkit-scrollbar { display: none; }
.card-carousel__track > .card { flex: 0 0 min(72vw, 240px); scroll-snap-align: start; }
.carousel-nav { display: flex; gap: 0.45rem; }
.carousel-btn {
  width: 42px; height: 42px; flex: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink-700);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.carousel-btn svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.carousel-btn:hover:not([disabled]) { transform: translateY(-2px); }
.carousel-btn[disabled] { opacity: 0.35; cursor: default; }
.card {
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-m);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.card__media { position: relative; }
.card__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.card__media--wide img { aspect-ratio: 16 / 9; }
.card__badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: rgba(255, 253, 248, 0.94); border-radius: 999px;
  padding: 0.12rem 0.5rem; font-size: 0.65rem; font-weight: 800; color: var(--ink-900);
  box-shadow: var(--shadow-s);
}
.card__body { padding: 0.55rem 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.card__body h3 { margin: 0; font-size: 0.92rem; }
.card__meta { font-size: 0.7rem; color: var(--ink-500); font-weight: 700; }
.card__text { color: var(--ink-500); font-size: 0.8rem; margin: 0; }
.card__link {
  margin-top: auto; padding-top: 0.25rem; font-size: 0.78rem;
  font-weight: 800; text-decoration: none; color: var(--palm-700);
}
.card__link::after { content: " →"; }
.card__link:hover { color: var(--hibisco-dark); }
.card a.card__cover { position: absolute; inset: 0; z-index: 1; }
.card { position: relative; }

/* ---------- Globale Suche auf der Startseite ---------- */
.home-search {
  position: relative;
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--paper);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
  padding: 0.3rem 0.45rem 0.3rem 1rem;
}
.home-search__icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--ink-900); stroke-width: 2; stroke-linecap: round;
}
.home-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  color: var(--ink-900); padding: 0.6rem 0;
}
.home-search input::placeholder { color: var(--ink-500); }
.home-search input::-webkit-search-cancel-button { display: none; }
.home-search__btn {
  flex: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; color: var(--hibisco);
  font-size: 1.5rem; line-height: 1;
  transition: background 0.15s ease;
}
.home-search__btn:hover { background: var(--hibisco-soft); }
.home-search__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--paper); border: 1px solid var(--sand-200);
  border-radius: var(--radius-s); box-shadow: var(--shadow-m);
}
.home-search__list a {
  display: block; padding: 0.5rem 0.75rem; border-radius: 8px;
  text-decoration: none; color: var(--ink-900); font-weight: 700;
}
.home-search__list a:hover, .home-search__list a:focus { background: var(--sand-100); }
.home-search__hint { display: block; padding: 0.5rem 0.75rem; color: var(--ink-500); font-weight: 700; }

/* ---------- Icon-Schnellnavigation ----------
   Erscheint nur, wenn das Hauptmenü ausgeblendet ist (≤1339px);
   alle Icons in EINER Zeile, bei Platzmangel seitlich scrollbar. */
.quick-nav-wrap { display: none; }
@media (max-width: 1339px) {
  .quick-nav-wrap { display: block; }
}
.quick-nav {
  display: flex; flex-wrap: nowrap; justify-content: space-between;
  gap: clamp(0.35rem, 2vw, 1.2rem);
  overflow-x: auto;
  /* Luft für die Hover-Animation (translateY + scale), sonst clippt overflow-x das Icon */
  padding: 8px 5px 4px;
  margin: -8px -5px 0;
  -webkit-overflow-scrolling: touch;
}
.quick-nav::-webkit-scrollbar { height: 6px; }
.quick-nav::-webkit-scrollbar-thumb { background: var(--sand-200); border-radius: 999px; }
.quick-nav a {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  min-width: 64px;
  text-decoration: none; color: var(--ink-900); font-weight: 800;
  font-size: clamp(0.68rem, 1.8vw, 0.82rem);
  text-align: center;
}
.quick-nav img {
  width: clamp(42px, 9vw, 58px); height: clamp(42px, 9vw, 58px);
  object-fit: contain; border-radius: 50%;
  transition: transform 0.15s ease;
}
.quick-nav a:hover img { transform: translateY(-3px) scale(1.05); }
.quick-nav a[aria-current="page"] img { border: 2px solid var(--hibisco); }

/* ---------- Story-Rail (Agora na ilha) ---------- */
.story-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(110px, 15vw, 150px);
  gap: var(--space-2);
  overflow-x: auto; padding-bottom: var(--space-1);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.story-rail::-webkit-scrollbar { height: 8px; }
.story-rail::-webkit-scrollbar-thumb { background: var(--sand-200); border-radius: 999px; }
.story {
  position: relative; scroll-snap-align: start;
  border: none; padding: 0; cursor: pointer; background: none;
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s);
}
.story img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; transition: transform 0.25s ease; }
.story:hover img { transform: scale(1.04); }
.story__label {
  position: absolute; inset: auto 0 0 0; padding: 2rem 0.8rem 0.8rem;
  background: linear-gradient(to top, rgba(30, 18, 10, 0.75), transparent);
  color: #fff; font-weight: 800; font-size: 0.9rem; text-align: left; line-height: 1.3;
}
.story__play {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 253, 248, 0.92); color: var(--hibisco-dark);
  display: grid; place-items: center; font-size: 0.8rem;
}

/* Video-Modal */
.video-modal { border: none; padding: 0; background: transparent; max-width: min(92vw, 420px); width: 100%; }
.video-modal::backdrop { background: rgba(30, 18, 10, 0.7); backdrop-filter: blur(4px); }
.video-modal iframe {
  width: 100%; aspect-ratio: 9 / 16; border: 0;
  border-radius: var(--radius-m); background: #000; display: block;
}
.video-modal__close {
  position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none; cursor: pointer;
  background: var(--paper); color: var(--ink-900); font-size: 1.1rem; font-weight: 800;
  box-shadow: var(--shadow-m);
}

/* ---------- Info-Panels (Travessia & Maré) ---------- */
.panel {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-m); padding: clamp(0.9rem, 0.75rem + 0.7vw, 1.5rem);
  box-shadow: var(--shadow-m);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel--mar { background: linear-gradient(150deg, rgba(226, 241, 242, 0.85), var(--glass) 70%); }
.panel--sol { background: linear-gradient(150deg, rgba(251, 240, 220, 0.85), var(--glass) 70%); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.panel__head h3 { margin: 0; }
/* Bleibt auf ALLEN Breiten nebeneinander — wie im Original */
.info-duo { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-1); align-items: stretch; }
/* Horários completos offen: Travessia allein in voller Breite */
.info-duo.is-transport-open .panel--mar,
.info-duo.is-transport-open .tide-curve-panel { display: none; }
.info-duo.is-transport-open .panel--sol { grid-column: 1 / -1; animation: duo-fade 0.3s ease; }
/* Ver curva do dia offen: Nível do mar rückt nach links, Kurve rechts daneben */
.info-duo.is-tide-open { grid-template-columns: 1fr 1.7fr; }
.info-duo.is-tide-open .panel--sol { display: none; }
.info-duo.is-tide-open .panel--center { grid-column: 1; grid-row: 1; animation: duo-slide-left 0.35s ease; }
.info-duo.is-tide-open .tide-curve-panel { grid-column: 2; grid-row: 1; animation: duo-fade 0.35s ease; }
.tide-curve-panel[hidden] { display: none; }
.tide-curve-panel__title { margin: 0 0 var(--space-2); }
@keyframes duo-slide-left {
  from { transform: translateX(45%); opacity: 0.3; }
  to { transform: none; opacity: 1; }
}
@keyframes duo-fade {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* Horários completos: Lancha links, Ferry rechts */
.schedule-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2); padding-top: var(--space-2); align-items: start;
}
.schedule-grid__note { grid-column: 1 / -1; font-size: var(--fs-small); }
@media (max-width: 620px) { .schedule-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .info-duo { grid-template-columns: 1.4fr 1fr; }
  .info-duo .panel { padding: 0.7rem 0.8rem; }
  .tide-now strong { font-size: 1.4rem; }
  .info-duo .panel__head { justify-content: flex-start; }
  .info-duo .segmented { display: flex; width: 100%; }
  .info-duo .segmented button { flex: 1; padding: 0.35rem 0.4rem; font-size: 0.72rem; }
  .info-duo .stat-tiles .stat-tile { padding: 0.45rem 0.6rem; column-gap: 0.5rem; }
  .info-duo .stat-tiles .stat-tile__icon { display: none; }
}
/* Zentrierte Panel-Variante (Nível do mar wie im Original) */
.panel--center { text-align: center; display: flex; flex-direction: column; }
.panel--center .panel__head { justify-content: center; }
.panel--center .tide-now { justify-content: center; }
.panel--center details.reveal summary { margin-inline: auto; }
.panel--center details.reveal { margin-top: auto; }

.segmented {
  display: inline-flex; background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 0.25rem; gap: 0.25rem;
  box-shadow: var(--shadow-s);
}
.segmented button {
  border: none; background: transparent; cursor: pointer;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; color: var(--ink-500);
}
.segmented button[aria-pressed="true"] { background: var(--hibisco-soft); color: var(--hibisco-dark); box-shadow: var(--shadow-s); }

.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.stat-tile {
  position: relative;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: var(--radius-m); padding: var(--space-2); text-align: center;
  box-shadow: var(--shadow-s);
}
.stat-tile__label { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-700); }
.stat-tile__value { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); font-weight: 700; color: var(--hibisco-dark); line-height: 1.15; }
.stat-tile__hint { font-size: var(--fs-small); color: var(--ink-500); }
.stat-tile__icon {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sol-soft); font-size: 1rem; margin-bottom: 0.25rem;
}
.stat-tile [data-next-transport-day] {
  color: var(--palm-700); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.78rem;
}
.stat-tile [data-next-transport-day]::before { content: "● "; font-size: 0.7em; }
/* Fahrplan-Kacheln sind immer kompakte Zeilen (Icon | Label+Tag | Uhrzeit rechts) */
.stat-tiles { grid-template-columns: 1fr; gap: var(--space-1); }
.stat-tiles .stat-tile {
  display: grid;
  grid-template-areas: "icon label value" "icon hint value";
  grid-template-columns: auto 1fr auto;
  align-items: center; column-gap: 0.7rem;
  text-align: left; padding: 0.55rem 0.9rem;
}
.stat-tiles .stat-tile__icon { grid-area: icon; margin-bottom: 0; }
.stat-tiles .stat-tile__label { grid-area: label; }
.stat-tiles .stat-tile__value { grid-area: value; font-size: clamp(1.4rem, 1.3rem + 0.5vw, 1.8rem); }
.stat-tiles .stat-tile__hint { grid-area: hint; }

.timetable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.timetable caption { text-align: left; font-weight: 800; color: var(--ink-900); padding-bottom: 0.5rem; }
.timetable th, .timetable td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--sand-200); text-align: left; }
.timetable th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); }
.time-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.time-pill {
  padding: 0.3rem 0.7rem; border-radius: 10px; background: var(--sand-100);
  font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.time-pill--next { background: var(--palm-700); color: #fff; }
.time-pill--past { opacity: 0.45; }

details.reveal { border-top: 1px solid var(--sand-200); margin-top: var(--space-2); padding-top: var(--space-2); }
details.reveal summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: fit-content;
  padding: 0.5rem 1.15rem;
  border-radius: 999px; border: 1px solid var(--sand-200);
  background: var(--paper);
  color: var(--palm-700); font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: var(--shadow-s);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
details.reveal summary:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary::after { content: "▾"; transition: transform 0.2s ease; }
details.reveal[open] summary::after { transform: rotate(180deg); }
details.reveal .reveal__close-label { display: none; }
details.reveal[open] .reveal__open-label { display: none; }
details.reveal[open] .reveal__close-label { display: inline; }

/* Gezeiten-Chart */
.tide-chart { width: 100%; height: auto; display: block; }
.tide-now { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.tide-now strong { font-family: var(--font-display); font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem); color: var(--mar-600); }
.tide-now--stack { flex-direction: column; align-items: center; gap: 0.1rem; }
.tide-now__label {
  font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mar-600);
}
.tide-now__height { font-size: 0.9rem; font-weight: 700; color: var(--mar-600); }
.tide-now__small { margin: 0.3rem 0 0; font-size: var(--fs-small); }

/* ---------- Bänder / Banner ----------
   Flache Banner wie im Original: Bild rechts, Creme-Verlauf nach links,
   Titel + kleiner Button links. */
.banner-grid {
  display: grid; gap: var(--stack);
  grid-template-columns: repeat(3, 1fr);
}
/* Kein Zwischen-Zustand mit 2 Spalten: passt es nicht dreispaltig,
   werden die Banner wie auf kleinen Screens untereinander gestapelt. */
@media (max-width: 1080px) {
  .banner-grid { grid-template-columns: 1fr; }
}
.banner-card {
  position: relative; border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-m); display: block; text-decoration: none;
  min-height: clamp(140px, 18vw, 185px);
}
.banner-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.banner-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 0.6rem; padding: var(--space-3);
  background: linear-gradient(90deg, rgba(253, 248, 239, 0.96) 0%, rgba(253, 248, 239, 0.75) 42%, rgba(253, 248, 239, 0) 80%);
}
.banner-card h3 {
  color: var(--ink-900); margin: 0;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  max-width: 62%;
}
.banner-card .btn { width: min(100%, 11.5rem); }
.banner-card:hover img { transform: scale(1.03); }
.banner-card img { transition: transform 0.25s ease; }

/* Moça-Vorstellungs-Band */
.about-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center;
  background: linear-gradient(120deg, rgba(251, 229, 214, 0.9), rgba(255, 252, 243, 0.82) 55%, rgba(249, 216, 205, 0.85));
  border: 1px solid var(--glass-border); border-radius: var(--radius-l);
  padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-m);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* Grid-Spalten dürfen unter ihre Inhaltsbreite schrumpfen — sonst spannt
   die (scrollbare) Chip-Leiste im Pet-Block die ganze Seite breiter auf */
.about-band > div { min-width: 0; }
.about-band img { width: clamp(90px, 14vw, 135px); height: clamp(90px, 14vw, 135px); object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-m); }
.about-band h2 { margin-bottom: 0.4rem; }
.about-band p { color: var(--ink-500); margin-bottom: 0.6rem; }
/* Variante: Text links, Schmuck-Element rechts */
.about-band--reverse { grid-template-columns: 1fr auto; }
.about-band__emoji {
  font-size: clamp(3.6rem, 9vw, 6.5rem); line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(59, 42, 29, 0.25));
  transform: rotate(-6deg);
}
@media (max-width: 640px) { .about-band, .about-band--reverse { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- Filter (Praias) ---------- */
.btn--dark {
  background: linear-gradient(180deg, #5A4232, #3B2A1D);
  color: #fff;
  box-shadow: 0 6px 18px rgba(59, 42, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--dark:hover { color: #fff; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: var(--space-3); }
.filter-chip {
  border: 1px solid var(--glass-border); background: var(--glass-strong);
  border-radius: 999px; padding: 0.5rem 1.15rem; cursor: pointer;
  box-shadow: var(--shadow-s);
  font-family: var(--font-body); font-weight: 800; font-size: 0.92rem; color: var(--ink-700);
}
.filter-chip[aria-pressed="true"] { background: var(--palm-700); border-color: var(--palm-700); color: #fff; }
/* Horizontal scrollbare Reiter-Leiste (z.B. Pet-Bereich) */
.tab-row {
  display: flex; flex-wrap: nowrap; gap: 0.6rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.15rem 0.6rem; margin-bottom: var(--space-1);
  scrollbar-width: thin;
  /* Die Leiste darf die Seite nicht aufspannen — sie scrollt stattdessen */
  contain: inline-size;
}
.tab-row .filter-chip { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Detailseiten ---------- */
.detail-hero { position: relative; }
.detail-hero img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--radius-l);
  border: 8px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-l);
}
@media (max-width: 640px) { .detail-hero img { aspect-ratio: 4 / 3; } }
.detail-hero__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(255, 253, 248, 0.94); border-radius: 999px;
  padding: 0.35rem 1rem; font-weight: 800; font-size: 0.85rem;
  text-decoration: none; color: var(--ink-900); box-shadow: var(--shadow-s);
}
.breadcrumb { font-size: var(--fs-small); font-weight: 700; color: var(--ink-500); margin-bottom: var(--space-2); }
.breadcrumb a { color: var(--palm-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.aside-card { position: sticky; top: 100px; display: grid; gap: var(--space-2); }

.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fact-list li {
  display: flex; gap: 0.7rem; align-items: baseline;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-s); padding: 0.6rem 0.9rem; font-weight: 700;
}
.fact-list .emoji { flex: none; }

.check-list, .cross-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 0.45rem; }
/* Liste mit Linien-Icons (Hero "Feito na Ilha") */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.icon-list li {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 0.55rem;
  font-weight: 800; color: var(--ink-700);
}
.icon-list svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--palm-700);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.check-list li::before { content: "✓ "; color: var(--palm-500); font-weight: 900; }
.cross-list li::before { content: "✗ "; color: var(--hibisco); font-weight: 900; }

.tip-card {
  border-left: 4px solid var(--sol);
  background: rgba(251, 240, 220, 0.85); border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--space-2) var(--space-2);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tip-card--moca { border-color: var(--hibisco); background: rgba(251, 234, 230, 0.88); }
.tip-card h4 { margin-bottom: 0.3rem; }
.tip-card p { margin: 0; }
.tip-card a { font-weight: 800; }

/* Galerie: eine Zeile, seitlich scrollbar mit Snap */
.gallery {
  display: flex; gap: var(--space-1);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
  contain: inline-size;
}
.gallery figure {
  margin: 0; flex: 0 0 auto;
  width: clamp(150px, 24vw, 210px);
  scroll-snap-align: start;
}
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m);
  border: 6px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-m);
}
.gallery figcaption { font-size: var(--fs-small); font-weight: 700; color: var(--ink-500); padding-top: 0.4rem; text-align: center; }

.map-embed {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-l); box-shadow: var(--shadow-m); display: block;
}
#praias-map { width: 100%; height: clamp(320px, 55vh, 520px); border-radius: var(--radius-l); box-shadow: var(--shadow-m); z-index: 0; }

.share-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Compartilhe als schmaler Pill-Einwurf unter dem Hero-Bild */
.share-strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 0.6rem 1rem;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 0.45rem 0.55rem 0.45rem 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 20px rgba(84, 56, 34, 0.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.share-strip__label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 700; color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-left: clamp(0.8rem, 4vw, 2.5rem);
}
@media (max-width: 480px) { .share-strip__label { margin-left: 0; } }
.share-strip__label > span { font-size: 0.85em; -webkit-text-stroke: 0; }
.share-strip__actions { display: flex; gap: 1.4rem; flex: 1; justify-content: center; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 999px;
  color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(84, 56, 34, 0.18);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.share-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.share-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.share-btn--wa { background: linear-gradient(160deg, var(--palm-500), var(--palm-700)); }
.share-btn--ig { background: linear-gradient(45deg, var(--sol), var(--hibisco)); }
@media (max-width: 480px) {
  .share-strip { justify-content: center; border-radius: var(--radius-l); padding: 0.7rem 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .share-btn { transition: none; }
  .share-btn:hover { transform: none; }
}

/* ---------- Praia-Detailseite (praia.php) ---------- */
/* Hero-Overlays: Strandname oben links, Regions-Badge unten links, Foto-Zähler oben rechts */
/* Hero als wischbarer Foto-Slider: der weiße Rahmen sitzt auf dem Slider,
   die Bilder scrollen rahmenlos darin mit Snap */
.praia-hero__slider {
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-l);
  border: 8px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-l);
  scrollbar-width: none;
}
.praia-hero__slider::-webkit-scrollbar { display: none; }
.praia-hero__slider img {
  flex: 0 0 100%;
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none;
  scroll-snap-align: start; scroll-snap-stop: always;
}
@media (max-width: 640px) { .praia-hero__slider img { aspect-ratio: 4 / 3; } }
/* Text-Overlays dürfen das Wischen nicht abfangen */
.praia-hero__title, .praia-hero__region, .praia-hero__count { pointer-events: none; }
.praia-hero__nav {
  position: absolute; right: 1.1rem; bottom: 1.1rem;
  display: flex; gap: 0.45rem;
}
.praia-hero__nav button {
  width: 2.4rem; height: 2.4rem; padding: 0 0 2px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 253, 248, 0.92); color: var(--ink-900);
  font-size: 1.4rem; line-height: 1; font-weight: 700;
  box-shadow: var(--shadow-s);
  transition: background 0.2s ease, transform 0.2s ease;
}
.praia-hero__nav button:hover { background: #fff; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .praia-hero__nav button { transition: none; }
  .praia-hero__nav button:hover { transform: none; }
}
/* Abdunklung oben, damit der Name auf hellen Fotos lesbar bleibt (innerhalb des weißen Rahmens) */
.praia-hero::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 58%;
  border-radius: calc(var(--radius-l) - 8px) calc(var(--radius-l) - 8px) 0 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.58) 0%, rgba(20, 16, 10, 0.28) 45%, rgba(20, 16, 10, 0) 100%);
  pointer-events: none;
}
/* Strandname im Bild: handschriftlicher Kicker, Serifen-Name, Farbstrich */
.praia-hero__title {
  position: absolute; top: 1.4rem; left: 1.7rem; margin: 0;
  max-width: calc(100% - 6rem);
  display: grid; justify-items: start; gap: 0.2rem;
  color: #fff;
}
.praia-hero__kicker {
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  font-weight: 700; line-height: 1;
  color: #FFE4AE;
  transform: rotate(-2.5deg); transform-origin: left bottom;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.praia-hero__kicker::after { content: " ✿" / ""; font-size: 0.75em; }
.praia-hero__name {
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  line-height: 1; letter-spacing: 0.01em; text-wrap: balance;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 34px rgba(0, 0, 0, 0.5);
}
.praia-hero__title::after {
  content: ""; width: 5rem; height: 6px; margin-top: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sol), var(--hibisco));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.praia-hero__region {
  position: absolute; left: 1.1rem; bottom: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: linear-gradient(180deg, #E56A52, var(--hibisco-dark));
  color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(185, 62, 51, 0.35);
}
.praia-hero__count {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: rgba(43, 34, 24, 0.6); color: #fff;
  font-weight: 800; font-size: 0.8rem; text-decoration: none;
  padding: 0.3rem 0.75rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.praia-hero__count:hover { color: #fff; background: rgba(43, 34, 24, 0.8); }
.praia-lead { font-size: 1.15rem; font-weight: 700; color: var(--ink-700); margin-top: 0.4rem; }

/* Merkmal-Icons als Reihe (ersetzt die alte Seitenleiste) */
.feature-row {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-1);
}
.feature-row li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.feature-row__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  /* leicht organische Form, passend zu den Kachel-Chips */
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: var(--palm-soft); font-size: 1.5rem;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), var(--shadow-s);
}
/* Farben im Wechsel — wie die Akzente der Kacheln */
.feature-row li:nth-child(5n+1) .feature-row__icon { background: var(--sol-soft); }
.feature-row li:nth-child(5n+2) .feature-row__icon { background: var(--mar-soft); }
.feature-row li:nth-child(5n+3) .feature-row__icon { background: var(--palm-soft); }
.feature-row li:nth-child(5n+4) .feature-row__icon { background: var(--hibisco-soft); }
.feature-row li:nth-child(5n+5) .feature-row__icon { background: var(--sand-100); }
.feature-row li:nth-child(even) .feature-row__icon { rotate: 4deg; }
.feature-row li:nth-child(odd) .feature-row__icon { rotate: -3deg; }
.feature-row__label { font-weight: 800; font-size: 0.8rem; color: var(--ink-700); line-height: 1.2; }

/* Praia-Detailseite: Inhalte als Kachel-Raster.
   Ruhige Papier-Karten. Die Akzentfarbe erscheint bewusst sparsam: nur im
   Icon-Chip, im kurzen Strich unter der Überschrift und in der Link-Pill. */
.praia-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  align-items: stretch;
}
@media (max-width: 700px) { .praia-tiles { grid-template-columns: 1fr; } }
/* Prato-Seiten: Kacheln (u. a. "Onde provar" mit Foto) schon früher
   untereinander stapeln, damit sie nicht zu schmal werden. */
@media (max-width: 940px) { .praia-tiles--stack-early { grid-template-columns: 1fr; } }
/* Dica-da-Moça-Banner läuft im Raster über die volle Breite */
.praia-tiles .moca-banner { grid-column: 1 / -1; }

.praia-tile {
  --tile-accent: var(--palm-500);
  --tile-accent-ink: var(--palm-700);
  --tile-accent-soft: var(--palm-soft);
  position: relative; overflow: hidden;
  background:
    radial-gradient(150% 100% at 100% 0%, var(--tile-accent-soft) 0%, rgba(255, 253, 248, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 253, 248, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-l); padding: var(--space-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(84, 56, 34, 0.05),
    0 12px 32px rgba(84, 56, 34, 0.1);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Farbige Kante oben: läuft von der Akzentfarbe weich ins Papier aus */
.praia-tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--tile-accent) 0%, color-mix(in srgb, var(--tile-accent) 30%, #fff) 65%, transparent 100%);
  pointer-events: none;
}
.praia-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(84, 56, 34, 0.05),
    0 20px 48px rgba(84, 56, 34, 0.15);
}
/* Große Aquarell-Blume als Wasserzeichen in der Kachel-Ecke */
.praia-tile::after {
  content: "✿"; position: absolute; top: -1.7rem; right: -0.8rem;
  font-size: 8.5rem; line-height: 1; font-family: var(--font-body);
  color: var(--tile-accent); opacity: 0.08;
  transform: rotate(14deg);
  pointer-events: none;
}

.praia-tile--wide { grid-column: 1 / -1; }
/* Intro-Kachel in warmem Sonnengelb — knüpft an die Startseiten-Karten an */
.praia-tile--intro { --tile-accent: var(--sol); --tile-accent-ink: #A2701C; --tile-accent-soft: var(--sol-soft); }

/* Strandschild: bunter Wegweiser-Pfahl wie an brasilianischen Stränden.
   Steht ohne Karte direkt auf dem Strand-Hintergrund der Seite. */
.praia-signpost {
  position: relative; align-self: center;
  list-style: none; margin: 0; padding: 0.6rem 0 1rem;
  display: grid; justify-items: center; align-content: start;
  gap: 0.55rem;
}
/* Holzpfahl in der Mitte */
.praia-signpost::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 15px; transform: translateX(-50%);
  background: linear-gradient(90deg, #9A6A3E, #7A5028 55%, #5F3D1E);
  border-radius: 8px;
  box-shadow: 2px 3px 8px rgba(84, 56, 34, 0.3);
}
.praia-signpost li {
  position: relative;
  min-width: min(17rem, 88%); max-width: 94%;
  padding: 0.32rem 1.5rem 0.42rem;
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; text-align: center; line-height: 1.15;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(84, 56, 34, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Nagelköpfe an den Brett-Enden */
.praia-signpost li::before,
.praia-signpost li::after {
  content: ""; position: absolute; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-50%);
}
.praia-signpost li::before { left: 8px; }
.praia-signpost li::after  { right: 8px; }
/* Farben und schiefe Winkel im Wechsel — wie von Hand angenagelt */
.praia-signpost li:nth-child(5n+1) { background: #D94F41; transform: rotate(-2.5deg); }
.praia-signpost li:nth-child(5n+2) { background: #24798B; transform: rotate(1.8deg); }
.praia-signpost li:nth-child(5n+3) { background: #E9A13B; transform: rotate(-1.6deg); }
.praia-signpost li:nth-child(5n+4) { background: #45785B; transform: rotate(2.2deg); }
.praia-signpost li:nth-child(5n+5) { background: #C94D82; transform: rotate(-2deg); }
.praia-signpost__icon { font-size: 0.85em; margin-right: 0.4rem; text-shadow: none; }
/* Lead als markantes Statement über den Strand: zentrierter Serifen-Satz
   mit großem Zitatzeichen und dem Farbstrich aus dem Hero */
.praia-tile--statement {
  --tile-accent: var(--sol); --tile-accent-ink: #A2701C; --tile-accent-soft: var(--sol-soft);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.praia-tile--statement::after {
  content: "❝"; top: -1.4rem; right: auto; left: 0.9rem;
  font-family: var(--font-display); font-size: 8.5rem; opacity: 0.1;
}
.praia-statement {
  margin: 0 auto; max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 600; font-style: italic;
  line-height: 1.3; color: var(--ink-900); text-wrap: balance;
}
.praia-statement::after {
  content: ""; display: block;
  width: 4.5rem; height: 5px; margin: 0.9rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sol), var(--hibisco));
}
/* "Saiba que…"-Kachel: Resumo im Blocksatz */
.praia-resumo {
  margin: 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Highlight-Kachel "Saiba que…": tiefes Palmengrün als einziger dunkler
   Farbblock im Raster — sticht sofort ins Auge, Gold-Akzente statt Pastell */
.praia-tile--destaque {
  /* gleicher Petrol-Verlauf wie der "Receba novidades"-Footer */
  background:
    radial-gradient(150% 100% at 100% 0%, rgba(246, 194, 76, 0.24) 0%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(135deg, #2f8f84, #6aa084);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(54, 101, 88, 0.2),
    0 14px 36px rgba(54, 101, 88, 0.32);
}
.praia-tile--destaque::before { background: linear-gradient(90deg, var(--sol) 0%, rgba(233, 161, 59, 0.35) 65%, transparent 100%); }
.praia-tile--destaque::after { color: #fff; opacity: 0.1; }
.praia-tile--destaque h2 { color: #fff7e8; border-bottom-color: rgba(255, 255, 255, 0.22); }
.praia-tile--destaque h2::after { background: var(--sol); }
.praia-tile--destaque .praia-tile__chip {
  background: radial-gradient(120% 120% at 32% 26%, #FFF3DC 0%, var(--sol) 85%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 -0.55rem 0.7rem -0.5rem rgba(162, 112, 28, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.3);
}
.praia-tile--destaque .praia-resumo {
  color: rgba(255, 247, 232, 0.96);
  font-size: 1.02em; line-height: 1.65; font-weight: 600;
}
.praia-tile--destaque:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 20px 48px rgba(54, 101, 88, 0.42);
}
.praia-tile--palm    { --tile-accent: var(--palm-500); --tile-accent-ink: var(--palm-700);    --tile-accent-soft: var(--palm-soft); }
.praia-tile--mar     { --tile-accent: var(--mar-600);  --tile-accent-ink: var(--mar-600);     --tile-accent-soft: var(--mar-soft); }
.praia-tile--sol     { --tile-accent: var(--sol);      --tile-accent-ink: #A2701C;            --tile-accent-soft: var(--sol-soft); }
.praia-tile--hibisco { --tile-accent: var(--hibisco);  --tile-accent-ink: var(--hibisco-dark); --tile-accent-soft: var(--hibisco-soft); }

/* Kachel-Kopf: Chip + Titel über einer Haarlinie mit handgemalter Welle */
.praia-tile h2 {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: clamp(1.18rem, 1.05rem + 0.55vw, 1.42rem);
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: calc(var(--space-2) * 0.9);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid rgba(84, 56, 34, 0.08);
}
.praia-tile h2::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 3.6rem; height: 9px;
  background: var(--tile-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8'%3E%3Cpath d='M1 5.5c4-3.5 8-3.5 12 0s8 3.5 12 0 8-3.5 12 0 8 3.5 12 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8'%3E%3Cpath d='M1 5.5c4-3.5 8-3.5 12 0s8 3.5 12 0 8-3.5 12 0 8 3.5 12 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.praia-tile__chip {
  flex: none; display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  /* organische "Aquarell-Klecks"-Form statt perfektem Kreis */
  border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;
  background: radial-gradient(120% 120% at 32% 26%, #fff 0%, var(--tile-accent-soft) 75%);
  font-size: 1.15rem;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    inset 0 -0.55rem 0.7rem -0.5rem color-mix(in srgb, var(--tile-accent) 32%, transparent),
    0 3px 8px rgba(84, 56, 34, 0.16);
  transform: rotate(-6deg);
  transition: transform 0.25s ease;
}
.praia-tile:hover .praia-tile__chip { transform: rotate(4deg) scale(1.07); }
.praia-tile > p:last-child,
.praia-tile .check-list:last-child,
.praia-tile .cross-list:last-child { margin-bottom: 0; }

/* Intro-Kachel: Lead als Serifen-Statement, handgemalter Trenner darunter */
.praia-tile .praia-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.35; color: var(--ink-900);
}
.praia-tile__divider {
  display: flex; align-items: center; gap: 0.8rem;
  margin: var(--space-2) 0; color: var(--hibisco); font-size: 0.95rem;
}
.praia-tile__divider::before,
.praia-tile__divider::after { content: ""; flex: 1; height: 1px; }
.praia-tile__divider::before { background: linear-gradient(90deg, transparent, rgba(84, 56, 34, 0.2)); }
.praia-tile__divider::after  { background: linear-gradient(90deg, rgba(84, 56, 34, 0.2), transparent); }
.praia-tile .feature-row { margin-top: 0; }
.feature-row__icon { transition: transform 0.2s ease; }
.feature-row li:hover .feature-row__icon { transform: scale(1.1) rotate(-5deg); }

/* Checklisten in Kacheln: jede Zeile als weiche Pill-Karte mit sattem Badge */
.praia-tile .check-list,
.praia-tile .cross-list { gap: 0.5rem; }
.praia-tile .check-list li,
.praia-tile .cross-list li {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.8rem;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(84, 56, 34, 0.06);
  font-weight: 700; line-height: 1.4; color: var(--ink-700);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.praia-tile .check-list li:hover,
.praia-tile .cross-list li:hover { transform: translateX(4px); box-shadow: 0 3px 10px rgba(84, 56, 34, 0.1); }
.praia-tile .check-list li::before,
.praia-tile .cross-list li::before {
  flex: none;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 900; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 5px rgba(84, 56, 34, 0.2);
}
.praia-tile .check-list li::before { content: "✓"; background: linear-gradient(160deg, #5C9573, var(--palm-700)); }
.praia-tile .cross-list li::before { content: "✕"; background: linear-gradient(160deg, #E56A52, var(--hibisco-dark)); }

/* Vale a pena: Sim/Não als Urteils-Karten mit Sticker-Titel und Emoji-Wasserzeichen */
.praia-tile .vale-grid { gap: var(--space-2); margin-top: var(--space-1); }
.vale-col {
  position: relative; overflow: hidden;
  border-radius: var(--radius-m); padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.95);
}
.vale-col::after {
  position: absolute; right: -0.4rem; bottom: -1rem;
  font-size: 4.8rem; line-height: 1; opacity: 0.12;
  transform: rotate(-12deg); pointer-events: none;
}
.vale-col--sim {
  background: linear-gradient(170deg, rgba(231, 240, 231, 0.9), rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 0 0 1px rgba(69, 120, 91, 0.14);
}
.vale-col--sim::after { content: "👍"; }
.vale-col--nao {
  background: linear-gradient(170deg, rgba(251, 234, 230, 0.9), rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 0 0 1px rgba(217, 79, 65, 0.12);
}
.vale-col--nao::after { content: "👎"; }
.vale-col .vale-head {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.85rem; padding: 0.35rem 0.85rem;
  background: #fff; border-radius: 999px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(84, 56, 34, 0.13);
  transform: rotate(-1.5deg);
}
.vale-col--nao .vale-head { transform: rotate(1.5deg); }

/* Link-Pill in Tipp-Kacheln */
.praia-tile__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.4rem; padding: 0.42rem 1rem;
  background: #fff; color: var(--tile-accent-ink);
  border: 1px solid rgba(84, 56, 34, 0.12); border-radius: 999px;
  font-weight: 800; font-size: var(--fs-small); text-decoration: none;
  box-shadow: 0 1px 3px rgba(84, 56, 34, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.praia-tile__link:hover { background: var(--tile-accent-soft); border-color: transparent; color: var(--tile-accent-ink); }
.praia-tile__link span { transition: transform 0.2s ease; }
.praia-tile__link:hover span { transform: translateX(2px); }

/* Foto-Kacheln ("Saiba que…", "O que você vai encontrar", "Como chegar",
   "Melhor horário"): Text links, leicht gekipptes Foto rechts — wie eine
   Postkarte, die auf der Kachel liegt. */
.praia-tile--foto {
  display: flex; align-items: center; gap: var(--space-3);
}
.praia-tile--foto .praia-tile__conteudo { flex: 1 1 auto; min-width: 0; }
.praia-tile--foto .praia-tile__conteudo > :last-child { margin-bottom: 0; }
.praia-tile__foto-img {
  flex: none;
  width: min(36%, 230px); aspect-ratio: 4 / 3; object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  transform: rotate(2.5deg);
  box-shadow: 0 12px 26px rgba(84, 56, 34, 0.3);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.praia-tile--foto:hover .praia-tile__foto-img { transform: rotate(0.5deg) scale(1.02); }
/* Breite Foto-Kacheln (übereinander gestapelt): Bild darf großzügiger sein */
.praia-tile--foto.praia-tile--wide .praia-tile__foto-img--polaroid { width: min(30%, 250px); }
/* Polaroid: das Bild bringt Rahmen und Kippung schon mit — nur Schatten.
   Es hängt oben rechts leicht aus der Karte heraus. */
.praia-tile__foto-img--polaroid {
  position: relative; z-index: 2;
  width: min(38%, 210px); aspect-ratio: auto; height: auto; object-fit: contain;
  border: 0; border-radius: 0;
  margin: -2.6rem -0.6rem -0.8rem 0;
  transform: rotate(4deg);
  box-shadow: none;
  filter: drop-shadow(0 14px 22px rgba(84, 56, 34, 0.32));
}
.praia-tile--foto:hover .praia-tile__foto-img--polaroid { transform: rotate(1.5deg) scale(1.02); }
/* Damit das Polaroid heraushängen kann, darf diese Kachel nichts abschneiden;
   der Farbstreifen oben würde an den runden Ecken herausragen — weg damit */
.praia-tile--mar.praia-tile--foto { overflow: visible; }
.praia-tile--mar.praia-tile--foto::before { content: none; }
.praia-tile--mar.praia-tile--foto::after { top: 0.2rem; right: 0.4rem; font-size: 6.5rem; }
@media (max-width: 700px) {
  .praia-tile--foto { flex-direction: column; align-items: stretch; }
  .praia-tile__foto-img { width: 100%; max-width: none; aspect-ratio: 16 / 9; transform: rotate(0); }
  .praia-tile__foto-img--polaroid { width: min(70%, 260px); margin: 0 auto; aspect-ratio: auto; }
  /* Mobil liegt das Polaroid gekippt ÜBER den Stichpunkten */
  .praia-tile--mar.praia-tile--foto { display: block; }
  .praia-tile--mar.praia-tile--foto .praia-tile__conteudo { padding-right: 36%; }
  .praia-tile--mar.praia-tile--foto .praia-tile__foto-img--polaroid {
    position: absolute; top: 54%; right: 0.8rem;
    width: 40%; margin: 0;
    transform: translateY(-50%) rotate(5deg);
  }
}

/* Blend-Kacheln ("Saiba que…", "Como chegar"): das Foto füllt die rechte
   Seite bis an den Kartenrand und läuft mit weichem Milchglas-Übergang
   (Maske + unscharfe Naht) in die Kartenfarbe aus. */
.praia-tile--blend { display: block; }
/* Kein Farbstreifen oben: das Foto läuft bis an den Kartenrand */
.praia-tile--blend::before { content: none; }
.praia-tile--blend .praia-tile__conteudo { position: relative; z-index: 1; max-width: 55%; }
.praia-tile--blend .praia-tile__foto-img {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 47%; height: 100%; aspect-ratio: auto;
  object-fit: cover;
  border: 0; border-radius: 0;
  transform: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
/* Milchglas-Naht: unscharfer Streifen genau am Übergang */
.praia-tile__blend-blur {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 47%;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0, transparent 58%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .praia-tile--blend .praia-tile__conteudo { max-width: none; }
  .praia-tile--blend .praia-tile__foto-img {
    position: static;
    width: calc(100% + 2 * var(--space-3)); height: 210px; max-width: none;
    margin: var(--space-2) calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%);
    mask-image: linear-gradient(180deg, transparent 0, #000 24%);
  }
  .praia-tile__blend-blur { display: none; }
}

/* Schmale Variante ("Onde provar" auf Prato-Seiten): behält auch auf
   kleinen Screens das schmale Layout — Text links, Foto rechts. */
@media (max-width: 700px) {
  .praia-tile--blend-slim .praia-tile__conteudo { max-width: 55%; }
  .praia-tile--blend-slim .praia-tile__foto-img {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 47%; height: 100%; margin: 0;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  }
  .praia-tile--blend-slim .praia-tile__blend-blur { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .praia-tile, .praia-tile__link, .praia-tile__link span, .feature-row__icon, .praia-tile__foto-img { transition: none; }
  .praia-tile:hover { transform: none; }
  .praia-tile__link:hover span { transform: none; }
  .praia-tile--foto:hover .praia-tile__foto-img { transform: none; }
}

/* Inhaltsblöcke mit Luft dazwischen */
.info-block { margin-top: var(--space-3); }
.info-block h2 { margin-bottom: var(--space-1); }
.info-block--green {
  background: var(--palm-soft); border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-2); margin-top: var(--space-3);
}
.info-block--green h2 { color: var(--palm-700); }
.info-block--green p { margin: 0; }

/* zweispaltige Häkchen-Liste */
.check-list--cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-3); }
@media (max-width: 560px) { .check-list--cols { grid-template-columns: 1fr; } }

/* Vale a pena — zwei Spalten */
.vale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .vale-grid { grid-template-columns: 1fr; } }
.vale-head { font-weight: 800; margin: 0 0 0.5rem; }
.vale-head--sim { color: var(--palm-700); }
.vale-head--nao { color: var(--hibisco-dark); }

/* Info-Kacheln als 2×2-Raster */
.tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 560px) { .tip-grid { grid-template-columns: 1fr; } }

/* Teilen-Block: Überschrift links, Buttons rechts */
.share-block {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2);
}

/* Dica-da-Moça-Banner: Foto mit Text rechts */
.moca-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  min-height: clamp(240px, 26vw, 320px);
  display: flex; align-items: center; justify-content: flex-end;
}
.moca-banner__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
/* Startseiten-Banner (banner-atual): Kopf oben nicht abschneiden */
.moca-banner--home .moca-banner__photo { object-position: center top; }
/* Cremiger Verlauf von rechts für gute Lesbarkeit (kein Milchglas im Großen) */
.moca-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,249,232,0) 30%, rgba(255,249,232,0.72) 58%, rgba(255,249,232,0.92) 100%);
}
.moca-banner__text {
  position: relative; z-index: 1;
  width: min(46%, 30rem); margin-right: clamp(1.2rem, 3vw, 2.6rem);
  padding: clamp(1rem, 2vw, 1.6rem);
  text-align: right;
}
.moca-banner__hi {
  display: block; font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(2.8rem, 2rem + 4vw, 4.4rem); color: var(--hibisco-dark);
  line-height: 1.05; margin-bottom: 0.3rem;
}
.moca-banner__text p { margin: 0; color: var(--ink-700); font-weight: 600; }

/* Handy: kompakt, gleicher Verlauf wie im Großen, sie weiter links */
@media (max-width: 640px) {
  .moca-banner { min-height: 230px; }
  .moca-banner__photo { object-position: 42% center; }
  .moca-banner__text {
    width: 54%; margin-right: 0.7rem; padding: 0.75rem 0.85rem;
  }
  .moca-banner__hi { font-size: clamp(1.5rem, 7vw, 2.2rem); margin-bottom: 0.2rem; }
  .moca-banner__text p { font-size: 0.82rem; line-height: 1.45; }
}

/* „Quem faz“-Banner auf der Produktseite: wie der Moça-Banner — das Foto füllt den
   ganzen Banner (unscharfe Vergrößerung als Untergrund), das scharfe Porträt liegt
   links obenauf und löst sich per Maske weich nach rechts in den Verlauf auf */
.moca-banner[hidden] { display: none; }
.moca-banner--maker { background: #FFF9E8 center left / cover no-repeat; }
.moca-banner--maker::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(18px) saturate(1.05);
  background: rgba(255, 249, 232, 0.25);
}
.moca-banner--maker .moca-banner__photo {
  inset: 0 auto 0 0; width: 52%;
  object-position: center 12%;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 98%);
}
.moca-banner--maker::after {
  background: linear-gradient(90deg,
    rgba(255, 249, 232, 0) 34%,
    rgba(255, 249, 232, 0.55) 55%,
    rgba(255, 249, 232, 0.88) 70%,
    rgba(255, 249, 232, 0.96) 100%);
}
.moca-banner--maker .moca-banner__hi { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.moca-banner__maker-kicker {
  display: block; font-weight: 800; font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--palm-700); margin-bottom: 0.2rem;
}
.moca-banner--maker .moca-banner__maker-meta {
  margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 800; color: var(--ink-500);
}
.moca-banner--maker .card__link { display: inline-block; margin-top: 0.6rem; }
@media (max-width: 640px) {
  .moca-banner--maker::before { display: none; }
  .moca-banner--maker .moca-banner__photo {
    inset: 0; width: 100%; object-position: center 20%;
    -webkit-mask-image: none; mask-image: none;
  }
  .moca-banner--maker::after {
    background: linear-gradient(90deg, rgba(255, 249, 232, 0) 30%, rgba(255, 249, 232, 0.72) 58%, rgba(255, 249, 232, 0.92) 100%);
  }
  .moca-banner--maker .moca-banner__text { width: 58%; }
}

/* Fließtext-Artikel */
.prose { max-width: 68ch; }
.prose p { color: var(--ink-700); }
.prose .lead { font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.15rem); color: var(--ink-500); }

/* ---------- Statistiken / Über mich ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-1); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.feature-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.feature-list .emoji { font-size: 1.3rem; flex: none; line-height: 1.4; }
.feature-list strong { display: block; color: var(--ink-900); }
.feature-list span { color: var(--ink-500); }

.portrait-frame { margin: 0; position: relative; }
.portrait-frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-l); box-shadow: var(--shadow-l);
}
.portrait-frame::after {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  border: 2px solid var(--sol); border-radius: var(--radius-l); z-index: -1;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
.split--media-narrow { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 780px) { .split, .split--media-narrow { grid-template-columns: 1fr; } }

/* ---------- Destaque da semana ---------- */
/* Bild als längliches Querformat, das seine Spalte voll ausfüllt */
.destaque-split { grid-template-columns: 1.1fr 1fr; }
.destaque-media img { aspect-ratio: 16 / 9; }
.destaque-media::after { content: none; }
/* Titel bleibt immer einzeilig: Schriftgröße wächst mit dem Viewport mit */
.destaque-title { white-space: nowrap; font-size: clamp(0.85rem, 0.3rem + 2.4vw, 1.3rem); }
@media (max-width: 780px) {
  .destaque-split { grid-template-columns: 1fr; }
  .destaque-title { font-size: clamp(0.85rem, 0.2rem + 3.4vw, 1.3rem); }
}

/* ---------- Shop ---------- */
/* Shop: horizontale Produkt-Reihe ohne Zeilenumbruch — seitlich scrollbar */
.product-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 20vw, 195px);
  gap: var(--space-1);
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.product-rail > .card { scroll-snap-align: start; }
.product-rail::-webkit-scrollbar { height: 6px; }
.product-rail::-webkit-scrollbar-thumb { background: var(--sand-200); border-radius: 999px; }

.product-card .card__media a { display: block; }
.product-card .card__media img { aspect-ratio: 1; }
.product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { color: var(--palm-700); }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--palm-700); }
.artisan-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; color: var(--ink-500); text-decoration: none;
}
.artisan-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.artisan-chip:hover { color: var(--hibisco-dark); }

.artisan-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; }
.artisan-hero img {
  width: clamp(100px, 16vw, 160px); height: clamp(100px, 16vw, 160px);
  border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-m);
}
@media (max-width: 640px) { .artisan-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- Formulare ---------- */
.form-grid { display: grid; gap: var(--space-2); }
.form-row { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 800; font-size: 0.92rem; margin-bottom: 0.35rem; color: var(--ink-900); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--glass-border); border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.85); color: var(--ink-900);
  box-shadow: var(--shadow-s);
  font-family: var(--font-body); font-size: 1rem;
}
.field input:focus, .field textarea:focus { border-color: var(--palm-500); outline: none; }
.field textarea { resize: vertical; min-height: 150px; }
.form-status { font-weight: 800; min-height: 1.5em; }
.form-status.is-ok { color: var(--palm-700); }
.form-status.is-error { color: var(--hibisco-dark); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Newsletter / Footer ---------- */
.site-footer {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  margin-top: calc(var(--stack) / 2);
  background:
    radial-gradient(circle at 3% 96%, rgba(238, 96, 77, 0.9) 0 28px, transparent 29px),
    radial-gradient(circle at 8% 87%, rgba(246, 194, 76, 0.72) 0 17px, transparent 18px),
    linear-gradient(135deg, #2f8f84, #6aa084);
  color: #fff7e8;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 32px rgba(54, 101, 88, 0.18);
  padding-block: var(--space-4) var(--space-3);
}
.site-footer a { color: #fff7e8; }
.site-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 247, 232, 0.25);
  margin-bottom: var(--space-2);
}
.site-footer h3 {
  color: #fff7e8; font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.site-footer h3.site-footer__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700;
  text-transform: none; letter-spacing: normal;
  margin-bottom: 0.45rem;
}
.site-footer__social {
  display: grid; justify-items: center; text-align: center; gap: 0.6rem;
}
.site-footer__social h3 { margin-bottom: 0; }
.site-footer__lead {
  max-width: 40rem; margin: 0 0 0.8rem;
  color: rgba(255, 247, 232, 0.85);
  font-size: 0.85rem; font-weight: 700; line-height: 1.4;
}
.newsletter-form {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center;
  width: 100%; padding: 3px; border-radius: 999px;
  background: rgba(255, 248, 232, 0.94);
}
.newsletter-form input {
  min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 0.55rem 0.9rem; border-radius: 999px;
  color: #4f3521; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
}
.newsletter-form input::placeholder { color: rgba(79, 53, 33, 0.6); }
.newsletter-form button {
  border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: #d55537; font-size: 1.35rem; line-height: 1;
}
.newsletter-form button:hover { background: rgba(213, 85, 55, 0.12); }
.social-row { display: flex; gap: 0.7rem; }
.social-row a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 248, 232, 0.22); text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.social-row a:hover { background: rgba(255, 248, 232, 0.38); transform: translateY(-2px); }
.social-row svg { width: 19px; height: 19px; fill: #fff7e8; }
.site-footer__signature {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.2vw, 1.8rem); line-height: 1.12;
  white-space: nowrap;
}
.site-footer__note { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-small); opacity: 0.85; text-align: center; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px);
  background: var(--ink-900); color: #fff; font-weight: 700;
  padding: 0.8rem 1.4rem; border-radius: 999px; box-shadow: var(--shadow-l);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300; max-width: min(92vw, 420px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Deko ---------- */
.deco {
  position: absolute; pointer-events: none; user-select: none; opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(84, 56, 34, 0.18));
  z-index: 1;
}
.deco--tl { top: -24px; left: -28px; width: clamp(80px, 11vw, 150px); transform: rotate(-12deg); }
.deco--tr { top: -24px; right: -28px; width: clamp(80px, 11vw, 150px); transform: rotate(10deg); }
.deco--br { bottom: -28px; right: -24px; width: clamp(90px, 12vw, 170px); transform: rotate(8deg); }
.deco--bl { bottom: -28px; left: -24px; width: clamp(90px, 12vw, 170px); transform: rotate(-8deg); }
.has-deco { position: relative; }

.divider-flower {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  margin-block: var(--space-3); color: var(--hibisco); font-size: 1.1rem;
}
.divider-flower::before, .divider-flower::after {
  content: ""; height: 1px; flex: 1; max-width: 140px; background: var(--sand-200);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Foto-Banner (Experiência personalizada) ---------- */
.photo-banner {
  position: relative;
  display: grid;
  align-items: center; justify-items: end;
  min-height: clamp(300px, 26vw, 400px);
  border-radius: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border: 2px solid #E0C48C;
  box-shadow: var(--shadow-m);
}
.photo-banner__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
/* Halbseitiges Milchglas rechts hinter dem Text — läuft per Maske weich aus,
   wie beim Seiten-Hero */
.photo-banner::before {
  content: "";
  /* 2px Überstand gegen Rundungs-Säume an den Kanten — overflow: hidden
     des Banners schneidet sauber zurück */
  position: absolute; inset: -2px; pointer-events: none;
  z-index: 1;
  border-radius: inherit; /* Blur bleibt sicher innerhalb der Banner-Rundung */
  background: rgba(255, 249, 232, 0.34);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 70%);
  mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 70%);
}
.photo-banner__content {
  position: relative; z-index: 2;
  max-width: min(46%, 32rem);
  padding: clamp(1.2rem, 3vw, 2.8rem);
  color: var(--ink-700);
}
.photo-banner__content .hand { color: var(--hibisco-dark); }
.photo-banner__content .hand,
.photo-banner__content h2 {
  text-shadow: 0 1px 12px rgba(255, 249, 232, 0.95), 0 0 3px rgba(255, 249, 232, 0.85);
}
.photo-banner__content h2 {
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.4rem);
  line-height: 1.05;
  color: var(--ink-900);
  margin: 0.15rem 0 0.5rem;
}
.photo-banner__content h2 span { color: #C4593C; }
.photo-banner__content p {
  color: var(--ink-700); font-weight: 600;
  margin-bottom: 0.8rem;
}
/* Variante „Überstand": Das Bild bringt seine eigene Karte mit — Kopf und
   Palme ragen oben frei heraus. Kein Rahmen, kein Beschnitt; das Milchglas
   liegt nur auf dem Karten-Bereich des Bildes (Karte beginnt bei 10.3% Höhe). */
.photo-banner--overhang {
  min-height: 0;
  aspect-ratio: 1800 / 615;
  border: none; border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.photo-banner--overhang .photo-banner__img {
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(84, 56, 34, 0.18));
}
/* Kein CSS-Overlay: Die cremefarbene Karte ist bereits ins Banner-Bild eingebaut.
   Ein Rechteck-Overlay würde nur über die Kanten und ins Gesicht laufen. */
/* Die cremefarbene Textfläche ist jetzt direkt ins Banner-Bild eingebacken
   (banner-atual-textbg-*), mit dessen eigener Kartenform maskiert — dadurch
   sind die Ecken pixelgenau. Kein separates Overlay mehr nötig. */
.photo-banner--overhang::before { display: none; }
.photo-banner--overhang .photo-banner__content {
  margin-top: 2.6%; /* Text mittig zur Karte, nicht zur Gesamthöhe mit Überstand */
}

/* ---------- Biquíni-Banner (Startseite) ----------
   EIN flüssiges Layout für alle Breiten: Milchglas und Text links,
   Foto rechts. Alles skaliert stufenlos per vw — keine Breakpoint-Sprünge.
   Doppelklassen nötig, weil die allgemeinen Banner-Regeln teils weiter
   unten stehen. */
.photo-banner__note {
  position: absolute; z-index: 2;
  left: clamp(1rem, 4%, 3rem); top: 12%;
  margin: 0;
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.15;
  color: #FFF9E8; text-shadow: 0 1px 10px rgba(84, 56, 34, 0.55);
  transform: rotate(-5deg);
}
.photo-banner.photo-banner--biquini {
  min-height: clamp(170px, 24vw, 300px);
  align-items: center; justify-items: start;
}
.photo-banner--biquini .photo-banner__img { object-position: center center; }
.photo-banner--biquini::before {
  background: rgba(255, 250, 238, 0.68);
  backdrop-filter: blur(clamp(6px, 1.4vw, 18px)) saturate(1.2);
  -webkit-backdrop-filter: blur(clamp(6px, 1.4vw, 18px)) saturate(1.2);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 46%);
  mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 46%);
}
.photo-banner--biquini .photo-banner__content {
  min-width: 0;
  max-width: 44%;
  padding: clamp(0.7rem, 1.8vw, 2.2rem) clamp(0.5rem, 1.5vw, 2rem)
           clamp(0.7rem, 1.8vw, 2.2rem) clamp(1rem, 2.2vw, 2.4rem);
}
.photo-banner--biquini .photo-banner__content h2 { font-size: clamp(1.05rem, 3.4vw, 2.4rem); }
.photo-banner--biquini .exp-btn {
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  padding: 0.35em 0.9em 0.35em 0.5em; gap: 0.35em; margin: 0;
}
.photo-banner--biquini .photo-banner__note {
  left: auto; right: 16%; top: 6%;
  transform: rotate(5deg);
}
.biquini-feats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  margin: clamp(0.4rem, 1vw, 1rem) 0 0; padding: 0;
  font-size: clamp(0.6rem, 1.4vw, 0.78rem); font-weight: 700; color: var(--ink-700);
  text-shadow: 0 1px 10px rgba(255, 249, 232, 0.9), 0 0 3px rgba(255, 249, 232, 0.8);
}

/* ---------- Sabores-Banner (Comida) ----------
   Wie der Biquíni-Banner: Milchglas links hinter dem Text, Foto rechts —
   die Maske lässt den Blur weich ins Bild auslaufen. */
.photo-banner.photo-banner--sabores {
  min-height: clamp(210px, 26vw, 340px);
  align-items: center; justify-items: start;
}
.photo-banner--sabores .photo-banner__img {
  /* Leicht nach rechts geschoben/leicht vergrößert, damit die Gläser
     rechts neben dem Milchglas sichtbar sind */
  width: 125%; max-width: none;
  object-position: left center;
}
.photo-banner--sabores::before {
  /* Links wirklich weiß, läuft dann langsam im Blur nach rechts ins Bild aus */
  background: rgba(255, 252, 245, 0.96);
  backdrop-filter: blur(clamp(8px, 1.5vw, 20px)) saturate(1.2);
  -webkit-backdrop-filter: blur(clamp(8px, 1.5vw, 20px)) saturate(1.2);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 58%);
}
.photo-banner--sabores .photo-banner__content {
  min-width: 0;
  max-width: 52%;
  padding: clamp(0.9rem, 2.2vw, 2.4rem) clamp(0.6rem, 1.6vw, 2rem)
           clamp(0.9rem, 2.2vw, 2.4rem) clamp(1rem, 2.4vw, 2.6rem);
}
.photo-banner--sabores .photo-banner__content h2 { font-size: clamp(1.05rem, 3vw, 2.2rem); }
.photo-banner--sabores .praia-tile__chip {
  width: 1.35em; height: 1.35em; font-size: 0.62em;
  vertical-align: -0.28em; margin-right: 0.3em;
}
.photo-banner--sabores .exp-btn {
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  padding: 0.35em 0.9em 0.35em 0.5em; gap: 0.35em; margin: 0;
}
.sabores-feats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem;
  margin: 0 0 clamp(0.5rem, 1.2vw, 0.9rem); padding: 0;
}
.sabores-feats li {
  background: rgba(255, 253, 248, 0.78); border: 1px solid rgba(224, 196, 140, 0.85);
  border-radius: 999px; padding: 0.22em 0.75em;
  font-size: clamp(0.6rem, 1.35vw, 0.78rem); font-weight: 800; color: var(--ink-700);
}
@media (max-width: 760px) {
  /* Mobil gleiches Format wie groß, nur flacher: Milchglas links, Foto rechts —
     der Lead fällt weg, damit Titel, Chips und Button aufgehen */
  .photo-banner.photo-banner--sabores { min-height: clamp(170px, 36vw, 230px); }
  .photo-banner.photo-banner--sabores::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 75%);
    mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 75%);
  }
  .photo-banner--sabores .photo-banner__content { max-width: 58%; }
  .photo-banner--sabores .sabores-lead { display: none; }
  .photo-banner--sabores .sabores-feats { margin-bottom: clamp(0.4rem, 1.5vw, 0.7rem); }
}
/* Einzige Stufe: die Handschrift-Notiz würde auf kleinen Screens das Foto zudecken */
@media (max-width: 760px) {
  .photo-banner__note { display: none; }
}

@media (max-width: 760px) {
  /* Mobil bleibt es ein Banner: Bild füllt, Text sitzt unten auf dem Milchglas.
     justify-items: stretch, damit der Text im Banner umbricht statt überzulaufen */
  .photo-banner {
    align-items: end; justify-items: stretch;
    min-height: clamp(340px, 88vw, 440px);
  }
  .photo-banner__img { object-position: 24% center; }
  .photo-banner::before {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 58%, transparent 90%);
    mask-image: linear-gradient(0deg, #000 0%, #000 58%, transparent 90%);
  }
  /* Biquíni-Banner behält auch mobil seine horizontale Maske */
  .photo-banner.photo-banner--biquini::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 46%);
    mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 46%);
  }
  .photo-banner__content {
    max-width: 100%;
    padding: 1.1rem 1.2rem 1.3rem;
  }
  .photo-banner__content h2 { font-size: clamp(1.45rem, 5.6vw, 1.9rem); }
  .photo-banner__content p { font-size: 0.95rem; }
  /* Überstand-Variante mobil: gleicher Überstand wie im Großen, nur kompakt
     skaliert — Kopf ragt oben frei heraus, Text rechts auf der Milchglas-Karte. */
  .photo-banner--overhang {
    aspect-ratio: 1800 / 615;
    min-height: 0;
    border: none; border-radius: 0;
    overflow: visible;
    box-shadow: none;
    align-items: center; justify-items: end;
  }
  .photo-banner--overhang .photo-banner__img {
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(84, 56, 34, 0.18));
  }
  .photo-banner--overhang::before { display: none; }
  .photo-banner--overhang .photo-banner__content {
    margin-top: 1.5%;
    max-width: 52%;
    padding: 0.5rem 0.7rem;
  }
  .photo-banner--overhang .photo-banner__content .hand { font-size: clamp(0.7rem, 3.1vw, 0.95rem); }
  .photo-banner--overhang .photo-banner__content h2 { font-size: clamp(0.8rem, 3.5vw, 1.15rem); margin: 0.05rem 0 0.2rem; line-height: 1.1; }
  .photo-banner--overhang .photo-banner__content p { font-size: clamp(0.55rem, 2.2vw, 0.72rem); line-height: 1.35; margin-bottom: 0.3rem; }
  .photo-banner--overhang .photo-banner__content .exp-btn { font-size: 0.58rem; padding: 0.28rem 0.55rem; gap: 0.3rem; }
}

/* ---------- Experiência-personalizada-Banner ---------- */
.exp-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 45%) 1fr;
  align-items: stretch;
  background: linear-gradient(115deg, #FBF3E0 0%, #F7EAD0 55%, #F3E2C2 100%);
  border: 2px solid #E0C48C;
  border-radius: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-m), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  /* Platz nach oben, damit der Kopf frei herausragen kann */
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
/* Dezente Hibiskus-Bluete unten rechts (als Hintergrund, sauber am Radius beschnitten) */
.exp-banner::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: url("../img/hibiskus-240.png") right -1.5rem bottom -2rem / clamp(140px, 22vw, 240px) no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.exp-banner__media {
  position: relative; z-index: 1;
  margin: 0;
}
/* Form (runde Ecken + geschwungene Kante) ist im Bild eingebacken;
   der negative Margin laesst den Kopf ueber die Banneroberkante ragen
   (10.71% = Hoehe des transparenten Kopfbereichs im Bild) */
.exp-banner__media img {
  display: block;
  width: 100%; height: auto;
  margin-top: -10.71%;
  filter: drop-shadow(0 10px 24px rgba(84, 56, 34, 0.16));
}
.exp-banner__body {
  position: relative; z-index: 1;
  padding: clamp(1.1rem, 2.5vw, 1.7rem) clamp(1.4rem, 4vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center;
}
.exp-banner__body p { color: var(--ink-500); max-width: 60ch; margin-bottom: 0.55rem; }
.exp-banner__kicker {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 0;
}
.exp-banner__kicker .hand { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.exp-banner__kicker::after {
  content: "✤";
  color: #C9A25E; font-size: 0.85rem;
  flex: 1;
  text-align: right;
  background: linear-gradient(to right, rgba(201, 162, 94, 0.55), rgba(201, 162, 94, 0.12)) left center / 100% 1px no-repeat;
  padding-left: 0.4rem;
}
.exp-banner__title {
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.25rem);
  line-height: 1.05;
  color: var(--ink-900);
  margin-bottom: 0.3rem;
}
.exp-banner__title span { color: #C4593C; }
.exp-banner__ornament {
  display: flex; align-items: center; gap: 0.7rem;
  color: #C9A25E; font-size: 0.9rem;
  margin: 0.25rem 0 0.65rem;
}
.exp-banner__ornament::before,
.exp-banner__ornament::after {
  content: "";
  height: 1px; flex: 1; max-width: 150px;
  background: linear-gradient(to right, rgba(201, 162, 94, 0.6), rgba(201, 162, 94, 0.08));
}
.exp-banner__ornament::before {
  background: linear-gradient(to left, rgba(201, 162, 94, 0.6), rgba(201, 162, 94, 0.08));
}
.exp-banner__ornament--full { margin: 0.6rem 0; }
.exp-banner__ornament--full::before,
.exp-banner__ornament--full::after { max-width: none; }
.exp-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-weight: 800; font-size: 0.85rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 0.4rem 1.25rem 0.4rem 0.5rem;
  border-radius: 999px;
  margin: 0.15rem 0 0.3rem;
  box-shadow: 0 0 0 2px rgba(224, 196, 140, 0.9), 0 12px 24px rgba(84, 56, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.exp-btn:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff; }
.exp-btn--red { background: linear-gradient(180deg, #D25B47, #A93326); }
.exp-btn--green { background: linear-gradient(180deg, #4C8A5C, #2C5E3B); }
.exp-btn__icon {
  display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em;
  background: #FFFDF6; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(84, 56, 34, 0.08);
  font-size: 0.95em;
}
.exp-btn--red .exp-btn__icon svg { width: 1.2em; height: 1.2em; fill: #B4382D; }
@media (max-width: 1080px) {
  .exp-banner { grid-template-columns: 1fr; }
  .exp-banner__media { max-width: 420px; width: 100%; margin-inline: auto; }
  .exp-banner__body { padding-top: 0.5rem; }
}

/* ==========================================================================
   Inscrição "Feito na Ilha" — Bewerbungsformular in Etappen
   (inscricao-artesao.php + assets/js/inscricao.js)
   Ein Schritt = ein Bildschirm. Alles baut auf den vorhandenen Tokens auf.
   ========================================================================== */

.wizard { display: grid; gap: var(--space-2); }
.wizard[hidden] { display: none; }   /* nach dem Absenden */

/* ---------- Fortschritt ---------- */
.wizard-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.wizard-head[hidden] { display: none; }
.wizard-progress { display: flex; align-items: center; gap: var(--space-2); }
.wizard-progress__bar {
  flex: 1; height: 9px; border-radius: 999px;
  background: var(--sand-200);
  box-shadow: inset 0 1px 3px rgba(84, 56, 34, 0.16);
  overflow: hidden;
}
.wizard-progress__fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sol), var(--hibisco));
  transition: width 0.5s cubic-bezier(0.35, 0, 0.2, 1);
}
.wizard-progress__label {
  flex: none; font-weight: 800; font-size: var(--fs-small);
  color: var(--ink-500); white-space: nowrap;
}

/* Etappen-Leiste: kleine Kreise mit Emoji, waagerecht scrollbar */
.wizard-track {
  display: flex; gap: 0.35rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0.1rem 0 0.35rem;
  margin: 0; list-style: none;
}
.wizard-track::-webkit-scrollbar { display: none; }
.wizard-track li { flex: 0 0 auto; }
.wizard-track button {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  width: 4.4rem; padding: 0.25rem 0.1rem;
  background: none; border: 0; cursor: default; font: inherit;
  color: var(--ink-500);
}
.wizard-track button:not([disabled]) { cursor: pointer; }
.wizard-track__dot {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.95rem; line-height: 1;
  background: var(--paper); border: 2px solid var(--sand-200);
  box-shadow: var(--shadow-s);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wizard-track__label {
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.02em;
  line-height: 1.15; text-align: center;
  text-transform: uppercase;
}
.wizard-track .is-done .wizard-track__dot { background: var(--palm-soft); border-color: var(--palm-500); }
.wizard-track .is-done .wizard-track__label { color: var(--palm-700); }
.wizard-track .is-current .wizard-track__dot {
  background: var(--hibisco-soft); border-color: var(--hibisco);
  transform: scale(1.14); box-shadow: 0 0 0 4px rgba(217, 79, 65, 0.14), var(--shadow-s);
}
.wizard-track .is-current .wizard-track__label { color: var(--hibisco-dark); }
.wizard-track button:not([disabled]):hover .wizard-track__dot { transform: translateY(-2px) scale(1.08); }
@media (max-width: 640px) {
  .wizard-track button { width: 3.1rem; }
  .wizard-track__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-progress__fill { transition: none; }
  .wizard-track__dot { transition: none; }
}

/* ---------- Eine Etappe = ein Bildschirm ---------- */
.etapa { display: grid; gap: var(--space-3); animation: etapa-in 0.4s ease both; }
.etapa[hidden] { display: none; }
@keyframes etapa-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .etapa { animation: none; } }

.etapa__head { position: relative; }
/* Beim Etappenwechsel springt der Fokus auf die Überschrift (für Screenreader) —
   der orangefarbene Rahmen wäre dabei nur Zierrat. */
.etapa__head h2:focus, .etapa__head h2:focus-visible { outline: none; }
.final-card h2:focus, .final-card h2:focus-visible { outline: none; }
.etapa__head h2 { margin-bottom: 0.35rem; font-size: var(--fs-h1); }
.etapa__head p { color: var(--ink-500); margin-bottom: 0; max-width: 62ch; }
.etapa__body { display: grid; gap: var(--space-3); }
.etapa__block { display: grid; gap: var(--space-2); }

/* Kleine erklärende Karte am Anfang mancher Etappen */
.etapa-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-m);
  background: var(--sol-soft);
  border: 1px solid rgba(233, 161, 59, 0.35);
}
.etapa-note--mar { background: var(--mar-soft); border-color: rgba(36, 121, 139, 0.28); }
.etapa-note--palm { background: var(--palm-soft); border-color: rgba(69, 120, 91, 0.28); }
.etapa-note__emoji { font-size: 1.3rem; line-height: 1.3; flex: none; }
.etapa-note p { margin: 0; font-weight: 600; color: var(--ink-700); }

/* ---------- Felder ---------- */
.field-num {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem; margin-right: 0.4rem;
  border-radius: 50%; background: var(--sand-100); color: var(--ink-500);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 900;
  vertical-align: 0.05em;
}
.req { color: var(--hibisco); font-weight: 900; }
.field__hint { margin: 0.35rem 0 0; font-size: var(--fs-small); color: var(--ink-500); }
.field__label { display: block; font-weight: 800; font-size: 0.95rem; margin-bottom: 0.45rem; color: var(--ink-900); }
.field input[type="file"] { padding: 0; }
.field-error {
  margin: 0.4rem 0 0; font-size: var(--fs-small); font-weight: 800;
  color: var(--hibisco-dark);
}
.field-error::before { content: "⚠ "; }
.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.is-invalid textarea,
.is-invalid select { border-color: var(--hibisco); background: #FFF9F8; }
.is-invalid > .field__label,
.is-invalid > .etapa__q { color: var(--hibisco-dark); }

/* Frage-Überschrift innerhalb einer Etappe */
.etapa__q {
  display: block; font-family: var(--font-body); font-weight: 800;
  font-size: 0.95rem; color: var(--ink-900); margin-bottom: 0.5rem;
}

/* Eingabe mit Präfix (R$) */
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
  display: grid; place-items: center; padding-inline: 0.8rem;
  border: 1.5px solid var(--sand-200); border-right: 0;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  background: var(--sand-100); color: var(--ink-500); font-weight: 900;
}
.input-prefix > input { border-radius: 0 var(--radius-s) var(--radius-s) 0 !important; flex: 1; min-width: 0; }

/* ---------- Auswahl-Kacheln (Radio / Checkbox) ---------- */
.opt-grid {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.opt-grid--wide { grid-template-columns: 1fr; }
.opt-grid--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }

.opt {
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; min-height: 3rem;
  border: 1.5px solid var(--sand-200); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink-700);
  font-weight: 700; line-height: 1.3; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__mark {
  flex: none; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--sand-200); border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  color: #fff; font-size: 0.72rem; font-weight: 900; line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.opt--check .opt__mark { border-radius: 5px; }
.opt:hover { border-color: var(--palm-500); transform: translateY(-1px); box-shadow: var(--shadow-s); }
.opt.is-checked, .opt:has(input:checked) {
  border-color: var(--palm-500); background: var(--palm-soft); color: var(--ink-900);
  box-shadow: 0 3px 12px rgba(69, 120, 91, 0.16);
}
.opt.is-checked .opt__mark, .opt:has(input:checked) .opt__mark {
  background: var(--palm-700); border-color: var(--palm-700);
}
.opt.is-checked .opt__mark::after, .opt:has(input:checked) .opt__mark::after { content: "✓"; }
.opt input:focus-visible ~ .opt__text { text-decoration: underline; }
.opt:focus-within { outline: 3px solid var(--sol); outline-offset: 2px; }
.is-invalid .opt { border-color: rgba(217, 79, 65, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .opt, .opt__mark { transition: none; }
  .opt:hover { transform: none; }
}

/* Zusatzfeld, das nur bei "Outro" erscheint */
.opt-extra { margin-top: 0.6rem; }
.opt-extra[hidden] { display: none; }

/* Einzelne Zustimmungs-Checkbox (Etappe 6, 7, 9) */
.consent {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--sand-200); border-radius: var(--radius-m);
  background: var(--paper); cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent .opt__mark { margin-top: 0.12rem; border-radius: 5px; }
.consent__text { font-weight: 600; color: var(--ink-700); }
.consent__text strong { display: block; color: var(--ink-900); margin-bottom: 0.15rem; }
.consent.is-checked, .consent:has(input:checked) { border-color: var(--palm-500); background: var(--palm-soft); }
.consent.is-checked .opt__mark, .consent:has(input:checked) .opt__mark { background: var(--palm-700); border-color: var(--palm-700); }
.consent.is-checked .opt__mark::after, .consent:has(input:checked) .opt__mark::after { content: "✓"; }
.consent:focus-within { outline: 3px solid var(--sol); outline-offset: 2px; }

/* ---------- Video-Etappe ---------- */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-l);
  background: linear-gradient(155deg, #3B2A1E, #6B4B33 60%, #2E5941);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-l);
}
.video-frame iframe, .video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.video-frame__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 0.5rem;
  padding: var(--space-3); text-align: center; color: #FFF7E8;
}
.video-frame__play {
  width: clamp(3.4rem, 8vw, 4.6rem); height: clamp(3.4rem, 8vw, 4.6rem);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 247, 232, 0.16); border: 2px solid rgba(255, 247, 232, 0.5);
  font-size: 1.4rem; backdrop-filter: blur(4px);
}
.video-frame__placeholder strong { font-family: var(--font-display); font-size: var(--fs-h2); color: #FFF7E8; }
.video-frame__placeholder span { font-size: var(--fs-small); opacity: 0.82; max-width: 34ch; }

.gate { display: grid; justify-items: center; gap: 0.5rem; min-height: 5.2rem; align-content: center; }
.gate__hint { margin: 0; font-weight: 800; color: var(--ink-500); font-size: var(--fs-small); }
.gate__reveal { animation: gate-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes gate-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gate__reveal { animation: none; } }
.gate__ring {
  --p: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: conic-gradient(var(--sol) calc(var(--p) * 1%), var(--sand-200) 0);
  display: grid; place-items: center;
}
.gate__ring::after {
  content: ""; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--paper);
}

/* ---------- Produkte (Etappe 3) ---------- */
.prod-list { display: grid; gap: var(--space-2); }
.prod-card {
  border: 1.5px solid var(--sand-200); border-radius: var(--radius-m);
  background: var(--paper); box-shadow: var(--shadow-s); overflow: hidden;
}
.prod-card[hidden] { display: none; }
.prod-card > summary {
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
  padding: 0.75rem 0.95rem; list-style: none;
  background: linear-gradient(120deg, var(--sand-100), rgba(247, 237, 219, 0.4));
  font-family: var(--font-display); font-weight: 600; color: var(--ink-900);
}
.prod-card > summary::-webkit-details-marker { display: none; }
.prod-card__n {
  flex: none; width: 1.95rem; height: 1.95rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hibisco-soft); color: var(--hibisco-dark);
  font-family: var(--font-body); font-weight: 900; font-size: 0.85rem;
}
.prod-card__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-card__chevron { flex: none; color: var(--ink-500); transition: transform 0.2s ease; }
.prod-card[open] > summary .prod-card__chevron { transform: rotate(180deg); }
.prod-card__body { padding: var(--space-3); display: grid; gap: var(--space-2); border-top: 1px solid var(--sand-200); }
.prod-card__remove {
  justify-self: start; background: none; border: 0; padding: 0.2rem 0;
  font: inherit; font-size: var(--fs-small); font-weight: 800;
  color: var(--hibisco-dark); cursor: pointer; text-decoration: underline;
}
.prod-add {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: var(--space-2); font: inherit; font-weight: 800;
  color: var(--palm-700); background: rgba(231, 240, 231, 0.6);
  border: 2px dashed var(--palm-500); border-radius: var(--radius-m);
  cursor: pointer; transition: background 0.18s ease, transform 0.18s ease;
}
.prod-add:hover { background: var(--palm-soft); transform: translateY(-1px); }
.prod-add[hidden] { display: none; }
.prod-count { font-size: var(--fs-small); font-weight: 800; color: var(--ink-500); text-align: center; }

/* ---------- Foto-Upload ---------- */
.upload { display: grid; gap: 0.5rem; }
.upload__drop {
  position: relative; display: grid; place-items: center; gap: 0.3rem;
  min-height: 9rem; padding: var(--space-2); text-align: center;
  border: 2px dashed var(--sand-200); border-radius: var(--radius-m);
  background: var(--sand-50); cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.upload__drop[hidden] { display: none; }
.upload__drop:hover, .upload__drop.is-drag { border-color: var(--palm-500); background: var(--palm-soft); }
.upload__drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.upload__icon { font-size: 1.6rem; line-height: 1; }
.upload__title { font-weight: 800; color: var(--ink-900); }
.upload__sub { font-size: var(--fs-small); color: var(--ink-500); }
.upload__preview { position: relative; display: none; }
.upload__preview.is-visible { display: block; }
.upload__preview img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-m); box-shadow: var(--shadow-s);
}
.upload__actions {
  position: absolute; left: 0.5rem; bottom: 0.5rem; right: 0.5rem;
  display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.upload__actions button {
  font: inherit; font-size: var(--fs-small); font-weight: 800;
  padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.7); color: var(--ink-900);
  background: rgba(255, 253, 248, 0.9); backdrop-filter: blur(6px);
}
.upload__actions button:hover { background: #fff; }
.upload__name { font-size: var(--fs-small); color: var(--ink-500); word-break: break-all; }
.is-invalid .upload__drop { border-color: var(--hibisco); background: #FFF9F8; }

/* ---------- Pläne (Etappe 8) ---------- */
.plan-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.plan {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem;
  padding: var(--space-3) var(--space-2) var(--space-2);
  border: 1.5px solid var(--sand-200); border-radius: var(--radius-m);
  background: var(--paper); cursor: pointer; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: var(--plan-accent, var(--palm-500));
}
.plan__emoji { font-size: 1.6rem; line-height: 1; }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-900); }
.plan__price { font-family: var(--font-display); font-weight: 700; color: var(--plan-accent, var(--palm-700)); }
.plan__price strong { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.plan__price span { font-size: 0.82rem; font-weight: 700; color: var(--ink-500); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.87rem; }
.plan__list li { position: relative; padding-left: 1.15rem; color: var(--ink-700); }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--palm-500); font-weight: 900; }
.plan__pick {
  margin-top: auto; padding-top: 0.5rem;
  font-weight: 900; font-size: var(--fs-small); color: var(--ink-500);
  display: flex; align-items: center; gap: 0.45rem;
}
.plan__pick .opt__mark { width: 1.15rem; height: 1.15rem; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--plan-accent, var(--palm-500)); }
.plan.is-checked, .plan:has(input:checked) {
  border-color: var(--plan-accent, var(--palm-500));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan-accent, var(--palm-500)) 22%, transparent), var(--shadow-m);
  background: var(--paper);
}
.plan.is-checked .plan__pick, .plan:has(input:checked) .plan__pick { color: var(--plan-accent, var(--palm-700)); }
.plan.is-checked .opt__mark, .plan:has(input:checked) .opt__mark {
  background: var(--plan-accent, var(--palm-700)); border-color: var(--plan-accent, var(--palm-700));
}
.plan.is-checked .opt__mark::after, .plan:has(input:checked) .opt__mark::after { content: "✓"; }
.plan:focus-within { outline: 3px solid var(--sol); outline-offset: 2px; }
.plan__ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--hibisco); color: #fff;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 0 0 0 12px;
}
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } .plan:hover { transform: none; } }

/* ---------- Zusammenfassung (Etappe 9) ---------- */
.summary { display: grid; gap: var(--space-2); }
.summary__group {
  border: 1px solid var(--sand-200); border-radius: var(--radius-m);
  background: var(--paper); overflow: hidden;
}
.summary__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem; background: var(--sand-100);
  font-weight: 800; font-size: 0.9rem; color: var(--ink-900);
}
.summary__edit {
  margin-left: auto; font-size: var(--fs-small); font-weight: 800;
  background: none; border: 0; cursor: pointer; color: var(--hibisco-dark);
  text-decoration: underline; font-family: inherit;
}
.summary__rows { margin: 0; padding: 0.4rem 0.9rem 0.7rem; }
.summary__row {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
  padding: 0.35rem 0; border-bottom: 1px dashed var(--sand-200);
}
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { flex: 0 0 12rem; font-weight: 800; color: var(--ink-500); font-size: 0.85rem; }
.summary__row dd { flex: 1; min-width: 12rem; margin: 0; color: var(--ink-900); font-weight: 600; overflow-wrap: anywhere; }
.summary__row dd em { font-style: normal; color: var(--ink-500); font-weight: 600; }
@media (max-width: 560px) { .summary__row dt { flex-basis: 100%; } }

/* ---------- Navigation zwischen den Etappen ---------- */
.wizard-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: 1px dashed var(--sand-200);
}
.wizard-nav[hidden] { display: none; }
.wizard-nav--center { justify-content: center; border-top: 0; padding-top: 0; }
.wizard-nav .btn[hidden] { display: none; }
.wizard-nav__spacer { flex: 1; }
.wizard-status {
  flex-basis: 100%; margin: 0; min-height: 1.4em;
  font-weight: 800; font-size: var(--fs-small); text-align: right;
}
.wizard-status.is-error { color: var(--hibisco-dark); }
.wizard-status.is-ok { color: var(--palm-700); }

/* Entwurf gespeichert */
.draft-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; border-radius: var(--radius-m);
  background: var(--mar-soft); border: 1px solid rgba(36, 121, 139, 0.28);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-700);
}
.draft-bar[hidden] { display: none; }
.draft-bar button {
  font: inherit; font-weight: 800; cursor: pointer;
  padding: 0.3rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--mar-600); background: #fff; color: var(--mar-600);
}
.draft-bar button:hover { background: var(--mar-600); color: #fff; }
.draft-flag {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: var(--palm-700); color: #fff;
  font-size: var(--fs-small); font-weight: 800;
  box-shadow: var(--shadow-m);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.draft-flag.is-visible { opacity: 1; transform: none; }

/* ---------- Abschluss ---------- */
.final-card {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: var(--space-2);
  text-align: center; padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-l);
  background: linear-gradient(165deg, var(--paper), var(--sand-100));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-m);
}
.final-card[hidden] { display: none; }
.final-card__emoji { font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; }
.final-card h2 { font-size: var(--fs-hero); margin-bottom: 0; }
.final-card p { max-width: 46ch; color: var(--ink-700); }
.final-card .hand { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--hibisco-dark); }
.final-card .deco { z-index: 0; }
/* :not(.deco), damit die Blüten absolut positioniert bleiben */
.final-card > *:not(.deco) { position: relative; z-index: 1; }

/* Zeilenumbruch-Schutz für lange Etappen-Titel */
.wizard h2 .etapa__emoji { margin-right: 0.35rem; }
.consent.is-invalid { border-color: var(--hibisco); background: #FFF9F8; }
.field-error { display: block; }
.summary__group .field-error { display: none; }

/* Die Basisregel „.field label { display: block }" darf die Auswahl-Kacheln,
   Zustimmungen, Plan-Karten und Upload-Flächen nicht flachdrücken —
   das sind ebenfalls <label>-Elemente. */
.field .opt {
  display: flex; margin-bottom: 0;
  font-size: 0.95rem; font-weight: 700; color: var(--ink-700);
}
.field .opt.is-checked, .field .opt:has(input:checked) { color: var(--ink-900); }
.field .consent {
  display: flex; margin-bottom: 0;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-700);
}
.field .plan {
  display: flex; flex-direction: column; margin-bottom: 0;
  font-size: var(--fs-body); font-weight: 400; color: var(--ink-700);
}
.field .upload__drop {
  display: grid; margin-bottom: 0;
  font-size: var(--fs-body); font-weight: 400; color: var(--ink-700);
}
/* …und sie muss trotzdem verschwinden können, sobald ein Foto gewählt ist. */
.field .upload__drop[hidden], .upload__drop[hidden] { display: none; }
.field .upload__title { font-weight: 800; color: var(--ink-900); }
/* Kürzere Textfelder in den Etappen — 150px Mindesthöhe wäre hier zu viel */
.etapa .field textarea { min-height: 7.5rem; }

/* ==========================================================================
   Einheitliches Detail-Design für "O que fazer" und "Feito na Ilha"
   Baut komplett auf den Praia-Bausteinen auf (praia-hero, praia-tiles,
   moca-banner). Hier stehen nur die wenigen Ergänzungen.
   ========================================================================== */

/* ---------- Foto-Banner (Experiência personalizada) mobil ----------
   Bleibt ein Querbanner wie das Moça-Band der Praia-Seite: Foto links,
   Text rechts auf Milchglas, das per Maske weich nach links ausläuft.
   Der Text bleibt immer im Banner — der Banner wächst mit dem Inhalt. */
@media (max-width: 760px) {
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) {
    min-height: clamp(220px, 58vw, 300px);
    align-items: center; justify-items: end;
  }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__img { object-position: 42% center; }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores)::before {
    background: rgba(255, 249, 232, 0.44);
    -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 50%, transparent 74%);
    mask-image: linear-gradient(270deg, #000 0%, #000 50%, transparent 74%);
  }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__content {
    max-width: 56%;
    padding: 0.85rem 0.95rem 0.85rem 0.4rem;
  }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__content .hand { font-size: clamp(0.8rem, 3.2vw, 1.05rem); }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__content h2 {
    font-size: clamp(0.98rem, 4.1vw, 1.4rem); line-height: 1.1;
    margin: 0.05rem 0 0.3rem;
  }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__content p {
    font-size: clamp(0.62rem, 2.4vw, 0.82rem); line-height: 1.42;
    margin-bottom: 0.45rem;
  }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .photo-banner__content p:last-child { margin-bottom: 0; }
  .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini):not(.photo-banner--sabores) .exp-btn {
    font-size: clamp(0.56rem, 2.1vw, 0.7rem); padding: 0.3rem 0.65rem 0.3rem 0.35rem; gap: 0.35rem; margin: 0;
  }
}

/* ---------- Karten in genau einer Zeile (Übersicht "O que fazer", Pratos) ----------
   Gleiche Kartengröße wie im Praia-Raster; die Zeile bricht nie um,
   sondern wird seitlich wischbar (Snap wie bei den Shop-Reihen). */
.card-row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 19vw, 200px);
  gap: var(--space-1);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  contain: inline-size;
}
.card-row > .card { scroll-snap-align: start; }
.card-row::-webkit-scrollbar { height: 6px; }
.card-row::-webkit-scrollbar-thumb { background: var(--sand-200); border-radius: 999px; }

/* ---------- Hero-Kicker für Aktivitäten (längerer Text als "Praia") ---------- */
.praia-hero--atividade .praia-hero__kicker { font-size: clamp(1.45rem, 4vw, 2.5rem); }
.praia-hero--atividade .praia-hero__name { font-size: clamp(2.1rem, 7.2vw, 4.4rem); }
/* Einzelbild ohne Slider: gleicher Rahmen, kein Scrollen nötig */
.praia-hero__slider--single { overflow: hidden; }

/* ---------- Kategorie-Pills als Links (Feito na Ilha) ---------- */
a.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  text-decoration: none; color: var(--ink-700);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
a.filter-chip:hover { background: var(--palm-soft); color: var(--palm-700); transform: translateY(-1px); }
a.filter-chip[aria-current="page"] { background: var(--palm-700); border-color: var(--palm-700); color: #fff; }

/* ---------- Region-/Orts-Pill (statisch, gleiche Optik wie im Hero) ---------- */
.region-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: linear-gradient(180deg, #E56A52, var(--hibisco-dark));
  color: #fff; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.34rem 0.85rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(185, 62, 51, 0.3);
  margin-bottom: var(--space-2);
}

/* ---------- Kopf-Kachel für Artesão und Kategorie ----------
   Foto/Icon links, handschriftlicher Kicker, großer Serifen-Titel — wie der
   Strandname im Praia-Hero, nur auf Papier statt im Bild. */
.maker-hero {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4);
  align-items: center;
}
.maker-hero__photo {
  width: clamp(120px, 17vw, 190px); height: clamp(120px, 17vw, 190px);
  border-radius: 50%; object-fit: cover;
  border: 7px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-m);
}
.maker-hero__icon {
  display: grid; place-items: center;
  width: clamp(110px, 15vw, 160px); height: clamp(110px, 15vw, 160px);
  border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;
  background: radial-gradient(120% 120% at 32% 26%, #fff 0%, var(--tile-accent-soft) 75%);
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), var(--shadow-m);
  transform: rotate(-6deg);
}
.maker-hero__kicker {
  display: block; font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1;
  color: var(--tile-accent-ink); margin-bottom: 0.25rem;
}
.maker-hero__kicker::after { content: " ✿"; font-size: 0.75em; }
.maker-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); font-weight: 700;
  line-height: 1.02; margin-bottom: 0.55rem;
}
.maker-hero h1::after {
  content: ""; display: block; width: 4.5rem; height: 6px; margin-top: 0.7rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--sol), var(--hibisco));
}
.maker-hero__lead { color: var(--ink-700); font-weight: 600; font-size: 1.02rem; max-width: 56ch; margin: 0; }
.maker-hero__lead + .region-pill { margin: var(--space-2) 0 0; }
/* Produkt-Seite: Slider-Hero wie bei den Praias, Name etwas kleiner (längere Produktnamen) */
.praia-hero--produto .praia-hero__name { font-size: clamp(2rem, 6.5vw, 3.9rem); }
.praia-hero__region[hidden], .praia-hero__count[hidden], .praia-hero__nav[hidden] { display: none; }
/* Ware immer komplett sichtbar: das scharfe Bild behält sein eigenes Seitenverhältnis,
   läuft an beiden Seiten weich aus (Maske) und löst sich so ohne harte Kante in der
   unscharfen, vergrößerten Kopie seiner selbst auf — wie die Banner der Seite */
.praia-hero--produto .prod-slide {
  position: relative; overflow: hidden;
  flex: 0 0 100%; width: 100%;
  height: clamp(320px, 40vw, 540px);
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.praia-hero--produto .prod-slide::after {
  content: ""; position: absolute; inset: 0;
  backdrop-filter: blur(22px) saturate(1.1);
  background: rgba(255, 253, 248, 0.3);
}
.praia-hero--produto .prod-slide img {
  position: relative; z-index: 1;
  display: block;
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: auto; object-fit: contain;
  border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* Titel, Badge, Zähler und Pfeile müssen über dem scharfen Produktbild liegen */
.praia-hero--produto::before { z-index: 2; }
.praia-hero--produto .praia-hero__title,
.praia-hero--produto .praia-hero__region,
.praia-hero--produto .praia-hero__count,
.praia-hero--produto .praia-hero__nav { z-index: 3; }
@media (max-width: 640px) {
  .praia-hero--produto .prod-slide { height: auto; aspect-ratio: 4 / 3; }
}
/* Info-Kachel: größerer Preis, Pills als Links */
.price--hero { font-size: 1.6rem; margin: var(--space-2) 0 0; }
.maker-hero__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--space-2) 0 0; }
a.region-pill { text-decoration: none; }
@media (max-width: 640px) {
  .maker-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-2); }
  .maker-hero h1::after { margin-inline: auto; }
  .maker-hero__lead { margin-inline: auto; }
}

/* Drei gleich breite Kacheln (z.B. "Por que comprar aqui?") */
@media (min-width: 701px) { .praia-tiles--3 { grid-template-columns: repeat(3, 1fr); } }

/* Produkt-Raster auf Kategorie- und Artesão-Seite: großzügiger als die Rail */
.product-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.product-grid .card__body h3 { font-size: 1rem; }
.product-grid .price { font-size: 1.1rem; }

/* Hero der Shop-Startseite: quadratisches Porträt rechts, Text links auf Papier.
   Das Bild läuft nach links weich aus, damit das Gesicht scharf und frei bleibt. */
.page-hero--portrait .page-hero__figure { left: auto; width: min(64%, 720px); }
.page-hero--portrait .page-hero__figure img {
  object-position: center 22%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.page-hero--portrait .page-hero__inner::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 56%);
  mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 56%);
}
@media (max-width: 780px) {
  .page-hero--portrait .page-hero__figure { left: 0; width: 100%; }
  .page-hero--portrait .page-hero__figure img {
    object-position: center 18%;
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero--portrait .page-hero__inner::before {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 46%, transparent 76%);
    mask-image: linear-gradient(0deg, #000 0%, #000 46%, transparent 76%);
  }
}

/* Mobil: Produktkarten zweispaltig (wie die Strand-Karten), Kategorie-Pills
   kompakt, Hero der Shop-Startseite hoch genug für Gesicht + Text */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
ul.filter-bar > li { display: contents; }
@media (max-width: 640px) {
  .filter-bar a.filter-chip { padding: 0.4rem 0.8rem; font-size: 0.82rem; gap: 0.3rem; }
  .filter-bar { gap: 0.45rem; }
}
@media (max-width: 780px) {
  .page-hero--portrait .page-hero__inner { min-height: clamp(560px, 150vw, 640px); }
}

/* ==========================================================================
   Rubrik-Farben: jede Rubrik trägt die Farbe ihres Icon-Buttons nur als Rand
   um alle Kacheln — die Kacheln selbst behalten ihre ursprüngliche Farbe.
   Gesetzt über data-section am <body>.
   ========================================================================== */
/* Farben exakt aus den Icon-Buttons (lugar / atividade / onde-ficar / comida / bikini) */
body[data-section="praias"] { --sec: #F8C000; --sec-ink: #A07800; --sec-soft: rgba(248, 192, 0, 0.16); }
body[data-section="fazer"]  { --sec: #E86820; --sec-ink: #B04A10; --sec-soft: rgba(232, 104, 32, 0.14); }
body[data-section="ficar"]  { --sec: #3080D8; --sec-ink: #1E5A9C; --sec-soft: rgba(48, 128, 216, 0.14); }
body[data-section="comida"] { --sec: #E83858; --sec-ink: #B0203E; --sec-soft: rgba(232, 56, 88, 0.14); }
body[data-section="feito"]  { --sec: #286828; --sec-ink: #1E4E1E; --sec-soft: rgba(40, 104, 40, 0.14); }

/* Rand in Rubrik-Farbe auf allen Kachel-Typen — ohne Tönung,
   die Kacheln behalten ihre ursprüngliche Hintergrundfarbe */
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .card,
body[data-section] .moca-banner,
body[data-section] .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini),
body[data-section] .about-band,
body[data-section] .panel,
body[data-section] .share-strip,
body[data-section] .tip-card {
  border-color: color-mix(in srgb, var(--sec) 78%, #fff);
}
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .moca-banner,
body[data-section] .about-band,
body[data-section] .share-strip {
  border-width: 2px;
}
body[data-section] .card { border-width: 1.5px; }
/* Die dunkle Highlight-Kachel und der weiße Bildrahmen behalten ihren Look,
   bekommen aber ebenfalls die Rubrik-Kante */
body[data-section] .praia-tile--destaque { border-color: color-mix(in srgb, var(--sec) 65%, #fff); }
body[data-section] .praia-hero__slider,
body[data-section] .detail-hero img { border-color: color-mix(in srgb, var(--sec) 55%, #fff); }
body[data-section] .moca-banner { border: 2px solid color-mix(in srgb, var(--sec) 78%, #fff); }
/* Balken unter Überschriften und Filter-Chips in der Rubrik-Farbe */
body[data-section] .section-head h1::after,
body[data-section] .section-head h2::after,
body[data-section] .praia-statement::after,
body[data-section] .praia-hero__title::after,
body[data-section] .maker-hero h1::after {
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 55%, #fff));
}
body[data-section] .filter-chip[aria-pressed="true"],
body[data-section] a.filter-chip[aria-current="page"] { background: var(--sec-ink); border-color: var(--sec-ink); }
body[data-section] a.filter-chip:hover { background: var(--sec-soft); color: var(--sec-ink); }
body[data-section] .praia-hero__region,
body[data-section] .region-pill { background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 85%, #fff), var(--sec-ink)); box-shadow: 0 6px 16px color-mix(in srgb, var(--sec) 40%, transparent); }

/* Icon-Navigation: Auswahl-Ring immer in der Farbe des jeweiligen Icons */
.quick-nav a[href="praias.html"]        { --qn: #F8C000; }
.quick-nav a[href="o-que-fazer.html"]   { --qn: #E86820; }
.quick-nav a[href="onde-ficar.html"]    { --qn: #3080D8; }
.quick-nav a[href="comida.html"]        { --qn: #E83858; }
.quick-nav a[href="feito-na-ilha.html"] { --qn: #286828; }
.quick-nav img { border: 2px solid transparent; box-sizing: border-box; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.quick-nav a[aria-current="page"] img {
  border-color: var(--qn, var(--hibisco));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qn, var(--hibisco)) 28%, transparent);
}
.quick-nav a:hover img { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qn, var(--hibisco)) 22%, transparent); }
.quick-nav a[aria-current="page"] { color: var(--qn, var(--ink-900)); }
.quick-nav a[href="praias.html"][aria-current="page"] { color: #A07800; }

/* Rubrik-Farbe kräftiger: Header-Leiste und Rand (ohne Kachel-Tönung) */
body[data-section] .site-header {
  background: linear-gradient(color-mix(in srgb, var(--sec) 22%, transparent), color-mix(in srgb, var(--sec) 22%, transparent)), rgba(255, 252, 243, 0.82);
  border-bottom: 3px solid var(--sec);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--sec) 28%, transparent);
}
body[data-section] .site-nav a[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 82%, #fff), var(--sec-ink));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sec) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .card,
body[data-section] .moca-banner,
body[data-section] .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini),
body[data-section] .about-band,
body[data-section] .panel,
body[data-section] .share-strip,
body[data-section] .tip-card,
body[data-section] .praia-tile--destaque { border-color: var(--sec); }
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .moca-banner,
body[data-section] .about-band,
body[data-section] .share-strip,
body[data-section] .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini) { border-width: 3px; }
body[data-section] .card { border-width: 2px; }
body[data-section] .praia-hero__slider,
body[data-section] .detail-hero img { border-color: color-mix(in srgb, var(--sec) 80%, #fff); }
body[data-section="praias"] { --sec-soft: rgba(248, 192, 0, 0.26); }
body[data-section="fazer"]  { --sec-soft: rgba(232, 104, 32, 0.22); }
body[data-section="ficar"]  { --sec-soft: rgba(48, 128, 216, 0.22); }
body[data-section="comida"] { --sec-soft: rgba(232, 56, 88, 0.22); }
body[data-section="feito"]  { --sec-soft: rgba(40, 104, 40, 0.22); }

/* Rubrik-Farbe: Mittelweg zwischen zart und kräftig */
body[data-section] .site-header {
  background: linear-gradient(color-mix(in srgb, var(--sec) 12%, transparent), color-mix(in srgb, var(--sec) 12%, transparent)), rgba(255, 252, 243, 0.82);
  border-bottom: 2px solid color-mix(in srgb, var(--sec) 70%, #fff);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--sec) 16%, transparent);
}
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .card,
body[data-section] .moca-banner,
body[data-section] .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini),
body[data-section] .about-band,
body[data-section] .panel,
body[data-section] .share-strip,
body[data-section] .tip-card,
body[data-section] .praia-tile--destaque { border-color: color-mix(in srgb, var(--sec) 62%, #fff); }
body[data-section] .shell,
body[data-section] .praia-tile,
body[data-section] .moca-banner,
body[data-section] .about-band,
body[data-section] .share-strip,
body[data-section] .photo-banner:not(.photo-banner--overhang):not(.photo-banner--biquini) { border-width: 2px; }
body[data-section] .card { border-width: 1.5px; }
body[data-section="praias"] { --sec-soft: rgba(248, 192, 0, 0.14); }
body[data-section="fazer"]  { --sec-soft: rgba(232, 104, 32, 0.12); }
body[data-section="ficar"]  { --sec-soft: rgba(48, 128, 216, 0.12); }
body[data-section="comida"] { --sec-soft: rgba(232, 56, 88, 0.12); }
body[data-section="feito"]  { --sec-soft: rgba(40, 104, 40, 0.12); }

/* Seiten-Hero überall gleich hoch — auch "Feito na Ilha" (kein Extra-Höhe mehr) */
.page-hero__inner { height: clamp(320px, 34vw, 440px); min-height: 0; }
@media (max-width: 780px) {
  .page-hero__inner { height: clamp(360px, 88vw, 470px); min-height: 0; }
  .page-hero--portrait .page-hero__inner { height: clamp(360px, 88vw, 470px); min-height: 0; }
  /* Die drei Vorteils-Zeilen brauchen mobil zu viel Platz im Hero */
  .page-hero--portrait .icon-list { display: none; }
}
.page-hero__copy { padding-block: clamp(1rem, 2.6vw, 2.2rem); }

/* Hero "Feito na Ilha": Artesã rechts scharf, Text links (Desktop).
   Mobil wie Praias: Bild füllt die Kachel, Text unten auf Milchglas —
   der Ausschnitt zeigt Gesicht und Hände oberhalb des Glases. */
.page-hero--feito .page-hero__figure img { object-position: 62% 30%; }
.page-hero--feito .page-hero__inner::before {
  /* Links die Textspalte + unten eine Bande — so schließt der Blur am Kartenrand ab
     statt mitten über der Artesã zu verlaufen. inset-Überstand, damit am unteren
     Rand kein 1–2px scharfer Streifen stehen bleibt (Blur-Kernel-Rand). */
  inset: -24px 0;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 28%, transparent 52%),
    linear-gradient(0deg, #000 0%, #000 20%, transparent 40%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 28%, transparent 52%),
    linear-gradient(0deg, #000 0%, #000 20%, transparent 40%);
}
.page-hero--feito .page-hero__copy { max-width: 48%; }
/* Zwischengrößen: Titel bricht zweizeilig um — die Kachel wächst mit,
   statt den letzten Listenpunkt abzuschneiden */
.page-hero--feito .page-hero__inner { height: auto; min-height: clamp(320px, 34vw, 440px); }
@media (max-width: 780px) {
  .page-hero--feito .page-hero__figure img { object-position: center top; }
  .page-hero--feito .page-hero__inner { min-height: clamp(360px, 88vw, 470px); }
  .page-hero--feito .page-hero__inner::before {
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 52%);
    mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 52%);
  }
  .page-hero--feito .page-hero__inner::after {
    background: linear-gradient(0deg, rgba(255, 249, 232, 0.9) 0%, rgba(255, 249, 232, 0.5) 28%, rgba(255, 249, 232, 0) 50%);
  }
  .page-hero--feito .page-hero__copy { max-width: 100%; padding: 0.9rem 1.2rem 1.1rem; }
  .page-hero--feito .page-hero__copy h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 0.3rem; }
  .page-hero--feito .page-hero__copy p { font-size: 0.88rem; line-height: 1.4; max-width: 34rem; }
  .page-hero--feito .icon-list { display: none; }
}
@media (max-width: 480px) {
  /* Ganz schmal: nur Kicker + Titel auf dem Glas, damit die Hände frei bleiben */
  .page-hero--feito .page-hero__copy p { display: none; }
  .page-hero--feito .page-hero__copy { padding-bottom: 0.9rem; }
  .page-hero--feito .page-hero__inner::before {
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 20%, transparent 40%);
    mask-image: linear-gradient(0deg, #000 0%, #000 20%, transparent 40%);
  }
  .page-hero--feito .page-hero__inner::after {
    background: linear-gradient(0deg, rgba(255, 249, 232, 0.88) 0%, rgba(255, 249, 232, 0.45) 20%, rgba(255, 249, 232, 0) 40%);
  }
}

/* Mobil: Bildausschnitt auf das Motiv legen — die wandernde Frau (O que fazer)
   und die Häuser (Onde Ficar) sitzen rechts im Bild */
@media (max-width: 780px) {
  body[data-section="fazer"] .page-hero__figure img { object-position: 71% center; }
  body[data-section="ficar"] .page-hero__figure img { object-position: 82% center; }
}

/* ---------- Partner-Banner (Seja um artesão parceiro) ----------
   Foto läuft vollflächig hinter dem Banner, die Einladung sitzt links
   auf einem halbseitigen Milchglas (wie beim Seiten-Hero). Rechts bleibt
   das Bild mit den Handwerksstücken gestochen scharf. Bewusst flach gehalten. */
.partner-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  align-items: stretch; min-height: clamp(160px, 16vw, 200px);
  background: linear-gradient(180deg, #FFFDF8, #FBF4E6);
  border: 2px solid color-mix(in srgb, var(--sec, var(--palm-500)) 62%, #fff);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}
.partner-band__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.partner-band__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 60%;
}
/* Halbseitiges Milchglas hinter dem Text, läuft per Maske weich nach rechts aus */
.partner-band::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: rgba(255, 249, 232, 0.42);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
}
/* Sanfter Verlauf, damit die Schrift links ruhig aufliegt */
.partner-band::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 249, 232, 0.72) 0%, rgba(255, 249, 232, 0.4) 34%, rgba(255, 249, 232, 0) 60%);
}
.partner-band__stamp {
  position: absolute; right: 1.1rem; top: 0.9rem; z-index: 2;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; line-height: 1;
  color: var(--sec-ink, var(--palm-700));
  background: rgba(255, 253, 248, 0.94);
  padding: 0.4rem 0.85rem 0.45rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(84, 56, 34, 0.18);
  transform: rotate(3deg);
}
.partner-band__body {
  position: relative; z-index: 2;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) clamp(1.2rem, 0.9rem + 1.6vw, 2.2rem);
  display: flex; flex-direction: column; justify-content: center;
}
.partner-band__hand,
.partner-band h2,
.partner-band__lead {
  text-shadow: 0 1px 12px rgba(255, 249, 232, 0.95), 0 0 3px rgba(255, 249, 232, 0.85);
}
.partner-band__hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); line-height: 1;
  color: var(--hibisco-dark); margin-bottom: 0.3rem;
}
.partner-band h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 700;
  line-height: 1.05; margin-bottom: 0.4rem;
}
.partner-band h2 span { color: var(--sec-ink, var(--palm-700)); }
.partner-band h2::after {
  content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 0.45rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--sec, var(--palm-500)), var(--sol));
}
.partner-band__lead {
  color: var(--ink-700); font-weight: 600; font-size: var(--fs-small);
  line-height: 1.4; max-width: 46ch; margin-bottom: 0.7rem;
}
.partner-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.partner-band__actions .exp-btn { margin: 0; }
@media (max-width: 780px) {
  /* Mobil: Text liegt ebenfalls im Bild, das Milchglas deckt die ganze Fläche;
     Schrift eine Stufe kleiner, damit alles auf einen Blick passt */
  .partner-band { grid-template-columns: 1fr; min-height: 0; }
  /* Bild nach links geschoben, damit Korb, Keramik und Monstera-Bild rechts sichtbar bleiben.
     Milchglas nur hinter Überschrift und Einleitung; der Button liegt auf dem klaren
     Bild, sodass die Handwerksstücke durchscheinen. */
  .partner-band__media img { object-position: 100% 62%; }
  .partner-band::before {
    background: rgba(255, 249, 232, 0.32);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    /* Läuft diagonal von links oben aus: rechts oben bleibt das Foto frei */
    -webkit-mask-image: linear-gradient(118deg, #000 0%, #000 30%, rgba(0, 0, 0, 0.4) 50%, transparent 66%);
    mask-image: linear-gradient(118deg, #000 0%, #000 30%, rgba(0, 0, 0, 0.4) 50%, transparent 66%);
  }
  .partner-band::after {
    background: linear-gradient(118deg, rgba(255, 249, 232, 0.5) 0%, rgba(255, 249, 232, 0.22) 36%, rgba(255, 249, 232, 0) 58%);
  }
  .partner-band__stamp { display: none; }
  /* Unten bleibt ein freier Bildstreifen, in dem Keramik, Colares und Stoffe zu sehen sind */
  .partner-band__body { padding: 0.9rem 1rem 3.4rem; }
  .partner-band__hand { font-size: 1.1rem; margin-bottom: 0.25rem; }
  .partner-band h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
  .partner-band h2::after { width: 3rem; height: 3px; margin-top: 0.35rem; }
  .partner-band__lead { font-size: 0.86rem; max-width: 60%; margin-bottom: 0.55rem; }
  .partner-band__actions .exp-btn { font-size: 0.78rem; }
}