/* ==========================================================================
   Daniel Beyer – Desktop-Stylesheet
   Alle Maße, Farben und Schriftrollen sind aus dem InDesign-Entwurf
   abgeleitet und vereinheitlicht (siehe Tokens). Mobil folgt separat.
   ========================================================================== */

/* ---- Schriften (selbst gehostet, keine externen Anfragen) ---------------- */
@font-face { font-family: "Droid Serif"; src: url("fonts/droid-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Droid Serif"; src: url("fonts/droid-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Droid Serif"; src: url("fonts/droid-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  /* Farben */
  --ink: #414343;
  --ink-on-dark: #d9d9d9;
  --red: #c02a00;
  --red-hover: #a22300;
  --orange: #e07c00;
  --cream: #edebe3;
  --white: #fff;
  --black: #000;
  --rule: #bfbfbf;

  /* Schrift */
  --serif: "Droid Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-legal: 11px;
  --fs-small: 13px;
  --fs-list: 14px;
  --fs-body: 15px;
  --fs-h1: 22px;
  --fs-h2: 23px;

  /* Raster */
  --container: 700px;
  --gutter: 30px;
  --pad-y: 64px;
  --radius: 3px;
  --top-h: 76px;
  --nav-h: 46px;
}

/* ---- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.4 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: manual;
  -webkit-hyphens: manual;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
strong { font-weight: 700; }

.wrap { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--ink); padding: 8px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
:root:not(.js) .js-only { display: none !important; }

/* ---- Typografie-Rollen ----------------------------------------------------- */
.h2 {
  font: 700 var(--fs-h2) / 28px var(--serif);
  text-align: center;
  margin-bottom: 24px;
}
.h3 {
  font: 400 var(--fs-h2) / 28px var(--serif);
  text-align: center;
}
.small { font-size: var(--fs-small); line-height: 19px; }
.stack > * + * { margin-top: 21px; }

/* ---- Kopfzone: Topbar, Navigation, Hero ------------------------------------ */
body { position: relative; }
html { scroll-padding-top: calc(var(--top-h) + var(--nav-h)); }
.site-head { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px rgba(0, 0, 0, .16); }
.topbar {
  background: var(--ink);
  color: var(--white);
  min-height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 24px 8px;
  transition: padding .35s cubic-bezier(.2, .8, .2, 1);
}
.topbar .caps { text-transform: uppercase; letter-spacing: .1em; margin-right: .6em; }
.topbar strong { margin: 0; }
.topbar .caps { margin-right: 0; }
.topbar .sep { white-space: pre; }
.topbar a { color: var(--orange); font-style: italic; text-decoration: underline; text-underline-offset: 3px; margin-left: .6em; }

.nav { background: var(--orange); height: var(--nav-h); }
.nav-toggle { display: none; }
.nav ul { list-style: none; height: 100%; padding: 0; display: flex; justify-content: center; align-items: center; gap: 32px; }
.nav a { color: var(--white); font-size: var(--fs-small); line-height: 1; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.hero {
  position: relative;
  height: clamp(556px, 55.6vw, 720px);
  background: #eee9ee;
  display: flex;
  align-items: center;
}
.hero .wrap { position: relative; z-index: 1; padding-top: 42px; }
.hero-photo { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.hero-copy { width: 350px; text-align: center; }
.hero h1 {
  font: 700 var(--fs-h1) / 1.2 var(--serif);
  text-transform: uppercase;
  letter-spacing: .19em;
  padding-left: .19em; /* optischer Ausgleich der Sperrung */
  margin-bottom: 21px;
}
.hero p + p { margin-top: 0; }
.arrow-link { display: block; margin: 5px 0 21px; line-height: 21px; font-weight: 700; }
.arrow-link::before { content: "\2192"; font: 400 var(--fs-body) / 1 var(--sans); margin-right: .3em; }
.hero-text { margin: 0; }
.btn-row { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }

.monogram {
  position: absolute;
  left: 12.62%;
  top: 4.185vw;
  width: 82.86%;
  height: auto;
  fill: var(--orange);
  opacity: .10;
  pointer-events: none;
  z-index: 55;
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 96px; height: 32px; padding: 0 16px;
  border: 0; border-radius: var(--radius);
  font: 400 var(--fs-body) / 1 var(--serif);
  color: var(--white); text-decoration: none; cursor: pointer;
  transition: background-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-red { background: var(--red); }
.btn-red:hover { background: var(--red-hover); }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #2f3131; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* ---- Sektionen ------------------------------------------------------------- */
.section { padding-block: var(--pad-y); }
.section--first { padding-top: 72px; }

.cols-2 { columns: 2; column-gap: var(--gutter); }
.cols-2 > p { margin-bottom: 21px; break-inside: auto; }
.cols-2 > p:last-child { margin-bottom: 0; }
.cols-2 > .col-end { break-after: column; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: var(--gutter); margin-top: 64px; }
.gallery img, .figure img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; background: var(--red); }
figcaption { margin-top: 8px; font-size: var(--fs-small); line-height: 19px; }

.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: start; }

/* Instrumente (schwarzer Streifen) */
.dark {
  background: var(--black) url("img/instr.webp") 50% 50% / cover no-repeat;
  color: var(--ink-on-dark);
  min-height: 600px;
  display: flex; align-items: center;
}
.dark .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.dark .copy { grid-column: 2; padding-block: 56px; }
.dark h2 { color: var(--white); text-align: left; font: 700 var(--fs-h2) / 28px var(--serif); margin-bottom: 24px; }
.dark a.accent { color: var(--orange); font-weight: 700; }

/* Noten-Banner */
.banner { height: clamp(316px, 31.6vw, 420px); background: var(--cream) url("img/banner.webp") 50% 50% / cover no-repeat; }

/* Notenprogramm */
.catalog-head { text-align: center; margin-top: 96px; }
.catalog-head .small { margin-top: 8px; }
.catalog {
  margin-top: 40px;
  columns: 3; column-gap: var(--gutter); column-rule: 1px solid var(--rule);
  font: 300 var(--fs-list) / 21px var(--sans);
}
.composer { break-inside: avoid; margin-bottom: 21px; }
.composer h4 { font: 700 var(--fs-list) / 21px var(--sans); text-wrap: pretty; }
.composer .dates { font-weight: 300; }
.work { margin-bottom: 10px; }
.work:last-child { margin-bottom: 0; }
.order { font-weight: 500; white-space: nowrap; }
.price { font-weight: 500; white-space: nowrap; }

/* Kontakt */
.contact {
  background: #e8e9f2 url("img/contact.webp") 50% 30% / cover no-repeat;
  min-height: 466px;
}
.contact .wrap { padding-top: 80px; padding-bottom: 64px; }
.contact .copy { width: 350px; }
.contact h2 { text-align: left; margin-bottom: 24px; }
.contact address { font-style: normal; margin-bottom: 32px; }

/* Impressum */
.legal { background: var(--ink); color: var(--ink-on-dark); padding-block: var(--pad-y); font-size: var(--fs-legal); line-height: 16px; }
.legal .cols { columns: 3; column-gap: var(--gutter); }
.legal .block { margin-bottom: 16px; }
.legal .block:last-child { margin-bottom: 0; }
.legal p { margin-bottom: 16px; }
.legal .block p:last-child { margin-bottom: 0; }
.legal h2, .legal h3 { font-size: inherit; line-height: inherit; font-weight: 700; text-align: left; letter-spacing: 0; margin: 0; }
.legal p { text-wrap: wrap; }
.legal a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal em { font-style: italic; }

/* ---- Player (Glas, unten rechts, läuft beim Scrollen mit) --------------------- */
.player {
  position: fixed; bottom: 12px; right: 12px; z-index: 60;
  width: 360px; max-width: calc(100vw - 24px); height: 92px;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: rgba(46, 48, 48, .74);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  color: var(--white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
  font: 400 12px / 1.2 var(--sans);
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom right;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), bottom .35s, right .35s, padding .35s, border-radius .35s, background-color .35s;
  overflow: hidden;
}
.player[hidden] { display: none; }
.player.is-open { opacity: 1; transform: none; }
/* Kompakt: beim Scrollen nur der rote Kreis, 30 px vom Rand */
.player.is-compact { bottom: 30px; right: 30px; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--red); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.player.is-compact .pl-meta, .player.is-compact .pl-back, .player.is-compact .pl-fwd, .player.is-compact .pl-close, .player.is-compact .pl-bottom { display: none; }
.player.is-compact .pl-top { margin: 0; }
.player.is-compact .pl-play { width: 48px; height: 48px; background: transparent; }
.player.is-compact .pl-play:hover { background: rgba(255, 255, 255, .14); }
.pl-row { display: flex; align-items: center; gap: 6px; }
.pl-top { margin-bottom: 6px; }
.pl-btn {
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 50%; flex: none; opacity: .85;
  transition: opacity .15s, background-color .15s;
}
.pl-btn:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.pl-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pl-play { width: 38px; height: 38px; background: var(--red); opacity: 1; }
.pl-play:hover { background: var(--red-hover); }
.pl-play svg { width: 20px; height: 20px; }
.pl-play .i-pause, .player.is-playing .pl-play .i-play { display: none; }
.player.is-playing .pl-play .i-pause { display: block; }
.pl-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin-left: 4px; }
.pl-artist { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-title { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-title:empty { display: none; }
.pl-time { font-variant-numeric: tabular-nums; opacity: .7; min-width: 30px; font-size: 11px; }
.pl-rem { text-align: right; min-width: 34px; }
.pl-bottom { padding-left: 2px; }

.pl-range { appearance: none; -webkit-appearance: none; background: transparent; height: 18px; margin: 0; cursor: pointer; --p: 0%; }
.pl-seek { flex: 1; min-width: 0; }
.pl-vol { width: 56px; flex: none; }
.pl-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, .28) var(--p)); }
.pl-range::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.pl-range::-moz-range-progress { height: 3px; border-radius: 2px; background: #fff; }
.pl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.pl-range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }
@media (hover: hover) {
  .pl-range::-webkit-slider-thumb { transform: scale(0); transition: transform .15s; }
  .pl-range:hover::-webkit-slider-thumb, .pl-range:focus-visible::-webkit-slider-thumb { transform: scale(1); }
  .pl-range::-moz-range-thumb { transform: scale(0); }
  .pl-range:hover::-moz-range-thumb, .pl-range:focus-visible::-moz-range-thumb { transform: scale(1); }
}
.pl-mute svg { width: 16px; height: 16px; }
.pl-mute .w { opacity: 1; }
.pl-mute[data-level="0"] .w1, .pl-mute[data-level="0"] .w2, .pl-mute[data-level="1"] .w2 { display: none; }
.pl-mute:not([data-level="0"]) .x { display: none; }
.pl-error { color: #ffb59c; }

/* ---- Einblenden beim Scrollen -------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- Mobil ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  :root {
    --fs-body: 16px; --fs-small: 14px; --fs-list: 15px; --fs-h1: 22px; --fs-h2: 22px;
    --pad-y: 48px; --gutter: 24px; --nav-h: 52px;
  }
  html { scroll-padding-top: var(--nav-h); }
  body { line-height: 1.5; }
  .wrap { width: calc(100% - 40px); }

  /* Kopf: nur die Navi bleibt stehen */
  .site-head { display: contents; }
  .topbar { min-height: 0; padding: 14px 20px; font-size: 14px; line-height: 20px; }
  .topbar .caps { display: block; margin: 0 0 2px; }
  .topbar .sep-first { display: none; }
  .topbar a { display: block; margin: 4px 0 0; }
  .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); box-shadow: 0 2px 14px rgba(0, 0, 0, .16); }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: var(--nav-h); padding: 0 20px;
    background: transparent; border: 0; color: var(--white); font: 700 16px / 1 var(--serif); text-align: center; cursor: pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .2s;
  }
  .nav-toggle .bars { position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle .bars::before { top: -7px; }
  .nav-toggle .bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }
  .js .nav ul {
    position: absolute; left: 0; right: 0; top: 100%; height: auto; padding: 4px 20px 12px; background: var(--orange);
    flex-direction: column; align-items: stretch; text-align: center; gap: 0; box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .25s, visibility 0s .25s;
  }
  .js .nav.is-open ul { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .25s; }
  .nav a { display: block; padding: 14px 0; font-size: 17px; border-top: 1px solid rgba(255, 255, 255, .28); }
  .nav li:first-child a { border-top: 0; }
  :root:not(.js) .nav { height: auto; }
  :root:not(.js) .nav ul { flex-direction: column; align-items: center; padding: 8px 20px; gap: 0; }
  .monogram { display: none; }

  /* Hero: Text oben, Daniel darunter */
  .hero { height: auto; display: block; background: linear-gradient(90deg, #eee0df, #d8e0f5); }
  .hero .wrap { width: calc(100% - 24px); padding-top: 32px; }
  .hero-copy { width: 100%; text-align: center; }
  .hero h1 { padding-left: .19em; margin-bottom: 16px; }
  .hero-more { display: none; }
  .arrow-link { margin: 8px 0 0; }
  .btn-row { justify-content: center; margin-top: 24px; gap: 12px; flex-wrap: wrap; }
  .hero-photo { position: static; display: block; margin-top: 12px; aspect-ratio: 640 / 594;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
  .hero-photo img { height: auto; object-position: 50% 100%; }
  .btn { min-width: 120px; height: 48px; padding: 0 24px; font-size: 16px; }

  /* Sektionen */
  .h2, .h3 { font-size: 22px; line-height: 28px; }
  .section--first { padding-top: 56px; }
  .cols-2, .catalog, .legal .cols { columns: 1; }
  .catalog { column-rule: 0; }
  .cols-2 > .col-end { break-after: auto; }
  .gallery { grid-template-columns: 1fr; row-gap: 28px; margin-top: 40px; }
  .split { grid-template-columns: 1fr; row-gap: 32px; }

  .dark { display: block; min-height: 0; background: #000; }
  .dark::before { content: ""; display: block; aspect-ratio: 4 / 3; background: url("img/instr.webp") 14% 50% / auto 100% no-repeat; }
  .dark .wrap { display: block; }
  .dark .copy { padding-block: 32px 48px; }

  .banner { height: 200px; }
  .catalog-head { margin-top: 56px; }
  .composer { margin-bottom: 24px; }

  .contact { background: #e8e9f2; min-height: 0; }
  .contact .wrap { padding-top: 48px; padding-bottom: 0; }
  .contact .copy { width: 100%; text-align: center; }
  .contact h2 { text-align: center; }
  .contact .btn-row { justify-content: center !important; }
  .contact::after {
    content: ""; display: block; margin-top: 32px; aspect-ratio: 1 / 0.9;
    background: url("img/contact.webp") 76% 50% / auto 100% no-repeat;
  }
  .legal { font-size: 12px; line-height: 17px; }
  .nav-toggle { padding: 0 20px; }
  .player { bottom: 8px; right: 8px; max-width: calc(100vw - 16px); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .player, .topbar, .btn, .pl-btn { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}