/* Variante D – REY DEL MAR · Mediterranean Artist
   Basis A (Editorial, Cormorant + Inter) · Kino-Hero und Petrol-Musik aus B · Weißraum/Biografie aus C
   Ziel: ca. 55–60 % helle Flächen. Rot kommt ausschließlich über die Fotografie (Gitarre), nie als UI-Fläche. */
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--f-display:"Cormorant Garamond",Georgia,serif;--f-text:"Inter",system-ui,sans-serif;--w-display:500;--display-tracking:-.008em;--radius:1px;--section:clamp(5rem,11vw,10rem)}
body{font-size:1.02rem}
.display,.lead,.statement{text-wrap:balance}
.section-title{font-size:clamp(2.5rem,5.4vw,4.8rem)}
.lead{font-weight:400}

/* ---------- Hero · cinematic, Text links / Motiv rechts ---------- */
.hero-split{justify-content:flex-start;text-align:left;align-items:center;min-height:max(100svh,640px)}
.hero-split .hero-content{width:100%;max-width:var(--wrap);margin:0 auto;padding:8rem var(--gutter) 6rem}
.hero-split .wordmark{font-size:clamp(3rem,8.2vw,8rem);letter-spacing:.07em;margin-right:0;white-space:nowrap}
.hero-split .hero-name{margin:1.8rem 0 0;letter-spacing:.46em}
.hero-split .hero-claim{margin:1rem 0 0;letter-spacing:.24em}
.hero-split .enter{margin-top:3rem;align-items:flex-start}
.hero-split .hero-shade{background:
  linear-gradient(90deg,rgba(13,12,11,.86) 0%,rgba(13,12,11,.62) 34%,rgba(13,12,11,.12) 68%,rgba(13,12,11,.05) 100%),
  linear-gradient(0deg,rgba(18,48,58,.55) 0%,rgba(18,48,58,0) 38%),
  linear-gradient(180deg,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 22%)}
