/* ============================================================
   MOMENTS Mallorca Massage
   Eine Stilquelle für alle neun Seiten. Kein Build-Schritt.
   ============================================================ */

/* ---------- Schriften: selbst gehostet, keine Fremdanfragen ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:         #17120F;
  --ink-soft:    #2E2620;
  --sand:        #F5F0E8;
  --sand-alt:    #EFE8DC;
  --sand-card:   #FBF8F3;
  --line:        #D6CCBC;
  --text:        #2E2823;
  --text-muted:  #6F6559;
  --text-faint:  #736754;   /* AA auf Sand: 4,88:1 */
  --cream:       #F3EADC;
  --cream-muted: #CDBFAC;
  --brass:       #C2A278;
  --brass-lift:  #D2B48C;   /* .btn:hover — gehoert in den Token-Block,
                               sonst driftet es bei Palettenaenderungen weg */
  --brass-deep:  #7D6032;   /* Akzent auf HELL, AA: 5,15:1 */
  --star:        #836227;   /* Sterne auf HELL, AA: 4,95:1 */

  --maxw:   1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Kurze Seiten wie das Impressum sind niedriger als hohe Bildschirme.
     Ohne diese drei Zeilen endet die dunkle Fussleiste mitten im Bild und
     darunter zeigt sich Sand. Flex plus min-height druecken sie ans Ende. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Fokus: immer sichtbar ----------
   Messing auf hellem Grund erreicht nur 1,97:1 — WCAG 2.1 SC 1.4.11 verlangt
   für Bedienelement-Umrisse 3:1. Der Ring wechselt deshalb mit dem Untergrund:
   Tinte auf Hell (12,8:1), Messing auf Dunkel (7,7:1). Besonders wichtig bei
   fokussiertem .btn — die Schaltfläche ist selbst messingfarben, ein
   messingfarbener Ring wäre dort praktisch unsichtbar. */
:root { --focus: var(--ink); }

/* Auf dunklem Grund kehrt sich die Anforderung um: dort brauchen dieselben
   Rollen HELLERE Werte. Ein einziger Farbwert kann beide Welten nicht
   bedienen — dunkler hilft auf Sand und schadet auf Tinte. Deshalb sind
   Akzent, Sterne und Fokusring kontextabhaengig statt fest. */
.hero, .sec--dark, .site-header, .site-footer {
  --focus:       var(--brass);
  --brass-deep:  #B08D57;   /* auf Tinte: 6,01:1 */
  --star:        #C79A4B;   /* auf Tinte: 7,22:1 */
  --text-faint:  #A2957F;   /* auf Tinte: 5,05:1 */
  /* Auch die beiden Fließtext-Token kippen mit. Ohne sie fällt jede
     Komponente, die var(--text) oder var(--text-muted) verwendet und nicht
     eigens für Dunkel gedoppelt wurde, lautlos auf den Hell-Wert zurück —
     .btn--ghost im Hero landete so bei 1,28:1. Die Token hier mitzuführen
     ist die Regel, die diesen Fehler strukturell verhindert, statt ihn in
     jeder neuen Komponente einzeln abfangen zu müssen. */
  --text:        var(--cream);
  --text-muted:  var(--cream-muted);
  --line:        rgba(226, 214, 196, .18);
}

/* Notausgang: eine helle Fläche innerhalb einer dunklen Sektion (etwa eine
   Karte auf dunklem Grund) setzt die Token zurück. Ohne das erbte sie die
   Dunkel-Werte und wäre auf ihrem hellen Grund unlesbar. */
