/* =========================================================================
   daCarbo — luxury consultation landing page
   Design system: warm paper + near-black, brass accent, Cormorant + Inter.
   Motion: soft reveal-on-scroll, image entrance, gentle hover. CRO-forward.
   ========================================================================= */

:root{
  /* colour */
  --paper:#F4F1EA;
  --paper-2:#EDE7DA;
  --paper-3:#E4DCCB;
  --ink:#14110D;
  --ink-2:#1C1813;
  --ink-soft:#33302A;
  --muted:#6B6459;
  --muted-2:#8A8377;
  --brass:#B08D57;
  --brass-deep:#8A6C3E;
  --brass-soft:#C9AE7E;
  --line:rgba(20,18,16,.12);
  --line-2:rgba(20,18,16,.07);
  --line-dark:rgba(245,242,234,.16);
  --line-dark-2:rgba(245,242,234,.08);
  --paper-on-dark:#EDE8DC;

  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* rhythm */
  --page:min(1280px,92vw);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,7.5rem);
  --radius:2px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur:.9s;
}

*,*::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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,1.05vw,1.075rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--brass);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.005em;margin:0}
.display{font-size:clamp(3rem,8.5vw,7rem);font-weight:500;line-height:.98;letter-spacing:-.015em}
.h2{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.02}
.h3{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.serif-it{font-style:italic}
em{font-style:italic;color:var(--brass-deep)}
.lede{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.32;font-weight:400;color:var(--ink-soft)}
p{margin:0 0 1.1em}
.muted{color:var(--muted)}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin:0 0 1.1rem;
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.7}
.on-dark .eyebrow{color:var(--brass-soft)}

/* ---------- layout ---------- */
.wrap{width:var(--page);margin-inline:auto}
section{position:relative}
.pad{padding-block:var(--sec-y)}
.on-dark{background:var(--ink);color:var(--paper-on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}
.on-dark .lede{color:#CDC7BB}
.on-dark .muted{color:var(--muted-2)}
.on-paper-2{background:var(--paper-2)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons / links ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:1.05rem 1.7rem;border:1px solid var(--bg);border-radius:var(--radius);
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(20,18,16,.5)}
.btn--brass{--bg:var(--brass);--fg:var(--ink);border-color:var(--brass)}
.btn--brass:hover{--bg:var(--brass-deep);color:var(--paper)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn--ghost{--fg:var(--paper);border-color:var(--line-dark)}
.on-dark .btn--ghost:hover{background:var(--paper);color:var(--ink)}
.btn__arrow{transition:transform .5s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding-bottom:.3rem;position:relative;
}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:scaleX(1)}
.link-arrow span{transition:transform .5s var(--ease)}
.link-arrow:hover span:last-child{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--brass-soft)}

/* ---------- reveal motion ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.06s}
[data-reveal-delay="2"]{transition-delay:.12s}
[data-reveal-delay="3"]{transition-delay:.18s}
[data-reveal-delay="4"]{transition-delay:.24s}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.06);transition:transform 1s var(--ease),filter 1s var(--ease);filter:saturate(.9)}
.reveal-img.is-in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{opacity:1;transform:none;transition:none}
  .reveal-img img{transform:none;filter:none;transition:none}
}

/* ============================ NAV ============================ */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease)}
.nav__inner{width:var(--page);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem;gap:1.5rem}
.nav__brand{font-family:var(--serif);font-size:1.7rem;font-weight:500;letter-spacing:.01em;color:var(--paper)}
.nav__links{display:flex;gap:2.1rem}
.nav__links a{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,232,220,.72);transition:color .3s}
.nav__links a:hover{color:var(--paper)}
.nav__right{display:flex;align-items:center;gap:1.4rem}
.nav__locale{font-size:.72rem;letter-spacing:.14em;color:rgba(237,232,220,.55)}
.nav__currency{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,232,220,.55);background:transparent;border:0;padding:.15rem 1.1rem .15rem .1rem;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23EDE8DC' fill-opacity='.55'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .2rem center;transition:color .3s}
.nav__currency:hover{color:rgba(237,232,220,.9)}
.nav__currency:focus-visible{outline:1px solid var(--brass);outline-offset:2px;color:var(--paper)}
.nav__currency option{color:var(--ink);background:var(--paper)}
.nav__cta{font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.15rem;border:1px solid var(--brass);color:var(--ink);background:var(--brass);border-radius:var(--radius);transition:background .4s var(--ease),transform .4s var(--ease)}
.nav__cta:hover{background:var(--brass-deep);color:var(--paper);transform:translateY(-1px)}
.nav.is-stuck{background:rgba(18,16,13,.86);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-dark-2)}
.nav__burger{display:none;width:30px;height:18px;position:relative;background:none;border:0}
.nav__burger span{position:absolute;left:0;height:1.5px;width:100%;background:var(--paper);transition:.3s}
.nav__burger span:nth-child(1){top:0}.nav__burger span:nth-child(2){top:8px}.nav__burger span:nth-child(3){top:16px}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:calc(100svh - 172px);display:flex;align-items:flex-end;background:var(--ink);color:var(--paper);overflow:hidden;padding-bottom:clamp(2.4rem,5vw,4.2rem)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}
/* light-sweep fallback / overlay */
.hero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 72% 30%, rgba(176,141,87,.28), rgba(20,18,16,0) 55%),
  linear-gradient(180deg, rgba(20,18,16,.55) 0%, rgba(20,18,16,.35) 40%, rgba(20,18,16,.92) 100%)}
.hero__sweep{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 30%,rgba(201,174,126,.16) 47%,rgba(255,255,255,.05) 50%,transparent 66%);background-size:250% 100%;background-position:120% 0;animation:sweep 7s var(--ease) 1.1s infinite}
@keyframes sweep{0%{background-position:130% 0}45%,100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){.hero__sweep{display:none}.hero__bg img{animation:none;transform:none}}
.hero__inner{position:relative;z-index:2;width:var(--page);margin-inline:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero__eyebrow{color:var(--brass-soft)}
.hero__title{font-size:clamp(3.1rem,9vw,7.2rem);line-height:.96;letter-spacing:-.02em;margin:0 0 1.5rem;color:var(--paper)}
.hero__title em{color:var(--brass-soft)}
.hero__lede{max-width:34ch;color:#D8D2C6;margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero__sig{margin-top:2.4rem;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(237,232,220,.6)}
.hero__cta .link-arrow{color:#EDE8DC}
.hero__cta .link-arrow:hover{color:var(--brass-soft)}
.hero__scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,232,220,.5);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero__scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--brass-soft),transparent);animation:scrollLine 2.4s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- finder card (hero right) ---------- */
.finder{background:rgba(245,242,234,.97);color:var(--ink);border-radius:var(--radius);padding:clamp(1.4rem,2vw,2rem);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);border:1px solid var(--line);backdrop-filter:blur(4px)}
.finder__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.3rem}
.finder__title{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.finder__step{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.finder__sub{font-size:.85rem;color:var(--muted);margin-bottom:1.1rem}
.finder__bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:1.4rem}
.finder__bar i{display:block;height:100%;background:var(--brass);width:25%;transition:width .5s var(--ease)}
.finder__panel{display:none;animation:fadeSlide .45s var(--ease)}
.finder__panel.is-active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.finder__q{font-family:var(--serif);font-size:1.28rem;line-height:1.2;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{border:1px solid var(--line);background:transparent;border-radius:100px;padding:.6rem 1rem;font-size:.85rem;color:var(--ink-soft);transition:all .3s var(--ease)}
.chip:hover{border-color:var(--brass)}
.chip.is-sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.finder__field{margin-top:.4rem}
.finder__field input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:.7rem 0;font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.finder__field input:focus{outline:none;border-color:var(--brass)}
.finder__field label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.finder__nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;gap:1rem}
.finder__back{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0;opacity:0;pointer-events:none;transition:opacity .3s}
.finder__back.show{opacity:1;pointer-events:auto}
.finder__next{flex:0 0 auto}
.finder__foot{margin-top:1rem;font-size:.76rem;color:var(--muted);text-align:center}
.finder__done{text-align:center;padding:.6rem 0}
.finder__done .h3{margin-bottom:.6rem}

/* ============================ TRUST STRIP ============================ */
.trust{background:var(--ink-2);color:var(--paper-on-dark);border-block:1px solid var(--line-dark-2)}
.trust__inner{width:var(--page);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.6rem;padding-block:1.5rem;justify-content:center;font-size:.82rem;letter-spacing:.04em}
.trust__item{display:inline-flex;align-items:center;gap:.6rem;color:#C9C3B7}
.trust__item b{color:var(--paper);font-weight:500}
.trust__star{color:var(--brass-soft)}
.trust__dot{width:4px;height:4px;border-radius:50%;background:var(--brass);opacity:.6}

/* ============================ generic section head ============================ */
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head .h2{margin-bottom:1.2rem}

/* ============================ PROBLEM ============================ */
.prob__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem);margin-top:1rem}
.prob__card h3{font-size:1.5rem;margin-bottom:.7rem}
.prob__card p{color:var(--muted);margin:0}
.prob__num{font-family:var(--serif);font-size:1rem;color:var(--brass-deep);letter-spacing:.1em;display:block;margin-bottom:1rem}

/* ============================ DIFFERENCE ============================ */
.diff__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.diff__media{position:relative}
.diff__media img{width:100%;border-radius:var(--radius)}
.diff__proof{margin-top:2.2rem;border-top:1px solid var(--line-dark);padding-top:1.8rem}
.diff__stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem}
.diff__stat .n{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--brass-soft)}
.diff__stat .n small{font-size:.45em;vertical-align:.4em;color:var(--paper-on-dark)}
.diff__stat .l{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:.5rem;max-width:16ch}
.quotebar{border-left:2px solid var(--brass);padding-left:1.4rem;margin-top:2rem;font-family:var(--serif);font-size:1.25rem;font-style:italic;line-height:1.35;color:#D8D2C6}

/* ============================ SOUND SPECTRUM ============================ */
.spectrum__scale{display:flex;align-items:center;justify-content:space-between;margin:2.5rem 0 1rem;gap:1rem}
.spectrum__label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep)}
.spectrum__track{flex:1;height:2px;background:linear-gradient(90deg,#9C7B44,#C9AE7E,#E7D9BC)}
.spectrum__models{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.6rem)}
.smodel{text-align:center}
/* product image link: transparent pass-through so the img stays the flex child and layout is unchanged */
.imglink{display:contents;cursor:pointer}
.smodel__media{aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:1rem;overflow:hidden}
.smodel__media img{max-height:100%;width:auto;object-fit:contain;transition:transform 1s var(--ease)}
.smodel:hover .smodel__media img{transform:scale(1.05)}
.smodel__name{font-family:var(--serif);font-size:1.35rem;margin-top:1rem}
.smodel__tag{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.smodel--sister{opacity:.9}
.smodel--sister .smodel__media{background:var(--paper-3)}
.smodel--sister .badge{display:inline-block;margin-top:.6rem;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);border:1px solid var(--line);border-radius:100px;padding:.2rem .6rem}
/* comparison table */
.ctable{width:100%;border-collapse:collapse;margin-top:3rem;font-size:.92rem}
.ctable th,.ctable td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.ctable thead th{font-family:var(--serif);font-size:1.15rem;font-weight:500;border-bottom:1px solid var(--ink)}
.ctable tbody th{font-weight:500;color:var(--muted);font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;width:24%}
.ctable td{color:var(--ink-soft)}
.ctable tr td:last-child{color:var(--brass-deep)}

/* ============================ PRODUCT RANGE ============================ */
.range__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,1.8rem)}
.pcard{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(20,18,16,.4)}
.pcard__media{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:1.4rem}
.pcard__media img{max-height:100%;object-fit:contain;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__body{padding:1.3rem 1.4rem 1.6rem}
.pcard__meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.pcard__name{font-size:1.5rem;margin-bottom:.4rem}
.pcard__desc{font-size:.9rem;color:var(--muted);margin-bottom:1rem;min-height:2.6em}
.pcard__price{font-family:var(--serif);font-size:1.05rem;color:var(--brass-deep);border-top:1px solid var(--line);padding-top:.9rem}

/* ============================ SWISS / LUX band ============================ */
.swiss{position:relative;overflow:hidden}
.swiss__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.swiss__badges{display:flex;gap:1.6rem;align-items:center;margin-top:2rem;flex-wrap:wrap}
.swiss__lux{height:96px;width:auto}
.swiss__maker{display:flex;gap:1rem;align-items:flex-start;margin-top:1.6rem;border-top:1px solid var(--line-dark);padding-top:1.6rem}
.swiss__maker .k{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* ============================ ARTIST PROOF ============================ */
.artist__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.artist__media{position:relative}
.artist__media img{width:100%;border-radius:var(--radius);filter:grayscale(.15)}
.artist__quote{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.22;font-style:italic;margin-bottom:1.6rem}
.artist__by{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.artist__by b{color:var(--ink);font-weight:500;display:block;font-size:1rem;letter-spacing:0;text-transform:none;font-family:var(--serif)}
.artist__roster{margin-top:2rem;font-size:.9rem;color:var(--muted);line-height:1.9}
.artist__roster b{color:var(--ink-soft);font-weight:500}

/* ============================ OBJECTIONS ============================ */
.obj__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.4rem);margin-top:1rem}
.obj{border-top:1px solid var(--line);padding-top:1.4rem}
.obj__q{font-family:var(--serif);font-size:1.35rem;margin-bottom:.6rem;color:var(--ink)}
.obj__a{font-size:.95rem;color:var(--muted);margin:0}
.obj__a b{color:var(--ink-soft);font-weight:500}

/* ============================ CONSULTATION ============================ */
.consult__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.steps{display:flex;flex-direction:column;gap:1.4rem;margin-top:1rem}
.step{display:flex;gap:1.2rem;align-items:flex-start}
.step__n{font-family:var(--serif);font-size:1.6rem;color:var(--brass-soft);line-height:1;flex:0 0 auto;width:2.2rem}
.step__t{font-family:var(--serif);font-size:1.35rem;margin-bottom:.2rem;color:var(--paper)}
.step__d{font-size:.92rem;color:var(--muted-2);margin:0}
.consult__cal{background:var(--paper);border-radius:var(--radius);padding:.5rem;min-height:360px;overflow:hidden}
.calembed{width:100%;height:640px;border:0}
.consult__note{font-size:.82rem;color:var(--muted-2);margin-top:1rem;text-align:center}

/* ============================ FAQ ============================ */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:1.4rem 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:var(--brass-deep);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:1rem 0 0;color:var(--muted);font-size:.98rem;max-width:66ch}

