/* humator.de - statischer Rebuild. Werte aus der Browser-Messung des Originals. */

@font-face{font-family:'Metal Mania';src:url('../fonts/metal-mania-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('../fonts/source-sans-pro-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('../fonts/source-sans-pro-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  --black:#000;--black-title:#0a0a0a;--black-footer:#0c0c0c;--black-band:#111;--bar:#222;
  --pink:#f31e58;--gray:#666;--dark:#333;--white:#fff;--field:#eee;--field-text:#999;
  --row:1080px;--gap2:5.5%;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--gray);
  font:500 14px/1.7 'Open Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;padding:0 0 10px;font-family:'Open Sans',Arial,sans-serif;
  font-weight:500;line-height:1em;color:var(--dark)}
h1{font-size:30px}h2{font-size:26px}h3{font-size:22px}h4{font-size:18px}h5{font-size:16px}h6{font-size:14px}

.row{max-width:var(--row);margin:0 auto;padding:27px 0}
.section{padding:54px 0;background:var(--black)}
.cols-2{display:grid;grid-template-columns:47.25% 47.25%;gap:var(--gap2)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:6px 20px;border:2px solid currentColor;border-radius:3px;
  font-family:'Open Sans',Arial,sans-serif;
  background:transparent;font-size:20px;line-height:34px;font-weight:500;text-align:center;
  transition:background-color .2s ease}
.btn-white{color:var(--white)}
.btn-white:hover{background:rgba(255,255,255,.14)}
.btn-black{color:var(--black)}
.btn-black:hover{background:rgba(0,0,0,.08)}
.btn-pink{color:var(--pink)}
.btn-pink:hover{background:rgba(243,30,88,.12)}

/* ---------- Kopfbereich ---------- */
.site-header{background:var(--black)}
.site-header .row{display:flex;align-items:center;justify-content:space-between}
.site-logo img{width:90px;height:90px}
.nav-toggle{display:none;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:26px;height:2px;
  background:var(--white);content:''}
.nav-toggle span{position:relative}
.nav-toggle span::before{position:absolute;top:-8px}
.nav-toggle span::after{position:absolute;top:8px}
.main-nav ul{display:flex;align-items:center;margin:0 -11px}
.main-nav li{padding:0 11px}
.main-nav a{display:block;padding:31px 0;font-size:19px;line-height:14px;letter-spacing:1px;
  font-weight:500;color:var(--white)}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--pink)}

/* ---------- Startseite: Hero ---------- */
.hero{padding:54px 0;background:var(--black)}
.hero h1{font-family:'Metal Mania',sans-serif;font-size:125px;line-height:125px;color:var(--white)}
.hero h2{font-family:'Metal Mania',sans-serif;font-size:26px;line-height:26px;color:var(--white)}
.hero p{color:var(--gray)}
.hero .btn-wrap{margin-top:29px}

/* ---------- Startseite: drei Kacheln ---------- */
.tiles{padding:0;background:var(--black-footer)}
.tiles .row{display:grid;grid-template-columns:repeat(3,31.33%);justify-content:space-between}
.tile{padding:60px 0;background:var(--black);text-align:center}
.tile h3{font-family:'Source Sans Pro',sans-serif;font-weight:900;font-size:40px;line-height:40px;
  color:var(--white)}
.tile p{color:var(--white)}

/* ---------- Startseite: Biografie ---------- */
.bio{padding:54px 0;background:var(--black)}
.bio .text{padding:0 7%;color:var(--white);text-align:center;line-height:1.8em}

/* ---------- Seitentitel-Band ---------- */
.page-title{padding:54px 0;background:var(--black-title)}
.page-title h3{font-family:'Source Sans Pro',sans-serif;font-weight:700;font-size:54px;line-height:54px;
  color:var(--white);text-align:center}
.page-title h2{font-size:33px;line-height:33px;font-weight:700;color:var(--white);text-align:center}
.page-title--music{margin-bottom:36px}
.page-title--music .row{padding:27px 0 9px}

/* ---------- Artists ---------- */
.artist{padding:54px 0;background:var(--black)}
.artist .row{background:var(--white);padding:0}
.artist .col-text{padding:150px 0;background:var(--white);text-align:center}
.artist .col-text h2{font-size:36px;line-height:36px;font-weight:700;color:var(--dark)}
.artist .col-text p{color:var(--gray)}
.artist .btn-wrap{margin-top:53px}
.artist .col-photo{background-size:cover;background-position:50% 0;background-repeat:no-repeat}
.artist--photo-left .col-photo{order:1}
.artist--photo-left .col-text{order:2}

/* ---------- Music: Albumraster ---------- */
.music-grid{padding:0 0 54px;background:var(--black)}
.music-grid .grid{display:grid;grid-template-columns:repeat(4,225px);gap:59.39px}
.album-card img{width:225px;height:225px;object-fit:cover}
.album-card h2{padding:0;margin-top:10px;font-size:18px;line-height:18px;font-weight:500;color:var(--white)}
.album-card:hover h2{color:var(--pink)}

/* ---------- Videos ---------- */
.videos{padding:0 0 54px;background:var(--black)}
.videos .row{padding:52px 0 27px;display:grid;grid-template-columns:repeat(3,320px);
  justify-content:space-between}