.on-light {
  --focus:       var(--ink);
  --brass-deep:  #7D6032;
  --star:        #836227;
  --text-faint:  #736754;
  --text:        #2E2823;
  --text-muted:  #6F6559;
  --line:        #D6CCBC;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout ---------- */
/* main waechst, damit die Fussleiste unten bleibt (siehe body). */
main { flex: 1 0 auto; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: clamp(3.5rem, 9vw, 7rem); }
/* Die Kopfzeile steht fest ueber dem Inhalt. Ohne scroll-margin-top landet
   jeder Ankersprung aus der Navigation rund 66 px zu hoch, und die
   Sektionsueberschrift verschwindet dahinter. Gilt fuer jedes Sprungziel. */
[id] { scroll-margin-top: 5.5rem; }
.sec--alt  { background: var(--sand-alt); }
.sec--dark { background: var(--ink); color: var(--text); }
/* .lab weicht bewusst ab: auf Dunkel traegt der Messingakzent das Kleinlabel,
   nicht der gedaempfte Textton. .lead und .rule brauchen keine Sonderregel
   mehr — --text-muted und --line kippen oben bereits mit dem Kontext. */
.sec--dark .lab { color: var(--brass-deep); }

/* Dunkle Sektion mit abgedunkeltem Hintergrundbild */
.sec--bg { position: relative; overflow: hidden; isolation: isolate; }
.sec--bg > .sec__bg { position: absolute; inset: 0; z-index: -1; }
/* Dieselbe Falle wie im Hero: <picture> steht als zusaetzlicher Kasten zwischen
   .sec__bg und <img>. Ohne eigene Hoehe bleibt sie auto, das height:100% des
   Bildes findet dann keinen definiten Bezug und faellt selbst auf auto zurueck.
   Das Bild stuende in seinem eigenen Seitenverhaeltnis, object-fit liefe ins
   Leere und der untere Teil der Sektion haette gar kein Hintergrundbild. */
.sec--bg > .sec__bg picture { display: block; width: 100%; height: 100%; }
.sec--bg > .sec__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.sec--bg > .sec__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--ink) 0%, rgba(23, 18, 15, .72) 38%, rgba(23, 18, 15, .88) 100%);
}

/* ---------- Typografie ---------- */
.lab {
  font-size: .688rem;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
  font-weight: 400;
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -.008em;
}
.display--sm { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.lead {
  color: var(--text-muted);
  max-width: 62ch;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
}
.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.44;
  color: var(--text);
  max-width: 30ch;
}
.qsrc {
  font-size: .688rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1rem;
}
.rule { height: 1px; background: var(--line); border: 0; margin-block: 2.4rem; }

/* Sternebewertung */
.stars { color: var(--star); letter-spacing: .12em; }

/* ---------- Bedienelemente ---------- */
.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--ink);
  font-weight: 500;
  font-size: .813rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  text-align: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--brass-lift); }
.btn:active { transform: translateY(1px); }
.btn--block { display: block; width: 100%; }

.btn--ghost {
  display: inline-block;
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.btn--ghost:hover { color: var(--text); border-color: var(--brass-deep); }
/* Der Rahmen laeuft auf Dunkel jetzt ueber --line (.18) statt frueher .28 —
   eine Spur dezenter. Bewusst so belassen: die Linie ist rein dekorativ, der
   Link wird ueber seinen Text mit 10,31:1 erkannt. Eine Sonderregel dafuer
   waere genau die Doppelung, die dieser Umbau beseitigt hat. */
/* Gilt jetzt fuer jeden dunklen Kontext, auch fuer den Hero — der traegt
   .sec--dark nicht. Genau daran ist der Ghost-Link zuvor gescheitert. */
.hero .btn--ghost:hover, .sec--dark .btn--ghost:hover { border-color: var(--brass); }

/* ---------- Hilfsklassen ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gutter); top: -100vh; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: .9rem 1.4rem; text-decoration: none; font-size: .875rem;
}
.skip:focus { top: 1rem; }

/* ---------- Scroll-Einblendung ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Ohne JavaScript ist alles sofort sichtbar — die Seite darf nicht leer bleiben. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Kopfzeile
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--cream);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease);
}
/* Wird von site.js gesetzt, sobald der Hero verlassen ist. */
/* Ohne JavaScript wird .is-stuck nie gesetzt — die Kopfzeile bliebe
   transparent und die cremefarbene Navigation stuende auf hellem Grund.
   Deshalb bekommt sie im no-js-Fall denselben Hintergrund fest. */
.no-js .site-header,
.site-header.is-stuck {
  background: rgba(23, 18, 15, .92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.15rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.site-header__mark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .3em; text-indent: .3em;
  text-decoration: none;
  margin-right: auto;
}
.nav__list { display: flex; gap: 1.9rem; }
.nav a {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--cream-muted);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--cream); }