/* ============================ FINAL CTA ============================ */
.final{text-align:center;position:relative;overflow:hidden}
.final .display{margin:0 auto 1.4rem;max-width:16ch}
.final__sub{max-width:44ch;margin:0 auto 2.4rem;color:#CDC7BB}
.final__row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;align-items:center}
.final__alt{margin-top:1.6rem;font-size:.82rem;letter-spacing:.06em;color:var(--muted-2)}
.final__alt a{color:var(--brass-soft);border-bottom:1px solid transparent;transition:border-color .3s}
.final__alt a:hover{border-color:var(--brass-soft)}

/* ============================ FOOTER ============================ */
.foot{background:#0F0E0C;color:#CDC7BB;padding-block:clamp(3rem,6vw,5rem) 2rem}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.6rem;border-bottom:1px solid var(--line-dark-2)}
.foot__brand .m{font-family:var(--serif);font-size:2rem;color:var(--paper)}
.foot__brand p{font-size:.9rem;color:var(--muted-2);max-width:26ch;margin-top:.6rem}
.foot__col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:1rem;font-weight:500}
.foot__col a,.foot__col p{display:block;font-size:.9rem;color:#B7B1A6;margin-bottom:.6rem;transition:color .3s}
.foot__col a:hover{color:var(--paper)}
.foot__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.78rem;color:var(--muted-2)}

/* ---- Newsletter im Fuss ------------------------------------------------
   Eigene Zeile zwischen den Spalten und der Schlusszeile. Ruhig gehalten:
   der Fuss soll nicht zum zweiten Call-to-Action werden, das Gespräch mit
   Andi bleibt der Hauptweg. */
.foot__news{display:grid;grid-template-columns:1.4fr 1.6fr;gap:2rem;align-items:start;
  padding:2.2rem 0;border-bottom:1px solid var(--line-dark-2)}
.foot__news-text h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-soft);margin-bottom:.7rem;font-weight:500}
.foot__news-text p{font-size:.9rem;color:var(--muted-2);max-width:38ch}
.news{display:grid;grid-template-columns:1fr auto;gap:.6rem}
.news__input{grid-column:1;background:transparent;color:var(--paper);
  border:1px solid var(--line-dark-2);border-radius:var(--radius);
  padding:.85rem 1rem;font:inherit;font-size:.92rem;min-width:0}
.news__input::placeholder{color:#7C766B}
.news__input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.news__btn{grid-column:2;white-space:nowrap}
.news .optin,.news__msg{grid-column:1/-1}
.news__msg{font-size:.82rem;color:var(--brass-soft);margin:0;min-height:1.2em}
.news__msg[data-state="error"]{color:#E0A0A0}

/* Einwilligungs-Häkchen. Bewusst klein, aber lesbar, und nie vorausgewählt. */
.optin{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  margin-top:.9rem;font-size:.8rem;line-height:1.45;color:var(--muted-2);cursor:pointer}
.optin input{margin-top:.18rem;width:15px;height:15px;accent-color:var(--brass);flex:0 0 auto}
.optin a{text-decoration:underline}
.optin--tight{margin-top:.4rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .foot__news{grid-template-columns:1fr;gap:1.2rem}
  .news{grid-template-columns:1fr}
  .news__btn{grid-column:1}
}

/* ============================ sticky mobile bar + whatsapp ============================ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid var(--line-dark-2)}
.mbar a{padding:1rem;text-align:center;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.mbar a+a{border-left:1px solid var(--line-dark-2);color:var(--brass-soft)}
.wa{position:fixed;right:1.2rem;bottom:1.4rem;z-index:65;width:52px;height:52px;border-radius:50%;background:var(--brass);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(20px) scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wa.show{opacity:1;transform:none}
.wa:hover{background:var(--brass-deep);color:var(--paper)}

/* ============================ responsive ============================ */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr}
  .finder{max-width:520px}
  .diff__grid,.artist__grid,.consult__grid,.swiss__grid{grid-template-columns:1fr}
  .prob__grid{grid-template-columns:1fr;gap:2rem}
  .spectrum__models{grid-template-columns:repeat(2,1fr);gap:2rem}
  .range__grid{grid-template-columns:repeat(2,1fr)}
  .obj__grid{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__burger{display:block}
}
@media (max-width:640px){
  :root{--sec-y:clamp(3.4rem,12vw,5rem)}
  .nav__cta{display:none}
  .range__grid{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr}
  .mbar{display:grid}
  .wa{bottom:5rem}
  body{padding-bottom:0}
  .ctable thead{display:none}
  .ctable,.ctable tbody,.ctable tr,.ctable td,.ctable th{display:block;width:100%}
  .ctable tr{border-bottom:1px solid var(--ink);margin-bottom:1rem;padding-bottom:.6rem}
  .ctable td{border:0;padding:.2rem 0}
  .ctable tbody th{padding:.6rem 0 .1rem}
}
@media (max-width:1000px){
  .nav.open{background:rgba(18,16,13,.97);backdrop-filter:blur(14px)}
  .nav.open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:0 var(--gutter) 1.2rem}
  .nav.open .nav__links a{padding:1rem 0;border-top:1px solid var(--line-dark-2);font-size:.9rem;color:var(--paper)}
  .nav.open .nav__burger span:nth-child(1){top:8px;transform:rotate(45deg)}
  .nav.open .nav__burger span:nth-child(2){opacity:0}
  .nav.open .nav__burger span:nth-child(3){top:8px;transform:rotate(-45deg)}
  .hero{min-height:auto;padding-top:7rem}
  .hero__title{font-size:clamp(2.8rem,13vw,4rem)}
}

/* ==================== REVISION 2 (2026-07-01) ==================== */
/* logo — two-tone mark (orange da + white carbo): no invert filter, render large enough to read */
.nav__logo{height:38px;width:auto;opacity:.96;transition:opacity .4s var(--ease)}
.nav__brand:hover .nav__logo{opacity:1}
.foot__logo{height:44px;width:auto;opacity:.94;margin-bottom:1.1rem}

/* proof band (redesigned trust) */
.proof{background:var(--ink);color:var(--paper-on-dark);border-block:1px solid var(--line-dark-2)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof__item{padding:clamp(1.4rem,2.2vw,1.9rem) clamp(1.1rem,2.4vw,2.4rem);border-left:1px solid var(--line-dark-2)}
.proof__item:first-child{border-left:0;padding-left:0}
.proof__k{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 .9rem}
.proof__v{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.02;color:var(--paper);margin:0 0 .5rem}
.proof__s{font-size:.8rem;color:var(--muted-2);margin:0;line-height:1.4}

/* problem icons */
.prob__icon{display:block;width:42px;height:42px;color:var(--brass-deep);margin-bottom:1.4rem}
.prob__icon svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.prob__card p{color:var(--muted);margin:0}

/* difference: media crop + clean stat row */
.diff__media{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:#0f0d0b}
.diff__media img{width:100%;height:100%;object-fit:cover}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem);margin-top:2.6rem;border-top:1px solid var(--line-dark);padding-top:2rem}
.stat__n{font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.7rem);line-height:1;color:var(--brass-soft);margin:0 0 .6rem;font-weight:500}
.stat__l{font-size:.8rem;color:var(--muted-2);margin:0;line-height:1.45;max-width:18ch}

/* spectrum: uniform square cards + price */
.spectrum__models .smodel__media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:.9rem;overflow:hidden}
.spectrum__models .smodel__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform 1s var(--ease)}
.smodel:hover .smodel__media img{transform:scale(1.05)}
.smodel--sister .smodel__media{background:var(--paper-3)}
.smodel__price{font-family:var(--serif);font-size:1.05rem;color:var(--brass-deep);margin-top:.55rem}
.smodel--sister .smodel__price{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* product cards: price only, cleaner */
.pcard__price{min-height:auto}

/* maker (redesigned, no fake portrait) */
.maker__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.maker__media{margin:0;background:var(--ink-2);border:1px solid var(--line-dark-2);border-radius:var(--radius);overflow:hidden}
.maker__media img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:clamp(1.6rem,4vw,3rem);transition:transform 1.2s var(--ease)}
.maker__media:hover img{transform:scale(1.04)}
.maker__media figcaption{font-size:.78rem;letter-spacing:.02em;color:var(--muted-2);text-align:center;padding:0 1rem 1.3rem}
.maker__media--photo img{aspect-ratio:4/5;object-fit:cover;object-position:34% 50%;padding:0}
.maker__media--photo figcaption{padding:1rem 1.2rem 1.2rem}
.maker__lux{display:flex;gap:1.3rem;align-items:center;margin-top:2.2rem;border-top:1px solid var(--line-dark);padding-top:1.9rem}
.maker__lux img{height:70px;width:auto;border-radius:2px}
.maker__luxt{font-family:var(--serif);font-size:1.3rem;color:var(--paper);margin:0 0 .2rem}
.lite{color:var(--paper);font-weight:500}
.ink{color:var(--ink-soft);font-weight:500}

/* voices / testimonials */
.voices__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.voice{margin:0}
.voice blockquote{font-family:var(--serif);font-style:italic;margin:0 0 1rem;line-height:1.3;color:var(--ink)}
.voice figcaption b{font-family:var(--serif);font-style:normal;font-size:1.05rem;display:block;color:var(--ink)}
.voice figcaption span{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.voice--feature .voice__media{aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius);margin-bottom:1.7rem}
.voice--feature .voice__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12)}
.voice--feature blockquote{font-size:clamp(1.5rem,2.3vw,2.05rem)}
.voices__col{display:flex;flex-direction:column;gap:2.2rem}
.voices__col .voice{border-left:2px solid var(--brass);padding-left:1.5rem}
.voices__col .voice blockquote{font-size:1.2rem}
.voices__roster{margin-top:2.8rem;border-top:1px solid var(--line);padding-top:1.7rem;font-size:.92rem;max-width:74ch;line-height:1.95}

