/* studio-live.css – Studio-Seite im Design der Live-Seite (VORSCHAU). Nur Design, Inhalte/Fotos unverändert. Nach styles.css laden. */
@font-face { font-family:'Josefin Sans'; font-weight:300; font-style:normal; font-display:swap; src:url('assets/fonts/gl003/JosefinSans-Light.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url('assets/fonts/gl003/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/gl003/Poppins-Regular.ttf') format('truetype'); }
body.page-studio{ --gold:#FFC800; --accent:#FFC800; --muted:#C4C4C4; --body:#C4C4C4; --on-accent:#0B0B0B; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --glass-bg:rgba(14,14,14,.72); --font-head:"Josefin Sans",Arial,sans-serif; --font-body:"Poppins",Arial,sans-serif; --wrap:1240px; --gutter:clamp(20px,5vw,64px);
  font-family:var(--font-body); font-weight:300; color:var(--body); background:#0B0B0B; }
.page-studio h1,.page-studio h2,.page-studio h3,.page-studio .nav__mode-link,.page-studio .player__artist{ font-family:var(--font-head); font-weight:300; text-transform:uppercase; }
.page-studio ::selection{ background:#FFC800; color:#000; }
.page-studio :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Header */
.page-studio .nav,.page-studio .nav.scrolled{ background:linear-gradient(180deg,rgba(11,11,11,.55),rgba(11,11,11,0)); backdrop-filter:none; border-bottom:1px solid transparent; transition:background .3s,border-color .3s; }
.page-studio .nav.scrolled{ background:rgba(11,11,11,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.page-studio .nav__inner{ max-width:var(--wrap); padding:0 var(--gutter); }
.page-studio .nav__links{ gap:32px; }
.page-studio .nav__links a{ font:400 .75rem/1 var(--font-body); letter-spacing:.2em; color:#e8e8e8; }
.page-studio .nav__links a:hover{ color:var(--accent); }
.page-studio .nav__mode-link{ font-family:var(--font-head); }
.page-studio .lang{ font:400 .75rem/1 var(--font-body); letter-spacing:.16em; color:#8A8A8A; padding:6px 4px; }
.page-studio .lang.active{ color:#fff; }
.page-studio .nav__lang{ gap:8px; align-items:center; }
.page-studio .nav__lang .lang + .lang::before{ content:"/"; color:var(--line-strong); margin-right:8px; }

/* Buttons */
.page-studio .btn-pill,.page-studio .btn-send{ display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 32px; border-radius:999px; border:0; cursor:pointer;
  background:var(--accent); color:var(--on-accent); font:600 .875rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; box-shadow:none; transition:transform .25s var(--ease),box-shadow .25s; }
.page-studio .btn-pill:hover,.page-studio .btn-send:hover{ transform:translateY(-2px); background:var(--accent); box-shadow:0 14px 34px -14px rgba(255,200,0,.7); }
.page-studio .hero__cta{ box-shadow:0 12px 30px -12px rgba(255,200,0,.8); }
.page-studio .hero__cta:hover{ transform:translate(-50%,-2px); }
.page-studio .chevron span{ border-color:var(--accent); }

/* Titel + goldene Linie */
.page-studio .work__title,.page-studio .about__title,.page-studio .contact__title{ font-size:clamp(2.25rem,4.2vw,3.75rem); line-height:1.02; letter-spacing:.05em; color:#fff; text-wrap:balance; }
.page-studio .dash{ width:56px; margin:20px auto 44px; background:var(--accent); }

/* Sektionen: Foto bleibt, Inhalt in dunklem Kästchen */
.page-studio .services,.page-studio .work,.page-studio .about,.page-studio .contact{ min-height:0; padding:28px 24px; }
.page-studio .services::before,.page-studio .work::before,.page-studio .about::before,.page-studio .contact::before{ background:rgba(0,0,0,.3); backdrop-filter:none; }
.page-studio .services__panel,.page-studio .work__panel,.page-studio .about__panel,.page-studio .contact__panel{
  position:relative; z-index:2; width:min(100%,1360px); max-width:1360px; margin:0 auto; border-radius:28px; color:var(--body);
  background:rgba(11,11,11,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.06); padding:clamp(56px,7vw,100px) var(--gutter); text-align:center; }
.page-studio .work{ display:block; } .page-studio .work > *{ position:relative; z-index:2; }
.page-studio .work__panel{ display:flex; flex-direction:column; align-items:center; }
.page-studio .about__panel,.page-studio .contact__panel{ max-width:1360px; }
.page-studio .about__text,.page-studio .contact__sub,.page-studio .form{ max-width:720px; margin-inline:auto; }

/* Services-Karten */
.page-studio .services__panel{ padding:clamp(40px,5vw,72px) var(--gutter); }
.page-studio .services__grid{ gap:24px; }
.page-studio .svc{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; align-items:center; transition:border-color .3s,transform .4s var(--ease); }
.page-studio .svc:hover{ border-color:rgba(255,200,0,.45); transform:translateY(-4px); }
.page-studio .svc__icon{ height:40px; margin-bottom:20px; } .page-studio .svc__icon svg{ width:40px; height:40px; }
.page-studio .svc__title{ font-size:clamp(1.25rem,1.8vw,1.6rem); letter-spacing:.08em; margin-bottom:12px; color:#fff; }
.page-studio .svc__text{ color:var(--body); font-size:1rem; line-height:1.7; max-width:none; }

/* Player (Funktion unverändert, nur Optik) */
.page-studio .player{ background:rgba(255,255,255,.03); color:var(--body); border:1px solid rgba(255,255,255,.06); border-radius:20px; box-shadow:none; text-align:left; padding:clamp(20px,3vw,36px); max-width:760px; }
.page-studio .player__cover{ border-radius:12px; box-shadow:none; }
.page-studio .player__play{ background:var(--accent); border-color:var(--accent); }
.page-studio .player__play svg{ fill:#0B0B0B; }
.page-studio .player__play:hover{ background:#fff; border-color:#fff; }
.page-studio .player__artist{ color:var(--accent); font-size:.75rem; letter-spacing:.2em; }
.page-studio .player__song{ color:#fff; font-family:var(--font-head); font-size:1.4rem; letter-spacing:.06em; text-transform:uppercase; }
.page-studio .player__by{ color:#9A9A9A; }
.page-studio .player__ctrl{ color:#C4C4C4; } .page-studio .player__ctrl:hover{ color:var(--accent); }
.page-studio .player__progress{ background:rgba(255,255,255,.14); }
.page-studio .player__progress-fill,.page-studio .player__progress-fill::after{ background:var(--accent); }
.page-studio .player__time{ color:#9A9A9A; } .page-studio .player__ico svg{ fill:#8A8A8A; }
.page-studio .playlist{ border-top-color:var(--line); }
.page-studio .playlist__item{ border-bottom-color:var(--line); }
.page-studio .playlist__item:hover{ background:rgba(255,255,255,.05); }
.page-studio .playlist__item.active{ background:rgba(255,200,0,.08); }
.page-studio .playlist__name{ color:#C4C4C4; } .page-studio .playlist__item.active .playlist__name{ color:#fff; }
.page-studio .playlist__idx,.page-studio .playlist__dur{ color:#8A8A8A; }

/* Über mich */
.page-studio .about__text p{ color:var(--body); font-size:1.0625rem; line-height:1.7; text-align:left; }
.page-studio .about__text .about__lead{ color:#fff; font-size:clamp(1.25rem,1.8vw,1.5rem); line-height:1.3; text-align:left; margin:0 0 10px; }
.page-studio .about__portrait{ box-shadow:0 0 0 2px var(--accent); }

/* Kontakt + Formular */
.page-studio .contact__sub{ color:#fff; margin-top:0; font-size:1.0625rem; line-height:1.55; }
.page-studio .contact__sub a,.page-studio .form__privacy a,.page-studio .form__consent a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.page-studio .form{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:24px; padding:clamp(24px,3.5vw,48px); }
.page-studio .form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; margin-bottom:20px; }
.page-studio .fld{ display:flex; flex-direction:column; min-width:0; } .page-studio .fld--full{ grid-column:1 / -1; }
.page-studio .form label{ font:400 .875rem/1.4 var(--font-body); color:#E2E2E2; margin:0 0 8px; text-align:left; }
.page-studio .form label span{ color:var(--accent); }
.page-studio .form input[type=text],.page-studio .form input[type=email],.page-studio .form textarea{ height:52px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.32); border-radius:12px; padding:0 16px; color:#fff; font:300 1rem var(--font-body); -webkit-text-fill-color:#fff; }
.page-studio .form textarea{ height:auto; min-height:140px; padding:14px 16px; line-height:1.55; }
.page-studio .form input:hover,.page-studio .form textarea:hover{ border-color:rgba(255,255,255,.5); }
.page-studio .form input:focus,.page-studio .form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,200,0,.18); }
.page-studio .form__consent{ display:flex; gap:12px; font-size:.875rem; color:var(--body); margin-top:4px; }
.page-studio .form label.form__consent span{ color:var(--body); }
.page-studio .form__consent input{ accent-color:var(--accent); width:20px; height:20px; }
.page-studio .btn-send{ width:100%; margin-top:20px; }
.page-studio .form__privacy{ font-size:.8125rem; line-height:1.55; color:#9A9A9A; margin:16px 0 0; }
.page-studio .form__note{ color:#fff; }

/* Footer */
.page-studio .footer{ background:#0B0B0B; border-top:1px solid var(--line); padding:48px var(--gutter); }
.page-studio .footer__links{ gap:32px; flex-wrap:wrap; }
.page-studio .footer__links a{ color:#9A9A9A; font-size:.8125rem; letter-spacing:.04em; }
.page-studio .footer__links a:hover{ color:#fff; }
.page-studio .footer__copy{ color:#9A9A9A; font-size:.8125rem; }

/* Cookie */
.page-studio .cookie__btn{ background:var(--accent); font-family:var(--font-body); font-weight:600; color:#0B0B0B; }
.page-studio .cookie__btn--ghost{ background:transparent; color:#cfcfcf; }
.page-studio .cookie__text a{ color:var(--accent); }

@media (max-width:900px){
  .page-studio .nav__links,.page-studio .nav.scrolled .nav__links{ background:rgba(11,11,11,.95); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); padding:14px 0; gap:0; }
  .page-studio .nav__links a{ display:flex; align-items:center; justify-content:center; min-height:48px; padding:12px 0; font-size:1.0625rem; letter-spacing:.2em; line-height:1.6; }
  .page-studio .nav__links a + a{ margin-top:4px; }
  .page-studio .footer{ padding-bottom:48px; }
}
@media (max-width:699px){
  .page-studio .services,.page-studio .work,.page-studio .about,.page-studio .contact{ padding:12px 6px; }
  .page-studio .services__panel,.page-studio .work__panel,.page-studio .about__panel,.page-studio .contact__panel{ border-radius:18px; padding:48px 18px; }
  .page-studio .svc{ padding:24px; } .page-studio .form{ padding:24px 18px; border-radius:16px; }
  .page-studio .player__top{ flex-wrap:wrap; }
}
@media (max-width:560px){
  .page-studio .form__grid{ grid-template-columns:1fr; }
  .page-studio .work__title,.page-studio .about__title,.page-studio .contact__title{ font-size:2.25rem; letter-spacing:.03em; }
  .page-studio .footer__links{ gap:20px; justify-content:center; }
}
.page-studio .nav__links a{ white-space:nowrap; }
.page-studio .nav__lang .lang{ white-space:nowrap; }

/* ===== Studio v2: dunkles Glas (Meine Arbeit, Über mich, Anfrage) ===== */
.page-studio .work__panel,.page-studio .about__panel,.page-studio .contact__panel{ background:rgba(14,14,14,.84); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08); border-radius:28px; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); color:#C4C4C4; }
.page-studio .work__panel .chevron span{ border-color:#FFC800; }
.page-studio .player{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.page-studio .about__text .about__lead{ font-size:clamp(1.25rem,1.8vw,1.5rem); margin:0 0 10px; }
.page-studio .about__text p{ font-size:1rem; margin:0 0 14px; }
.page-studio .about__grid{ display:flex; flex-direction:column; align-items:center; gap:24px; margin:0 auto 8px; }
.page-studio .about__grid .about__text{ max-width:none; margin:0; text-align:left; }
.page-studio .about__portrait{ width:100%; max-width:280px; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%; border-radius:20px; box-shadow:0 18px 40px -20px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.10); }
.page-studio .about__text .btn-pill{ margin-top:24px; }
.page-studio .sender{ display:flex; gap:16px; align-items:center; justify-content:center; margin:0 auto 24px; }
.page-studio .sender__img{ width:64px; height:64px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #FFC800; flex:0 0 64px; }
.page-studio .sender > div{ text-align:left; }
.page-studio .sender__name{ font:300 1.125rem var(--font-head); color:#fff; margin:0 0 4px; }
.page-studio .sender__role{ font:400 .875rem/1.3 var(--font-body); color:#9A9A9A; margin:0; }
@media (min-width:900px){
  .page-studio .about__grid{ flex-direction:row; align-items:center; gap:36px; }
  .page-studio .about__portrait{ flex:0 0 38%; width:38%; max-width:none; }
  .page-studio .about__grid .about__text{ flex:1; }
}
@media (max-width:699px){ .page-studio .work__panel,.page-studio .about__panel,.page-studio .contact__panel{ border-radius:18px; } }

/* ===== Korrektur: Hintergründe + Breiten wie im Original ===== */
.page-studio .services{ padding:92px 20px; }
.page-studio .work{ display:flex; flex-direction:column; align-items:center; padding:92px 20px; }
.page-studio .about,.page-studio .contact{ min-height:100vh; padding:120px 20px; }
.page-studio .services::before{ background:rgba(0,0,0,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.page-studio .work::before{ background:rgba(8,8,8,.72); }
.page-studio .about::before,.page-studio .contact::before{ background:rgba(0,0,0,.55); }
.page-studio .services__panel{ max-width:var(--max); width:100%; }
.page-studio .work__panel{ max-width:800px; padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px); }
.page-studio .about__panel{ max-width:760px; padding:clamp(40px,5vw,60px) clamp(20px,4vw,40px); }
.page-studio .contact__panel{ max-width:560px; padding:clamp(36px,5vw,56px) clamp(20px,4vw,44px); }
.page-studio .work__panel .player{ max-width:100%; }
.page-studio .contact__panel .form{ padding:clamp(18px,3vw,28px); }
.page-studio .about__panel > .btn-pill{ margin-top:36px; }

/* ===== Studio-Hero: Cover-Wand (schraege Wand, gegenlaeufige Reihen) ===== */
.page-studio .hero{ height:100vh; height:100svh; min-height:620px; display:grid; place-items:center; text-align:center; background:#0b0b0b; aspect-ratio:auto; padding:0; container-type:normal; }
.page-studio .hero::before{ z-index:1; background:radial-gradient(ellipse 58% 52% at 50% 50%,rgba(8,8,8,.94) 0,rgba(8,8,8,.74) 55%,rgba(8,8,8,.25) 100%),linear-gradient(#0b0b0b 0,transparent 20%,transparent 62%,#0b0b0b 100%); }
.wall{ position:absolute; inset:-35%; transform:rotate(-9deg); display:flex; flex-direction:column; justify-content:center; --s:clamp(96px,15vw,240px); --g:clamp(8px,1.2vw,18px); gap:var(--g); }
.wall .row{ display:flex; gap:var(--g); width:max-content; animation:wallSlide 420s linear infinite; will-change:transform; }
.wall .row:nth-child(even){ animation-direction:reverse; animation-duration:520s; }
.wall .row:nth-child(3n){ animation-duration:600s; }
.wall .row img{ width:var(--s); height:var(--s); object-fit:cover; border-radius:3px; filter:saturate(.8) brightness(.62); flex:none; }
@keyframes wallSlide{ to{ transform:translateX(-50%); } }
.page-studio .hero__content{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:clamp(24px,4vh,36px); padding:72px 20px 0; }
.page-studio .hero__logo{ position:static; transform:none; width:min(560px,82vw,56svh); height:auto; }
.page-studio .hero__cta{ position:static; transform:none; height:56px; padding:0 34px; font-size:.8125rem; }
.page-studio .hero__cta:hover{ transform:translateY(-2px); }
.page-studio .hero .chevron{ z-index:4; }
@media (prefers-reduced-motion:reduce){ .wall .row{ animation:none; } }
@media (max-width:760px){
  .page-studio .hero::before{ background:radial-gradient(ellipse 95% 48% at 50% 50%,rgba(8,8,8,.95) 0,rgba(8,8,8,.78) 60%,rgba(8,8,8,.35) 100%),linear-gradient(#0b0b0b 0,transparent 18%,transparent 66%,#0b0b0b 100%); }
  .wall .row{ animation-duration:640s; } .wall .row:nth-child(even){ animation-duration:780s; } .wall .row:nth-child(3n){ animation-duration:900s; }
  .wall{ --s:128px; --g:10px; }
  .page-studio .hero__content{ padding-top:56px; }
  .page-studio .hero__cta{ height:52px; padding:0 28px; }
}
/* weicher Uebergang Wand -> Services (wie Live-Seite: kein harter Rand) */
.page-studio .hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(90px,16vh,170px); z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(11,11,11,0),#0b0b0b); }
.page-studio .services::after{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(90px,16vh,170px); z-index:1; pointer-events:none; background:linear-gradient(180deg,#0b0b0b,rgba(11,11,11,0)); }

/* ===== Coverwand-Review (Denise) ===== */
.page-studio .work > .chevron{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); }
.page-studio .about,.page-studio .contact{ min-height:min(100vh,860px); padding:96px 20px; }
.page-studio .services{ padding:clamp(120px,16vh,170px) 20px 92px; }
@media (max-width:760px){
  .wall .row img{ filter:saturate(.85) brightness(.72); }
  .page-studio .hero::before{ background:radial-gradient(ellipse 95% 48% at 50% 50%,rgba(8,8,8,.9) 0,rgba(8,8,8,.70) 60%,rgba(8,8,8,.30) 100%),linear-gradient(#0b0b0b 0,transparent 18%,transparent 66%,#0b0b0b 100%); }
}
@media (max-width:699px){
  .page-studio .services{ padding:72px 14px; }
  .page-studio .work,.page-studio .about,.page-studio .contact{ padding-left:14px; padding-right:14px; }
}
.page-studio .nav__mode{ background:rgba(11,11,11,.55); }

/* ===== Kontaktformular: luftigere Abstände + E-Mail-Hinweis unten (Denise) ===== */
.page-studio .contact__panel .form{ padding:clamp(24px,4vw,40px) clamp(20px,3.5vw,36px); }
.page-studio .contact__panel .form__grid{ gap:28px 20px; margin-bottom:28px; }
.page-studio .contact__panel .form label{ margin:0 0 10px; line-height:1.45; }
.page-studio .contact__panel .form input[type=text],.page-studio .contact__panel .form input[type=email]{ height:56px; }
.page-studio .contact__panel .form textarea{ min-height:160px; padding:16px; }
.page-studio .contact__panel .form__consent{ gap:14px; align-items:flex-start; line-height:1.55; margin-top:0; }
.page-studio .contact__panel .form__consent input{ flex:0 0 20px; margin-top:2px; }
.page-studio .contact__panel .btn-send{ margin-top:32px; }
.page-studio .contact__panel .form__note{ margin:16px 0 0; line-height:1.5; }
.page-studio .contact__panel .form__note:empty{ margin:0; }
.page-studio .contact__panel .form__privacy{ margin:24px 0 0; line-height:1.65; text-align:center; }
.page-studio .contact__panel .contact__alt{ margin:28px auto 0; text-align:center; font-size:.9375rem; line-height:1.5; color:#fff; }
.page-studio .contact__panel .contact__alt a{ white-space:nowrap; }
@media (max-width:560px){
  .page-studio .contact__panel .form{ padding:26px 18px; }
  .page-studio .contact__panel .form__grid{ gap:24px; margin-bottom:24px; }
  .page-studio .contact__panel .form textarea{ min-height:150px; }
  .page-studio .contact__panel .btn-send{ margin-top:28px; }
  .page-studio .contact__panel .form__privacy{ margin-top:20px; }
  .page-studio .contact__panel .contact__alt{ margin-top:24px; }
}