/* =========================================================
   Christian Ledesma-Müller — site.css
   Nachbau des freigegebenen Moodboards (5 Bereiche).
   Maße: Moodboard-Pixel × --s  (bei 1024 px Breite: --s = 1px)

   FOTOS TAUSCHEN: Datei in /assets/img/ gleichnamig ersetzen.
     hero.jpg      Hero – Olivenzweig-Schatten auf heller Wand
     portrait.jpg  About, wird schwarz-weiß dargestellt (IMG_3728)
     concert.jpg   Journey – Konzert
     table.jpg     Perspective – mediterrane Tischszene
     sea.jpg       Connect – Yacht auf dem Meer
   Ausschnitt: am <img> style="--pos: x% y%" anpassen.
   ========================================================= */

@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #151311;
  --night-2: #1b1815;
  --cream: #efe8df;
  --ink: #1d1a17;
  --ink-soft: #3b352f;
  --light: #f3ede5;
  --light-soft: #d9d1c6;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --s: clamp(0.92px, 0.09766vw, 1.5px);
  --gx: calc(78 * var(--s));        /* linke Textkante */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid #c9a27c; outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; background: var(--light); color: var(--ink); z-index: 20; }
.skip:focus { left: 1rem; top: 1rem; }

/* Bildflächen: füllen, beschneiden, nie verzerren */
.ph { position: absolute; inset: 0; overflow: hidden; background: var(--night-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* Typo-Bausteine */
.label { font-family: var(--sans); font-weight: 500; font-size: calc(10 * var(--s)); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: calc(31 * var(--s)); line-height: 1.02; letter-spacing: -.005em; margin: calc(14 * var(--s)) 0 0; }
.rule { display: block; width: calc(33 * var(--s)); height: 1px; background: currentColor; opacity: .55; margin: calc(20 * var(--s)) 0 calc(22 * var(--s)); border: 0; }
.copy p { font-size: calc(15.5 * var(--s)); line-height: 1.32; margin: 0 0 calc(14 * var(--s)); max-width: calc(420 * var(--s)); }

/* ---------- Navigation ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 5; color: var(--light); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: calc(22 * var(--s)) calc(39 * var(--s)) 0 calc(39 * var(--s)); }
.monogram { font-family: var(--serif); font-size: calc(27 * var(--s)); letter-spacing: .01em; text-decoration: none; line-height: 1; }
.nav { display: flex; align-items: center; gap: calc(28 * var(--s)); font-family: var(--sans); font-weight: 500; font-size: calc(9.5 * var(--s)); letter-spacing: .12em; text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav a:hover { opacity: .75; }
.nav .divider { width: 1px; height: calc(20 * var(--s)); background: currentColor; opacity: .7; margin: 0 calc(2 * var(--s)); }
.nav .langs { display: flex; gap: calc(8 * var(--s)); }
.nav .langs span { opacity: .8; }
.nav .langs [aria-current] { text-decoration: none; }

/* ---------- 1 Hero ---------- */
.hero { position: relative; height: calc(405 * var(--s)); color: var(--light); overflow: hidden; }
.hero .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,12,10,.62) 0%, rgba(14,12,10,.38) 38%, rgba(14,12,10,0) 62%),
              linear-gradient(180deg, rgba(14,12,10,.35) 0%, rgba(14,12,10,0) 25%, rgba(14,12,10,0) 70%, rgba(14,12,10,.3) 100%); }
