/* musicstorage landing — tokens from the app (app/static/css/app.css) + modern landing layer */
:root {
  --paper:#F6F4ED; --surface:#FFFFFF; --surface-2:#FBFAF4;
  --ink:#1B1D24; --ink-soft:#3C404B; --muted:#74777F;
  --line:#E7E2D6; --line-strong:#D9D3C4;
  --navy:#1F2C49; --navy-700:#16203A;
  --brass:#A8791F; --brass-600:#8C6515; --brass-tint:#F2E9D2; --brass-lite:#E7C77E;
  --ok:#356B4F; --ok-bg:#E6F0EA; --danger:#A6362F; --danger-bg:#F5E4E1;
  --r-sm:7px; --r:11px; --r-lg:18px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(27,29,36,.05),0 1px 1px rgba(27,29,36,.04);
  --shadow-2:0 10px 30px -14px rgba(27,29,36,.24),0 3px 8px -3px rgba(27,29,36,.08);
  --shadow-3:0 30px 70px -30px rgba(11,16,30,.6);
  --font-display:"Fraunces",Georgia,serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --maxw:1140px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-ui); font-size:16px; line-height:1.6; color:var(--ink);
  background:radial-gradient(1200px 460px at 82% -160px,#FFFDF7 0%,rgba(255,253,247,0) 70%),var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--navy); text-decoration:none; }
a:hover { color:var(--brass-600); }
h1,h2,h3 { font-family:var(--font-display); font-weight:560; color:var(--ink);
  letter-spacing:-.015em; line-height:1.1; margin:0; font-optical-sizing:auto; }
img,svg { max-width:100%; }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:3px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.mono { font-family:var(--font-mono); }
.muted { color:var(--muted); }

/* eyebrow — pill badge on light, plain on dark */
.eyebrow { display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-600); background:var(--brass-tint);
  padding:5px 11px; border-radius:999px; }
.hero .eyebrow { background:rgba(231,199,126,.14); color:var(--brass-lite);
  border:1px solid rgba(231,199,126,.28); }

/* buttons */
.btn { --bg:var(--surface); --fg:var(--ink); --bd:var(--line-strong);
  display:inline-flex; align-items:center; gap:8px; justify-content:center; font:inherit;
  font-weight:560; font-size:14px; line-height:1; cursor:pointer; padding:10px 16px;
  border-radius:11px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  transition:transform .12s ease,box-shadow .18s,background .15s,border-color .15s; white-space:nowrap; }
