/* ==========================================================================
   STUDIOCARBON – Seiten „Tonstudio“ und „Tonstudio Preise“
   Gemeinsames CSS für /tonstudio/ und /tonstudio-preise/ (gleiche Bausteine:
   Hero, Hörbeispiele-Player, Rundgang-Karussell, FAQ/Beispiel-Accordion,
   Preisliste). Werte aus Computed Styles der Originalseiten übernommen.
     1. Hero (beide Seiten)
     2. Hörbeispiele-Player (Music Player for Elementor – Nachbau)
     3. Rundgang / Eindrücke (Karussell)
     4. Tonstudio FAQ (Accordion, Gradient-Section)
     5. Preise: Beispiel-Accordion (im Hero) + Preisliste
   ========================================================================== */

/* 1. Hero ----------------------------------------------------------------- */
.studio-hero{padding:5% 5% 1%}
.studio-hero__inner{align-items:center;width:100%;min-height:900px}
.studio-hero .col__wrap{align-content:center}
.studio-hero--preise .studio-hero__col--info .col__wrap{padding:10px;margin:160px 0 60px}
@media only screen and (min-width:768px){
  .studio-hero--tonstudio .studio-hero__col--info .col__wrap{padding:0 61px 0 0}
  .studio-hero--tonstudio .studio-hero__col--player .col__wrap{padding:0}
  .studio-hero--preise{padding:0}
}