.hero__text { position: relative; z-index: 1; padding: calc(106 * var(--s)) 0 0 var(--gx); }
.hero__name { font-family: var(--sans); font-weight: 500; font-size: calc(10 * var(--s)); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.hero__claim { font-family: var(--serif); font-weight: 400; font-size: calc(57 * var(--s)); line-height: .93; letter-spacing: -.012em; margin: calc(17 * var(--s)) 0 0; }
.hero__claim span { display: block; }
.hero__sub { font-family: var(--serif); font-size: calc(17.5 * var(--s)); margin: calc(20 * var(--s)) 0 0; }
.hero .rule { margin: calc(26 * var(--s)) 0 calc(23 * var(--s)); }

/* ---------- Split-Bereiche (About, Perspective) ---------- */
.split { position: relative; display: grid; grid-template-columns: 490fr 534fr; background: var(--cream); }
.split .media { position: relative; }
.split .panel { padding: calc(44 * var(--s)) calc(50 * var(--s)) calc(30 * var(--s)) calc(50 * var(--s)); color: var(--ink); }
.split .panel .label { color: var(--ink-soft); }
.split .copy p { color: #2c2722; }
.about { min-height: calc(338 * var(--s)); }
.about .ph img { filter: grayscale(1) contrast(1.06) brightness(.98); }
.perspective { min-height: calc(280 * var(--s)); }
.perspective .panel { padding-top: calc(40 * var(--s)); }
.perspective .copy p { color: #4a443d; max-width: calc(440 * var(--s)); }

/* ---------- 3 Journey ---------- */
.journey { position: relative; min-height: calc(305 * var(--s)); background: var(--night); color: var(--light); overflow: hidden; }
.journey .ph { left: 40%; }
.journey .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(21,19,17,.55) 22%, rgba(21,19,17,0) 55%); }
.journey__text { position: relative; z-index: 1; padding: calc(25 * var(--s)) 0 calc(24 * var(--s)) var(--gx); }
.journey .h2 { font-size: calc(33 * var(--s)); }
.journey .copy p { color: var(--light-soft); max-width: calc(420 * var(--s)); }
.btn { display: inline-block; margin-top: calc(10 * var(--s)); padding: calc(9 * var(--s)) calc(25 * var(--s)); border: 1px solid rgba(243,237,229,.75); font-family: var(--sans); font-weight: 500; font-size: calc(9.5 * var(--s)); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.btn:hover { background: rgba(243,237,229,.08); }

/* ---------- 5 Connect ---------- */
.connect { position: relative; min-height: calc(206 * var(--s)); background: var(--night); color: var(--light); overflow: hidden; }
.connect .ph { left: 45%; }
.connect .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(21,19,17,0) 45%); }
.connect__text { position: relative; z-index: 1; padding: calc(22 * var(--s)) 0 calc(18 * var(--s)) var(--gx); }
.connect .h2 { margin-top: calc(10 * var(--s)); }
.connect .rule { margin: calc(18 * var(--s)) 0 calc(24 * var(--s)); }
.social { list-style: none; display: flex; gap: calc(34 * var(--s)); margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; gap: calc(14 * var(--s)); font-family: var(--sans); font-size: calc(10.5 * var(--s)); letter-spacing: .04em; text-decoration: none; }
.social a:hover { opacity: .75; }
.social svg { width: calc(21 * var(--s)); height: calc(21 * var(--s)); flex: none; }
.site-footer { margin-top: calc(34 * var(--s)); font-family: var(--sans); font-size: calc(8.5 * var(--s)); letter-spacing: .02em; color: rgba(243,237,229,.6); display: flex; flex-wrap: wrap; gap: 0 calc(12 * var(--s)); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--light); }
.site-footer .sep { opacity: .7; }

/* ---------- Smartphone / schmale Fenster ---------- */
@media (max-width: 820px) {
  :root { --s: 1.06px; --gx: 22px; }
  .site-header .bar { padding: 20px 22px 0; }
  .nav .sec, .nav .divider { display: none; }
  .nav { font-size: 11px; }
  .hero { height: auto; min-height: min(92svh, 760px); display: flex; align-items: flex-end; }
  .hero .ph img { object-position: var(--pos-m, 50% 30%); }
  .hero .ph::after { background: linear-gradient(180deg, rgba(14,12,10,.4) 0%, rgba(14,12,10,0) 22%, rgba(14,12,10,0) 42%, rgba(14,12,10,.82) 100%); }
  .hero__text { padding: 0 22px 44px; }
  .hero__claim { font-size: 50px; }
  .split { grid-template-columns: 1fr; }
  .split .media { aspect-ratio: 4 / 3; }
  .split .panel { padding: 40px 22px 40px; }
  .copy p { font-size: 17px; max-width: none; }
  .journey { display: flex; flex-direction: column; }
  .journey .ph { position: relative; left: 0; aspect-ratio: 4 / 3; order: -1; }
  .journey .ph::after { background: linear-gradient(180deg, rgba(21,19,17,0) 55%, var(--night) 100%); }
  .journey__text { padding: 8px 22px 44px; }
  .connect { display: flex; flex-direction: column; }
  .connect .ph { left: 0; opacity: .55; }
  .connect .ph::after { background: linear-gradient(180deg, rgba(21,19,17,.2), var(--night) 95%); }
  .connect__text { padding: 44px 22px 30px; }
  .social { flex-wrap: wrap; gap: 18px 28px; }
  .social a { font-size: 13px; }
  .site-footer { font-size: 11px; line-height: 1.8; }
}