.langbar { display: flex; gap: .7rem; font-size: .688rem; letter-spacing: .16em; }
.langbar a { color: var(--cream-muted); text-decoration: none; }
.langbar a:hover { color: var(--cream); }
.langbar [aria-current] { font-weight: 500; color: var(--cream); }

.navtoggle { display: none; width: 26px; padding: .5rem 0; }
.navtoggle__bar { display: block; height: 1px; background: currentColor; margin: 5px 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width: 860px) {
  .navtoggle { display: block; order: 3; }
  .langbar { order: 2; }
  .nav {
    position: fixed; inset: 0; z-index: -1;
    background: var(--ink);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; z-index: 45; }
  /* Der Umschalter muss ueber dem offenen Menue liegen, sonst verdeckt das
     Menue seinen eigenen Schliessen-Knopf und laesst sich auf dem Telefon
     nur ueber Esc oder einen Ankerlink wieder schliessen. */
  .navtoggle { position: relative; z-index: 46; }
  .nav__list { flex-direction: column; gap: 2.2rem; text-align: center; }
  .nav a { font-size: 1rem; letter-spacing: .2em; }
  .navtoggle[aria-expanded="true"] .navtoggle__bar:first-child { transform: translateY(3px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bar:last-child  { transform: translateY(-3px) rotate(-45deg); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;   /* Rueckfall fuer Browser ohne svh */
  min-height: 100svh;  /* svh beruecksichtigt die einblendende Adressleiste */
  display: flex; align-items: flex-end;
  background: var(--ink);
  color: var(--text);   /* kippt im Hero-Kontext auf --cream, eine Quelle */
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -1;
  /* Miniatur des Hero-Motivs (12 x 16 px), von der CSS-Engine als weiche
     Farbflaeche hochskaliert — sie fuellt den Hero, bis das eigentliche Bild
     geladen ist. Kostet 1055 Byte und keinen zusaetzlichen Request.
     Neu erzeugen: sips -Z 16 auf hero-sunset-480.jpg, dann die APP1/APP2-
     Segmente strippen (sips schreibt rund 900 B EXIF und ICC in die Datei —
     ungestrippt waere die Zeichenkette mehr als doppelt so lang), zuletzt
     base64 -i. Siehe .superpowers/sdd/task-5-report.md. */
  background: #3a2a20 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/wAARCAAQAAwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwACAgICAgIDAgIDBQMDAwUGBQUFBQYIBgYGBgYICggICAgICAoKCgoKCgoKDAwMDAwMDg4ODg4PDw8PDw8PDw8P/9sAQwECAgIEBAQHBAQHEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/90ABAAB/9oADAMBAAIRAxEAPwD1b4V+PfDHh0eIT8Sb61htWuB/Y4WE7mtlXndt/izjhjmvLfFv7QHwJm124ZJrkAHHyQrt49MsDXlUXxE8UeALka1otpHexXaGKdp41kjgjx95lZSPpkj611y/Fn4P3Vvby+INKstV1MxL9ouE0+GJXc/NwuOMAivh6mEqUqspOb5Xa2p+kxxSlBKMU310P//Z') center/cover no-repeat;
}
/* <picture> steht als zusaetzlicher Kasten zwischen .hero__media und <img>.
   Ohne eigene Hoehe bleibt sie auto, das height:100% des Bildes findet dann
   keinen definiten Bezug und faellt selbst auf auto zurueck. Das Bild stand
   damit in seinem eigenen Seitenverhaeltnis (1606 statt 800 px) und ragte
   unten aus dem Hero heraus; object-fit und object-position liefen ins Leere,
   weil der Kasten ohnehin schon das Bildverhaeltnis hatte. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 14, 10, .58) 0%,
    rgba(20, 14, 10, .05) 30%,
    rgba(20, 14, 10, .62) 68%,
    var(--ink) 100%);
}
.hero__inner { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

/* Die Wortmarke sitzt mitten im hellsten Teil des Sonnenuntergangs — dort ist
   der Verlauf am durchsichtigsten. Der Textschatten allein reichte nicht:
   gemessen gegen den komponierten Untergrund kam „MALLORCA MASSAGE" in Messing
   auf 2,24:1 mobil und 1,01:1 am Desktop, gefordert sind 4,5:1. Deshalb
   zusaetzlich der Schleier unten. */
.wordmark {
  position: relative;   /* Bezug fuer ::before, auf Desktop von absolute abgeloest */
  z-index: 0;           /* eigener Stapelkontext, damit ::before nur hinter der
                           Wortmarke liegt und nicht hinter dem Hero-Bild */
  text-align: center;
  margin: 0 0 auto;
  text-shadow: 0 1px 3px rgba(23, 18, 15, .55), 0 2px 22px rgba(23, 18, 15, .75);
}
/* Der Schleier. Bewusst sehr gross und flach ausgelegt: je weiter der Verlauf
   laeuft, desto kleiner der Helligkeitssprung je Pixel — eine kleine, kraeftige
   Flaeche haette dieselbe Wirkung, waere aber als dunkler Fleck im Himmel zu
   sehen. So liest er sich als Dunst ueber dem oberen Bilddrittel. Die Breite
   bleibt bei 100 % gedeckelt, damit nie ein waagerechter Rollbalken entsteht. */
.wordmark::before {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(96rem, 100%); height: min(34rem, 118vw);
  background: radial-gradient(closest-side ellipse at 50% 44%,
    rgba(16, 11, 8, .78)   0%,
    rgba(16, 11, 8, .74)  30%,
    rgba(16, 11, 8, .58)  50%,
    rgba(16, 11, 8, .34)  68%,
    rgba(16, 11, 8, .14)  84%,
    rgba(16, 11, 8, 0)   100%);
}
.wordmark__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: .32em; text-indent: .32em;
}
.wordmark__sub {
  display: block;
  font-size: .625rem; letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--brass);
  margin-top: .45rem;
}
/* Auf großen Schirmen sitzt die Wortmarke oben, der Text unten. */
@media (min-width: 861px) {
  .hero { align-items: stretch; }
  .hero__inner { display: flex; flex-direction: column; justify-content: flex-end; }
  .wordmark { position: absolute; left: 0; right: 0; top: clamp(5rem, 12vh, 8rem); }
}

.hero__title { margin-bottom: .9rem; max-width: 15ch; }
.hero__sub { color: var(--cream-muted); margin-bottom: 1.3rem; }
.rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .813rem; color: var(--cream-muted);
  margin-bottom: 1.9rem;
}
.rating a { color: inherit; text-underline-offset: 3px; }
.hero__cta { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
@media (min-width: 620px) {
  .hero__cta { flex-direction: row; align-items: center; gap: 1.8rem; }
  .hero__cta .btn { flex: 0 0 auto; }
}

/* ============================================================
   Versetztes Bildpaar
   ============================================================ */
.duo {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  /* Die vier Masse stehen hier oben, weil die Position des kleinen Bildes aus
     ihnen gerechnet wird — Hoehe und Rahmen duerfen sich nicht auseinander
     entwickeln. */
  --duo-h-gross:   clamp(240px, 42vw, 460px);
  --duo-h-klein:   clamp(100px, 19vw, 185px);
  --duo-rahmen:    clamp(5px, 1.2vw, 10px);
  --duo-ueberhang: clamp(1.5rem, 3vw, 2.5rem);
}
.duo__big { margin: 0 clamp(2.5rem, 9vw, 7rem) 0 0; }
.duo__big img { width: 100%; height: var(--duo-h-gross); object-fit: cover; }
/* Das kleine Bild ragt bewusst unter der Unterkante des GROSSEN Bildes heraus.
   Ueber `bottom` ging das schief: Bezugsrahmen einer absoluten Position ist der
   Polsterkasten von .duo — und in dem steckt auch die Bildunterschrift. Ein
   negatives `bottom` sass deshalb unter der UNTERSCHRIFT und deckte sie zu, bei
   375 px um 43 px. Der Abstand wird darum von oben gerechnet: Unterkante des
   grossen Bildes plus Ueberhang, minus eigener Hoehe und beider Rahmen.
   Das urspruengliche clamp(-1.5rem, -3vw, -2.5rem) war ausserdem wirkungslos:
   bei clamp(MIN, WERT, MAX) mit MIN > MAX gewinnt immer MIN, der Ueberhang
   stand also auf jeder Breite fest bei 1,5rem. Jetzt waechst er wie gedacht. */
.duo__small {
  position: absolute; right: 0;
  top: calc(var(--duo-h-gross) + var(--duo-ueberhang)
            - var(--duo-h-klein) - 2 * var(--duo-rahmen));
  width: clamp(120px, 24vw, 230px);
  margin: 0;
  border: var(--duo-rahmen) solid var(--sand);
}
.duo__small img { width: 100%; height: var(--duo-h-klein); object-fit: cover; }
.duo__cap {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: .688rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
}
.sec--alt .duo__small { border-color: var(--sand-alt); }

/* ============================================================
   Ablauf-Schritte
   ============================================================ */
/* Der Reset in Task 4 setzt nur `ul` zurueck. .steps ist ein `ol` und brachte
   deshalb die Browservorgaben mit: 40 px Einzug links und 1em Aussenabstand
   unten. Die vier Schritte standen damit gegenueber Label, Ueberschrift und
   allem anderen im .wrap um 40 px eingerueckt. Markierungspunkte erzeugt das
   `ol` keine, weil `.step` auf `display: grid` steht und damit kein
   `list-item` mehr ist — `list-style: none` steht trotzdem dabei, damit die
   Liste nicht davon abhaengt, dass die Anzeigeart so bleibt. */
.steps {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  grid-template-columns: clamp(84px, 20vw, 132px) 1fr;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__thumb { overflow: hidden; }
.step__thumb img {
  width: 100%;
  height: clamp(84px, 20vw, 132px);
  object-fit: cover;
}
.step__num {
  font-family: var(--serif);
  font-size: .938rem;
  color: var(--brass-deep);
  margin: 0 0 .35rem;
}
.step__body h3 { margin-bottom: .5rem; }
.step__body .lead { font-size: .938rem; }

@media (min-width: 900px) {
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 3.5rem); }
  .step:nth-child(2) { border-top: 1px solid var(--line); }
  .step:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   René
   ============================================================ */
.portrait { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.portrait img { width: 100%; height: clamp(300px, 58vw, 620px); object-fit: cover; object-position: center 20%; }
.portrait__second { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.portrait__second img { width: 100%; height: clamp(180px, 30vw, 340px); object-fit: cover; }
/* Verhindert, dass die Textspalte im Grid über ihren Anteil hinauswächst. */
.portrait__text { min-width: 0; }

@media (min-width: 900px) {
  [data-sec="rene"] .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* Die Kopfzeile steht fest und ist ab dieser Breite 66 px hoch. top: 6rem
     (96 px) haelt das Portrait knapp 30 px darunter — es heftet sichtbar an
     und verschwindet zu keinem Zeitpunkt hinter der Kopfzeile. */
  .portrait { margin: 0; position: sticky; top: 6rem; }
  .portrait img { height: min(76vh, 700px); }
}

/* ============================================================
   Preise
   ============================================================ */
.prices { margin-top: clamp(2rem, 5vw, 3rem); }
.price {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "body value" "link link";
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.3rem, 3vw, 1.9rem);
  /* --line statt eines fest notierten rgba(226, 214, 196, .18): derselbe Wert,
     aber er kippt mit dem Untergrund mit. Ein fester Cremeton waere auf einer
     hellen Flaeche unsichtbar — genau der Fehler, den der Token verhindert. */
  border-top: 1px solid var(--line);
}
.price:last-of-type { border-bottom: 1px solid var(--line); }
.price__body  { grid-area: body; }
.price__value { grid-area: value; }
.price__link  { grid-area: link; justify-self: start; }

.price__name {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin-bottom: .3rem;
}
.price__dur {
  font-size: .688rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 .5rem;
}
.price__desc { color: var(--text-muted); font-size: .938rem; margin: 0; max-width: 42ch; }
.price__value {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--brass);
  margin: 0; white-space: nowrap;
}
/* Aufbau wie .btn--ghost, und aus demselben Grund ueber --text-muted und
   --line statt ueber feste Cremetoene: auf Dunkel rechnen beide exakt zu den
   Werten, die der Entwurf vorsah, auf Hell bleiben sie lesbar. */
.price__link {
  font-size: .688rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem; margin-top: .5rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.price__link:hover { color: var(--brass); border-color: var(--brass); }

.prices__note {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  font-size: .813rem;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .price {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "body value link";
    align-items: center;
  }
  .price__link { margin-top: 0; }
}

/* ============================================================
   Schlagworte
   ============================================================ */
.tags {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.2rem);
}
.tags li {
  font-size: .688rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-muted);
  padding: .7rem 1.15rem;
}