.video{position:relative;display:block;width:320px;height:240px;overflow:hidden;background:#000}
.video img{width:100%;height:100%;object-fit:cover}
.video .video-title{position:absolute;top:0;left:0;right:0;padding:10px 12px;color:var(--white);
  font-size:13px;line-height:1.3;font-weight:600;
  background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}
.video .play{position:absolute;top:50%;left:50%;width:68px;height:48px;margin:-24px 0 0 -34px;
  border-radius:12px;background:#f00;display:flex;align-items:center;justify-content:center}
.video .play svg{width:24px;height:24px;fill:#fff}
.video .video-foot{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;color:var(--white);
  font-size:13px;line-height:1.3;text-align:center;background:rgba(0,0,0,.55)}
.video:hover .play{background:#c00}

/* ---------- Album: Trackliste ---------- */
.tracks{padding:54px 0;background:var(--black)}
.track{display:grid;grid-template-columns:297px 297px;gap:34.53px;width:628px;margin:0 auto;
  min-height:78.6px}
.track>div{text-align:center}
.track .title{padding:13px 0 18px;font-size:18px;line-height:23.8px;color:var(--white)}
.track .number{color:var(--pink)}

/* ---------- Kontakt ---------- */
.contact-band{padding:80px 0;background:var(--black-band)}
.contact-main{padding:54px 0;background:var(--black)}
.contact-main .row{position:relative;margin-top:-160px;padding:50px;background:var(--black)}
.contact-main h3{font-size:22px;line-height:22px;font-weight:600;color:var(--white)}
.contact-main h2{font-size:26px;line-height:26px;font-weight:700;color:var(--white)}
.contact-main p{padding-bottom:14px}
.contact-main strong{font-weight:700}
.contact-main a{color:var(--pink);font-weight:700}
.contact-main a:hover{text-decoration:underline}
.social-links p{padding-bottom:14px}
.contact-main .sp+.sp+.sp{padding-bottom:0}
form input,form textarea{display:block;width:100%;margin-bottom:14px;padding:16px;border:0;
  background:var(--field);color:var(--field-text);
  font:400 14px/normal 'Open Sans',Arial,sans-serif}
form textarea{height:150px;resize:vertical}
form input::placeholder,form textarea::placeholder{color:var(--field-text)}
form input.error,form textarea.error{outline:2px solid var(--pink)}
.dsgvo{padding-bottom:14px}
.form-foot{display:flex;justify-content:flex-end}
.form-message{padding-bottom:14px;color:var(--white)}

/* ---------- Rechtstexte ---------- */
.legal{padding:54px 0;background:var(--white)}
.legal h1{font-size:30px}
.legal h2{font-size:26px}
.legal h3{font-size:22px}
.legal h4{font-size:18px}
.legal p,.legal ul{padding-bottom:14px;color:var(--gray)}
.legal ul{padding-left:20px;list-style:disc}
.legal a{color:var(--pink)}
.legal a:hover{text-decoration:underline}

/* ---------- Fehlerseite ---------- */
.notfound{padding:120px 0;background:var(--black);text-align:center}
.notfound h1{font-family:'Metal Mania',sans-serif;font-size:80px;line-height:80px;color:var(--white)}
.notfound p{padding-bottom:28px;color:var(--white)}

/* ---------- Fußbereich ---------- */
.follow{padding:54px 0;background:var(--black-footer)}
.follow h5{font-family:'Source Sans Pro',sans-serif;font-weight:900;font-size:36px;line-height:36px;
  color:var(--white);text-align:center}
.social{margin-top:29px;text-align:center;line-height:0}
.social a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  margin:0 8px 8px 0;border-radius:30px;background:var(--white);color:#000}
.social a:hover{background:var(--pink);color:var(--white)}
.social svg{width:23px;height:23px;fill:currentColor}
.site-footer{padding:15px 0 5px;background:var(--bar)}
.site-footer .inner{display:flex;align-items:flex-start;justify-content:space-between;
  max-width:var(--row);margin:0 auto}
.site-footer .info{padding-bottom:10px;color:var(--gray)}
.site-footer .info a{font-weight:700;color:var(--gray)}
.site-footer .info a:hover{color:var(--pink)}
.site-footer .credit a{color:var(--pink)}
.site-footer .credit a:hover{text-decoration:underline}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .row,.site-footer .inner{padding-left:20px;padding-right:20px}
  .videos .row{grid-template-columns:repeat(3,1fr);gap:20px}
  .video{width:100%;height:auto;aspect-ratio:4/3}
  .music-grid .grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .album-card img{width:100%;height:auto;aspect-ratio:1/1}
  .track{width:100%;max-width:628px}
}
@media (max-width:980px){
  .nav-toggle{display:block}
  .main-nav{position:absolute;top:100%;left:0;right:0;z-index:20;display:none;
    background:var(--black);border-top:1px solid #222}
  .main-nav.open{display:block}
  .main-nav ul{display:block;margin:0;padding:10px 20px 20px}
  .main-nav li{padding:0}
  .main-nav a{padding:12px 0}
  .site-header .row{position:relative}
  .cols-2{grid-template-columns:100%;gap:0}
  .hero h1{font-size:72px;line-height:72px}
  .hero .cols-2>*+*{margin-top:30px}
  .tiles .row{grid-template-columns:100%;gap:20px}
  .artist .col-text{padding:60px 20px}
  .artist .col-photo{min-height:360px;order:1}
  .artist--photo-left .col-text{order:2}
  .page-title h3{font-size:40px;line-height:40px}
  .music-grid .grid{grid-template-columns:repeat(2,1fr)}
  .videos .row{grid-template-columns:100%}
  .track{grid-template-columns:1fr auto;gap:20px;align-items:center}
  .contact-main .row{margin-top:-120px;padding:30px 20px}
  .contact-main .cols-2>*+*{margin-top:30px}
  .site-footer .inner{flex-direction:column;gap:4px}
}
@media (max-width:480px){
  .hero h1{font-size:52px;line-height:52px}
  .page-title h3{font-size:32px;line-height:32px}
  .follow h5{font-size:28px;line-height:28px}
  .music-grid .grid{grid-template-columns:100%}
}