@media (max-width:1000px){
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__item{border-left:0;border-top:1px solid var(--line-dark-2);padding:1.5rem 0}
  .proof__item:first-child{padding-top:1.5rem}
  .proof__item:nth-child(2){border-left:0}
  .maker__grid{grid-template-columns:1fr}
  .maker__media{order:-1;max-width:460px}
  .voices__grid{grid-template-columns:1fr}
  .voices__col{flex-direction:row}
}
@media (max-width:640px){
  .proof__grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr;gap:1.4rem;text-align:left}
  .voices__col{flex-direction:column}
}

/* ==================== REVISION 3 (2026-07-01) ==================== */
/* artist marquee */
.marquee{background:var(--ink);border-bottom:1px solid var(--line-dark-2);overflow:hidden;padding:1.15rem 0;position:relative}
/* fade the row edges with solid-ink overlays instead of masking the section
   (the mask let the page background bleed through and smeared the band) */
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(20,17,13,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(20,17,13,0))}
.marquee__row{display:inline-flex;align-items:center;gap:1.5rem;white-space:nowrap;animation:marq 64s linear infinite;will-change:transform}
.marquee__row span{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:rgba(237,232,220,.6)}
.marquee__row i{color:var(--brass);opacity:.55;font-style:normal;font-size:.9rem}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__row{animation:none}}

/* spectrum axis (richer) */
.spectrum-axis{margin:clamp(2.4rem,5vw,3.6rem) 0 1rem}
.spectrum-axis__bar{position:relative;height:3px;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,#9C7B44,#C9AE7E 45%,#E7D9BC 80%,#F1E7D0)}
.spectrum-axis__shine{position:absolute;top:0;left:0;height:100%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:axisShine 5.5s var(--ease) infinite}
@keyframes axisShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(360%)}}
.spectrum-axis__ticks{display:grid;grid-template-columns:repeat(4,1fr)}
.atick{display:flex;flex-direction:column;align-items:center;margin-top:-7px}
.atick__dot{width:12px;height:12px;border-radius:50%;background:var(--brass);border:3px solid var(--paper);box-shadow:0 0 0 1px rgba(176,141,87,.5)}
.atick__tone{margin-top:.8rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.spectrum-axis__shine{display:none}}

/* range 3-up */
.range__grid--3{grid-template-columns:repeat(3,1fr)}

/* consultation light + dark-section overrides for the reshuffle */
.step__t{color:var(--ink)}
.step__d{color:var(--muted)}
.consult__note{color:var(--muted)}
.consult__note a{color:var(--brass-deep);border-bottom:1px solid var(--brass-deep)}
.on-dark .step__t{color:var(--paper)}
.on-dark .step__d{color:var(--muted-2)}
.on-dark .consult__note{color:var(--muted-2)}
.on-dark .consult__note a{color:var(--brass-soft);border-bottom-color:var(--brass-soft)}
.consult-light .consult__cal{background:transparent;padding:0;box-shadow:0 24px 60px -34px rgba(20,18,16,.4)}
.on-dark .obj{border-color:var(--line-dark)}
.on-dark .obj__q{color:var(--paper)}
.on-dark .obj__a{color:#C7C1B5}
.on-dark .obj__a b{color:var(--paper)}
.on-dark .faq details{border-color:var(--line-dark)}
.on-dark .faq summary{color:var(--paper)}
.on-dark .faq summary::after{color:var(--brass-soft)}
.on-dark .faq details p{color:#B7B1A6}

/* testimonial carousel */
.voices-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.voices-head .sec-head,.voices-head .eyebrow{margin-bottom:0}
.voices-head h2{margin-top:1.1rem;max-width:20ch}
.tnav{display:flex;gap:.7rem;flex:0 0 auto}
.tarrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.05rem;display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.tarrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
.tcarousel{position:relative}
.tviewport{overflow:hidden}
.ttrack{display:flex;transition:transform .6s var(--ease)}
.tslide{flex:0 0 100%;margin:0;text-align:center;padding:0 clamp(.5rem,5vw,4rem);display:flex;flex-direction:column;align-items:center}
.tslide__avatar{width:104px;height:104px;border-radius:50%;background-size:cover;background-position:center top;margin-bottom:1.8rem;border:1px solid var(--line);filter:grayscale(.12)}
.tslide__avatar--mono{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--brass-soft);font-family:var(--serif);font-size:1.5rem;font-style:italic;filter:none}
.tslide blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.28;color:var(--ink);margin:0 0 1.7rem;max-width:28ch}
.tslide figcaption b{font-family:var(--serif);font-style:normal;font-size:1.15rem;display:block;margin-bottom:.25rem}
.tslide figcaption span{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tdots{display:flex;gap:.55rem;justify-content:center;margin-top:2.6rem}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:width .3s var(--ease),background .3s var(--ease)}
.tdot.is-active{background:var(--brass);width:22px;border-radius:4px}
@media (max-width:640px){
  .voices-head{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .range__grid--3{grid-template-columns:1fr}
}

/* ==================== REVISION 4 (2026-07-01) ==================== */
/* calendly inline widget fits without internal scroll */
.consult__cal{overflow:visible;min-height:0;padding:0;background:transparent}
.consult-light .consult__cal{box-shadow:0 24px 60px -34px rgba(20,18,16,.35);border-radius:var(--radius)}
.calendly-inline-widget{width:100%}
/* meet-the-maker avatar at the booking */
.consult__who{display:flex;align-items:center;gap:1rem;margin:1.7rem 0 .4rem}
.consult__avatar{width:56px;height:56px;border-radius:50%;background-size:cover;background-position:50% 50%;flex:0 0 auto;border:1px solid var(--line)}
.consult__who p{margin:0;font-size:.95rem;color:var(--muted)}
.consult__who b{color:var(--ink);font-weight:500}


/* ==================== REVISION 5 (2026-07-02) ==================== */
/* voices: scroll-driven artist showcase (replaces the carousel) */
.vscroll{position:relative;height:calc(var(--vcount,8) * 72vh + 100vh);background:var(--paper, #F4F1EA)}
.vscroll__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.vscroll__frame{width:100%}
.vscroll__head{margin-bottom:clamp(1.6rem,3vh,3rem)}
.vscroll__stage{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.vscroll__media{position:relative;aspect-ratio:4/5;max-height:58vh;width:100%;border-radius:var(--radius);overflow:hidden;background:var(--paper-3,#EAE5DA)}
.vscroll__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 1.4s var(--ease);will-change:opacity,transform;filter:grayscale(.08)}
.vscroll__media img.is-active{opacity:1;transform:scale(1)}
.vscroll__quotes{position:relative;min-height:16rem}
.vquote{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.vquote.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.vquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.32;margin:0 0 1.4rem;color:var(--ink)}
.vquote--placeholder{opacity:.45}
.vquote figcaption b{font-family:var(--serif);font-style:normal;font-size:1.08rem;display:block;color:var(--ink)}
.vquote figcaption span{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vscroll__meter{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.6rem,3vh,2.6rem);font-family:var(--mono,monospace);font-size:.78rem;color:var(--muted)}
.vscroll__bar{flex:1;height:1px;background:var(--line);position:relative;display:block}
.vscroll__bar b{position:absolute;left:0;top:-0.5px;height:2px;background:var(--brass);width:12.5%;transition:width .5s var(--ease);display:block}
@media (max-width:900px){
  .vscroll{height:calc(var(--vcount,8) * 60vh + 100vh)}
  .vscroll__stage{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .vscroll__media{aspect-ratio:4/3;max-height:38vh}
  .vscroll__quotes{min-height:13rem}
  .vquote{justify-content:flex-start}
  .vquote blockquote{font-size:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  .vscroll__media img,.vquote{transition:none}
}

/* proof band: 3 trust badges (was 4) */
.proof__grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .proof__grid--3{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:640px){ .proof__grid--3{grid-template-columns:1fr} }

/* ==================== SUBPAGES (2026-07-05) ==================== */
/* solid nav for pages without a dark hero */
.nav--solid{position:sticky;background:var(--ink);border-bottom:1px solid var(--line-dark-2)}
.subpage main{background:var(--paper)}

/* page head band */
.phead{padding:clamp(7rem,14vh,10rem) 0 clamp(3rem,6vh,4.5rem)}
.phead h1{margin-bottom:1.2rem}
.phead__jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.phead__jump a{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding:.55rem 1rem;border:1px solid var(--line-dark);border-radius:99px;color:var(--paper-on-dark);transition:background .3s var(--ease),color .3s var(--ease)}
.phead__jump a:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}

/* product rows (instruments page) */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.4rem,5vh,4rem) 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.prow__media{background:var(--paper-2);border-radius:var(--radius);padding:clamp(1.5rem,3vw,3rem);display:flex;align-items:center;justify-content:center}
.prow__media img{max-height:340px;object-fit:contain}
.prow--flip .prow__media{order:2}
.prow__kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);margin:0 0 .6rem}
.prow__price{font-family:var(--serif);font-size:1.25rem;color:var(--brass-deep);margin:.5rem 0 1rem}
.prow__specs{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:.45rem}
.prow__specs li{font-size:.92rem;color:var(--muted);padding-left:1.2rem;position:relative}
.prow__specs li::before{content:"·";position:absolute;left:.3rem;color:var(--brass)}
.prow__specs--row{grid-template-columns:repeat(3,auto);justify-content:start;gap:.5rem 2.5rem;margin-top:2rem}
.on-dark .prow__specs li{color:var(--muted-2)}
.pnote{font-size:.9rem;margin-top:2.5rem;max-width:64ch}

/* story page */
.story__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.story__grid--flip{grid-template-columns:.95fr 1.05fr}
.story__media{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.story__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story__media figcaption{font-size:.78rem;color:var(--muted);padding:.9rem 1.1rem;letter-spacing:.02em}
.craft__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.craft__step{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.craft__step img{width:100%;aspect-ratio:4/3;object-fit:cover}
.craft__step figcaption{font-size:.88rem;color:var(--muted);padding:1rem 1.1rem 1.2rem;line-height:1.55}
.craft__step b{color:var(--ink);font-weight:500}

/* video list */
.vid__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.vid{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-size:.95rem;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.vid:hover{border-color:var(--brass);transform:translateY(-2px)}
.vid__n{font-family:var(--serif);color:var(--brass-deep);font-size:1.05rem}
.vid__go{margin-left:auto;color:var(--brass-deep);font-size:.8rem}

/* artists page */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.agrid--feature{grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.acard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.acard__media{aspect-ratio:1/1;overflow:hidden;background:var(--paper-3)}
.acard__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(.1);transition:transform .8s var(--ease)}
.acard:hover .acard__media img{transform:scale(1.05)}
.acard__media--mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2.4rem;color:var(--brass-deep)}
.acard__body{padding:1.1rem 1.2rem 1.3rem}
.acard__name{font-size:1.12rem;line-height:1.15;margin-bottom:.35rem}
.acard__years{font-family:var(--sans);font-size:.72rem;color:var(--muted);font-weight:400;white-space:nowrap}
.acard__credit{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--brass-deep);margin:0}
.acard__bio{font-size:.88rem;color:var(--muted);margin:.6rem 0 0;line-height:1.55}
.acard__claim{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-soft);margin:.6rem 0 0;line-height:1.45}
.acard--s .acard__body{padding:.9rem 1rem 1.05rem}
.acard--s .acard__claim{font-size:.88rem;margin-top:.45rem}
.acard--s .acard__name{font-size:1rem}

/* quotes row (artists page) */
.qrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
.qitem{margin:0;border-left:2px solid var(--brass);padding-left:1.4rem}
.qitem blockquote{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.4;margin:0 0 1rem;color:var(--paper)}
.qitem figcaption b{display:block;color:var(--paper)}
.qitem figcaption span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}

@media (max-width:900px){
  .prow,.story__grid,.story__grid--flip{grid-template-columns:1fr}
  .prow--flip .prow__media{order:0}
  .craft__grid,.qrow{grid-template-columns:1fr}
  .agrid{grid-template-columns:1fr 1fr}
  /* Muss NACH .agrid stehen und hoeher spezifisch sein: die Feature-Karten
     tragen beide Klassen, sonst gewinnt die 2-Spalten-Regel und die grossen
     Kuenstlerkarten stehen auf dem Handy zu zweit nebeneinander (2026-09-01). */
  .agrid.agrid--feature{grid-template-columns:1fr}
  .vid__grid{grid-template-columns:1fr}
  .prow__specs--row{grid-template-columns:1fr}
  .range__grid[style*="repeat(2"]{grid-template-columns:1fr !important}
}

/* ==================== REVISION 7 (2026-07-05 late) ==================== */
/* problem cards with real detail photos instead of icons */
.prob__img{border-radius:var(--radius);overflow:hidden;margin-bottom:1.3rem}
.prob__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prob__icon{display:none}

/* instruments: floating transparent products, full-bleed to the viewport edge */
.prow__media{background:transparent;padding:0;margin-right:calc((100vw - var(--page)) / -2)}
.prow--flip .prow__media{margin-right:0;margin-left:calc((100vw - var(--page)) / -2)}
.prow__media img{max-height:480px;width:100%;object-fit:contain;will-change:transform;transition:transform .2s linear}
@media (max-width:900px){
  .prow__media,.prow--flip .prow__media{margin:0}
  .prow__media img{max-height:320px}
}

/* mosaic gallery */
.mosaic{columns:3;column-gap:1rem}
.mosaic img{width:100%;margin-bottom:1rem;border-radius:var(--radius);break-inside:avoid}
@media (max-width:900px){.mosaic{columns:2}}
@media (max-width:560px){.mosaic{columns:1}}

/* 360 spinner */
[data-spin]{position:relative}
[data-spin] img{transform:none !important} /* exempt from the tilt effect */
.spin__hint{position:absolute;bottom:.4rem;left:50%;transform:translateX(-50%);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0;white-space:nowrap}

/* ==================== REVISION 9 (2026-07-06) — conversion sections ==================== */
/* problem → solution bridge */
.prob__bridge{max-width:52ch;margin:3rem auto 0;text-align:center;font-size:clamp(1.2rem,2vw,1.55rem)}
.prob__bridge b{color:var(--brass-deep);font-weight:500}

/* why carbon, 3 steps */
.why__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.why__step{border-top:2px solid var(--brass);padding-top:1.4rem}
.why__step h3{font-size:1.35rem;margin-bottom:.6rem}
.why__n{font-family:var(--serif);font-size:2.6rem;color:var(--brass);line-height:1;margin:0 0 .8rem}

/* comparison chart */
.cmp{margin-top:clamp(3rem,6vh,4.5rem);overflow-x:auto}
.cmp__table{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp__table th{font-family:var(--serif);font-size:1.15rem;font-weight:500;text-align:left;padding:.9rem 1.1rem;color:var(--paper)}
.cmp__table td{padding:.85rem 1.1rem;border-top:1px solid var(--line-dark-2);color:var(--muted-2);vertical-align:top}
.cmp__table td:first-child{color:var(--paper-on-dark);font-weight:500;width:22%}
.cmp__table .cmp__hl{background:rgba(176,141,87,.09);color:var(--paper-on-dark);border-left:1px solid rgba(176,141,87,.3)}
.cmp__table th.cmp__hl{color:var(--brass-soft)}
@media (max-width:900px){
  .why__steps{grid-template-columns:1fr}
  .cmp__table{font-size:.85rem}
  .cmp__table td:first-child{width:auto}
}

/* FAQ groups */
.obj__group{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-soft);font-family:var(--sans);font-weight:500;margin:3.2rem 0 1.6rem}
.obj__group:first-of-type{margin-top:0}
.obj__grid + .obj__group{margin-top:3.2rem}

/* ==================== REVISION 11 (2026-07-06) — nav dropdown ==================== */
.nav__item--drop{position:relative;display:flex;align-items:center}
.nav__caret{font-size:.6rem;opacity:.6;margin-left:.15rem}
.nav__drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(18,16,13,.97);backdrop-filter:blur(14px);border:1px solid var(--line-dark-2);border-radius:4px;padding:.55rem 0;min-width:200px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav__item--drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} /* hover bridge */
.nav__item--drop:hover .nav__drop,.nav__item--drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav__drop a{display:block;padding:.6rem 1.3rem;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,232,220,.72);white-space:nowrap}
.nav__drop a:hover{color:var(--paper);background:rgba(176,141,87,.1)}
@media (max-width:1000px){
  .nav.open .nav__item--drop{display:block}
  .nav.open .nav__item--drop > a{display:block;padding:1rem 0;border-top:1px solid var(--line-dark-2);font-size:.9rem;color:var(--paper)}
  .nav__drop{display:none}
}