/* ============================================================
   Panoramaband
   ============================================================ */
/* object-position hoeher als die Mitte: Ab etwa 1280 px schneidet das Band
   sonst oben und unten je rund 180 px weg — und damit genau die Koepfe. */
.band img { width: 100%; height: clamp(140px, 26vw, 330px); object-fit: cover; object-position: center 30%; }

/* ============================================================
   Stimmen
   ============================================================ */
.gbadge {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .875rem; color: var(--text-muted);
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
}
.gbadge a { color: inherit; text-underline-offset: 3px; }

.reviews { display: grid; gap: clamp(.7rem, 2vw, 1.1rem); }
@media (min-width: 800px) { .reviews { grid-template-columns: 1fr 1fr; } }

.review {
  background: var(--sand-card);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3.5vw, 2.1rem);
}
.review blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text);
}
/* Herkunftshinweis unter der Rezensionsliste. Ein Zitat in Anfuehrungszeichen
   behauptet Wortlaut — auf der englischen und spanischen Fassung sind die
   Texte aber uebersetzt, und der Google-Link zwei Zeilen darueber fuehrt zu
   den deutschen Originalen. Das gehoert dazugesagt. */
.reviews__note { margin-top: 1.4rem; }

.review__src {
  margin: 1rem 0 0;
  font-size: .688rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================
   Galerie
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.4rem, 1vw, .7rem);
  padding: clamp(.4rem, 1vw, .7rem);
  background: var(--sand);
}
.gallery__item { overflow: hidden; margin: 0; }
/* Die Kachel ist ein echter <button>. Ohne ihn waere die Vollbildansicht
   per Tastatur gar nicht erreichbar: <li> ist nicht fokussierbar, und die
   Galerie enthielt sonst kein einziges bedienbares Element. Der Button
   bringt Fokussierbarkeit, Enter und Leertaste sowie die Fokusrueckgabe
   beim Schliessen mit — alles ohne eine Zeile JavaScript. */
