/*
Theme Name: DFUMH
Theme URI: https://dfumh.com
Author: DFUMH
Author URI: https://dfumh.com
Description: Cleanes One-Page-Theme fuer die Band DFUMH (dontfuckupmyhigh). Weisser Hintergrund mit zwei gegenlaeufigen grauen Punkt-Ebenen, transparentes Full-Width-Logo, zweisprachig DE/EN, Social-Icons (inkl. TikTok), Bandmitglieder mit Foto, Bandcamp-Player. Inhalte ueber Design > Customizer pflegbar.
Version: 2.6
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dfumh
*/

:root{
  --gelb:#f5b417; --schwarz:#0e0d0b; --rot:#e8332a; --pink:#ff4fa3;
  --lila:#7b3ff2; --gruen:#39d353; --tuerkis:#16a89a; --orange:#ff7a18;
  --bg:#fafafa; --text:#23202a; --muted:#6c6678;
  --font:"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}

/* ============ HINTERGRUND: weiss + 2 gegenlaeufige Punkt-Ebenen ============ */
.bg{position:fixed;inset:0;z-index:-3;background:var(--bg);overflow:hidden}
.bg .dots{position:absolute;inset:-14%;
  background-image:radial-gradient(rgba(120,120,130,.45) 2px,transparent 2.4px);
  background-size:24px 24px;opacity:.55;animation:dotmove 34s linear infinite}
.bg .dots.d2{background-image:radial-gradient(rgba(120,120,130,.40) 2px,transparent 2.4px);
  background-size:30px 30px;opacity:.40;animation:dotmove2 24s linear infinite}
@keyframes dotmove{from{background-position:0 0}to{background-position:360px 200px}}
@keyframes dotmove2{from{background-position:0 0}to{background-position:-320px -240px}}
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.bg .dots{animation:none}}

/* ============ NAVIGATION ============ */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;
  align-items:center;justify-content:space-between;padding:12px 22px;
  background:rgba(250,250,250,.82);backdrop-filter:blur(8px);border-bottom:2px solid rgba(0,0,0,.08)}
.nav .marke{font-weight:900;letter-spacing:2px;font-size:21px;color:var(--schwarz);
  text-shadow:2px 2px 0 var(--gelb);text-decoration:none}
.nav nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav nav a{color:var(--schwarz);text-decoration:none;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:1px;padding:8px 11px;border-radius:999px;transition:.2s}
.nav nav a:hover{background:var(--gelb);color:#000}
.lang{display:flex;border:2px solid var(--schwarz);border-radius:999px;overflow:hidden}
.lang button{background:transparent;color:var(--schwarz);border:0;cursor:pointer;font-weight:800;padding:6px 12px;font-size:13px}
.lang button.active{background:var(--gelb);color:#000}
.burger{display:none;background:none;border:0;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:var(--schwarz);margin:5px 0}

/* Social-Icons in der Navigationsleiste */
.nav-social{display:flex;gap:8px;align-items:center}
.nav-social a{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;
  border-radius:50%;color:var(--schwarz);background:rgba(0,0,0,.05);border:2px solid rgba(0,0,0,.14);transition:.2s}
.nav-social a:hover{background:var(--gelb);color:#000;transform:translateY(-2px)}
.nav-social svg{width:36px;height:36px;fill:currentColor;display:block}

/* ============ ABSCHNITTE ============ */
section{max-width:none;margin:0 auto;padding:88px clamp(16px,5vw,90px);position:relative}
.titel{font-size:clamp(34px,6vw,68px);font-weight:900;line-height:1;text-transform:uppercase;
  letter-spacing:1px;color:var(--schwarz);text-shadow:4px 4px 0 var(--gelb);margin-bottom:26px}
p.flow{max-width:680px;font-size:18px;color:var(--text);white-space:pre-line}
#band .flow{max-width:none}
.muted{color:var(--muted)}

/* HERO */
.hero{min-height:100vh;width:100%;max-width:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:120px 0 40px}
#hero-logo{width:100%;display:flex;justify-content:center}
.hero .logo-img{display:block;width:92vw;max-width:1600px;height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.18));animation:pop 1s ease}
.hero .wortlogo{font-size:clamp(64px,16vw,170px);font-weight:900;letter-spacing:6px;color:var(--schwarz);
  line-height:.9;text-shadow:6px 6px 0 var(--gelb)}
.hero .claim{margin-top:6px;font-size:clamp(16px,3vw,26px);font-style:italic;font-weight:700;color:var(--text);letter-spacing:1px}
.hero .sub{margin-top:20px;font-size:clamp(15px,2.4vw,22px);color:var(--muted);font-weight:600}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

.btn{display:inline-block;margin-top:28px;cursor:pointer;background:var(--gelb);color:#000;font-weight:900;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none;padding:15px 32px;border-radius:999px;
  border:3px solid var(--schwarz);box-shadow:6px 6px 0 var(--schwarz);transition:.15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--schwarz)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--schwarz)}