/* ==================== REVISION 12 (2026-07-08) — AI shot gallery + detail strip ==================== */
.aigal .sec-head{margin-bottom:3rem}
.aigal__track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(4vw,1.6rem) 1.4rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--brass-soft) transparent}
.aigal__track::-webkit-scrollbar{height:6px}
.aigal__track::-webkit-scrollbar-thumb{background:rgba(176,141,87,.35);border-radius:3px}
.aigal__slide{flex:0 0 auto;width:min(620px,82vw);margin:0;scroll-snap-align:center}
.aigal__slide img{width:100%;height:clamp(280px,46vw,420px);object-fit:cover;border-radius:4px;display:block;transition:transform .6s var(--ease)}
.aigal__slide:hover img{transform:scale(1.015)}
.aigal__slide figcaption{margin-top:.8rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,232,220,.55)}
.aigal__slide figcaption b{color:var(--brass-soft);font-weight:600}
.aigal-details__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.aigal-details__item{margin:0}
.aigal-details__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block;transition:transform .6s var(--ease)}
.aigal-details__item:hover img{transform:scale(1.02)}
.aigal-details__item figcaption{margin-top:.8rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,18,15,.55)}
.aigal-details__item figcaption b{color:var(--brass,#8a6a3c);font-weight:600}
@media (max-width:760px){
  .aigal-details__grid{grid-template-columns:1fr}
  .aigal__slide{width:86vw}
}

/* ==================== REVISION 13 (2026-07-08) — voices click-through + simpler gallery ==================== */
.vscroll--click{height:auto;padding:clamp(4rem,9vh,7rem) 0}
.vscroll--click .vscroll__sticky{position:static;height:auto;overflow:visible}
.varrow{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:inherit;font-size:1rem;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease)}
.varrow:hover{border-color:var(--brass);background:rgba(176,141,87,.08)}
.mosaic{columns:4;column-gap:.8rem}
.mosaic img{margin-bottom:.8rem}
@media (max-width:900px){.mosaic{columns:3}}
@media (max-width:560px){.mosaic{columns:2}}

/* voices circular testimonials -------------------------------------------------
   3-D stacked photo carousel + word-by-word quote reveal (see js/app.js). Styled
   for the dark (.on-dark) Voices section: light text + brass arrow buttons. */
.voices .vtest{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
/* photo stack */
.vtest__photos{
  position:relative;
  width:100%;
  max-width:26rem;
  aspect-ratio:4/5;
  margin:0 auto;
  perspective:1400px;
}
.vtest__card{
  position:absolute;
  inset:0;
  border-radius:calc(var(--radius) * 6);
  overflow:hidden;
  opacity:0;
  z-index:1;
  transform:scale(.85);
  transition:transform .8s cubic-bezier(.4,2,.3,1),opacity .8s cubic-bezier(.4,2,.3,1);
  will-change:transform,opacity;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7);
  background:var(--ink-2);
}
.vtest__card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.1);
}
.vtest__card.is-prev{opacity:1;z-index:2;transform:translateX(-16%) scale(.85) rotate(15deg)}
.vtest__card.is-next{opacity:1;z-index:2;transform:translateX(16%) scale(.85) rotate(-15deg)}
.vtest__card.is-active{opacity:1;z-index:3;transform:translateX(0) scale(1) rotate(0deg)}
/* quote + person */
.vtest__body{max-width:40ch}
.vtest__quote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.32;
  font-weight:400;
  color:var(--paper-on-dark);
}
.vtest__quote::before{content:"\201C"}
.vtest__quote::after{content:"\201D"}
.vtest__quote .vword{
  display:inline-block;
  opacity:0;
  filter:blur(9px);
  transform:translateY(.28em);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);
}
.vtest__quote .vword.is-in{opacity:1;filter:blur(0);transform:none}
.vtest__person{margin-top:clamp(1.6rem,3vw,2.2rem)}
.vtest__name{
  margin:0;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
  color:#fff;
}
.vtest__role{
  margin:.35rem 0 0;
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--brass-soft);
}
/* arrows */
.vtest__nav{display:flex;gap:.9rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.vtest__arrow{
  width:46px;height:46px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;
  color:var(--brass-soft);
  background:transparent;
  border:1px solid var(--brass);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.vtest__arrow:hover{background:var(--brass);color:var(--ink);transform:translateY(-1px)}
.vtest__arrow:focus-visible{outline:2px solid var(--brass-soft);outline-offset:3px}
@media (max-width:768px){
  .voices .vtest{grid-template-columns:1fr;gap:2.4rem}
  .vtest__photos{max-width:20rem}
  .vtest__body{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .vtest__card{transition:opacity .3s linear}
  .vtest__quote .vword{transition:none}
}

/* ==================== REVISION 13 (2026-07-30) — FAQ as a foldout list ====================
   Andi's FAQ is long. A wall of open cards buried the answers, so each question is now a
   native <details> row: one long scannable list, answers on demand, works without JS. */
.faqlist{border-top:1px solid var(--line-dark-2);max-width:78ch}
.faq{border-bottom:1px solid var(--line-dark-2)}
.faq__q{
  display:flex;align-items:baseline;gap:1rem;cursor:pointer;list-style:none;
  padding:1.15rem 0;font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.18rem);
  font-weight:400;color:var(--paper-on-dark);transition:color .2s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brass-soft)}
.faq__q::after{
  content:"+";margin-left:auto;flex:none;font-family:var(--sans);font-size:1.3rem;
  line-height:1;color:var(--brass);transition:transform .28s var(--ease);
}
.faq[open] > .faq__q::after{transform:rotate(45deg)}
.faq[open] > .faq__q{color:var(--brass-soft)}
.faq__a{margin:0 0 1.4rem;padding-right:2.5rem;color:var(--muted-2);font-size:.96rem;line-height:1.65}
.faq__a b{color:var(--paper-on-dark);font-weight:500}
/* light-background variant, in case the section tone ever flips */
.pad:not(.on-dark) .faqlist{border-top-color:var(--line)}
.pad:not(.on-dark) .faq{border-bottom-color:var(--line)}
.pad:not(.on-dark) .faq__q{color:var(--ink)}
.pad:not(.on-dark) .faq__a{color:var(--muted)}
.pad:not(.on-dark) .faq__a b{color:var(--ink)}
@media (max-width:640px){
  .faq__a{padding-right:0}
}

/* ==================== A/B copy switch (internal review only) ==================== */
.abswitch{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(18,16,13,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(176,141,87,.4);border-radius:100px;padding:.4rem .55rem .4rem .9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.abswitch__lbl{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,232,220,.6)}
.abswitch__opt{
  display:grid;place-items:center;min-width:1.9rem;height:1.9rem;border-radius:100px;
  font-size:.78rem;font-weight:600;color:rgba(237,232,220,.75);letter-spacing:.04em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.abswitch__opt:hover{background:rgba(176,141,87,.18);color:#fff}
.abswitch__opt.is-on{background:var(--brass);color:#14110d}
@media (max-width:1000px){
  .abswitch{bottom:4.6rem} /* clear the mobile action bar */
}

/* ==================== light-background variants (copy B uses these on paper sections) ==================== */
/* testimonial carousel + pull-quotes on a light section */
.pad:not(.on-dark) .vtest__quote{color:var(--ink)}
.pad:not(.on-dark) .vtest__name{color:var(--ink)}
.pad:not(.on-dark) .vtest__role{color:var(--muted)}
.pad:not(.on-dark) .vtest__arrow{border-color:var(--line);color:var(--ink)}
.pad:not(.on-dark) .vtest__arrow:hover{background:var(--brass);border-color:var(--brass);color:#14110d}
/* comparison table on a light section */
.cmp__table--light th{color:var(--ink)}
.cmp__table--light td{border-top-color:var(--line);color:var(--muted)}
.cmp__table--light td:first-child{color:var(--ink)}
.cmp__table--light .cmp__hl{background:rgba(176,141,87,.08);color:var(--ink);border-left-color:rgba(176,141,87,.28)}
.cmp__table--light th.cmp__hl{color:var(--brass-deep)}
/* numbered why-steps on a dark section (copy B reuses them inside #difference) */
.on-dark .why__step h3{color:var(--paper-on-dark)}
.on-dark .why__step .muted{color:var(--muted-2)}

/* ==================== carbon/brass annotated diagram ==================== */
.cdiag{margin:0;padding:0}
.cdiag__stage{position:relative;display:block}
.cdiag__stage img{width:100%;height:auto;display:block}
.cdiag__pin{position:absolute;transform:translate(-50%,-50%);display:block;text-align:center;white-space:nowrap}
.cdiag__pin i{display:block;width:14px;height:14px;border-radius:50%;margin:0 auto .5rem;
  background:var(--brass);box-shadow:0 0 0 5px rgba(176,141,87,.22)}
.cdiag__pin b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--ink);line-height:1.2}
.cdiag__pin s{display:block;text-decoration:none;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.on-dark .cdiag__pin b{color:var(--paper-on-dark)}
.on-dark .cdiag__pin s{color:var(--muted-2)}
.cdiag__key{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.2rem;font-size:.9rem;color:var(--muted)}
.cdiag__key span{display:inline-flex;align-items:center;gap:.5rem}
.cdiag__key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.cdiag__key .k-carbon{background:#2A2620}
.cdiag__key .k-brass{background:var(--brass)}
@media (max-width:700px){
  .cdiag__pin b{font-size:.85rem}
  .cdiag__pin s{display:none}
}

/* ==================== video / audio proof ==================== */
.vidgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,2rem)}
.vid{margin:0}
.vid__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line-dark-2)}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{margin-top:.7rem;font-size:.9rem;color:var(--muted-2)}
.pad:not(.on-dark) .vid figcaption{color:var(--muted)}
@media (max-width:700px){.vidgrid{grid-template-columns:1fr}}

/* six-up benefit grid (Javvy-style feature+benefit blocks) */
.why__steps--6{grid-template-columns:repeat(3,1fr);row-gap:clamp(2rem,4vh,3rem)}
.why__steps--6 .why__step{border-top:2px solid var(--brass);padding-top:1.2rem}
.why__steps--6 .why__step h3{font-size:1.18rem;margin-bottom:.5rem}
.why__steps--6 .why__step p{font-size:.95rem;line-height:1.6}
@media (max-width:900px){.why__steps--6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why__steps--6{grid-template-columns:1fr}}

/* longer, benefit-led hero headline needs a smaller scale than the two-word original */
.hero__title--long{font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.04;letter-spacing:-.015em;max-width:16ch}
@media (max-width:1000px){.hero__title--long{font-size:clamp(2.1rem,7.5vw,3rem);max-width:none}}

/* ==================== SIMPLE LAYOUT (2026-07-31) ====================
   One headline, one line, then the visual. Nothing else per section. */
.hero--simple .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:center;align-items:center;
  padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(4rem,10vh,7rem)}
.hero--simple .hero__copy{max-width:none;width:100%}
/* max-width in em so it scales with the headline, not with body text */
.hero--simple .hero__title{font-size:clamp(2.6rem,6.5vw,5.2rem);line-height:1.02;margin:0 auto 1.4rem;max-width:14em}
.hero--simple .hero__lede{max-width:30em;margin-inline:auto;font-size:clamp(1rem,1.4vw,1.12rem)}
.hero--simple .hero__cta{justify-content:center;margin-top:2.2rem}

/* section head: headline plus at most one line, generous air */
.shead{max-width:34ch;margin:0 0 clamp(2.5rem,6vh,4rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead h2{margin:0}
.shead p{margin:.9rem 0 0;color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);max-width:44ch}
.shead--center p{margin-inline:auto}
.on-dark .shead p{color:var(--muted-2)}

/* proof band: number + one line only */
.proof__v{margin-bottom:.35rem}

/* three plain benefits */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4rem)}
.trio h3{font-size:1.3rem;margin:0 0 .5rem}
.trio p{margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.on-dark .trio p{color:var(--muted-2)}
@media (max-width:800px){.trio{grid-template-columns:1fr;gap:2.2rem}}

/* more air between sections */
.pad--air{padding-block:clamp(5rem,14vh,10rem)}

/* ==================== REVISION 14 (2026-08-09) — DE copy rebuild ====================
   Added for the rebuilt German homepage: the "In Wien gemessen" typographic block,
   the finder band + finder overlay (the 4-step quiz left the hero), a 5-up static
   artist wall and light-section quote cards. Everything else reuses the existing
   design system unchanged. */

/* proof strip: four short facts, no display numerals, no sub-lines */
.proof__v:last-child{margin-bottom:0}

/* artist wall: 10 portraits, two rows of five */
.agrid--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.agrid--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.agrid--5{grid-template-columns:repeat(2,1fr)}}