.btn:hover { box-shadow:var(--shadow-1); color:var(--fg); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--brass { --bg:var(--brass); --fg:#fff; --bd:var(--brass);
  box-shadow:0 8px 20px -10px rgba(168,121,31,.7); }
.btn--brass:hover { --bg:var(--brass-600); color:#fff; box-shadow:0 12px 26px -10px rgba(168,121,31,.8); }
.btn--ghost { --bg:transparent; --fg:var(--ink-soft); --bd:var(--line-strong); }
.btn--ghost:hover { --bg:var(--surface); }
.btn--ondark { --fg:#EFEDE6; --bd:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
.btn--ondark:hover { background:rgba(255,255,255,.14); color:#fff; }
.btn--lg { padding:14px 22px; font-size:15px; border-radius:13px; }
.btn--block { width:100%; }
.btn[disabled] { opacity:.55; pointer-events:none; }

/* topbar — flows into the navy hero */
.topbar { background:rgba(22,32,58,.82); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar .wrap { display:flex; align-items:center; gap:18px; height:62px; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; font-family:var(--font-display);
  font-size:19px; font-weight:560; }
.brand .clef { width:26px; height:26px; display:grid; place-items:center; color:var(--brass-lite); }
.topnav { display:flex; gap:22px; margin-left:8px; }
.topnav a { color:#C9CEDA; font-size:14px; }
.topnav a:hover { color:#fff; }
.topbar .spacer { flex:1; }
@media (max-width:820px){ .topnav { display:none; } }

/* sections */
.section { padding:84px 0; }
.section--tint { background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head { max-width:660px; margin:0 0 40px; }
.section__head h2 { font-size:clamp(26px,3.4vw,38px); margin-top:14px; }
.section__head p { color:var(--muted); margin:14px 0 0; font-size:17px; }

/* hero — navy band, manuscript texture, floating art */
.hero { position:relative; overflow:hidden; color:#EDECE6; padding:104px 0 116px; margin-top:-1px;
  background:
    radial-gradient(820px 460px at 80% -6%, rgba(168,121,31,.22), transparent 62%),
    radial-gradient(700px 500px at 6% 108%, rgba(120,150,210,.14), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
  -webkit-mask:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 72%);
  mask:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 72%); }
.hero .wrap { position:relative; z-index:1; }
.hero__grid { display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
.hero h1 { color:#fff; font-size:clamp(40px,5.6vw,66px); letter-spacing:-.025em; margin:18px 0 0; }
.hero p.lead { font-size:clamp(17px,1.5vw,20px); color:rgba(237,236,230,.76); margin:22px 0 0; max-width:40ch; }
.hero__cta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero__trust { display:flex; gap:20px; margin-top:26px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:rgba(237,236,230,.62); }
.hero__trust span { display:inline-flex; align-items:center; gap:8px; }
.hero__trust span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-lite); }
.hero__art { background:var(--surface); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); padding:26px; transform:rotate(-1.4deg); transition:transform .35s ease; }
.hero__art:hover { transform:rotate(0deg); }

/* slur — a brass tie/slur hand-underlining one word */
.slur { position:relative; white-space:nowrap; color:#F4DCA0; }
.slur svg { position:absolute; left:-2%; width:104%; height:.42em; bottom:-.26em; overflow:visible; }

/* manuscript staff rule used as a section divider */
.staffbreak { height:56px; position:relative; }
.staffbreak::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1140px,92%); height:29px;
  background:repeating-linear-gradient(180deg, var(--line-strong) 0 1px, transparent 1px 7px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.staffbreak::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 5px var(--paper); }

@media (max-width:820px){
  .hero { padding:72px 0 84px; }
  .hero__grid { grid-template-columns:1fr; gap:34px; }
  .hero__art { transform:none; order:0; }
}

/* feature grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid { grid-template-columns:1fr; } }
.feature { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:26px 24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-lite));
  transform:scaleX(0); transform-origin:left; transition:transform .24s ease; }
.feature:hover { transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.feature:hover::before { transform:scaleX(1); }
.feature__ic { width:46px; height:46px; padding:11px; border-radius:13px; color:var(--brass-600);
  background:var(--brass-tint); margin-bottom:16px; }
.feature h3 { font-size:19px; }
.feature p { color:var(--muted); margin:9px 0 0; font-size:14.5px; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:820px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps { grid-template-columns:1fr; } }
.step { position:relative; padding:26px 24px 24px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-1); overflow:hidden; }
.step__n { font-family:var(--font-mono); font-size:11.5px; color:var(--brass-600); letter-spacing:.16em; }
.step h3 { font-size:18px; margin:10px 0 0; }
.step p { color:var(--muted); margin:7px 0 0; font-size:14px; }
.step::after { content:""; position:absolute; right:16px; top:14px; width:8px; height:8px; border-radius:50%;
  background:var(--brass-tint); }

/* support band */
.support { display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; }
@media (max-width:820px){ .support { grid-template-columns:1fr; } }
.support h2 { font-size:clamp(26px,3.4vw,38px); }
.support p { color:var(--ink-soft); margin:16px 0 0; font-size:17px; }
.badge48 { font-family:var(--font-display); font-size:58px; color:var(--brass); text-align:center; line-height:1;
  padding:34px 30px; border-radius:var(--r-xl); background:
    radial-gradient(120% 120% at 50% 0%, #FBF1D8, var(--brass-tint));
  border:1px solid #E9D6A6; box-shadow:var(--shadow-2); }
.badge48 span { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  color:var(--brass-600); text-transform:uppercase; margin-top:12px; }

/* contact */
.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
@media (max-width:820px){ .contact { grid-template-columns:1fr; } }
#contactForm { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--shadow-2); }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:560; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field textarea { width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s, background .15s; }
.field input:focus, .field textarea:focus { outline:none; background:var(--surface);
  border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-tint); }
.field textarea { min-height:130px; resize:vertical; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.check input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--brass); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote { font-size:13px; margin-top:14px; }
.formnote--ok { color:var(--ok); }
.formnote--err { color:var(--danger); }

/* footer */
.foot { border-top:1px solid var(--line); background:var(--surface-2); padding:38px 0; }
.foot .wrap { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.foot a { color:var(--ink-soft); font-size:14px; }
.foot .spacer { flex:1; }
.foot small { color:var(--muted); }

/* legal pages */
.legal { max-width:760px; margin:0 auto; padding:64px 22px 90px; }
.legal h1 { font-size:clamp(30px,4vw,40px); margin-bottom:8px; }
.legal h2 { font-size:20px; margin:34px 0 8px; }
.legal p, .legal li { color:var(--ink-soft); }
.legal .ph { background:var(--brass-tint); color:var(--brass-600); padding:0 4px; border-radius:4px;
  font-family:var(--font-mono); font-size:.9em; }
.legal .back { display:inline-block; margin-bottom:24px; font-size:14px; }

/* scroll-reveal (JS adds .reveal to below-fold blocks; .in when in view) */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.grid .feature:nth-child(3n+2){ transition-delay:.07s; }
.grid .feature:nth-child(3n+3){ transition-delay:.14s; }
.steps .step:nth-child(2){ transition-delay:.06s; }
.steps .step:nth-child(3){ transition-delay:.12s; }
.steps .step:nth-child(4){ transition-delay:.18s; }
.trustband__grid .trustband__item:nth-child(3n+2){ transition-delay:.06s; }
.trustband__grid .trustband__item:nth-child(3n+3){ transition-delay:.12s; }
.notenwart__list .notenwart__item:nth-child(2){ transition-delay:.06s; }
.notenwart__list .notenwart__item:nth-child(3){ transition-delay:.12s; }
.notenwart__list .notenwart__item:nth-child(4){ transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .hero__art, .btn, .feature, .forwho__list li, .faq details, .faq__ic::before, .faq__ic::after { transition:none; }
}

/* audience — "Für wen" (slim band under the hero) */
.forwho { padding:58px 0; background:var(--surface-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.forwho__title { font-size:clamp(21px,2.5vw,29px); margin:12px 0 0; max-width:20ch; }
.forwho__list { list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0; padding:0; }
.forwho__list li { display:inline-flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:999px; padding:10px 16px;
  font-size:14.5px; font-weight:560; color:var(--ink-soft); box-shadow:var(--shadow-1);
  transition:transform .16s ease, border-color .16s ease, color .16s ease; }
.forwho__list li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brass); flex:none; }
.forwho__list li:hover { transform:translateY(-2px); border-color:var(--brass-lite); color:var(--ink); }

/* trust band — navy, echoes the hero */
.trustband { position:relative; overflow:hidden; padding:78px 0; color:#EDECE6;
  background:
    radial-gradient(720px 380px at 88% -12%, rgba(168,121,31,.20), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%); }
.trustband::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
  -webkit-mask:radial-gradient(120% 90% at 28% 18%, #000 30%, transparent 72%);
  mask:radial-gradient(120% 90% at 28% 18%, #000 30%, transparent 72%); }
.trustband .wrap { position:relative; z-index:1; }
.trustband__head { max-width:620px; }
.trustband__head .eyebrow { background:rgba(231,199,126,.14); color:var(--brass-lite);
  border:1px solid rgba(231,199,126,.28); }
.trustband__head h2 { color:#fff; font-size:clamp(24px,3vw,34px); margin-top:14px; }
.trustband__head p { color:rgba(237,236,230,.74); margin:14px 0 0; font-size:16.5px; }
.trustband__grid { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:36px 0 0; padding:0; }
@media (max-width:820px){ .trustband__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .trustband__grid { grid-template-columns:1fr; } }
.trustband__item { display:flex; gap:13px; padding:18px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.trustband__item svg { width:24px; height:24px; flex:none; color:var(--brass-lite); }
.trustband__item b { display:block; color:#fff; font-size:15px; font-weight:560; }
.trustband__item span { display:block; color:rgba(237,236,230,.66); font-size:13.5px; margin-top:3px; line-height:1.5; }

/* FAQ — native <details>, brass +/− marker */
.faq__list { max-width:820px; margin:0 auto; }
.faq details { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-1); margin-bottom:12px; }
.faq details[open] { border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:20px 22px; font-family:var(--font-display); font-size:17.5px; font-weight:560; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--brass-600); }
.faq summary:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:6px; }
.faq__ic { margin-left:auto; flex:none; width:22px; height:22px; position:relative; }
.faq__ic::before, .faq__ic::after { content:""; position:absolute; background:var(--brass);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.faq__ic::before { top:10px; left:3px; width:16px; height:2px; }
.faq__ic::after { left:10px; top:3px; width:2px; height:16px; }
.faq details[open] .faq__ic::after { transform:scaleY(0); opacity:0; }
.faq__a { padding:0 22px 22px; }
.faq__a p { color:var(--ink-soft); font-size:15px; margin:0; line-height:1.65; }
.faq__a p + p { margin-top:10px; }

/* digitaler Notenwart — Positionierung: mehr als ein Archiv */
.notenwart__grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; }
@media (max-width:820px){ .notenwart__grid { grid-template-columns:1fr; gap:32px; } }
.notenwart__intro h2 { font-size:clamp(26px,3.4vw,38px); margin-top:14px; }
.notenwart__intro p { color:var(--ink-soft); margin:16px 0 0; font-size:17px; }
.notenwart__intro strong { color:var(--ink); font-weight:560; }
.notenwart__list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.notenwart__item { display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.notenwart__item:hover { transform:translateY(-2px); box-shadow:var(--shadow-2);
  border-color:var(--line-strong); }
.notenwart__item svg { flex:none; width:30px; height:30px; padding:6px; border-radius:9px;
  color:var(--brass-600); background:var(--brass-tint); }
.notenwart__item b { display:block; font-family:var(--font-display); font-weight:560;
  font-size:17px; color:var(--ink); }
.notenwart__item span { display:block; color:var(--muted); font-size:14.5px; margin-top:4px;
  line-height:1.5; }
/* muss hinter dem Basisblock stehen: gleiche Spezifität, spätere Regel gewinnt */
@media (prefers-reduced-motion:reduce){ .notenwart__item { transition:none; } }