/* ── VARIABLES ── */
:root{
  --vanilla:#f6efe0;
  --mint:#b5ffd6;
  --lavender:#c4a3ff;
  --bg:#12111a;
  --card:rgba(255,255,255,.07);
  --border:3px solid #222;
  --radius:18px;
  --font-display:'Josefin Sans', sans-serif;
  --font-body:'Quicksand', sans-serif;
}

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:#eee;font-family:var(--font-body);line-height:1.6;overflow-x:hidden}

/* ── BEAMS BACKGROUND ── */
#beams-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  filter:blur(15px);
}
.beams-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  background:rgba(18,17,26,.85);
  pointer-events:none;
  backdrop-filter:blur(50px);
}
header.centered-header,
section,
footer{
  position:relative;
  z-index:2;
}

/* ── HEADER (schmäler) ── */
header.centered-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 40px; /* halber Anteil an vorheriger Höhe */
  background:var(--vanilla);
  border-bottom:4px solid #000;
}
.logo-container{
  width:20%;
  text-align:center;
}
.logo-container img{
  width:100%;
  height:auto;
  display:block;
  filter:brightness(0);
}

/* ── SECTIONS ── */
section{max-width:1080px;margin:0 auto;padding:48px 24px}
h2{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.8rem;margin-bottom:12px;color:#f6efe0}

/* ── CARDS ── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:40px}
.card{background:var(--card);padding:28px;border-radius:var(--radius);border:var(--border);box-shadow:6px 6px 0 rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s}
.card:hover{
  /* Transform ist perfekt, da es das Layout nicht verschiebt */
  transform: translateY(-8px); 
  border: var(--border);
  /* Der Glow bleibt gleich, aber durch will-change oben stabiler */
  box-shadow: 0 15px 40px rgba(100, 203, 221, 0.8);}
.about p{font-size:1.05rem;color:#ddd}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.thumb{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;border:var(--border);box-shadow:4px 4px 0 rgba(0,0,0,.3);}
.thumb:hover{transform:scale(1.04) rotate(-1deg)}
.thumb img{width:100%;height:140px;object-fit:cover;display:block}
.thumb .label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:8px 10px 6px;font-size:.75rem;color:#fff}

/* ── LIGHTBOX ── */
.lightbox{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox img{max-width:85vw;max-height:80vh;border-radius:12px;border:3px solid #333;box-shadow:0 0 60px rgba(255,143,179,.3)}
.lightbox .close{position:absolute;top:20px;right:28px;font-size:2.4rem;color:#fff;cursor:pointer;background:none;border:none;opacity:.7}
.lightbox .close:hover{opacity:1}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;color:#fff;cursor:pointer;background:rgba(255,255,255,.1);border:none;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.lightbox .nav:hover{background:rgba(255,255,255,.25)}
.lightbox .nav.prev{left:20px}
.lightbox .nav.next{right:20px}
.lightbox .counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#999;font-size:.9rem}

/* ── BIOGRAFIE (scrollbar, barrierefrei) ── */
.artist-text{
  max-height:420px;
  overflow-y:auto;
  padding-right:8px;
  color:#ddd;
  font-size:1.05rem;
  line-height:1.7;
}
.artist-text:focus{
  outline:2px solid var(--mint);
  outline-offset:4px;
  border-radius:4px;
}
.artist-text::-webkit-scrollbar{width:8px}
.artist-text::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}
.artist-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px}
.artist-text::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}

/* ── CONTACT ── */
.contact-info{display:flex;flex-direction:column;gap:8px;color:#bbb}

/* ── FOOTER ── */
footer{text-align:center;padding:24px;background:linear-gradient(135deg,var(--lavender),var(--mint));border-top:4px solid #000;color:#fff}

/* ── LANGUAGE SWITCH ── */
.lang-switch{
  position:absolute;
  right:40px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-size:0.72rem;
  letter-spacing:0.1em;
  user-select:none;
}
.lang-switch span[data-lang]{
  cursor:pointer;
  color:#888;
  padding:2px 0;
  transition:color .2s;
}
.lang-switch span[data-lang]:hover{color:#000}
.lang-switch span[data-lang].active{
  color:#000;
  text-decoration:underline;
  text-underline-offset:3px;
}
.lang-switch .sep{color:#bbb}

/* ── RESPONSIVE ── */
@media (max-width:768px){
  header.centered-header{
    flex-direction:column;
    gap:8px;
    padding:8px 20px;
  }
  .logo-container{width:70%}
  .lang-switch{
    position:static;
    transform:none;
    right:auto;
    top:auto;
  }
  .grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}