/* MUSIK / Player */
.spotify-wrap,.player-wrap{margin-top:26px;border-radius:14px;overflow:hidden;max-width:500px;border:3px solid var(--schwarz);box-shadow:6px 6px 0 var(--gelb)}
.player-wrap iframe,.spotify-wrap iframe{width:100%;height:235px;border:0;display:block;background:#0e0d0b}
.player-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.player-grid .player-wrap{margin-top:0;max-width:none}
@media(max-width:1000px){.player-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.player-grid{grid-template-columns:1fr}}
.bc-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:26px}
.bc-grid .player-wrap{margin-top:0;max-width:none;aspect-ratio:1/1}
.bc-grid .player-wrap iframe{height:100%}
/* Bandcamp-Player: zum Handy hin kompakter */
@media(max-width:1200px){.bc-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.bc-grid{grid-template-columns:repeat(3,1fr)}}
.platzhalter{margin-top:24px;padding:40px;text-align:center;border:2px dashed rgba(0,0,0,.25);border-radius:14px;color:var(--muted)}

/* TOUR */
.termin{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:18px 22px;margin-bottom:14px;
  background:#fff;border:2px solid rgba(0,0,0,.08);border-left:6px solid var(--gelb);border-radius:12px;box-shadow:3px 3px 0 rgba(0,0,0,.05)}
.termin .datum{font-weight:900;font-size:20px;color:var(--schwarz);min-width:120px}
.termin .ort{flex:1;font-size:17px}
.termin .ort b{color:var(--schwarz)}

/* BAND */
.mitglieder{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.mitglied{width:calc((100% - 84px) / 8)}
.mitglied{text-align:center}
.mitglied img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:3px solid var(--schwarz);box-shadow:5px 5px 0 var(--gelb)}
.mitglied .ph{width:100%;aspect-ratio:1;border-radius:14px;border:3px solid var(--schwarz);box-shadow:5px 5px 0 var(--gelb);
  background:linear-gradient(150deg,var(--gelb),var(--orange));display:flex;align-items:center;justify-content:center;
  font-size:clamp(40px,8vw,64px);font-weight:900;color:var(--schwarz)}
.mitglied .mname{font-weight:800;margin-top:10px;color:var(--schwarz)}
.mitglied .mrolle{color:var(--muted);font-size:14px}

/* GALERIE */
.galerie-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:30px}
.galerie-grid figure{overflow:hidden;border-radius:12px;border:3px solid var(--schwarz);box-shadow:6px 6px 0 var(--gelb);cursor:pointer}
.galerie-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .4s;display:block}
.galerie-grid figure:hover img{transform:scale(1.07) rotate(-1deg)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(10,8,14,.92);padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;border:4px solid var(--gelb)}
.lightbox .close{position:absolute;top:18px;right:26px;font-size:42px;color:var(--gelb);cursor:pointer;font-weight:900;line-height:1}

/* KONTAKT */
.kontakt-mail{display:inline-block;margin-top:8px;font-size:clamp(20px,4vw,34px);font-weight:900;color:var(--schwarz);
  text-decoration:none;text-shadow:3px 3px 0 var(--gelb)}
.kontakt-mail:hover{color:var(--orange)}
.socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.socials a{display:inline-flex;align-items:center;gap:8px;background:var(--gelb);color:#000;font-weight:800;
  text-decoration:none;padding:12px 20px;border-radius:999px;border:3px solid var(--schwarz);box-shadow:4px 4px 0 var(--schwarz);
  transition:.15s;text-transform:uppercase;font-size:14px;letter-spacing:1px}
.socials a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--schwarz)}

/* FOOTER */
footer.fuss{text-align:center;padding:38px clamp(16px,5vw,90px);color:var(--muted);font-size:14px;border-top:2px solid rgba(0,0,0,.1);margin-top:40px}

/* MOBIL */
@media(max-width:760px){
  .burger{display:block}
  .nav nav{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:stretch;
    background:rgba(250,250,250,.98);padding:14px;gap:6px;display:none;border-bottom:2px solid var(--gelb)}
  .nav nav.open{display:flex}
  .nav nav a{text-align:center}
  .nav-social{justify-content:center;margin-top:8px}
  .lang{align-self:center;margin-top:8px}
}

/* Responsive Galerie + Mitglieder (am Dateiende, damit die Regeln sicher greifen) */
@media(max-width:1200px){.galerie-grid{grid-template-columns:repeat(6,1fr)}.mitglied{width:calc((100% - 60px) / 6)}}
@media(max-width:860px){.galerie-grid{grid-template-columns:repeat(5,1fr)}.mitglied{width:calc((100% - 48px) / 5)}}
@media(max-width:640px){.galerie-grid{grid-template-columns:repeat(4,1fr)}.mitglied{width:calc((100% - 36px) / 4)}}