/* ===== Ricarda M. – ricardam.com ===== */

/* Schriften lokal vom eigenen Server (keine Verbindung zu Google) – SIL Open Font License */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/cormorant-garamond.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url(fonts/cormorant-garamond-italic.woff2) format("woff2")}
@font-face{font-family:"Signet Roundhand";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/signet-roundhand.ttf) format("truetype")}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/jost.woff2) format("woff2")}

:root{
  --navy:#0a2385; --navy-2:#061660; --deep:#020a2c; --black:#000;
  --silver:#eef1f8; --silver-2:#c9d0e0; --muted:#97a2c2; --line:rgba(238,241,248,.16);
  --paper:#fbfbfd; --ink:#1a2040; --ink-2:#4a5272; --ink-3:#7a82a0; --rule:#e3e6ef;
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);font-weight:400;color:var(--silver-2);background:var(--black);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--silver);text-decoration-color:rgba(238,241,248,.35);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
a:hover{color:#fff;text-decoration-color:#fff}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px}

/* ---------- Coming-Soon (Startseite) ---------- */
html.cs,html.cs body{height:100%;background:#000;overflow:hidden}
.rm-hero{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;background:#000}
.rm-hero video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;max-width:none}
.rm-hero.rm-bars-y video{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
                                 mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}
.rm-hero.rm-bars-x video{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
                                 mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
.rm-hero.rm-quer{background:
    linear-gradient(to right,#09227f 0%,#071b71 33%,#061965 42%,#030c33 50%,#000105 58%,#000 64%) top/100% 50.5% no-repeat,
    linear-gradient(to right,#05165e 0%,#040f4d 33%,#030e46 42%,#010624 50%,#010005 58%,#000 64%) bottom/100% 50.5% no-repeat,#000}
.rm-hero.rm-portrait{background:linear-gradient(to bottom,#08227f 0%,#04155a 30%,#040f4d 40%,#00061f 50%,#000 58%)}

.rm-sound{position:absolute;right:20px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(235,242,255,.5);background:rgba(0,0,0,.35);color:#ebf2ff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s}
.rm-sound:hover{background:rgba(0,0,0,.6);border-color:#ebf2ff}
.rm-sound svg{width:22px;height:22px}
.rm-sound .on{display:none}
.rm-sound[aria-pressed="true"] .on{display:block}
.rm-sound[aria-pressed="true"] .off{display:none}

/* ---------- Fußzeile (alle Seiten) ---------- */
.foot{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;
  padding:1.2rem clamp(16px,4vw,40px) calc(1.2rem + env(safe-area-inset-bottom,0px));
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.foot a{color:var(--silver-2);text-decoration:none}
.foot a:hover,.foot a[aria-current]{color:#fff}
.cs .foot{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
  border-top:0;opacity:0;animation:fade 1.2s ease 2.8s forwards}
@keyframes fade{to{opacity:1}}

/* ---------- Unterseiten ---------- */
body.sub{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 0% 0%,var(--navy) 0%,var(--navy-2) 28%,var(--deep) 55%,var(--black) 85%) fixed,#000}
.top{display:flex;align-items:center;gap:1rem;padding:1.4rem clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--silver)}
.brand img{width:56px;height:56px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.brand span{font-family:"Signet Roundhand",var(--serif);font-weight:400;font-size:2.3em;letter-spacing:0;line-height:1;padding-top:.15em;white-space:nowrap}
@media (max-width:480px){.brand span{font-size:2em}.brand img{width:46px;height:46px}}
.top .back{margin-left:auto;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--silver-2)}
.top .back:hover{color:#fff}

main.wrap{flex:1;width:100%;max-width:900px;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(16px,4vw,40px) 4.5rem}
main.wrap.wide{max-width:1080px}
.eyebrow{font-size:.76rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
h1{font-family:var(--sans);font-weight:500;color:var(--silver);font-size:clamp(1.9rem,5vw,2.3rem);line-height:1.2;
  margin:0 0 1.8rem;letter-spacing:.005em;overflow-wrap:break-word;hyphens:auto}
.lead{font-size:1.1rem;font-weight:300;color:var(--silver-2);max-width:38rem;margin:-1rem 0 2rem}

/* helle Inhaltskarte – gut lesbar */
.card{background:var(--paper);color:var(--ink-2);border-radius:22px;padding:clamp(1.4rem,4.5vw,3rem);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);font-size:1.02rem}
.card + .card{margin-top:1.4rem}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.card p{margin:0 0 1rem}
.card strong{color:var(--ink);font-weight:500}
.card a{color:var(--navy);text-decoration-color:rgba(10,35,133,.35)}
.card a:hover{color:var(--navy-2);text-decoration-color:var(--navy)}
.card h2{font-family:var(--sans);font-weight:500;color:var(--navy);font-size:1.15rem;line-height:1.35;
  margin:2rem 0 .6rem;padding-top:1.8rem;border-top:1px solid var(--rule);letter-spacing:.01em}
.card h2:first-child{padding-top:0;border-top:0}
.card h2 .n{color:var(--navy);margin-right:.4rem}
.card .stand{margin-top:2.4rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 2rem;margin:0}
dl.facts dt{color:var(--ink-3);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding-top:.2rem}
dl.facts dd{margin:0;color:var(--ink)}
@media (max-width:560px){dl.facts{grid-template-columns:1fr;gap:.1rem}dl.facts dd{margin-bottom:.8rem}}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:1.4rem;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact .info{color:var(--silver-2);border:1px solid var(--line);border-radius:22px;padding:clamp(1.4rem,3.5vw,2.2rem);
  background:linear-gradient(160deg,rgba(10,35,133,.45),rgba(2,10,44,.35));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.contact .info h2{font-family:var(--sans);font-weight:500;font-size:1.15rem;color:var(--silver);margin:0 0 1.2rem;line-height:1.35;letter-spacing:.01em}
.contact .info .item{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid var(--line)}
.contact .info svg{flex:none;width:20px;height:20px;margin-top:.2rem;color:var(--silver)}
.contact .info small{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact .info span{color:var(--silver)}

/* ---------- Passwort-Sperre ---------- */
body.gate{justify-content:center;align-items:center;padding:2rem 16px}
.gate-box{width:100%;max-width:380px;text-align:center}
.gate-box img{width:120px;height:120px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.gate-brand{font-family:"Signet Roundhand",var(--serif);font-size:2.6rem;line-height:1.1;color:var(--silver);margin:.6rem 0 1.6rem}
.gate .card{text-align:left}
.gate .btn{width:100%;justify-content:center}

/* ---------- Musik ---------- */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
@media (max-width:760px){.tracks{grid-template-columns:1fr}}
.tracks .card + .card{margin-top:0}
.track{display:flex;flex-direction:column;gap:1.2rem}
.track-head{display:flex;gap:1rem;align-items:center}
.track-icon{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));box-shadow:0 8px 20px rgba(10,35,133,.3)}
.track-icon svg{width:24px;height:24px}
.track h2{margin:0;padding:0;border:0}
.track .meta{margin:.15rem 0 0;font-size:.85rem;color:var(--ink-3)}
.track audio{width:100%;height:44px;color-scheme:light}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}
.card a.btn,.card a.btn:hover{color:#fff;text-decoration:none}
.track > a.btn{align-self:flex-start}
.howto{border-top:1px solid var(--rule);padding-top:1rem;font-size:.95rem}
.howto summary{cursor:pointer;font-weight:500;color:var(--navy)}
.howto h3{font-size:.95rem;font-weight:500;color:var(--ink);margin:1.1rem 0 .3rem}
.howto ol{margin:0;padding-left:1.3rem}
.howto li{margin:.2rem 0}
.howto p{margin:.9rem 0 0}
.note{margin-top:2rem;font-size:.82rem;color:var(--muted)}

/* ---------- Formular ---------- */
.form{display:grid;gap:1.3rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.field label{display:block;font-size:.92rem;font-weight:500;color:var(--ink);margin-bottom:.45rem}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid #d6dae6;border-radius:12px;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s;color-scheme:light}
.field textarea{min-height:180px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#a3a9bf}
.field input:hover,.field textarea:hover{border-color:#b9bfd2}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,35,133,.12)}
.check{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2);line-height:1.55;cursor:pointer}
.check input{margin:.15rem 0 0;accent-color:var(--navy);width:20px;height:20px;flex:none;cursor:pointer;color-scheme:light}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.req{color:var(--navy)}
.hint{font-size:.82rem;color:var(--ink-3);margin:-.4rem 0 0}
.btn{display:inline-flex;align-items:center;gap:.7rem;justify-self:start;font:inherit;font-size:.86rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);border:0;border-radius:999px;
  padding:1rem 2.2rem;box-shadow:0 10px 28px rgba(10,35,133,.35);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(10,35,133,.45)}
.btn:focus-visible{outline:3px solid rgba(10,35,133,.35);outline-offset:3px}
.btn svg{width:18px;height:18px}
.msg{border-radius:12px;padding:.95rem 1.15rem;margin-bottom:1.4rem;font-size:.95rem;line-height:1.55}
.msg.ok{color:#17603a;background:#e8f6ee;border:1px solid #bfe5cd}
.msg.err{color:#9b1c24;background:#fdeeee;border:1px solid #f4c7c9}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}
  .rm-hero video{display:none}
  .rm-hero{background:#000 var(--rm-poster) center/contain no-repeat!important}
}