/* quote cards on a light section (the dark .qitem lives on the artists page) */
.qrow--light{margin-top:clamp(2.6rem,5vw,4rem)}
.qrow--light .qitem blockquote{color:var(--ink);font-size:1.12rem}
.qrow--light .qitem figcaption b{color:var(--ink)}
.qrow--light .qitem figcaption span{color:var(--muted)}
.qitem__ph{width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:center 20%;margin-bottom:1.1rem;filter:grayscale(.1)}
.qitem__orig{font-size:.78rem;line-height:1.5;color:var(--muted-2);margin:.9rem 0 0;font-style:italic;text-transform:none;letter-spacing:0}

/* in Wien gemessen */
.measured{max-width:60ch}
.measured .h2{margin-bottom:1.5rem}
.measured .quotebar{margin-top:2.6rem}
.measured__cta{margin:2.6rem 0 0}

/* finder band */
.fband{padding-block:clamp(1.7rem,4vw,2.6rem);border-block:1px solid var(--line-dark-2)}
.fband__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem 2rem}
.fband__line{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.25;color:var(--paper)}

/* finder overlay */
.fov{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(1rem,4vh,3rem) 1rem;background:rgba(12,10,8,.74);overflow-y:auto}
.fov.is-open{display:flex}
.fov__panel{position:relative;width:min(560px,100%)}
.fov__panel .finder{max-width:none}
.fov__close{position:absolute;top:.55rem;right:.55rem;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease)}
.fov__close:hover{background:var(--paper-2)}
body.fov-open{overflow:hidden}

/* Made in Switzerland: on the rebuilt page the LUX badge stands alone (the English
   sub-line was cut), so it has to be readable on its own. Cap is ~180px per the image
   map. Scoped to --solo so the untouched EN page keeps its 70px badge + text label. */
.maker__lux--solo img{height:132px}
@media (max-width:640px){.maker__lux--solo img{height:104px}}

/* ---- REVISION 15 · 2026-08-09 · hero image legibility ------------------- */
/* The new hero bakes its own scrim, so the CSS overlay can be much lighter
   or the instrument reads as muddy. Scoped to .hero--simple only. */
.hero--simple .hero__bg img{opacity:1}
.hero--simple .hero__bg::after{
  background:
    radial-gradient(110% 85% at 78% 42%, rgba(176,141,87,.18), rgba(20,18,16,0) 58%),
    linear-gradient(180deg, rgba(16,14,10,.62) 0%, rgba(16,14,10,.30) 46%, rgba(16,14,10,.72) 100%),
    linear-gradient(90deg, rgba(16,14,10,.70) 0%, rgba(16,14,10,.20) 52%, rgba(16,14,10,0) 78%);
}

/* ---- REVISION 16 · 2026-08-09 · problem-section illustrations ----------- */
/* Flat engineering line drawings, one per card. Transparent SVG in brand
   colours, so they sit on the paper background without a plate. */
.why__illus{
  display:block;width:100%;max-width:19rem;height:auto;
  margin:0 0 1.35rem;opacity:.92;
}
@media (max-width:900px){ .why__illus{max-width:15rem;margin-inline:auto} }

/* ==================== REVISION 17 · 2026-08-09 ====================
   German homepage, client revision round. Everything below is scoped so the
   English page (which still uses the centred hero, the finder band and the
   finder overlay) is untouched.
   1  hero copy left-aligned on desktop
   2  mechanism block: bullets, the three illustrations, a photo gallery
   3  Made in Switzerland: one big workshop photo plus two smaller ones
   4  "In Wien gemessen" as two columns with bullets
   5  booking flow: four questions first, calendar revealed afterwards
   ================================================================= */

/* ---- 1 · hero, copy on the left ---------------------------------------
   The hero background is being replaced with a frame that carries the
   instrument on the RIGHT, so on desktop the copy is pinned left and capped
   at roughly 45% of the page. Mobile keeps the centred .hero--simple layout,
   because there the image sits behind the text either way. */
@media (min-width:900px){
  .hero--left .hero__inner{justify-items:start;text-align:left}
  .hero--left .hero__copy{max-width:min(45%,30em)}
  .hero--left .hero__title{font-size:clamp(2.4rem,4.4vw,3.9rem);max-width:none;margin:0 0 1.4rem}
  .hero--left .hero__lede{max-width:34ch;margin-inline:0}
  .hero--left .hero__cta{justify-content:flex-start}
}

/* ---- 2 · mechanism block (4a) ----------------------------------------- */
/* left column now holds the big carbon image AND the small gallery under it */
.diff__grid--gallery{align-items:start}
.diff__col{display:grid;gap:clamp(.7rem,1.4vw,1rem)}

/* gallery strip: three real photographs, small enough to stay a footnote to
   the big image above them. Nothing from /img/ai-shots/ is ever used here. */
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.55rem,1.2vw,.85rem)}
.figrow__item{margin:0;overflow:hidden;border-radius:var(--radius);background:#0f0d0b}
.figrow__item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.figrow__item:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.figrow__item img{transition:none}
  .figrow__item:hover img{transform:none}}

/* the three bullets that replace the second paragraph */
.mech__points{margin:1.6rem 0 0;max-width:46ch}
.mech__points li{font-size:1rem}
.on-dark .mech__points li{color:#C7C1B5}

/* Die drei Linienzeichnungen sassen ab Revision 17 hier.
   Revision 19 hat sie auf Kundenwunsch entfernt und durch ein kleines Symbol
   vor jedem Stichpunkt ersetzt, siehe Revision 19. Die alten Regeln sind
   gelöscht, weil sie auf keiner Seite mehr greifen. */

@media (max-width:900px){
  .diff__grid--gallery{grid-template-columns:1fr}
}

/* ---- 3 · Made in Switzerland: big photo plus smaller ones -------------- */
.swissshots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1rem)}
.swissshots__big{grid-column:1 / -1}
.swissshots__big img{aspect-ratio:3/2}
.swissshots__small img{aspect-ratio:1/1}
@media (max-width:560px){
  .swissshots__big img{aspect-ratio:4/3}
}

