:root{
  --bg:#0b0b0c;
  --white:#f5f5f5;
  --mid:#cfcfcf;
  --accent:#FF0033;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow:auto; /* Fix: erlaubt Scrollen, wenn Inhalt höher ist */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hauptlayout */
.wrap{
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:0 auto;
  padding:16px 20px;
  height:auto;           /* Fix: nicht starr 100svh */
  min-height:100svh;     /* trotzdem mindestens volle Höhe */
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
}

.head{ padding-right:0; }

.title{
  margin:0 0 6px 0;
  letter-spacing:.08em;
  font-size:clamp(56px, 11vw, 128px);
  font-weight:1000;
  color:transparent;
  -webkit-text-stroke:3px var(--white);
  text-stroke:3px var(--white);
}

.quote{
  margin:0;
  text-transform:uppercase;
  font-size:clamp(12px,2.6vw,18px);
  color:var(--mid);
  letter-spacing:.08em;
}

.quote.red{
  color:var(--accent);
  font-weight:900;
}

.sub{
  margin:6px 0 0 0;
  color:#bdbdbd;
}

/* Contentbereich */
.main{
  min-height:0;
  display:grid;
  grid-template-rows:minmax(42vh,1fr) auto auto; /* Fix: Hero bekommt Mindesthöhe */
  gap:12px;
}

.hero{
  border:3px solid var(--white);
  overflow:hidden;
  box-shadow:0 0 48px rgba(255,0,51,.22);
  min-height:0;
  aspect-ratio:16/9;  /* Fix: Bild bleibt sichtbar */
  min-height:360px;   /* absolute Untergrenze */
}

.hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%) contrast(120%) brightness(80%);
}

/* SoundCloud Player */
.player iframe{
  display:block;
  width:100%;
  border:0;
}

.player{
  border:2px solid var(--white);
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(2px);
}

.sc-meta{
  font-size:10px;
  color:#ccc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:100;
  padding:2px 6px;
}

.sc-meta a{
  color:#ccc;
  text-decoration:none;
}

/* Bio-Sektion */
.bio{
  border:2px solid var(--white);
  background:rgba(0,0,0,0.35);
  padding:14px 16px;
  line-height:1.5;
  color:#e9e9e9;
}

.bio-head{
  margin:0 0 8px 0;
  font-size:clamp(14px,2.4vw,18px);
  letter-spacing:.18em;
  color:var(--white);
}

/* Footer */
.foot{opacity:.7}

/* Blood-stain Booking Badge */
.blood-badge{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:calc(env(safe-area-inset-right,0px) + 12px);
  z-index:3;
  text-decoration:none;
  color:var(--white);
  filter:drop-shadow(0 6px 22px rgba(255,0,51,.35));
}

.blood{width:128px; height:128px}

.badge-text{
  font:700 18px/1.1 Inter, system-ui, sans-serif;
  fill:#fff;
}

/* Hintergrund */
.bg{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.grain{
  position:absolute;
  inset:-20%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
  opacity:.12;
  mix-blend-mode:overlay;
  background-size:300px 300px;
  animation:grain 6s steps(10) infinite;
}

@keyframes grain{
  0%{transform:translate(0,0)}
  100%{transform:translate(-20px,-15px)}
}

.grit{
  position:absolute;
  inset:-10%;
  width:120%;
  height:120%;
  opacity:.35;
  mix-blend-mode:soft-light;
}

.blk{
  position:absolute;
  width:22vw;
  height:60vh;
  background:radial-gradient(circle at 30% 30%, rgba(255,0,51,.38), transparent 60%);
  filter:blur(28px);
  opacity:.55;
}

.b-left{left:-6vw; top:10vh; transform:skewY(-6deg)}
.b-right{right:-7vw; bottom:6vh; transform:skewY(5deg)}

/* Mobile Verhalten */
@media (max-width:820px){
  body{overflow:auto;}
  .wrap{height:auto; min-height:100svh; padding-bottom:16px;}
}

/* Sehr kleine Screens: Badge nach unten */
@media (max-height:640px){
  .blood-badge{top:auto; bottom:12px;}
}