.gallery__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.gallery__open picture { display: block; width: 100%; height: 100%; }
.gallery__item--wide { grid-column: span 2; }
/* Dieselbe Falle wie im Hero und bei .sec--bg: <picture> steht als
   zusaetzlicher Kasten zwischen Kachel und <img> und hat ohne diese Regel
   keine eigene Hoehe — das height: 100% direkt darunter faende dann keinen
   definiten Bezug und fiele auf auto zurueck.
   Heute aendert die Regel nichts, weil jede der sechs Kacheln weiter unten
   eine eigene Hoehe zugewiesen bekommt, die das height: 100% ueberschreibt
   (nachgemessen bei 320, 375, 768, 1280 und 2560 px: kein Pixel bewegt sich).
   Sie sichert den Fall ab, fuer den das height: 100% ueberhaupt dasteht —
   eine Kachel ohne nth-child-Hoehe, etwa eine siebte. Ohne die Regel fielen
   genau die Kacheln, deren Motiv flacher ist als die Rasterzeile, auf ihr
   eigenes Seitenverhaeltnis zurueck und liessen eine Luecke stehen; in der
   Probe waren das 26 px bei Kachel 2 und 557 px bei Kachel 4. */
.gallery__item picture { display: block; width: 100%; height: 100%; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.gallery__item:hover img { transform: scale(1.035); }
.gallery__item:nth-child(1) img { height: clamp(220px, 45vw, 460px); }
.gallery__item:nth-child(2) img,
.gallery__item:nth-child(3) img { height: clamp(180px, 34vw, 340px); }
.gallery__item:nth-child(4) img,
.gallery__item:nth-child(5) img { height: clamp(130px, 24vw, 240px); }
.gallery__item:nth-child(6) img { height: clamp(220px, 42vw, 420px); }

/* Ohne JavaScript ist die Galerie eine reine Bildstrecke — kein Zoom-Cursor. */
.no-js .gallery__open { cursor: default; }

/* ============================================================
   Vollbildansicht (natives dialog, Steuerung in site.js)
   ============================================================ */
.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
  background: rgba(23, 18, 15, .96);
}
.lightbox::backdrop { background: rgba(23, 18, 15, .9); }
/* Die Huelle nimmt das geklonte picture der Kachel auf. */
.lightbox > div, .lightbox picture { display: block; width: 100%; height: 100%; }
.lightbox img {
  width: 100%; height: 100%; object-fit: contain;
  /* Das Bild fuellt den Dialog vollstaendig aus; object-fit verkleinert nur
     den sichtbaren Inhalt, nicht das Element. Ohne pointer-events: none
     traefe jeder Klick neben dem Motiv immer noch das <img>, und die
     Bedingung e.target === dialog in site.js waere nie wahr — Schliessen
     durch Klick daneben funktionierte also nicht. */
  pointer-events: none;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  color: var(--cream); font-size: 1.6rem; line-height: 1;
  padding: .6rem .9rem;
}