.hero-split .hero-media .ph{--ph-a:#2a2723;--ph-b:#1b2a2e;--tint:#2b6574}
.hero-split .hero-media .ph-label{left:auto;right:var(--gutter);text-align:right;bottom:2.2rem}
/* Kompositionshilfe: wo später das Motiv steht */
.hero-split .hero-media .ph::before{content:"MOTIV · ARTIST";position:absolute;z-index:1;top:16%;bottom:14%;right:9%;width:30%;border:1px dashed rgba(243,236,225,.2);display:flex;align-items:flex-start;justify-content:flex-end;padding:.8rem;font:600 .62rem/1 var(--f-text);letter-spacing:.3em;color:rgba(243,236,225,.35)}
@media (max-width:760px){
  .hero-split{align-items:flex-end;min-height:max(100svh,600px)}
  .hero-split .hero-content{padding:0 var(--gutter) 5.5rem}
  .hero-split .wordmark{font-size:11.2vw;letter-spacing:.045em}
  .hero-split .hero-name{font-size:.72rem;letter-spacing:.38em;margin-top:1.2rem}
  .hero-split .hero-claim{font-size:.92rem;letter-spacing:.16em}
  .hero-split .hero-shade{background:linear-gradient(0deg,rgba(13,12,11,.92) 0%,rgba(13,12,11,.6) 38%,rgba(13,12,11,.1) 66%),linear-gradient(180deg,rgba(13,12,11,.5),transparent 25%)}
  .hero-split .hero-media .ph::before{top:24%;bottom:44%;right:20%;width:60%}
  .hero-split .hero-media .ph-label{top:5.2rem;bottom:auto;left:var(--gutter);right:var(--gutter);text-align:left}
  .hero-split .hero-media .ph-spec{font-size:.66rem}
  .hero-split .hero-media .ph-corner{display:none}
}

/* ---------- Artist Story · hell, großzügig ---------- */
.story{padding:calc(var(--section) * 1.15) 0}
.story-grid{gap:clamp(2.5rem,7vw,7.5rem)}
@media (min-width:900px){.story-grid{grid-template-columns:7fr 5fr}}
.story .section-title{font-size:clamp(3rem,6.6vw,6.2rem)}
.story-intro{font-size:1.1rem;max-width:30rem}

/* ---------- Signature Guitar · Limestone, Instrument-Porträt ---------- */
.signature{padding:calc(var(--section) * 1.1) 0}
@media (min-width:900px){.sig-grid{grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,6rem)}.sig-media{order:2}.sig-text{order:1}}
.sig-photo{aspect-ratio:4/5}
.sig-photo{--ph-a:#d3c5ad;--ph-b:#c7b69c}
.sig-text .section-title{font-size:clamp(2.6rem,5.2vw,4.8rem);margin-bottom:1.6rem}
.sig-facts{margin-top:1rem;max-width:32rem}
.sig-facts>div{grid-template-columns:minmax(9rem,38%) 1fr}

/* Live-Foto zwischen Story und Musik: kinoartig breit */
.photo.tone-night .ph.wide,.photo.tone-night .pic.wide{aspect-ratio:16/9}
@media (max-width:700px){.photo.tone-night .ph.wide,.photo.tone-night .pic.wide{aspect-ratio:4/5}}

/* ---------- Musik · Deep Mediterranean ---------- */
.music .feat-rel{align-items:center}
.feat-rel-title{font-size:clamp(2.8rem,6.4vw,6rem)}
.music .btn.primary{background:var(--ink-l);color:var(--sea);border-color:var(--ink-l)}
.rel-gallery .rel-tile h3{margin-top:1rem}
.gallery-head{margin:clamp(4rem,8vw,7rem) 0 0}
.gallery-head + .rel-gallery{margin-top:2rem}

/* ---------- Live · reduziert, große Daten ---------- */
.gig{grid-template-columns:10rem 1fr 1.3fr auto;padding:2rem 0}
.gig-date .d{font-size:clamp(3rem,5.4vw,4.6rem);font-weight:400}
.gig-city{font-size:clamp(1.5rem,2.4vw,2rem)}
.gig-photo,.skeleton-wrap + .ph,.skeleton-wrap + .pic{margin:2rem 0}
.live-section .ph.wide,.live-section .pic.wide{aspect-ratio:21/8}
@media (max-width:700px){.live-section .ph.wide,.live-section .pic.wide{aspect-ratio:4/5}}

/* ---------- Magazin · Featured + asymmetrisches Raster ---------- */
.mag-feature{gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.mag-feature{grid-template-columns:8fr 4fr}}
.mag-feature .mag-title{font-size:clamp(2.4rem,4.6vw,4.2rem)}
@media (min-width:900px){
  .mag-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:4rem 2.5rem;align-items:start}
  .mag-card:nth-child(4n+1){grid-column:1/8}
  .mag-card:nth-child(4n+2){grid-column:9/13;margin-top:8rem}
  .mag-card:nth-child(4n+3){grid-column:3/7}
  .mag-card:nth-child(4n+4){grid-column:8/13;margin-top:-4rem}
  .mag-card:nth-child(4n+1) .mag-title{font-size:clamp(1.9rem,3vw,2.6rem)}
}

/* ---------- Unterseiten ---------- */
.pagehead{padding-top:clamp(5rem,10vw,8rem)}
.hubhead{padding:clamp(4rem,8vw,7rem) 0}
.releasehead .btn.primary{background:var(--ink-l);color:var(--sea);border-color:var(--ink-l)}

/* ---------- Biografie · Kulturmagazin-Porträt (Einfluss C) ---------- */
.biohead .page-title{font-size:clamp(3rem,8vw,7.2rem)}
.bio-hero .ph.wide,.bio-hero .pic.wide{aspect-ratio:16/9}
@media (max-width:700px){.bio-hero .ph.wide,.bio-hero .pic.wide{aspect-ratio:4/5}}
.chapter{padding:clamp(4rem,9vw,8rem) 0}
.chapter-title{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.chapter .prose{max-width:36rem;font-size:1.06rem}
.bio-quote{padding:clamp(5rem,11vw,10rem) 0}
.bio-quote .pull{font-style:italic;font-weight:400;font-size:clamp(2.2rem,5vw,4.4rem);max-width:20ch}

/* ---------- Footer · cinematic mit Meer ---------- */
.site-footer.has-media{position:relative;isolation:isolate;padding-top:clamp(16rem,30vw,28rem)}
.footer-media{position:absolute;inset:0;z-index:-2}
.footer-media .ph{--ph-a:#10262d;--ph-b:#0d1a1e;--tint:#2b6574}
.footer-media .ph-label{top:2rem;bottom:auto}
.footer-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,12,11,.1) 0%,rgba(13,12,11,.55) 45%,rgba(13,12,11,.95) 78%)}
.footer-mark{font-weight:400;letter-spacing:.08em}