/* ---------- Rechtstexte ---------- */
.page-legal { background: var(--cream); color: var(--ink); }
.page-legal .site-header { position: static; color: var(--ink); background: var(--cream); }
.legal { max-width: 46rem; margin: 0 auto; padding: 3rem 22px 5rem; font-size: 1.1rem; line-height: 1.55; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 2rem; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 2.2rem 0 .6rem; }
.legal p { margin: 0 0 1em; }
.page-legal .legal-footer { max-width: 46rem; margin: 0 auto; padding: 1.5rem 22px 3rem; border-top: 1px solid #d6cbb9; font-family: var(--sans); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: #6e665b; }
.page-legal .legal-footer a { text-decoration: none; }

/* Feinabgleich mit Moodboard-Maßen */
.copy p:last-child { margin-bottom: 0; }
.split .panel { padding-bottom: calc(24 * var(--s)); }
.journey .h2 { line-height: .95; }
.journey .rule { margin: calc(12 * var(--s)) 0 calc(14 * var(--s)); }
.journey .btn { margin-top: calc(12 * var(--s)); }
.perspective .copy p { max-width: calc(415 * var(--s)); }
@media (max-width: 820px) {
  .split .panel { padding-bottom: 44px; }
  .journey .rule { margin: 16px 0 18px; }
}

/* Hero auf heller Olivenschatten-Wand: dunkle Schrift */
.hero, .hero ~ * { }
body:not(.page-legal) .site-header { color: var(--ink); }
.hero { color: var(--ink); background: var(--cream); }
.hero .ph { background: var(--cream); }
.hero .ph::after { background: linear-gradient(90deg, rgba(239,232,223,.55) 0%, rgba(239,232,223,.2) 40%, rgba(239,232,223,0) 60%); }
.hero__sub { color: var(--ink-soft); }
.hero .label { color: var(--ink-soft); }
@media (max-width: 820px) {
  .hero .ph::after { background: linear-gradient(180deg, rgba(239,232,223,0) 35%, rgba(239,232,223,.85) 82%); }
}
.hero .ph::after { background: linear-gradient(180deg, rgba(239,232,223,.78) 0%, rgba(239,232,223,0) 19%), linear-gradient(90deg, rgba(239,232,223,.55) 0%, rgba(239,232,223,.2) 40%, rgba(239,232,223,0) 60%); }
@media (max-width: 820px) {
  .hero .ph::after { background: linear-gradient(180deg, rgba(239,232,223,.7) 0%, rgba(239,232,223,0) 14%, rgba(239,232,223,0) 35%, rgba(239,232,223,.88) 80%); }
}

/* Textergänzungen 22.10.2026: AT A GLANCE (Journey) und Unterzeile (Perspective) */
.journey .copy p { max-width: calc(440 * var(--s)); }
.journey__text { padding-bottom: calc(30 * var(--s)); }
.facts { margin: calc(26 * var(--s)) 0 calc(4 * var(--s)); max-width: calc(440 * var(--s)); }
.facts .label { color: var(--light); opacity: .9; margin-bottom: calc(12 * var(--s)); }
.facts dl { margin: 0; border-top: 1px solid rgba(243,237,229,.22); }
.facts dl > div { display: grid; grid-template-columns: calc(110 * var(--s)) 1fr; gap: calc(14 * var(--s)); padding: calc(8 * var(--s)) 0; border-bottom: 1px solid rgba(243,237,229,.22); }
.facts dt { font-family: var(--sans); font-weight: 500; font-size: calc(9 * var(--s)); letter-spacing: .14em; text-transform: uppercase; color: var(--light-soft); padding-top: calc(3 * var(--s)); }
.facts dd { margin: 0; font-family: var(--serif); font-size: calc(14.5 * var(--s)); color: var(--light); }
.journey .btn { margin-top: calc(22 * var(--s)); }
.subline { font-family: var(--serif); font-style: italic; font-size: calc(17 * var(--s)); color: var(--ink-soft); margin: calc(8 * var(--s)) 0 0; }
.about .panel { padding-bottom: calc(34 * var(--s)); }
.perspective .panel { padding-bottom: calc(34 * var(--s)); }
@media (max-width: 820px) {
  .facts { max-width: none; }
  .facts dl > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .facts dt { font-size: 10px; }
  .facts dd { font-size: 16px; }
  .subline { font-size: 18px; }
}