/* ---- 4 · In Wien gemessen, two columns --------------------------------- */
.measured--split{max-width:none;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.measured--split .measured__text{max-width:60ch}
.measured--split .measured__points{padding-top:.6rem}
.measured--split .measured__points li{font-size:1.02rem;color:var(--paper-on-dark);line-height:1.5;
  padding-left:1.4rem;margin-bottom:1rem}
.measured--split .measured__points li:last-child{margin-bottom:0}
.measured--split .measured__cta{grid-column:1 / -1}
@media (max-width:900px){
  .measured--split{grid-template-columns:1fr;gap:2rem}
  .measured--split .measured__points{padding-top:0}
}

/* ---- 5 · booking flow: questions first, calendar second ---------------- */
/* The four questions are step one and sit inline in #consult. The calendar is
   revealed only once question four is answered (app.js). The e-mail fallback
   under it stays visible the whole time, so nobody is trapped in the quiz. */
.booking{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem)}
.booking .finder{box-shadow:0 24px 60px -34px rgba(20,18,16,.35)}
.consult__reveal[hidden]{display:none}
.consult__reveal{animation:fadeSlide .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.consult__reveal{animation:none}}
.consult__alt{margin-top:0;font-size:.82rem}
.consult__alt a{white-space:normal}

/* ==================== REVISION 18 · 2026-08-10 ====================
   Instruments page, German. Andi rejected the 360 scroll-rotation, so every
   product now uses ONE plain click-through gallery: a big lead image, the other
   photographs as thumbnails underneath, and two arrow buttons once there are
   more than three pictures. Nothing in here reacts to scrolling, there is no
   timer and there is no autoplay. Without JS the big image is a normal <img>
   and the thumbs are still visible, so the block degrades to a photo grid.
   1  .spin__hint hidden — the 360 JS is gone, so the hint would be a lie
   2  .fambar — the five parts of the range above the fold, equal tile size
   3  .gal — the gallery component
   ================================================================= */

/* ---- 1 · the old 360 hint --------------------------------------------- */
.spin__hint{display:none}

/* ---- 2 · above the fold: the range as five equal picture tiles ---------
   The page head is a dark band and the product cut-outs are transparent with
   dark bells, so each tile needs its own paper plate or the instrument
   disappears. Every tile is exactly the same size: no family outranks another. */
.phead--fam{padding-bottom:clamp(3.5rem,7vh,5.5rem)}
.fambar{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.5rem,1.2vw,1rem);margin-top:clamp(2rem,4vw,3rem)}
.fam{display:block;color:var(--paper-on-dark)}
.fam__media{display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;padding:clamp(.4rem,1vw,.8rem)}
.fam__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;transition:transform .6s var(--ease)}
.fam:hover .fam__media img{transform:scale(1.04)}
/* the bag tile is a photograph on white, not a cut-out, so it fills its tile
   instead of floating in the middle of one */
.fam__media--photo{padding:0}
.fam__media--photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.fam__label{display:block;margin-top:.7rem;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-on-dark);transition:color .3s var(--ease)}
.fam:hover .fam__label{color:var(--brass-soft)}
.fam:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
@media (max-width:900px){
  .fambar{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .fambar{grid-template-columns:repeat(2,1fr)}
  .fam__label{font-size:.66rem;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .fam__media img,.fam:hover .fam__media img{transition:none;transform:none}
}

/* ---- 3 · the click-through gallery -------------------------------------
   Every rule is scoped under .prow__media because the older instruments rules
   (rev 7) set `.prow__media img{width:100%}` and bleed the media box off the
   viewport edge. .prow__media--gal cancels that bleed so the arrows stay on
   screen and the thumbnail row has room. */
.prow__media--gal{margin-right:0 !important;margin-left:0 !important;
  display:block;width:100%}
.gal{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vw,.9rem);width:100%}
.gal:focus-visible{outline:2px solid var(--brass);outline-offset:6px;border-radius:var(--radius)}

/* The stage is a fixed-height band, and the image is contained inside it.
   That is deliberate: the products are a mix of 4:3 and 2:1 (the trombones),
   and photographs in other ratios sit in the same galleries. `contain` inside a
   ratio-free box means nothing is ever cropped and nothing is ever stretched,
   whatever ratio the file happens to be, and the row height does not jump when
   you click through. */
.prow__media--gal .gal__stage{position:relative;display:flex;align-items:center;
  justify-content:center;background:var(--paper-2);border-radius:var(--radius);
  padding:clamp(1rem,2.4vw,2rem);height:clamp(240px,30vw,400px)}
.prow__media--gal .gal__img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;transform:none !important;transition:none}

/* Arrows are hidden until app.js wires them, so a JS-off visitor never sees a
   dead control. Galleries with three or fewer pictures carry no arrows at all. */
.prow__media--gal .gal__arrow{display:none}
.prow__media--gal .gal.is-ready .gal__arrow{
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(244,241,234,.92);color:var(--ink);
  font-family:var(--sans);font-size:1.35rem;line-height:1;padding:0;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.prow__media--gal .gal__arrow--prev{left:.6rem}
.prow__media--gal .gal__arrow--next{right:.6rem}
.prow__media--gal .gal__arrow:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.prow__media--gal .gal__arrow:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.prow__media--gal .gal__thumbs{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem}
.prow__media--gal .gal__thumbs li{margin:0}
.prow__media--gal .gal__thumb{width:78px;height:58px;padding:.25rem;cursor:pointer;
  background:var(--paper-2);border:1px solid transparent;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;opacity:.7;
  transition:border-color .3s var(--ease),opacity .3s var(--ease)}
.prow__media--gal .gal__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;transform:none !important;transition:none}
.prow__media--gal .gal__thumb:hover{opacity:1}
.prow__media--gal .gal__thumb[aria-current="true"]{border-color:var(--brass);opacity:1}
.prow__media--gal .gal__thumb:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* the flugelhorn and sax-neck sections are themselves paper-2, so the plate
   needs one step more contrast there or it vanishes */
.on-paper-2 .prow__media--gal .gal__stage,
.on-paper-2 .prow__media--gal .gal__thumb{background:var(--paper-3)}

@media (max-width:900px){
  .prow__media--gal .gal__stage{height:clamp(220px,48vw,320px)}
}
@media (max-width:520px){
  .prow__media--gal .gal__thumb{width:62px;height:48px}
}

/* ==================== REVISION 20 · 2026-08-10 ====================
   Instruments page, German. Two things Andi asked for after seeing rev 18:
   1  arrows on EVERY gallery, not only on the ones with more than three
      pictures. That is markup, not CSS, but it supersedes the note in the
      rev-18 block above: the rule is now two pictures or more.
   2  a full-screen view of the big picture. Clicking the large image opens a
      lightbox over a dark backdrop, with its own arrows, a close button and
      keyboard control.
   The lightbox lives once in the <body>, is built by app.js and is used by
   every gallery on the page. Without JS neither the zoom cursor nor the
   overlay exist, so nothing looks clickable that is not.
   ================================================================= */

/* ---- 1 · the big image becomes a zoom target once app.js has wired it ---- */
.prow__media--gal .gal__img.is-zoomable{cursor:zoom-in}
.prow__media--gal .gal__img.is-zoomable:focus-visible{outline:2px solid var(--brass);outline-offset:6px}

/* ---- 2 · the lightbox ---------------------------------------------------
   The picture keeps its own pixel size and only ever shrinks to fit the
   viewport: width/height stay auto, the max-* pair is the only limit, so a
   small file is never blown up and a large one is never cropped. */
/* The backdrop is solid, not translucent. A translucent one let the headline
   and the price of the section behind it read straight through the picture,
   which looked like a bug rather than a view. */