/* Featured Release: Cover dominiert */
@media (min-width:900px){.feat-rel{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(3rem,5vw,5rem)}}

/* =====================================================================
   ECHTE FOTOGRAFIE (Variante D)
   ===================================================================== */
/* Hero mit Foto: Bild rechts, Verlauf nur auf der Textseite, keine globale Abdunkelung */
.hero-split.has-photo{background:var(--charcoal)}
.hero-split.has-photo .hero-media{left:auto;right:0;width:60%}
.hero-split.has-photo .hero-media .pic{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.hero-split.has-photo .hero-shade{background:
  linear-gradient(90deg,var(--charcoal) 0%,var(--charcoal) 40%,rgba(22,20,18,.7) 46%,rgba(22,20,18,0) 58%),
  linear-gradient(180deg,rgba(13,12,11,.5) 0%,rgba(13,12,11,0) 16%)}
.hero-split.has-photo .hero-content{max-width:var(--wrap)}
.hero-split.has-photo .wordmark{font-size:clamp(3rem,4.7vw,5.6rem);letter-spacing:.06em}
.hero-split.has-photo .hero-content > *{max-width:40vw}
@media (max-width:760px){
  .hero-split.has-photo{display:block;min-height:0;padding:0}
  .hero-split.has-photo .hero-media{position:relative;inset:auto;width:100%;aspect-ratio:4/5}
  .hero-split.has-photo .hero-shade{bottom:auto;height:calc(100vw * 1.25);background:linear-gradient(180deg,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 20%,rgba(13,12,11,0) 72%,var(--charcoal) 100%)}
  .hero-split.has-photo .hero-content{padding:1.8rem var(--gutter) 4rem}
  .hero-split.has-photo .hero-content > *{max-width:none}
  .hero-split.has-photo .wordmark{font-size:11.2vw}
}

/* Musiker (Bild 3) – dunkle Bühne, großes Bild */
.musician{padding:0}
.mus-grid{display:grid;align-items:center;gap:clamp(2.5rem,6vw,6rem);max-width:none;padding:0}
@media (min-width:900px){.mus-grid{grid-template-columns:7fr 5fr}.mus-text{padding-right:var(--gutter)}}
@media (max-width:899px){.mus-text{padding:0 var(--gutter) var(--section)}}
.mus-media .pic,.mus-media .ph{border-radius:0}
.mus-intro{font-size:1.1rem;max-width:30rem;color:var(--muted)}

/* Manifest (Bild 1) – hell, Zitat neben großem Porträt */
.manifesto{padding:var(--section) 0}
.man-grid{display:grid;align-items:center;gap:clamp(2.5rem,6vw,6rem)}
@media (min-width:900px){.man-grid{grid-template-columns:6fr 6fr}}
.man-text .pull{font-style:italic;font-weight:400;font-size:clamp(2rem,4vw,3.6rem)}

/* Künstlerprofil: Gitarren-Detail nicht über Master-Auflösung hinaus aufziehen */
.layout-hub .photo.tone-night{padding:clamp(3rem,6vw,5rem) var(--gutter)}
.layout-hub .photo .pic.wide{max-width:1100px;margin:0 auto}
.musician.tone-night{--bg:#060606;background:#060606}
.layout-hub .photo.tone-night .pic.wide{aspect-ratio:21/9}
/* Release-Titel nie mitten im Wort trennen */
.feat-rel-title,.releasehead .page-title{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}
.feat-rel-title{font-size:clamp(2.3rem,3.8vw,4.1rem)}
.releasehead .page-title{font-size:clamp(2.3rem,4.4vw,5rem)}

/* =====================================================================
   FLUSS-KOMPOSITION (Variante D)
   Keine sichtbaren Sektionsgrenzen: Farbverläufe tragen von Tag → Dämmerung → Nacht,
   Bilder überlappen die logischen Grenzen, Headlines wechseln Position und Maß.
   ===================================================================== */
.tone-ink-light{--bg:transparent;--ink:var(--ink-d);--muted:var(--ink-d-2);--line:rgba(29,26,23,.12);--accent:var(--cognac);--link:var(--petrol);--btn-ink:var(--ivory);--ph-a:#e6ddcf;--ph-b:#d9ccb8}
.tone-ink-dark {--bg:transparent;--ink:var(--ink-l);--muted:#b6ab9b;--line:rgba(243,236,225,.13);--accent:var(--gold);--link:#dcc49a;--btn-ink:var(--sea);--ph-a:#15262b;--ph-b:#0f1c20}
.flow{position:relative;overflow-x:clip}
.f-title{font-size:clamp(2.4rem,5vw,4.6rem);margin:0 0 1.4rem}
.f-title-xl{font-size:clamp(3rem,7vw,6.6rem);margin:0 0 1.6rem;line-height:.95}
.layout-home .site-header.is-overlay{border:0}

/* Hero läuft unten in Charcoal aus – keine Kante zur nächsten Fläche */
.hero-split.has-photo .hero-shade{background:
  linear-gradient(0deg,var(--charcoal) 0%,rgba(22,20,18,0) 24%),
  linear-gradient(90deg,var(--charcoal) 0%,var(--charcoal) 40%,rgba(22,20,18,.7) 46%,rgba(22,20,18,0) 58%),
  linear-gradient(180deg,rgba(13,12,11,.5) 0%,rgba(13,12,11,0) 16%)}

/* ---------- TAG: Charcoal → Petrol-Hauch → warmes Licht → Ivory ---------- */
.flow-day{background:linear-gradient(180deg,
  var(--charcoal) 0,#1b2224 6vh,#2c2a26 13vh,#5a4838 21vh,#a48d74 30vh,#d6c8b3 38vh,#efe7da 44vh,var(--ivory) 50vh,var(--ivory) 100%)}

.f-story{max-width:var(--wrap);margin:0 auto;padding:4vh var(--gutter) 0;display:grid;gap:clamp(2rem,5vw,5rem);align-items:end}
@media (min-width:900px){
  .f-story{grid-template-columns:7fr 5fr}
  .f-story-media{margin-left:calc(-1 * var(--gutter) - (100vw - min(100vw, var(--wrap))) / 2)} /* Porträt läuft bis an den Bildrand */
  .f-story-text{padding-bottom:2vh}
}
.f-story-media .pic,.f-story-media .ph{border-radius:0;box-shadow:0 40px 80px -40px rgba(13,12,11,.45)}

/* Gitarre: Kalkstein-Licht ohne Kanten, Bild bricht nach rechts und unten aus */
.f-guitar{position:relative;margin-top:clamp(5rem,12vh,9rem);padding:clamp(4rem,9vh,7rem) 0 0;
  background:linear-gradient(180deg,rgba(214,200,177,0) 0,var(--limestone) 26%,var(--limestone) 62%,rgba(214,200,177,0) 100%)}
.f-guitar{display:grid;gap:clamp(2rem,5vw,5rem);max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media (min-width:900px){
  .f-guitar{grid-template-columns:5fr 7fr;align-items:start}
  .f-guitar-text{order:1;padding-top:14vh}
  .f-guitar-media{order:2;margin-right:calc(-1 * var(--gutter) - (100vw - min(100vw, var(--wrap))) / 2);margin-bottom:-20vh;position:relative;z-index:2}
}
.f-guitar-media .pic,.f-guitar-media .ph{border-radius:0;aspect-ratio:4/5;box-shadow:0 50px 90px -50px rgba(60,20,10,.45)}
.f-guitar .sig-intro{max-width:30rem}
.f-guitar .sig-facts{max-width:30rem}

/* Geschichte: Bild 1 links eingerückt, Zitat rechts – startet unter der ausbrechenden Gitarre */
.f-manifesto{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,8vh,6rem) var(--gutter) 0;display:grid;gap:clamp(2rem,5vw,5rem);align-items:end}
@media (min-width:900px){
  .f-manifesto{grid-template-columns:5fr 6fr}
  .f-man-media{margin-top:4vh}
  .f-man-text{padding:26vh 0 4vh}
}
.f-man-media .pic,.f-man-media .ph{border-radius:0}
.f-man-text .pull{font-style:italic;font-weight:400;font-size:clamp(2rem,4vw,3.6rem);max-width:18ch}

/* Magazin: eingerückte Headline, kein Kasten */
.f-blog{max-width:var(--wrap);margin:0 auto;padding:clamp(6rem,16vh,11rem) var(--gutter) clamp(4rem,10vh,7rem)}
@media (min-width:900px){.f-blog-head{margin-left:calc(100% / 12 * 2)}}
.f-blog-head{margin-bottom:clamp(2rem,5vh,3.5rem)}

/* ---------- DÄMMERUNG: Ivory → Sand → Holz/Cognac → Nacht ---------- */
.flow-dusk{background:linear-gradient(180deg,var(--ivory) 0,var(--sand) 9vh,#c3ab8e 17vh,#7a5f48 26vh,#33271f 36vh,#0e0b09 46vh,#060606 54vh,#060606 100%);padding-top:24vh}
.f-musician{position:relative;display:grid;align-items:center}
@media (min-width:900px){
  .f-musician{grid-template-columns:5fr 7fr;min-height:92vh}
  .f-mus-media{order:2;align-self:stretch}
  .f-mus-text{order:1;padding:0 0 0 max(var(--gutter),(100vw - var(--wrap)) / 2 + var(--gutter));position:relative;z-index:2}
}
.f-mus-media .pic,.f-mus-media .ph{border-radius:0;height:100%;aspect-ratio:auto;min-height:60vh;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%);mask-composite:intersect}
.f-mus-media .pic img{object-position:30% 40%}
.f-mus-text .mus-intro{max-width:28rem}

/* ---------- NACHT: Schwarz → Petrol (Musik) → tiefes Meer (Live) → Nacht ---------- */
.flow-night{background:linear-gradient(180deg,#060606 0,#08171c 16vh,#0f2a33 34vh,var(--sea) 46vh,var(--sea) calc(100% - 50vh),#0e232a calc(100% - 22vh),var(--night) 100%)}
.f-music{max-width:var(--wrap);margin:0 auto;padding:clamp(4rem,10vh,7rem) var(--gutter) clamp(5rem,12vh,8rem)}
@media (min-width:900px){.f-music-head{text-align:right}}
.f-music-head{margin-bottom:clamp(2rem,5vh,4rem)}
.f-music .rel-gallery{margin-top:clamp(3rem,8vh,5rem)}
.f-live{max-width:980px;margin:0 auto;padding:0 var(--gutter) clamp(8rem,20vh,14rem)}
.f-live-head{margin-bottom:2rem}
.f-live .gig-photo .ph,.f-live .gig-photo .pic,.f-live .skeleton-wrap + .ph,.f-live .skeleton-wrap + .pic{border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* ---------- Footer: nahtlos aus der Nacht bzw. aus dem Tageslicht ---------- */
.layout-home .site-footer{background:var(--night)}
body:not(.layout-home) .site-footer{background:linear-gradient(180deg,var(--ivory) 0,#ddd1bd 7rem,#6f6a60 16rem,#1f2426 24rem,var(--night) 32rem)}
.site-footer.has-media .footer-media{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
.site-footer .footer-cols{border:0;padding:1rem 0}
.site-header{border-bottom-color:transparent}

/* ---------- Unterseiten: weiche Flächen statt Blöcke ---------- */
body:not(.layout-home) main{background:var(--ivory)}
body:not(.layout-home) main > section,body:not(.layout-home) main > article > section,body:not(.layout-home) main > article > div{background:transparent}
.hubhead{background:linear-gradient(180deg,var(--ivory) 0,var(--cream) 30%,var(--cream) 70%,var(--ivory) 100%)!important}
.quote-band,.bio-quote{background:radial-gradient(ellipse 70% 60% at 30% 50%,var(--cream),rgba(239,231,218,0) 70%)!important}
.layout-hub .photo,.layout-bio .photo{--ink:var(--ink-d);--muted:var(--ink-d-2);padding:clamp(2rem,6vh,4rem) var(--gutter)!important}
.layout-hub .photo .pic,.layout-hub .photo .ph,.layout-bio .photo .pic,.layout-bio .photo .ph{max-width:1100px;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.layout-bio .photo .ph{--ph-a:#e3d9c9;--ph-b:#d4c6af}
.releasehead{background:linear-gradient(180deg,var(--sea) 0,var(--sea) 80%,var(--ivory) 100%)!important}
.layout-music-list .music{background:linear-gradient(180deg,var(--ivory) 0,#16323b 18vh,var(--sea) 30vh,var(--sea) 85%,var(--ivory) 100%)!important}

/* ---------- Mobile: Vollbreite Bilder, wechselnde Rhythmen ---------- */
@media (max-width:899px){
  .flow-day{background:linear-gradient(180deg,var(--charcoal) 0,#1f2426 4vh,#5a4838 12vh,#b8a288 20vh,var(--ivory) 30vh,var(--ivory) 100%)}
  .f-story{padding-top:0}
  .f-story-media{margin:0 calc(-1 * var(--gutter))}
  .f-story-text{padding-top:.5rem}
  .f-guitar{margin-top:4rem;padding-top:3rem}
  .f-guitar-media{margin:0 calc(-1 * var(--gutter)) 0 12vw}
  .f-guitar-text{padding-top:1rem}
  .f-manifesto{padding-top:5rem}
  .f-man-media{margin:0 14vw 0 calc(-1 * var(--gutter))}
  .f-blog{padding-top:5rem}
  .flow-dusk{padding-top:14vh}
  .f-mus-media .pic,.f-mus-media .ph{aspect-ratio:1/1;min-height:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}
  .f-mus-text{padding:0 var(--gutter) 3rem;margin-top:-3rem;position:relative}
}
/* Feinabstimmung Fluss: Dämmerung und Nacht kompakter, damit das Tageslicht dominiert */
.flow-dusk{padding-top:14vh;background:linear-gradient(180deg,var(--ivory) 0,var(--sand) 6vh,#c3ab8e 11vh,#7a5f48 17vh,#33271f 23vh,#0e0b09 30vh,#060606 36vh,#060606 100%)}
@media (min-width:900px){.f-musician{min-height:78vh}}
.f-music{padding-bottom:clamp(3rem,7vh,5rem)}
.f-live{padding-bottom:clamp(4rem,9vh,6rem)}
.site-footer.has-media{padding-top:clamp(10rem,18vw,16rem)}
.flow-night{background:linear-gradient(180deg,#060606 0,#08171c 12vh,#0f2a33 26vh,var(--sea) 36vh,var(--sea) calc(100% - 30vh),#0e232a calc(100% - 12vh),var(--night) 100%)}
@media (min-width:900px){.f-musician{min-height:70vh}}
.site-footer.has-media{padding-top:clamp(9rem,14vw,13rem)}
/* Übergänge nachgeschärft: Porträt taucht aus dem Hero auf; Kalkstein-Licht ohne Kastenkanten */
.f-story{position:relative;z-index:3;margin-top:-16vh}
.f-story-media .pic,.f-story-media .ph{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 7%,#000 18%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 7%,#000 18%);box-shadow:none}
.f-guitar{background:none;isolation:isolate}
.f-guitar::before{content:"";position:absolute;z-index:-1;top:-10vh;bottom:-24vh;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:radial-gradient(ellipse 62% 55% at 58% 50%,var(--limestone) 0,rgba(214,200,177,.75) 40%,rgba(214,200,177,0) 75%)}
@media (max-width:899px){
  .f-story{margin-top:-5vh}
  .f-guitar::before{background:radial-gradient(ellipse 120% 50% at 60% 45%,var(--limestone) 0,rgba(214,200,177,0) 72%)}
}
.flow{display:flow-root} /* verhindert Margin-Collapse: Porträt überlappt den Hero, die Fläche darunter nicht */
.hero-split.has-photo .hero-shade{background:
  linear-gradient(0deg,var(--charcoal) 0%,var(--charcoal) 5%,rgba(22,20,18,.55) 18%,rgba(22,20,18,0) 36%),
  linear-gradient(90deg,var(--charcoal) 0%,var(--charcoal) 40%,rgba(22,20,18,.7) 46%,rgba(22,20,18,0) 58%),
  linear-gradient(180deg,rgba(13,12,11,.5) 0%,rgba(13,12,11,0) 16%)}
@media (max-width:760px){.hero-split.has-photo .hero-shade{background:linear-gradient(180deg,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 20%,rgba(13,12,11,0) 66%,var(--charcoal) 100%)}}

/* =====================================================================
   FERTIGE ARTWORKS (Hero, Musiker, Biografie, Musik-Intro)
   Werden gezeigt wie geliefert: natives Seitenverhältnis, kein Crop,
   keine Maske, kein Verlauf, keine HTML-Typografie darüber.
   ===================================================================== */
.pic.is-artwork{aspect-ratio:var(--ratio)!important;height:auto!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;-webkit-mask-image:none!important;mask-image:none!important;margin:0}
.pic.is-artwork img{object-fit:contain;height:auto}

/* Hero: randlos, Header darüber als eigene ruhige Leiste (nicht auf dem Artwork) */
.site-header.on-artwork .brand{opacity:0;pointer-events:none}
.hero-art{position:relative;background:var(--night)}
.hero-art-frame{position:relative}
.enter-hotspot{position:absolute;margin:0;padding:0;min-height:0;border:0;border-radius:0;background:transparent;cursor:pointer;display:block}
.enter-hotspot:hover{background:rgba(243,236,225,.07)}
.enter-hotspot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.enter-mobile{display:none}
@media (max-width:760px){
  .enter-hotspot{display:none!important}
  .enter-mobile:not([hidden]){display:flex;align-items:center;justify-content:center;gap:.6em;width:calc(100% - 2 * var(--gutter));min-height:48px;margin:1.2rem auto 0;border:1px solid rgba(201,160,99,.55);background:transparent;color:var(--ink-l);font:600 .72rem/1 var(--f-text);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
  .enter-mobile span{color:var(--gold)}
}
/* Übergang Hero → Tag ohne Überlappung des Artworks */
.hero-art + .flow-day .f-story{margin-top:0}
.hero-art + .flow-day{background:linear-gradient(180deg,var(--night) 0,#1b2224 5vh,#2c2a26 11vh,#5a4838 19vh,#a48d74 28vh,#d6c8b3 36vh,#efe7da 42vh,var(--ivory) 48vh,var(--ivory) 100%)}
.hero-art + .flow-day .f-story{padding-top:8vh}

/* Musiker-Artwork: volle Breite, Text darunter */
.flow-dusk{padding-top:24vh;background:linear-gradient(180deg,var(--ivory) 0,var(--sand) 5vh,#b89f82 9vh,#5d4838 14vh,#1c1612 19vh,#060606 24vh,#060606 100%)}
.f-musician.has-artwork{display:block;min-height:0}
.f-musician.has-artwork .f-mus-media .pic{height:auto;min-height:0}
.f-musician.has-artwork .f-mus-text{padding:clamp(2rem,5vh,3.5rem) max(var(--gutter),(100vw - var(--wrap)) / 2 + var(--gutter)) clamp(3rem,8vh,5rem)}
@media (min-width:900px){.f-musician.has-artwork .f-mus-text{display:grid;grid-template-columns:5fr 7fr;column-gap:4rem;align-items:end}.f-musician.has-artwork .f-mus-text .kicker{grid-column:1/-1}.f-musician.has-artwork .f-title-xl{margin:0}}

/* Manifest als reines Zitat (Bordeaux-Motiv gehört der Biografie) */
.f-manifesto.is-text-only{display:block}
.f-manifesto.is-text-only .f-man-text{max-width:44rem;padding:24vh 0 6vh calc(100% / 12 * 1)}
.f-manifesto.is-text-only .pull{font-size:clamp(2.2rem,4.6vw,4.2rem);max-width:20ch}
@media (max-width:899px){.f-manifesto.is-text-only .f-man-text{padding:3rem 0 2rem}}

/* Biografie: Bordeaux-Artwork randlos */
.bio-hero .wrap{max-width:none;padding:0}
.layout-bio .bio-hero{padding-bottom:clamp(3rem,8vh,6rem)}

/* Musik-Seite: Intro-Artwork, dann Nacht → Meer */
.layout-music-list main{background:linear-gradient(180deg,var(--night) 0,#08171c 40vh,var(--sea) 70vh,var(--sea) calc(100% - 20vh),var(--night) 100%)!important}
.layout-music-list .pagehead{--ink:var(--ink-l);--muted:#b6ab9b;--accent:var(--gold);--line:rgba(243,236,225,.13);color:var(--ink);padding-top:clamp(3rem,8vh,5rem)}
.layout-music-list .music{background:transparent!important}
/* Textabschnitt unter der Diskografie (z. B. „Weitere Singles auf Spotify“) steht auf dem Meer-Verlauf → helle Schrift (Lesbarkeitskorrektur, bestehende Tokens) */
.layout-music-list .body{--ink:var(--ink-l);--muted:#b6ab9b;--accent:var(--gold);--link:#dcc49a;--line:rgba(243,236,225,.13);color:var(--ink);background:transparent!important}
.layout-music-list .site-footer{background:var(--night)}
@media (max-width:899px){.f-manifesto.is-text-only .pull{font-size:clamp(1.8rem,7.4vw,2.6rem);-webkit-hyphens:auto;hyphens:auto}}

/* =====================================================================
   MOBILE-ARTWORKS (<=760px): eigene 4:5-Kompositionen via <picture>.
   Das Seitenverhältnis folgt dem jeweils geladenen Asset – kein Crop.
   ===================================================================== */
@media (max-width:760px){
  .pic.is-artwork[style*="--ratio-m"]{aspect-ratio:var(--ratio-m)!important}
}
/* Biografie: Name steht bereits im Artwork – keine sichtbare Doppelung direkt darüber (alle Breiten) */
.layout-bio .biohead .kicker{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* /musik/: Musiker-Artwork mit integriertem REY DEL MAR direkt unter dem Header – Logo ausblenden, Navigation bleibt */
.site-header.brand-in-artwork .brand{visibility:hidden}

/* Signature Guitar: breites Artwork, vollständig, ohne Crop/Maske/Schatten.
   Text oben, Gitarre darunter großzügig über die volle Inhaltsbreite. */
.f-guitar.has-wide-artwork{display:flex;flex-direction:column;gap:0}
.f-guitar.has-wide-artwork .f-guitar-text{order:1;padding-top:0}
.f-guitar.has-wide-artwork .f-guitar-media{order:2;margin:clamp(2.5rem,6vh,4rem) 0 0;position:relative;z-index:2}
@media (min-width:900px){
  .f-guitar.has-wide-artwork .f-guitar-text{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .f-guitar.has-wide-artwork .f-guitar-text>*{grid-column:1}
  .f-guitar.has-wide-artwork .f-guitar-text .sig-intro,.f-guitar.has-wide-artwork .f-guitar-text .sig-facts{grid-column:2;max-width:36rem}
  .f-guitar.has-wide-artwork .f-guitar-text .sig-intro{grid-row:1/3;align-self:end;margin:0}
  .f-guitar.has-wide-artwork .f-guitar-text .sig-facts{grid-row:3}
}
@media (max-width:899px){
  .f-guitar.has-wide-artwork .f-guitar-media{margin:2rem calc(-1 * var(--gutter)) 0}
}