/* ============================================================
   Buchen
   ============================================================ */
/* Der Abschluss bleibt schmaler als der Rest — er soll sich zusammenziehen, nicht ausbreiten. */
.booking { max-width: 52rem; }
.booking__cta { margin-top: clamp(1.8rem, 4vw, 2.6rem); max-width: 26rem; }
/* Linksbuendig wie alles andere im Buchen-Block. Zentriert saesse die Zeile in
   der Mitte des nur 26rem breiten .booking__cta und damit auf einer zweiten,
   um 152 px versetzten Achse neben Ueberschrift und FAQ. */
.booking__alt {
  margin: .9rem 0 0;
  font-size: .875rem; color: var(--cream-muted); text-align: left;
}
.booking__alt a { color: inherit; text-underline-offset: 3px; }
.booking__meta {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  font-size: .875rem; color: var(--cream-muted);
}

/* ============================================================
   FAQ — natives details, kein JavaScript
   ============================================================ */
.faq { margin-top: clamp(2.2rem, 5vw, 3.2rem); max-width: 46rem; }
.faq__item { border-top: 1px solid rgba(226, 214, 196, .18); }
.faq__item:last-child { border-bottom: 1px solid rgba(226, 214, 196, .18); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  font-size: .938rem; color: var(--cream);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.15rem; color: var(--brass);
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { content: '−'; }
.faq__item p {
  margin: 0 0 1.3rem;
  font-size: .938rem; color: var(--cream-muted); max-width: 60ch;
}

/* ============================================================
   Fußzeile
   ============================================================ */
.site-footer { background: var(--ink); color: var(--cream-muted); padding-block: clamp(2.2rem, 5vw, 3rem); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(226, 214, 196, .16);
  padding-top: clamp(1.8rem, 4vw, 2.4rem);
}
.site-footer__mark {
  font-family: var(--serif);
  font-size: 1rem; letter-spacing: .3em; text-indent: .3em;
  color: var(--cream); margin: 0 auto 0 0;
}
.site-footer__mark span {
  display: block;
  font-family: var(--sans);
  font-size: .625rem; letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase; color: var(--brass-deep);
  margin-top: .3rem;
}
.site-footer__links { display: flex; gap: 1.4rem; }
.site-footer__links a {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-muted); text-decoration: none;
}
.site-footer__links a:hover { color: var(--cream); }
.site-footer .langbar { color: var(--cream-muted); }

/* ============================================================
   Rechtsseiten
   ============================================================ */
.legal { padding-top: clamp(6rem, 14vw, 9rem); }
.legal__head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.legal h2 { margin: clamp(2.2rem, 5vw, 3rem) 0 .9rem; }
.legal .lead { max-width: 68ch; }
.legal a { color: var(--text); text-underline-offset: 3px; }

.todo {
  background: #FBF0DC;
  border-left: 3px solid var(--brass-deep);
  padding: 1rem 1.3rem;
  font-size: .875rem;
  color: #6B5730;
  max-width: 68ch;
}