.lbox{position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;
  background:#0C0A08;padding:clamp(1rem,4vw,3rem)}
.lbox.is-open{display:flex}
body.lbox-open{overflow:hidden}

.lbox__img{width:auto;height:auto;max-width:min(1400px,88vw);max-height:82vh;
  object-fit:contain;display:block;
  transform:none !important;transition:opacity .25s var(--ease)}
.lbox.is-swapping .lbox__img{opacity:.25}

.lbox__btn{position:absolute;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(244,241,234,.35);background:rgba(20,18,16,.6);
  color:var(--paper);font-family:var(--sans);line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lbox__btn:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.lbox__btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* display:flex above would beat the hidden attribute, so say it explicitly.
   Same for a gallery arrow that app.js switches off for a single picture. */
.lbox__btn[hidden]{display:none}
.prow__media--gal .gal.is-ready .gal__arrow[hidden]{display:none}

.lbox__close{top:clamp(.8rem,2.5vw,1.6rem);right:clamp(.8rem,2.5vw,1.6rem);
  width:48px;height:48px;font-size:1.5rem}
.lbox__arrow{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.6rem}
.lbox__arrow--prev{left:clamp(.5rem,2vw,1.6rem)}
.lbox__arrow--next{right:clamp(.5rem,2vw,1.6rem)}

.lbox__count{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(.9rem,3vw,1.8rem);margin:0;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,241,234,.72)}

@media (max-width:640px){
  .lbox__img{max-width:94vw;max-height:74vh}
  .lbox__close{width:42px;height:42px;font-size:1.3rem}
  .lbox__arrow{width:44px;height:44px;font-size:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  .lbox__img,.lbox__btn{transition:none}
  .lbox.is-swapping .lbox__img{opacity:1}
}

/* ==================== REVISION 19 · 2026-08-10 ====================
   Deutsche Startseite, zweite Kundenrunde. Alles hier ist so eng gefasst,
   dass die englische Seite und /de/instruments unberührt bleiben.
   1  Kennzahlenstreifen zweizeilig, mit Schweizerkreuz
   2  Mechanismus (4a): Symbole vor den Stichpunkten, Bilder kleiner
   3  "Gemessen": grosse Zahl plus nüchterne Quellenangabe
   4  Instrumenten-Karten: Bilder füllen ihre Karte
   ================================================================= */

/* ---- 1 · Kennzahlenstreifen -------------------------------------------
   Vorher eine Zeile pro Feld. Jetzt grosse Zahl über kleiner Bildunterschrift,
   wie auf der Seite "Geschichte" (.stat-row). Zwei der vier Felder tragen
   keine Zahl, sondern eine Marke ("Handmade in Switzerland", "LUX Award
   2019"): die stehen in derselben Zeile, nur kleiner gesetzt, damit sie
   nicht umbrechen. */
.proof__grid--stats .proof__item{display:flex;flex-direction:column;justify-content:flex-start;gap:.55rem}
.proof__n{font-family:var(--serif);font-size:clamp(1.9rem,2.9vw,2.6rem);line-height:1;
  color:var(--brass-soft);margin:0;font-weight:500}
.proof__n--mark{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.15;letter-spacing:.01em;
  display:flex;align-items:center;gap:.55rem;min-height:clamp(1.9rem,2.9vw,2.6rem)}
.proof__flag{width:clamp(22px,1.9vw,26px);height:auto;flex:0 0 auto;display:block}
.proof__l{font-size:.78rem;color:var(--muted-2);margin:auto 0 0;line-height:1.45;max-width:24ch}
@media (max-width:760px){
  .proof__grid--stats .proof__item{gap:.4rem}
  .proof__l{max-width:none}
}

/* ---- 2 · Mechanismusblock (4a) ----------------------------------------
   Das Carbonbild war hochkant (4/5) und damit höher als die ganze Textspalte,
   der Block lief über eine Bildschirmhöhe hinaus. Jetzt liegt es im Querformat
   und die drei kleinen Bilder darunter sind flacher, sodass die Bildspalte
   ungefähr so hoch ist wie der Text daneben. */
.diff__media--wide{aspect-ratio:16/10}
.diff__grid--tight{align-items:center;gap:clamp(1.6rem,3.6vw,3.4rem)}
.diff__grid--tight .figrow__item img{aspect-ratio:4/3}
@media (min-width:901px){
  .diff__grid--tight .diff__col{max-width:640px}
  .diff__grid--tight .lede{font-size:clamp(1.2rem,1.7vw,1.5rem)}
}

/* Symbole statt Aufzählungspunkte. Ein Symbol pro Satz, eins zu eins gezeichnet.
   Sie sind rein dekorativ (alt="" und aria-hidden), der Satz trägt die Aussage.
   Ausgerichtet an der ERSTEN Zeile des Stichpunkts, nicht an der Mitte des
   Blocks, damit zweizeilige Sätze nicht verrutschen. */
.mech__points--icons{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  gap:clamp(.9rem,1.6vw,1.2rem);max-width:46ch}
.mech__points--icons li{display:grid;grid-template-columns:auto 1fr;
  align-items:start;gap:.9rem;font-size:1rem;padding:0}
.mech__points--icons li::before{content:none}
/* Breite UND Höhe fest. Die drei SVG haben zwar denselben viewBox (44x40), aber
   keine intrinsische Grösse, und mit width:auto hat der Browser sie unterschiedlich
   breit gerechnet (32.9px gegen 36.4px). Dadurch begann der Text beim ersten
   Stichpunkt 13px weiter links als bei den anderen zwei: die linke Kante war
   ausgefranst. Das war der ungleiche Abstand. Mit fester Breite stehen alle drei
   Textspalten exakt untereinander. 31px = 28px * 44/40. */
.mech__icon{width:35px;height:32px;object-fit:contain;flex:0 0 auto;display:block;
  /* an der Grundlinie der ersten Zeile ausrichten */
  margin-top:-.15em}
.mech__points--icons li > span{line-height:1.5;align-self:center}
.on-dark .mech__points--icons li{color:#C7C1B5}
/* Die Symbole sind seit 2026-08-31 direkt in Creme und Messing gezeichnet
   (icon-*.svg umgefaerbt), sie brauchen keine Platte mehr: transparent auf dunkel. */
.mech__points--icons .mech__icon{background:none;border-radius:0;padding:0;box-sizing:content-box}
@media (max-width:560px){
  .mech__icon{width:29px;height:26px}
  .mech__points--icons li{gap:.7rem}
}

/* Kurzer Zusatz unter einem Produktnamen, zum Beispiel warum die Posaunentasche
   aus Cordura ist und nicht aus Leder. Kleiner als der Fliesstext, damit die
   Karte ruhig bleibt. */
.pcard__note{font-size:.82rem;line-height:1.45;margin-top:.5rem}

/* ---- 3 · "Gemessen" ---------------------------------------------------
   Der Abschnitt soll wie ein eigener Auftritt wirken, nicht wie ein Textblock.
   Drei Bausteine: Kicker plus Überschrift links, grosse Zahl mit den drei
   Stichpunkten rechts, Quellenangabe über die ganze Breite darunter. */
.measured__kicker{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-soft);margin:0 0 1.1rem}
.measured--hero .measured__points{padding-top:.2rem}
.measured__figure{border-left:2px solid var(--brass);padding-left:1.4rem;margin-bottom:1.8rem}
.measured__n{font-family:var(--serif);font-size:clamp(3rem,6vw,4.6rem);line-height:.95;
  color:var(--brass-soft);margin:0 0 .7rem;font-weight:500}
.measured__nl{font-size:.86rem;color:var(--muted-2);margin:0;line-height:1.5;max-width:30ch}

/* Quellenangabe. Bewusst zurückhaltend gesetzt: das ist ein Beleg, keine
   Schlagzeile. Sie steht auf der vollen Breite unter beiden Spalten. */
.cite{grid-column:1 / -1;margin:clamp(2.4rem,5vw,3.6rem) 0 0;padding:clamp(1.3rem,2.6vw,1.9rem);
  border:1px solid var(--line-dark-2);border-radius:var(--radius);
  background:rgba(255,255,255,.028)}
.cite__k{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-soft);margin:0 0 .9rem}
.cite__q{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:1.45;color:var(--paper-on-dark);max-width:68ch;quotes:none}
.cite__s{margin:1rem 0 0;font-size:.78rem;line-height:1.55;color:var(--muted-2);max-width:68ch}
@media (max-width:900px){
  .measured__figure{margin-bottom:1.4rem}
}

/* ---- 4 · Instrumenten-Karten ------------------------------------------
   Die Instrumente standen mit viel Luft in ihrer Karte. Weniger Innenabstand
   und ein höheres Bildfeld, das Bild bleibt "contain": nichts wird
   beschnitten und nichts verzerrt. */
/* Scope: NUR das Raster der deutschen Startseite (.range__grid--fill). Die
   englische Startseite benutzt dieselbe .range__grid, ihre Bilder tragen aber
   keine Messwerte, deshalb darf sie hier nicht mitgeändert werden. */
.range__grid--fill .pcard__media{aspect-ratio:1/1;padding:clamp(.3rem,.7vw,.6rem)}
.range__grid--fill .pcard__media img{width:100%;height:100%;max-height:100%;object-fit:contain;
  transform-origin:var(--ox,50%) var(--oy,50%);
  transform:translate(var(--tx,0),var(--ty,0)) scale(var(--s,1))}
/* Die Produktfotos sind Freisteller mit viel leerem Rand im Bild selbst. Jede
   Karte bekommt deshalb drei Werte im style-Attribut: --s vergrössert das Bild,
   --ox/--oy setzen den Ursprung auf die Mitte des Instruments, --tx/--ty rücken
   diese Mitte in die Kartenmitte. Beschnitten wird nur der leere Rand, das
   Instrument bleibt vollständig sichtbar und wird nicht verzerrt. Die Werte sind
   aus den Bildern ausgemessen (Bounding Box des sichtbaren Instruments) und auf
   88 Prozent Kartenfüllung gerechnet, also mit Sicherheitsabstand. */
.range__grid--fill .pcard:hover .pcard__media img{
  transform:translate(var(--tx,0),var(--ty,0)) scale(calc(var(--s,1) * 1.05))}
@media (prefers-reduced-motion:reduce){
  .range__grid--fill .pcard:hover .pcard__media img{
    transform:translate(var(--tx,0),var(--ty,0)) scale(var(--s,1))}
}

/* ---- 5 · Gesprächs-Sektion --------------------------------------------
   Der Messing-Button in der linken Spalte ist gelöscht (er zeigte auf den
   Kasten direkt daneben). Dadurch ist die linke Spalte kürzer, und weil
   .consult__grid seine Spalten mittig ausrichtet, rutschte die Überschrift
   in die Seitenmitte. Oben ausrichten, damit Überschrift und Fragenkasten
   auf derselben Linie beginnen.
   Scope: nur Seiten, deren Gesprächs-Sektion die Buchungsstrecke enthält,
   also die deutsche Startseite. Die englische Seite hat dort ihr Overlay
   und keinen .booking-Block, sie bleibt unverändert. */
.consult__grid:has(.booking){align-items:start}

/* ==================== REVISION 23 · 2026-08-10 ====================
   #measured: der Text steht links, rechts läuft eine Bildfolge.

   Andi hat gemeldet, dass die linke und die rechte Spalte fast dasselbe
   sagten. Alles Textliche ist deshalb in die linke Spalte gewandert, die
   rechte Spalte zeigt jetzt fünf Fotos, die von selbst weiterlaufen.

   Scope: alles hier hängt an .measured--gallery oder an .mslide. Beide
   Klassen gibt es nur im Abschnitt #measured der beiden Startseiten. Die
   Instrumentenseiten und alle anderen Abschnitte bleiben unberührt.
   ================================================================== */

/* Die Spalten stehen jetzt fast gleich breit, weil rechts ein Bild sitzt und
   kein Textblock mehr. Sonst wäre das Bildfeld schmaler als seine Bildunter-
   schrift. minmax(0,…) verhindert, dass das Bild die Spalte aufdrückt. */
.measured--gallery{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center}

/* Die grosse Zahl ist jetzt die Überschrift. Die Schrift bleibt exakt die
   der früheren Kennzahl, nur die beiden Zeilen sind Spans in einem <h2>,
   damit die Dokumentstruktur stimmt. Die .h2-Grössen dürfen deshalb nicht
   durchschlagen. */
.measured__figure--head{font-size:inherit;line-height:inherit;margin:0 0 1.6rem;
  font-weight:400}
.measured__figure--head .measured__n,
.measured__figure--head .measured__nl{display:block}
.measured__figure--head .measured__n{margin:0 0 .7rem}
/* Die Zeile unter der Zahl stand vorher in einem Absatz und lief deshalb in
   der Grotesk. Im <h2> würde sie die Serifenschrift erben, also hier wieder
   festsetzen, damit sich am Erscheinungsbild nichts ändert. */
/* max-width 30ch stammt aus der schmalen rechten Spalte. Links ist Platz,
   dort soll die Zeile nicht nach "gemessen in" umbrechen und "Wien" allein
   stehen lassen. */
.measured__figure--head .measured__nl{font-family:var(--sans);font-weight:400;
  font-style:normal;letter-spacing:0;max-width:48ch}
.measured--gallery .measured__specs{margin:0 0 .4rem}
.measured--gallery .measured__specs li{font-size:1rem;line-height:1.5;
  padding-left:1.4rem;margin-bottom:.35rem}
.measured--gallery .measured__specs li:last-child{margin-bottom:0}
.measured--gallery .measured__specs li::before{left:.35rem}

/* ---- Die Bildfolge ------------------------------------------------------
   Ein festes quadratisches Feld, alle fünf Bilder liegen deckungsgleich
   darin und sind auf dasselbe Seitenverhältnis beschnitten. Dadurch springt
   beim Wechsel nichts. Ohne JavaScript ist nur das erste Bild sichtbar. */
.mslide{margin:0;min-width:0}
.mslide__frame{position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--radius);background:rgba(255,255,255,.03);
  border:1px solid var(--line-dark-2)}
.mslide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease}
.mslide__img:first-child{opacity:1}
/* Sobald app.js übernimmt, entscheidet die Klasse und nicht mehr die
   Reihenfolge im Markup. */
.mslide.is-live .mslide__img{opacity:0}
.mslide.is-live .mslide__img.is-current{opacity:1}

/* Die Punkte baut erst app.js. Ohne Skript bleibt der Kasten leer und es
   steht keine tote Schaltfläche auf der Seite. */
.mslide__dots{display:flex;gap:.55rem;justify-content:center;margin-top:1rem;
  min-height:0}
.mslide__dots:empty{display:none}
.mslide__dot{appearance:none;-webkit-appearance:none;background:none;padding:.45rem;
  border:0;cursor:pointer;line-height:0;border-radius:999px}
.mslide__dot::before{content:"";display:block;width:8px;height:8px;
  border-radius:999px;background:var(--muted-2);opacity:.45;
  transition:opacity .25s ease,background-color .25s ease}
.mslide__dot:hover::before{opacity:.8}
.mslide__dot[aria-current="true"]::before{background:var(--brass);opacity:1}
.mslide__dot:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mslide__img{transition:none}
  .mslide__dot::before{transition:none}
}

@media (max-width:900px){
  .measured--gallery{grid-template-columns:1fr}
  .measured--gallery .measured__specs li{font-size:.95rem}
}

/* =========================================================================
   Breadcrumbs, Danke- und 404-Listen. Ergaenzt 23.08.2026 (Pre-Launch-Check).
   ========================================================================= */
.crumbs{background:var(--paper);padding:1rem 0 .25rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:.5rem;color:var(--muted-2)}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.crumbs [aria-current="page"]{color:var(--ink-soft)}
@media (max-width:640px){.crumbs{padding-top:.75rem}.crumbs ol{font-size:.75rem}}

.crumb-list{margin:.75rem 0 0;padding-left:1.1rem;line-height:1.85}
.crumb-list li{margin-bottom:.35rem}
.crumb-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass-soft)}
.crumb-list a:hover{border-bottom-color:var(--brass)}
.foot__reply{margin-top:.85rem;font-size:.82rem;line-height:1.5;color:var(--muted-2)}

/* ==================================================================
   2026-08-31 · Bildkorrekturen (Julian)
   1) .luxmark ersetzt das award-lux.png (weisser Screenshot auf dunklem
      Grund). Typografische Plakette in Messing, passt zum Editorial-Stil.
   2) .mslide bekommt Pfeile links und rechts: die Punkte allein waren zu
      klein, und mit prefers-reduced-motion lief die Folge gar nicht weiter.
   Scope: .luxmark nur im #maker-Block, .mslide__arrow nur in der Bildfolge.
   ================================================================== */
.luxmark{display:inline-block;margin:0;padding:.95rem 1.35rem;
  border:1px solid rgba(201,174,126,.45);border-radius:3px}
.luxmark__title{display:block;font-family:var(--serif);font-size:1.25rem;
  color:var(--brass-soft);letter-spacing:.02em;margin:0 0 .3rem}