.studio-hero__eyebrow{font-family:var(--font-display);text-transform:uppercase;margin:0 0 20px}
.studio-hero__eyebrow-wrap{margin:0 0 20px}
.studio-hero--tonstudio .studio-hero__eyebrow{font-size:19px;font-weight:600;line-height:19px;letter-spacing:4.8px;color:#bfbfbf}
.studio-hero--preise .studio-hero__eyebrow{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:18px;letter-spacing:3.6px;color:#4a4a4a}

.studio-hero__title-wrap{margin:0 0 20px}
.studio-hero__title{font-family:var(--font-body);font-size:49px;font-weight:400;line-height:49px;text-transform:uppercase;color:#fff}
.studio-hero__h1{font-family:var(--font-display);font-size:23px;font-weight:600;line-height:23px;letter-spacing:4.8px;color:#aeaeae;margin:-20px 0 20px}

.studio-hero__subtitle{font-family:var(--font-display);margin:0 0 20px}
.studio-hero--tonstudio .studio-hero__subtitle{font-size:19px;font-weight:500;line-height:19px;color:#bfbfbf}
.studio-hero--preise .studio-hero__subtitle{font-size:20px;font-weight:600;line-height:20px;color:#c6c6c6}

.studio-hero__text{color:#bfbfbf;font-size:16px;font-weight:300;line-height:28.8px}
.studio-hero__text p{margin:0 0 20px}
.studio-hero__text a{color:var(--c-link)}
.studio-hero__text a:hover{color:#fff}
.studio-hero__text h3{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:21.6px;color:#bfbfbf;margin:0 0 20px}

.studio-label{display:block;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:24px;letter-spacing:5px;text-transform:uppercase;color:#fff;margin:0 0 20px}
.studio-hero__col--player .studio-label{margin-bottom:40px}
.studio-tour .studio-label{margin-bottom:40px}

/* 2. Hörbeispiele-Player --------------------------------------------------- */
.studio-player{position:relative;background:rgba(0,0,0,.72);color:#707281;font-size:14px}
.studio-player__photo{position:relative;overflow:hidden;height:570px;background-image:url("/assets/img/studio/player-bg-1220.jpg");background-image:image-set(url("/assets/img/studio/player-bg-1220.avif") type("image/avif") 1x,url("/assets/img/studio/player-bg-1220.webp") type("image/webp") 1x,url("/assets/img/studio/player-bg-1220.jpg") type("image/jpeg") 1x);background-size:cover;background-position:50% 50%}
.studio-player__photo::before{content:"";position:absolute;inset:0;background:rgba(6,6,42,.93)}
.studio-player__top{position:relative;z-index:1;height:135px}
.studio-player__toptext{position:absolute;left:40px;top:48%;transform:translateY(-50%)}
.studio-player__kicker{font-family:var(--font-body);font-size:15px;font-weight:400;line-height:24px;letter-spacing:1px;color:#707281;margin:0}
.studio-player__title{font-family:var(--font-body);font-size:30px;font-weight:700;line-height:48px;color:#fff;margin:0}
.studio-player__apple{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:10px;background:#fb3a64;color:#fff;font-family:var(--font-body);font-size:13px;font-weight:500;line-height:45px;letter-spacing:1px;text-transform:uppercase;padding:0 40px 0 15px;border:1px solid #fb3a64;border-radius:5px}
.studio-player__apple i{font-size:18px}
.studio-player__apple:hover{color:#fff;opacity:.9}

.studio-player__list{list-style:none;margin:0;padding:0;position:relative;z-index:1;max-height:400px;overflow-y:auto}
.studio-track{position:relative;display:block;width:100%;padding:0 32px 0 64px;line-height:40px;color:#707281;text-align:left;cursor:pointer}
.studio-track__left{display:inline}
.studio-track__icon{display:inline-block;margin:0 24px 0 -32px;font-size:9px;color:#fb3a64}
.studio-track__name{font-family:var(--font-body);font-size:16px;font-weight:500;color:#707281}
.studio-track__time{position:absolute;right:32px;bottom:0;width:35px;height:40px;line-height:40px;font-family:var(--font-body);font-size:14px;color:#707281;text-align:right}
.studio-track:hover .studio-track__name{color:#fff}
.studio-track.is-active .studio-track__name,.studio-track.is-active .studio-track__time{color:#fff}

.studio-player__bottom{position:relative;z-index:1;height:75px}
.studio-player__progress-base{position:absolute;left:0;top:0;width:100%;height:5px;background:#fff;opacity:.17;cursor:pointer}
.studio-player__progress{position:absolute;left:0;top:0;height:5px;width:0;background:#fb3a64;pointer-events:none}
.studio-player__bar{position:relative;height:70px}
.studio-player__nowplaying{position:absolute;left:40px;top:19px;width:141px}
.studio-player__nowplaying .label{display:block;font-family:var(--font-body);font-size:10px;font-weight:400;line-height:18px;letter-spacing:1px;text-transform:uppercase;color:#707281;margin:0}
.studio-player__nowplaying .name{display:block;font-family:var(--font-body);font-size:14px;font-weight:500;line-height:18px;color:#fff;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.studio-player__controls{position:absolute;left:179px;top:19px;display:flex;align-items:center;gap:0}
.studio-player__controls button{width:46px;height:42px;display:flex;align-items:center;justify-content:center;color:#707281;font-size:16px}
.studio-player__controls button:hover{color:#fff}
.studio-player__controls button.is-active{color:#fb3a64}
.studio-player__controls .studio-player__prev,.studio-player__controls .studio-player__next{color:#886dba}
.studio-player__prev,.studio-player__next{width:32px}
.studio-player__playpause{width:42px;height:42px;border-radius:50%;background:#fb3a64;color:#fff!important;font-size:16px}
.studio-player__playpause:hover{opacity:.9;color:#fff}
.studio-player__playpause .fa-pause{display:none}
.studio-player.is-playing .studio-player__playpause .fa-play{display:none}
.studio-player.is-playing .studio-player__playpause .fa-pause{display:inline-block}
.studio-player__time{position:absolute;right:40px;top:27px;font-family:var(--font-body);font-size:13px;color:#707281;white-space:nowrap}
.studio-player__time .current{color:#fff}
.studio-player__time .sep{padding:0 6px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;font-size:14px;line-height:22.4px;font-weight:400;color:inherit;text-transform:none}

@media only screen and (max-width:767px){
  .studio-player__photo{height:655px}
  .studio-player__top{height:auto;padding:0 17px}
  .studio-player__toptext{position:static;transform:none;margin:25px 0 15px;text-align:center}
  .studio-player__title{font-size:19px;line-height:30.4px}
  .studio-player__apple{position:static;transform:none;margin:0 0 10px}
  .studio-track{padding-left:39px;padding-right:17px}
  .studio-track__icon{margin:0 14px 0 -22px}
  .studio-track__time{right:17px}
  .studio-player__bottom{height:140px}
  .studio-player__bar{padding:0}
  .studio-player__controls{left:0;top:27px;width:100%;justify-content:center;gap:4px}   /* Original: Inline-Icons mit padding 0 20px, Play mit 15px Rand */
  .studio-player__controls .studio-player__repeat,.studio-player__controls .studio-player__shuffle{width:56px}
  .studio-player__controls .studio-player__prev,.studio-player__controls .studio-player__next{width:54px}
  .studio-player__controls .studio-player__playpause{width:42px;margin:0 15px}
  .studio-hero__title-wrap{text-align:center}
  .studio-player__nowplaying{left:14px;top:77px}
  .studio-player__time{right:13px;top:85px}
}

/* 3. Rundgang / Eindrücke (Karussell) -------------------------------------- */
.studio-tour{padding:5% 5% 1%}
.studio-tour .section__inner,.studio-faq .section__inner{max-width:none}
.studio-tour .col__wrap,.studio-faq .col__wrap{padding:18px}
.studio-tour__text{color:#bfbfbf;font-size:14px;line-height:22.4px;margin:0 0 40px}

.studio-carousel{position:relative;padding:0 0 30px}
.studio-carousel .swiper{overflow:hidden}
.studio-carousel .swiper-slide{width:237px;aspect-ratio:1/1}
.studio-carousel .swiper-slide a{display:block;width:100%;height:100%}
.studio-carousel .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;border:3px solid #020202;border-radius:19px}
.studio-carousel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:rgba(237,237,237,.9);cursor:pointer;background:none;border:0}
.studio-carousel__nav svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.studio-carousel__nav--prev{left:10px}
.studio-carousel__nav--next{right:10px}
.studio-carousel__nav.swiper-button-disabled{opacity:.3;cursor:default}
.studio-carousel .swiper-pagination{position:absolute;left:0;bottom:0;width:100%;text-align:center}
.studio-carousel .swiper-pagination-bullet{width:10px;height:10px;background:#fff;opacity:.5;display:inline-block;border-radius:50%;margin:0 4px}
.studio-carousel .swiper-pagination-bullet-active{opacity:1;background:#fb3a64}

@media only screen and (max-width:1024px){
  .studio-hero{padding:0 14px}
  .studio-hero__inner{min-height:800px}
  .studio-carousel .swiper-slide{width:calc((100% - 38px) / 3)}
}
@media only screen and (max-width:767px){
  .studio-hero{padding:100px 20px 31px;min-height:0}
  .studio-hero__inner{flex-wrap:wrap;min-height:0}
  .studio-hero--tonstudio .studio-hero__col--info .col__wrap{padding:25px 0 0}
  .studio-hero--preise .studio-hero__col--info .col__wrap{padding:25px 0 0;margin:160px 0 60px}
  .studio-hero__col--player .col__wrap,.studio-hero__col--price .col__wrap{padding:41px 0 0;margin:20px 0 30px}
  .studio-hero--tonstudio .studio-hero__eyebrow,.studio-hero__title,.studio-hero__text{text-align:center}
  .studio-hero__title{font-size:45px;line-height:45px}
  .studio-tour .col__wrap,.studio-faq .col__wrap{padding:0}
  .studio-carousel .swiper-slide{width:300px;max-width:300px;aspect-ratio:1/1;flex-shrink:0}
}

/* 4. Tonstudio FAQ (Gradient-Section, Accordion) --------------------------- */
.studio-faq{padding:5%;background:linear-gradient(169deg,#3f003e 0%,#e100ec 100%)}
.studio-faq__overlay{background:#000;opacity:.63}
.studio-kicker{font-family:var(--font-display);font-size:15px;font-weight:600;line-height:15px;letter-spacing:3.7px;text-transform:uppercase;color:#fff;margin:0 0 20px}

.studio-faq .accordion{background:rgba(60,60,60,.84)}
.studio-faq .accordion__item{border:1px solid #000}
.studio-faq .accordion__item+.accordion__item{border-block-start:0}
.studio-faq .accordion__title{padding:15px 20px;font-family:var(--font-display);font-size:14px;font-weight:700;line-height:14px;color:#bfbfbf;background:none}
.studio-faq .accordion__label{font-family:Helvetica,var(--font-body);font-weight:500;text-decoration:none;color:inherit}
.studio-faq .accordion__content{padding:15px 20px;color:#bfbfbf;font-family:var(--font-body);font-size:14px;line-height:22.4px}
.studio-faq .accordion__content a{color:var(--c-link)}
.studio-faq .accordion__content h4{font-size:14px;line-height:1.4;margin:0 0 6px}
.studio-faq .accordion__content p{margin:0 0 20px}
.studio-faq .accordion__content ol{margin:0 0 0 20px;padding:0}

/* 5. Beispiel-Accordion (Preise, im Hero) + Preisliste --------------------- */
.studio-calc{margin-top:20px}
.studio-calc .accordion__item{border:1px solid #d5d8dc}
.studio-calc .accordion__item+.accordion__item{border-block-start:0}
.studio-calc .accordion__title{padding:15px 20px;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:18px;color:#e0e0e0;background:none}
.studio-calc .accordion__item.is-open .accordion__title{color:#ad61c2}
.studio-calc .accordion__label{font-family:Roboto,var(--font-body);font-size:14px;font-weight:600;line-height:14px;text-decoration:none;color:inherit}
.studio-calc .accordion__content{padding:15px 20px;color:#7a7a7a;font-family:Roboto,var(--font-body);font-size:14px;line-height:22.4px;background:rgba(0,0,0,.15)}
.studio-calc .accordion__content ol{margin:15px 0 15px 20px;padding:0}
.studio-calc .accordion__content li{margin-bottom:10px}
.studio-calc .accordion__content hr{border:0;border-top:1px solid rgba(122,122,122,.4);margin:10px 0}
.studio-calc .accordion__content p{margin:0 0 20px}

.studio-accordion__icon{position:relative;float:left;width:1.5em;height:1em;line-height:1}
.studio-accordion__icon i{position:absolute;left:0;top:0;font-size:inherit;line-height:inherit}
.studio-accordion__icon .icon-opened{display:none}
.accordion__item.is-open .studio-accordion__icon .icon-closed{display:none}
.accordion__item.is-open .studio-accordion__icon .icon-opened{display:inline-block}

@media only screen and (max-width:767px){
  .studio-faq .accordion__title,.studio-calc .accordion__title{padding:12px 15px}
  .studio-faq .accordion__content,.studio-calc .accordion__content{padding:7px 15px}
  .studio-accordion__icon{width:1.2em}
  .studio-calc .studio-accordion__icon{height:20px}
}

.price-list{list-style:none;margin:0 0 20px;padding:0}
.price-list__item{display:flow-root;margin:0 0 29px}
.price-list__item:last-child{margin-bottom:0}
.price-list__header{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;color:#fff;font-family:var(--font-body);font-size:19px;font-weight:600;line-height:20px}
.price-list__title{max-width:80%}
.price-list__sep{flex:1 1 auto;height:0;margin:0 6px;border-bottom:2px dotted #fff}
.price-list__price{flex:0 1 auto;font-weight:600}   /* wie Original: darf schrumpfen (mobil bricht „€ 280,-“ um) */
.price-list__desc{margin:0;color:#fff;font-family:var(--font-body);font-size:14px;line-height:20px}
.price-list__note{color:#4a4a4a;font-size:14px;font-weight:400;line-height:22.4px}

/* 6. Lightbox (Rundgang / Eindrücke Karussell) ----------------------------- */
.studio-lightbox{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9)}
.studio-lightbox.is-open{display:flex}
body.studio-lightbox-open{overflow:hidden}
.studio-lightbox__figure{margin:0;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}
.studio-lightbox__img{display:block;max-width:90vw;max-height:80vh;width:auto;height:auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.studio-lightbox__caption{color:#fff;font-family:var(--font-body);font-size:14px;margin-top:12px;text-align:center}
.studio-lightbox__caption[hidden]{display:none}
.studio-lightbox__close{position:absolute;top:20px;right:24px;width:44px;height:44px;background:none;border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer}
.studio-lightbox__close:hover{color:#fb3a64}
.studio-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:none;border:0;color:#fff;font-size:48px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.studio-lightbox__nav:hover{color:#fb3a64}
.studio-lightbox__nav--prev{left:8px}
.studio-lightbox__nav--next{right:8px}
@media only screen and (max-width:600px){
  .studio-lightbox__nav{width:44px;height:44px;font-size:36px}
  .studio-lightbox__close{top:10px;right:10px}
}