/* ==========================================================================
   FOCUSIDE – Official Website
   Statische Seite (ohne CMS). Alle Werte stammen aus dem ursprünglichen
   Elementor-Design und wurden 1:1 übernommen.

   Aufbau dieser Datei:
     1. Design-Tokens (Farben, Schriften, Breiten)
     2. Basis / Reset
     3. Icons (Font Awesome Brands)
     4. Header (Desktop) + Mobile-Header
     5. Startseite: Hero, Video, Merch, Instagram, Shows
     6. Mobile Social-Leiste + Footer
     7. Unterseiten: Press, Imprint, Privacy
     8. Lightbox
     9. Responsive (Tablet ≤1024px, Mobile ≤767px)
   ========================================================================== */

/* 1. Design-Tokens ------------------------------------------------------- */
:root{
  --color-bg:#0a0a0a;          /* Seitenhintergrund */
  --color-text:#cacaca;        /* Standard-Textfarbe */
  --color-primary:#4cad58;     /* Grün (Logo) */
  --color-secondary:#dfcb62;   /* Gelb – Links */
  --color-accent:#614d99;      /* Violett */
  --color-white:#fff;
  --color-footer:#202020;      /* Footer-Balken */
  --color-row:#444;            /* Zeilen in der Show-Tabelle */
  --color-heading-muted:#b7b7b7;

  --gradient-video:linear-gradient(180deg,#040c23 0%,#0e3539 100%);
  --gradient-merch:linear-gradient(210deg,#950000 55%,#f2295b 100%);
  --gradient-shows:linear-gradient(200deg,#c72bdf 0%,#e82757 100%);

  --font-body:'Blinker',sans-serif;
  --font-display:'Rock Salt',sans-serif;
  --font-button:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;

  --container:1140px;          /* Inhaltsbreite */
  --header-z:500;
}

/* 2. Basis / Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:200;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg,picture{display:inline-block;max-width:100%;height:auto;border:0}
a{color:var(--color-secondary);font-weight:400;text-decoration:none}
a:hover{text-decoration:none}
p{margin:0}
ul{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;position:relative}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 16px;z-index:10000}
.skip-link:focus{left:8px;top:8px}

/* Sektionstitel (Rock Salt, 32px, zentriert) */
.section-title{
  font-family:var(--font-display);
  font-size:32px;
  line-height:1;
  font-weight:500;
  text-align:center;
  color:var(--color-text);
}

/* 3. Icons --------------------------------------------------------------- */
.fab{font-family:'Font Awesome 5 Brands';font-weight:400;font-style:normal;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased}
.fab::before{content:var(--glyph)}
.fa-instagram{--glyph:'\f16d'}
.fa-facebook{--glyph:'\f09a'}
.fa-youtube{--glyph:'\f167'}
.fa-spotify{--glyph:'\f1bc'}
.fa-apple{--glyph:'\f179'}
.fa-itunes{--glyph:'\f3b4'}

/* Social-Icon-Reihe (Header + mobile Leiste) */
.social-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;list-style:none;margin:0;padding:0}
.social-icons li{display:flex;line-height:0}
.social-icons a{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  color:var(--color-white);font-size:22px;line-height:1;
  transition:transform .3s,color .3s;
}
.social-icons a:hover{transform:scale(1.15)}

/* 4. Header (Desktop) ---------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--header-z);
  padding-top:70px;                 /* Logo sitzt 70px unter der Oberkante */
  text-align:center;
  transition:padding .4s ease-in-out,background-color .4s ease-in-out;
}
.site-header__inner{max-width:var(--container);margin:0 auto;padding:10px 0 20px}
.site-header__logo{display:block;line-height:0}
.site-header__logo img{display:block;margin:0 auto;width:611px;max-width:100%;height:auto;transition:height .4s ease-in-out,width .4s ease-in-out}
.social-icons--header{margin-top:15px}
/* Nach 200px Scrollen: dunkler Hintergrund, verkleinertes Logo (55px) */
.site-header.is-scrolled{padding-top:0;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.site-header.is-scrolled .site-header__inner{padding:8px 0 10px}
.site-header.is-scrolled .site-header__logo img{height:55px;width:auto}
.site-header.is-scrolled .social-icons--header{margin-top:6px}

/* Mobile-Header (nur ≤767px sichtbar) */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;
  z-index:1001;
  background:rgba(0,0,0,.69);
  padding:20px 25px;
  text-align:center;
  line-height:0;
}
.mobile-header img{max-width:60%;height:auto}

/* 5. Startseite ---------------------------------------------------------- */

/* Hero – „Zero Gravity – Out Now!“ */
.hero{
  position:relative;
  background:#0020b2 url(../img/zero-gravity/background-1536.jpg) 100% 100%/cover no-repeat;
  padding:147px 60px 0;
}
.hero__inner{min-height:802px;display:flex;flex-wrap:wrap;align-items:center}
.hero__text{width:54.5%;padding:0 70px 0 0;display:flex;flex-wrap:wrap;align-content:center}
.hero__cover{width:45.5%;padding:0;display:flex;align-items:center}
.hero__title{width:100%;color:var(--color-white)}
.hero__label{
  display:block;
  font-family:var(--font-body);
  font-size:12px;line-height:1;font-weight:600;
  letter-spacing:12px;text-transform:uppercase;
  margin-bottom:40px;                 /* 20px Widget-Abstand + 20px Innenabstand */
}
.hero__cta{
  display:block;
  font-family:var(--font-display);
  font-size:51px;line-height:1.2;font-weight:900;
  color:var(--color-white);
  margin-bottom:20px;
}
.hero__buttons{display:flex;flex-wrap:wrap;width:100%}
.hero__buttons .btn{margin:10px 10px 10px 0}
.hero__buttons .btn + .btn{margin-left:10px}
.hero__cover a{display:inline-block;line-height:0;box-shadow:-12px 7px 10px 0 rgba(0,0,0,.5);transition:transform .4s ease}
.hero__cover a:hover{transform:scale(1.04)}
.hero__cover img{width:100%;height:auto}

/* Outline-Buttons (iTunes / Spotify) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;
  border:1.5px solid var(--color-white);border-radius:9px;
  background:transparent;color:var(--color-white);
  font-family:var(--font-button);font-size:28.8px;line-height:1;font-weight:500;
  text-align:center;
  transition:background-color .3s,color .3s;
}
.btn:hover{background:var(--color-white);color:#000}
.btn .fab{margin-right:8px;font-size:1em}

/* Featured Video */
.section-video{background:var(--gradient-video);padding:30px 20px}
.section-video .container{padding:10px}
.section-video .section-title{color:var(--color-heading-muted);margin:10px 10px 30px}
.video-embed{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-embed__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.video-embed__play{
  position:absolute;top:50%;left:50%;
  width:100px;height:100px;margin:-50px 0 0 -50px;
  color:var(--color-white);opacity:.8;
  filter:drop-shadow(1px 0 6px rgba(0,0,0,.3));
  transition:opacity .3s,transform .3s;
}
.video-embed__play svg{width:100%;height:100%;fill:currentColor}
.video-embed:hover .video-embed__play{opacity:1;transform:scale(1.05)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Merchandise-Karussell */
.section-merch{background:var(--gradient-merch);padding-bottom:10px}
.section-merch .container{padding:20px}
.section-merch .section-title{margin:50px 0 0;padding:20px}
.merch-carousel{position:relative;margin:20px 0 50px}
.merch-carousel .swiper{padding:0 30px}
.merch-carousel .swiper-wrapper{align-items:center}
.merch-carousel .swiper-slide{text-align:center;line-height:0}
.merch-carousel .swiper-slide a{display:inline-block}
.merch-carousel .swiper-slide img{width:100%;height:auto;border-radius:3px}
.merch-carousel .swiper-button-prev,
.merch-carousel .swiper-button-next{
  width:25px;height:25px;margin-top:-12.5px;
  color:rgba(237,237,237,.9);
  left:0;right:auto;
}
.merch-carousel .swiper-button-next{left:auto;right:0}
.merch-carousel .swiper-button-prev::after,
.merch-carousel .swiper-button-next::after{content:none}
.merch-carousel .swiper-button-prev svg,
.merch-carousel .swiper-button-next svg{width:25px;height:25px;fill:currentColor}
.merch-carousel .swiper-pagination{position:static;margin-top:10px}
.merch-carousel .swiper-pagination-bullet{background:rgba(255,255,255,.5);opacity:1;width:6px;height:6px;margin:0 4px}
.merch-carousel .swiper-pagination-bullet-active{background:var(--color-white)}

/* Instagram-Feed */
.section-instagram .container{padding:10px}
.section-instagram .section-title{margin:80px 30px 50px}   /* 30px Abstand + 20px Widget-Abstand */
.instagram-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:0 0 50px;
}
.instagram-grid__item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#161616}
.instagram-grid__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.instagram-grid__item:hover img{transform:scale(1.05)}
.instagram-grid__badge{position:absolute;top:10px;right:10px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.instagram-grid__badge svg{width:100%;height:100%;fill:currentColor}
.instagram-grid--loading .instagram-grid__item{animation:ig-pulse 1.2s ease-in-out infinite}
@keyframes ig-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* Shows */
.section-shows{background:var(--gradient-shows)}
.section-shows .container{padding:10px}
.section-shows .section-title{margin:80px 30px 50px}
.shows{padding-bottom:30px}
.shows__row{display:flex;flex-wrap:wrap;background:var(--color-row);border-radius:15px}
.shows__row + .shows__row{margin-top:10px;margin-bottom:10px}
.shows__col{padding:10px;text-align:center;font-size:16px;line-height:1}
.shows__row--head .shows__col{padding:15px}
.shows__col--date{width:22%}
.shows__col--venue{width:62%}
.shows__col--tickets{width:16%}
.shows__row--head h4{font-size:24px;line-height:1;font-weight:500}
.shows__col a{color:inherit;font-weight:400}
.shows__col a:hover{color:var(--color-white)}

/* 6. Mobile Social-Leiste + Footer -------------------------------------- */
.mobile-social-bar{display:none}          /* nur ≤767px, siehe unten */

.site-footer{background:var(--color-footer);position:relative;z-index:501}
.site-footer .container{display:flex;flex-wrap:wrap;align-items:center;min-height:40px}
.site-footer__credits{width:50%;font-size:16px;line-height:1.5}
.site-footer__nav{width:50%}
.footer-menu{display:flex;justify-content:center;align-items:center;list-style:none}
.footer-menu a{display:flex;align-items:center;padding:13px 20px;color:var(--color-secondary);font-weight:200;font-size:16px;line-height:20px;transition:color .3s}
.footer-menu a:hover,.footer-menu a[aria-current="page"]{color:var(--color-white)}
.footer-menu li+li{position:relative}
.footer-menu li+li::before{content:'|';position:absolute;left:-3px;top:50%;transform:translateY(-50%);color:var(--color-secondary);opacity:.6;font-weight:200}

/* 7. Unterseiten --------------------------------------------------------- */
.page-content{padding-top:301px}          /* Platz unter dem fixen Header */
.page-section{padding:40px}
.page-section .container{padding:10px}
.page-section .section-title{text-align:left;margin-bottom:20px}
.columns{display:flex;flex-wrap:wrap;margin:30px 0}
.columns__col{width:50%;padding:10px}
.page-section--logos{padding:30px}
.page-section--logos .columns{margin:0}
.page-section--logos .columns__col{text-align:center;line-height:0}

/* Press: Kurzbio – Text wie im Original (13px, Helvetica Neue) */
.press-bio p{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:normal;font-weight:200}
.press-bio p:empty,.press-bio p.spacer{min-height:15px}
.press-image{line-height:0}
.press-image a{display:inline-block}

/* Press: HQ-Fotos (Masonry-Raster, 4 Spalten, 11px Abstand) */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;align-items:start}
.gallery__item{position:relative;display:block;overflow:hidden;line-height:0}
.gallery__item img{width:100%;height:auto;transition:transform .8s}
.gallery__item::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .8s}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item:hover::after{opacity:1}

/* Imprint / Privacy: Textinhalte */
.page-content--text{padding-top:0}
.text-section{padding:30px}
.text-section .container{padding:10px}
.text-section .section-title{text-align:left;margin-bottom:20px}
.text-section--imprint .text-spacer{height:358px}   /* 338px Abstand + 20px */
.text-section--privacy .text-spacer{height:219px}   /* 199px Abstand + 20px */
.rich-text h1{font-family:var(--font-display);font-size:40px;line-height:1.2;font-weight:500;margin:8px 0 16px}
.rich-text h2{font-family:var(--font-display);font-size:32px;line-height:1.2;font-weight:500;margin:20px 0 16px}
.rich-text h3{font-size:28px;line-height:1.2;font-weight:500;margin:8px 0 16px}
.rich-text h4{font-size:24px;line-height:1.2;font-weight:500;margin:8px 0 16px}
.rich-text p{margin:0}
.rich-text strong{font-weight:400}
.rich-text em{font-style:italic}
.rich-text ul{list-style:disc;padding-left:40px;margin:0}
.rich-text ol{list-style:decimal;padding-left:40px;margin:0}
.rich-text a{color:var(--color-secondary);font-weight:400;word-break:break-word}
.rich-text a:hover{color:var(--color-white)}
.rich-text blockquote{margin:16px 0}
.rich-text table{width:100%;border-collapse:collapse;border:1px solid #808080;font-size:.9em;line-height:1.5;margin-bottom:15px}
.rich-text td,.rich-text th{border:1px solid rgba(128,128,128,.5);padding:10px;background:rgba(128,128,128,.07)}
.rich-text img{max-width:100%;height:auto}
.rich-text .toc a{color:var(--color-text);font-weight:200}
.rich-text .toc a:hover{color:var(--color-secondary)}

/* 8. Lightbox ------------------------------------------------------------ */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);padding:40px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0 30px rgba(0,0,0,.6)}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;color:#fff;opacity:.8;transition:opacity .3s;line-height:0}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{opacity:1}
.lightbox__close{top:16px;right:16px;width:40px;height:40px}
.lightbox__prev,.lightbox__next{top:50%;width:40px;height:40px;margin-top:-20px}
.lightbox__prev{left:16px}
.lightbox__next{right:16px}
.lightbox svg{width:100%;height:100%;fill:currentColor}
.lightbox[data-single="true"] .lightbox__prev,
.lightbox[data-single="true"] .lightbox__next{display:none}
body.lightbox-open{overflow:hidden}