.luxmark__sub{display:block;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-on-dark);opacity:.75}

.mslide__frame{--arrow-vis:0}
.mslide:hover .mslide__frame,.mslide:focus-within .mslide__frame{--arrow-vis:1}
.mslide__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  width:44px;height:44px;border-radius:999px;
  background:rgba(20,17,13,.55);color:var(--paper-on-dark);
  display:flex;align-items:center;justify-content:center;
  opacity:var(--arrow-vis);transition:opacity .25s ease,background-color .2s ease}
.mslide__arrow:hover{background:rgba(20,17,13,.8);color:var(--brass-soft)}
.mslide__arrow:focus-visible{outline:2px solid var(--brass);outline-offset:2px;opacity:1}
.mslide__arrow--prev{left:.7rem}
.mslide__arrow--next{right:.7rem}
.mslide__arrow svg{width:18px;height:18px;display:block}
/* Ohne Hover (Touch) sind die Pfeile immer sichtbar. */
@media (hover:none){.mslide__frame{--arrow-vis:1}}
@media (prefers-reduced-motion:reduce){.mslide__frame{--arrow-vis:1}}

/* Hero: das Bild ist 2600x980, das Instrument sitzt rechts. Ohne object-position
   schnitt der cover-Beschnitt die Ventile und das Mundrohr am rechten Rand ab.
   75% zeigt das ganze Instrument, links geht nur leerer Verlauf verloren.
   Mobil (schmales Fenster) zentriert 60% den Becher samt Logo. */
.hero--simple .hero__bg img{object-position:85% 50%}
@media (max-width:640px){.hero--simple .hero__bg img{object-position:44% 50%}}

/* Taschen: drei der vier Aufnahmen sind 2:1 quer. Im 4/5-Hochformatfeld der
   pcard fuellten sie nur 40% der Karte. 4/3 passt zu den Taschen, der
   ChangeMaker-Koffer bleibt contained und wird nur unwesentlich kleiner. */
#bags .pcard__media{aspect-ratio:4/3}

/* Notiz neben der LUX-Plakette (Andi, 31.08.2026): Werner Spiris 40 Jahre
   Instrumentenbau. Gleiches Register wie die Plakette, aber als stiller Text. */
.luxmark__note{max-width:36ch;margin:0;font-size:.92rem;line-height:1.55;
  color:var(--paper-on-dark);opacity:.78;align-self:center}

/* Hero, mittlere Fenster (2026-09-01, Julians Screenshot): zwischen Handy und
   breitem Desktop schnitt der cover-Beschnitt den Becher am linken Rand halb ab.
   42% rueckt den ganzen Becher samt Logo ins Bild; die Ventile duerfen rechts
   auslaufen. Ab 1280px greift wieder 75% (ganzes Instrument). */
@media (min-width:641px) and (max-width:1279px){
  .hero--simple .hero__bg img{object-position:73% 50%}
}

/* ==================================================================
   2026-09-01 · MOBILE-PASS (Julian: "fully optimize for mobile")
   Gemessen mit echtem Geraete-Emulator bei 390px. Drei Baustellen:
   Tippflaechen unter 40px, Schriften unter 14px, und zu enge Abstaende.
   Alles nur in Media Queries: Desktop bleibt unveraendert.
   ================================================================== */
@media (max-width:640px){

  /* --- 1 · Tippflaechen ------------------------------------------------
     Apple und Google nennen 44px. Gemessen waren: Burger 30x18, Waehrung
     49x18, Sprachumschalter 18x14, Slider-Punkte 22x22, Chips 37px hoch.
     Die SICHTBARE Groesse bleibt jeweils gleich, nur die Trefferflaeche
     waechst (Padding bzw. ::after-Overlay), damit sich die Optik nicht
     aendert. */
  .nav__burger{width:44px;height:44px;margin-right:-7px}
  .nav__burger span{left:7px;width:30px}
  .nav__burger span:nth-child(1){top:14px}
  .nav__burger span:nth-child(2){top:22px}
  .nav__burger span:nth-child(3){top:30px}
  .nav.open .nav__burger span:nth-child(1),
  .nav.open .nav__burger span:nth-child(3){top:22px}

  .nav__currency{min-height:44px;padding-top:.7rem;padding-bottom:.7rem}
  .nav__locale{position:relative;display:inline-flex;align-items:center;min-height:44px}
  .nav__locale a{padding:.9rem .35rem;margin:-.9rem 0}

  /* Der Punkt bleibt 8px, die Schaltflaeche wird 40px. */
  .mslide__dot{padding:1rem}
  .mslide__arrow{width:48px;height:48px}

  .chip{padding:.8rem 1.15rem;font-size:.9rem}
  .finder__back{min-height:44px;padding:.9rem .2rem;margin-left:-.2rem}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center}
  .foot__col a{padding:.6rem 0;margin-bottom:.1rem}
  .faq__q{min-height:48px}
  .nav__brand{min-height:44px;display:inline-flex;align-items:center}
  .crumbs a{padding:.7rem .2rem;margin-left:-.2rem;display:inline-block}
  /* Das Caret zeigt ein Aufklappmenue an, das es auf dem Handy nicht gibt
     (.nav__drop ist dort display:none). Ohne Funktion also weg. */
  .nav__caret{display:none}
  /* Impressum und Datenschutz sind Pflichtlinks und waren 41x15px. */
  .foot__bot a{padding:.7rem .25rem;display:inline-block}
  /* Die Einwilligungs-Checkbox war 15x15px. */
  .optin input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}

  /* --- 2 · Schriftgroessen ---------------------------------------------
     Auf dem Handy waren Fliesstext-Varianten bei 12.5-13.1px und Labels
     bei 10.6-11.5px. Untergrenzen: 14px fuer Text, 12px fuer Versal-Labels.
     Betrifft nur diese Breite, das Desktop-Raster bleibt fein. */
  .proof__l,.cite__s,.foot__col a,.foot__col p{font-size:.875rem}
  .btn,.btn--brass,.link-arrow,.pcard__note{font-size:.9rem}
  .nav__cta{font-size:.8rem}
  .measured__kicker,.cite__k{font-size:.76rem;letter-spacing:.18em}
  .fam__label{font-size:.76rem;letter-spacing:.08em}
  .acard__credit,.acard__years,.pcard__meta,.nav__locale{font-size:.78rem}
  .prow__kicker{font-size:.78rem}
  /* Einwilligungstext und Schrittzaehler waren unter 12px. */
  .optin,.optin *{font-size:.82rem;line-height:1.5}
  .finder__step{font-size:.78rem}

  /* --- 3 · Platz fuer die Sticky-Leiste ---------------------------------
     .mbar liegt fixed unten und ist 74px hoch, body hatte aber
     padding-bottom:0 (Zeile 414). Dadurch verschwanden die letzten 74px
     der Seite (Copyright und Rechtslinks) hinter der Leiste. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ==================================================================
   2026-09-01 (2) · Julians Handy-Durchgang
   1) Abschnitt "Das Problem." entfernt, #difference folgt jetzt direkt
      auf das Kuenstlerband. Der harte Hell-Dunkel-Sprung braucht einen
      weicheren Uebergang.
   2) #consult: Fragebogen auf dem Handy direkt unter die Ueberschrift.
   3) Waehrung und Sprache wandern ins Burger-Menue.
   4) .mbar: Beschriftungen mittig.
   ================================================================== */

/* --- 1 · Uebergang ins dunkle #difference --------------------------------
   Ohne den hellen Problem-Abschnitt stiess das Kuenstlerband direkt auf die
   dunkle Flaeche. Ein kurzer Verlauf aus der Bandfarbe heraus nimmt die Kante. */
#difference{position:relative}
#difference::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(48px,8vh,96px);
  background:linear-gradient(to bottom,rgba(20,17,13,0),var(--ink) 92%);
  transform:translateY(-100%);pointer-events:none}
#difference > .wrap{position:relative;z-index:1}

/* --- 2 · Beratungsblock ---------------------------------------------------
   Desktop unveraendert: links Text (Intro oben, Schritte darunter),
   rechts der Fragebogen ueber beide Zeilen. */
@media (min-width:901px){
  .consult__intro{grid-column:1;grid-row:1}
  .consult__reassure{grid-column:1;grid-row:2}
  .consult__grid > .booking{grid-column:2;grid-row:1 / span 2}
}
/* Handy: Ueberschrift, dann sofort der Fragebogen, dann die Beruhigung. */
@media (max-width:900px){
  .consult__intro{margin-bottom:.4rem}
  .consult__reassure{margin-top:.2rem}
}

/* --- 3 · Waehrung und Sprache im Burger-Menue ----------------------------
   In der Kopfzeile standen auf dem Handy Logo, Waehrung, Sprache und Burger
   nebeneinander. Beide Umschalter sitzen jetzt im Menue, die Kopfzeile
   zeigt nur noch Logo und Burger. */
.nav__mobextra{display:none}
@media (max-width:900px){
  .nav__right .nav__currency,
  .nav__right .nav__locale{display:none}
  .nav.open .nav__mobextra{display:flex;align-items:center;gap:1.6rem;
    padding:1.1rem 0 .2rem;border-top:1px solid var(--line-dark-2)}
  .nav__mobextra .nav__currency{min-height:44px;font-size:.8rem}
  .nav__mobextra .nav__locale{min-height:44px;display:inline-flex;align-items:center;font-size:.8rem}
  .nav__mobextra .nav__locale a{padding:.9rem .35rem;margin:-.9rem 0}
}

/* --- 4 · Sticky-Leiste ---------------------------------------------------
   Die Zellen waren Grid-Elemente mit stretch, der Text sass deshalb oben.
   Bei zweizeiliger rechter Beschriftung stand "WhatsApp" nicht auf Mitte. */
.mbar a{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;line-height:1.25}

/* ==================================================================
   2026-09-02 · Zwei Fehler von Andi, iPhone 13 Pro / iOS 26.5 / Safari
   ================================================================== */

/* --- A · "Wenn ich das Menu aufrufe, ueberlagert es die Seite und ist
       dadurch unleserlich."
   Ursache: .nav.open traegt den Hintergrund, .nav ist aber nur so hoch wie
   die Kopfzeile. Das aufgeklappte .nav__links haengt mit position:absolute
   top:100% DARUNTER und war komplett durchsichtig (gemessen: rgba(0,0,0,0)),
   also lief der Seiteninhalt durch die Menuepunkte. Das Panel bekommt jetzt
   seinen eigenen Hintergrund. Sehr lange Menues werden scrollbar, damit auf
   kleinen Geraeten nichts abgeschnitten wird. */
@media (max-width:1000px){
  .nav.open .nav__links{
    background:rgba(18,16,13,.985);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-dark-2);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.75);
    max-height:calc(100dvh - 100%);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:61;
  }
}

/* --- B · "Das Band mit den Kuenstlernamen steht auf dem Mobile Device still."
   Ursache: Andi hat "Bewegung reduzieren" aktiv. Die Regel darunter schaltete
   die Animation ab und liess ein eingefrorenes, angeschnittenes Band stehen,
   das wie ein Fehler aussieht. Bei reduzierter Bewegung zeigen wir die Namen
   jetzt als ruhige, umbrechende Liste, die zweite (nur fuer die Endlosschleife
   duplizierte) Haelfte wird ausgeblendet. */
.marq__set{display:inline-flex;align-items:center;gap:1.5rem}
@media (prefers-reduced-motion:reduce){
  .marquee{padding:1.4rem 0}
  .marquee__row{animation:none;display:flex;flex-wrap:wrap;justify-content:center;
    white-space:normal;row-gap:.5rem;padding:0 var(--gutter)}
  .marq__set{flex-wrap:wrap;justify-content:center;row-gap:.5rem}
  .marq__set--dup{display:none}
  .marquee::before,.marquee::after{display:none}
}

/* Die Leiste faehrt weg, solange die Buchungssektion sichtbar ist (siehe app.js,
   iPhone-Fund von Andi 02.09.2026: sie verdeckte den Finder-Button). */
.mbar{transition:transform .3s ease}
.mbar.mbar--off{transform:translateY(110%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}