/* 9. Responsive ---------------------------------------------------------- */

/* Tablet (768px – 1024px) */
@media (max-width:1024px){
  .hero{padding:147px 40px 0}
  .hero__text{padding-right:30px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* Mobile (≤767px) */
@media (max-width:767px){
  .site-header{display:none}
  .mobile-header{display:block}

  /* Hero: Cover zuerst, Text zentriert */
  .hero{padding:148px 35px 0}
  .hero__inner{min-height:612px}
  .hero__cover{order:1;width:100%;padding:25px 0 0}
  .hero__cover a{box-shadow:none}
  .hero__text{order:2;width:100%;padding:40px 10px;justify-content:center;text-align:center}
  .hero__label{margin-bottom:40px}
  .hero__cta{font-size:30px;line-height:1.2}
  .hero__buttons{justify-content:center}
  .btn{font-size:17.6px}

  .section-video .section-title{font-size:32px}
  .video-embed__play{width:100px;height:100px}

  .section-merch .container{padding:20px}
  .section-merch .section-title{margin-top:30px}
  .merch-carousel{margin-bottom:30px}

  .section-shows{padding-bottom:15px}
  .section-shows .section-title{margin:60px 30px 50px}
  .shows{padding-bottom:20px}
  .shows__row--head h4{font-size:16px}
  .shows__col--date{width:20%}
  .shows__col--venue{width:50%}
  .shows__col--tickets{width:30%}

  /* Klebrige Social-Leiste am unteren Bildschirmrand */
  .mobile-social-bar{
    display:block;position:sticky;bottom:0;z-index:1000;
    background:rgba(1,1,1,.68);padding:10px;
  }
  .mobile-social-bar .social-icons{gap:5px}
  .mobile-social-bar .social-icons a{width:50px;height:50px;border-radius:10%;font-size:25px}

  /* Footer: untereinander, zentriert */
  .site-footer{padding:0 20px}
  .site-footer__credits{width:100%;text-align:center;padding:10px}
  .site-footer__nav{width:100%;padding:10px}
  .footer-menu{flex-wrap:wrap}
  .footer-menu a{padding:10px 20px}

  /* Unterseiten */
  .page-content{padding-top:120px}
  .page-section{padding:20px 0}
  .columns{margin:10px 0}
  .columns__col{width:100%}
  .gallery{grid-template-columns:1fr}
  .text-section{padding:30px 10px}
  .text-section--imprint .text-spacer,.text-section--privacy .text-spacer{height:80px}
  .rich-text h1{font-size:32px}
  .rich-text h2{font-size:26px}
  .rich-text h3{font-size:22px}
  .lightbox{padding:16px}
}