/* =========================================================
   TIDES OF LIFE — Design tokens
   Kalt (Tides) trifft warm (Life): Tinten-Teal + pulsierender Bernstein
   Schriften bewusst systemeigen (kein Google Fonts-Nachladen -> DSGVO)
   ========================================================= */
:root{
  --bg-deep:#070b10;
  --bg-panel:#0d151d;
  --bg-panel-2:#0a1219;
  --ink-line: rgba(230,240,240,0.09);
  --text-primary:#eef3f2;
  --text-muted:#93a6a8;
  --text-faint:#5f7274;

  --accent:#7fd8cf;        /* icy teal — die "Tides" */
  --accent-soft: rgba(127,216,207,0.14);
  --ember:#e0a267;         /* warmer Bernstein — das "Life" */
  --ember-soft: rgba(224,162,103,0.25);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;
  --max-w: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:.01em; }
h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
h3{ font-size:1.05rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-body); font-weight:600; }
p{ margin:0 0 1em; color:var(--text-muted); }
blockquote{
  margin:1.6em 0 0;
  padding-left:1.1em;
  border-left:2px solid var(--ember);
  font-family:var(--font-display);
  font-style:italic;
  color:var(--text-primary);
  font-size:1.15rem;
}

.logo-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.hero-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--accent);
  font-weight:600;
  margin:0 0 .9em;
}
.center{ text-align:center; }

.btn{
  display:inline-block;
  padding:.85em 1.7em;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--ember), #c9803f);
  color:#1a1005;
  box-shadow: 0 6px 20px -6px rgba(224,162,103,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(224,162,103,.7); }
.btn-ghost{
  border-color: var(--ink-line);
  color:var(--text-primary);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background: rgba(7,11,16,.86);
  backdrop-filter: blur(10px);
  border-color: var(--ink-line);
}
.header-inner{
  max-width:var(--max-w); margin:0 auto; padding:.9rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.brand-logo{ width:36px; height:36px; object-fit:contain; border-radius:50%; }
.brand-name{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em; color:var(--text-primary); }
.brand-pulse{ color:var(--text-faint); font-size:.85em; margin:0 .15em; }

.site-nav{ display:flex; gap:1.8rem; }
.nav-link{ text-decoration:none; color:var(--text-muted); font-size:.92rem; font-weight:500; position:relative; padding:.2em 0; }
.nav-link:hover{ color:var(--text-primary); }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--accent);
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4em; }
.nav-toggle span{ width:24px; height:2px; background:var(--text-primary); border-radius:2px; transition:.25s; }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bg-panel); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:2rem; gap:1.4rem; transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--ink-line);
  }
  .site-nav.open{ transform:translateX(0); }
  .nav-link{ font-size:1.1rem; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding: 7rem 1.4rem 6rem; overflow:hidden;
  background: radial-gradient(ellipse at 70% 15%, rgba(127,216,207,0.10), transparent 55%), var(--bg-deep);
}
.hero-glow{
  position:absolute; top:-10%; right:-5%; width:60vmax; height:60vmax; border-radius:50%;
  background: radial-gradient(circle, rgba(224,162,103,0.10), transparent 65%);
  pointer-events:none;
}
.hero-inner{ max-width:760px; text-align:center; position:relative; z-index:2; }
.hero-title{
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.05; margin-bottom:.4em; color:var(--text-primary);
}
.hero-title .of{ color:var(--text-faint); font-size:.5em; vertical-align:middle; margin:0 .08em; }
.pulse-word{ position:relative; color:#fff; }
.pulse-dot{
  display:inline-block; width:.16em; height:.16em; border-radius:50%;
  background:var(--ember); margin-left:.12em; vertical-align:super;
  box-shadow:0 0 12px 3px var(--ember-soft);
  animation: heartbeat 2.2s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{ transform:scale(1); opacity:.85; }
  20%{ transform:scale(1.5); opacity:1; }
  35%{ transform:scale(1); opacity:.85; }
  45%{ transform:scale(1.3); opacity:1; }
  60%{ transform:scale(1); opacity:.85; }
}
.hero-tags{ letter-spacing:.08em; color:var(--accent); font-size:.95rem; margin-bottom:1.4em; }
.hero-text{ font-size:1.05rem; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* ---------- Wave dividers ---------- */
.wave-divider{ position:relative; height:70px; overflow:hidden; line-height:0; margin-top:-2px; }
.wave-divider svg{ position:absolute; left:0; top:0; width:200%; height:100%; animation: wave-scroll 22s linear infinite; }
.wave-to-panel svg path{ fill: var(--bg-panel); }
.wave-to-deep svg path{ fill: var(--bg-deep); }
@keyframes wave-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-1200px); } }

/* ---------- Sections ---------- */
.section{ position:relative; padding: 5.5rem 1.4rem 0; background:var(--bg-deep); }
.section.panel{ background:var(--bg-panel); }
.section-inner{ max-width:var(--max-w); margin:0 auto; padding-bottom:5.5rem; }

/* About */
.about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:3.5rem; align-items:center; }
.about-image img{ border-radius:var(--radius); filter:saturate(.9) contrast(1.05); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; gap:2rem; } }

/* Music */
.music-grid{ display:grid; grid-template-columns: .6fr 1.4fr; gap:3.5rem; align-items:start; }
.music-cover img{ border-radius:var(--radius); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.release-date{ color:var(--ember); font-weight:600; letter-spacing:.03em; }
.tracklists{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:1.6rem 0 2rem; }
.tracklist ol{ margin:0; padding-left:1.2em; color:var(--text-muted); }
.tracklist li{ margin-bottom:.35em; }
@media (max-width:760px){
  .music-grid{ grid-template-columns:1fr; gap:2rem; }
  .tracklists{ grid-template-columns:1fr; }
}

/* Videos */
.video-note{ max-width:560px; margin-left:auto; margin-right:auto; font-size:.9rem; }
.video-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; margin:2.4rem 0 1rem;
}
.video-card{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; border:1px solid var(--ink-line);
  background:var(--bg-panel-2);
}
.video-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.85; transition:opacity .25s, transform .4s; }
.video-card:hover img{ opacity:1; transform:scale(1.04); }
.video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-play::before{
  content:""; width:52px; height:52px; border-radius:50%;
  background: rgba(7,11,16,.55); border:1px solid var(--accent);
  backdrop-filter:blur(2px);
}
.video-play::after{
  content:""; position:absolute; width:0; height:0;
  border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid var(--accent);
  transform:translateX(3px);
}
.video-more{ margin-top:1.6rem; }
.video-more a{ color:var(--accent); text-decoration:none; font-weight:600; }
.video-more a:hover{ text-decoration:underline; }

/* Contact */
.contact-section .section-inner{ max-width:640px; }
.contact-email{
  display:inline-block; font-size:1.4rem; font-family:var(--font-display); color:var(--accent);
  text-decoration:none; margin:.4em 0 1.4em; border-bottom:1px solid var(--accent-soft);
}
.contact-email:hover{ border-color:var(--accent); }
.social-row{ display:flex; justify-content:center; gap:1rem; color:var(--text-muted); }
.social-row a{ color:var(--text-muted); transition:color .2s; }
.social-row a:hover{ color:var(--accent); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-panel); border-top:1px solid var(--ink-line); padding:2.6rem 1.4rem 3rem; }
.footer-inner{ max-width:var(--max-w); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center; }
.footer-logo{ width:34px; height:34px; border-radius:50%; opacity:.85; }
.footer-copy{ font-size:.85rem; color:var(--text-faint); margin:0; }
.footer-links{ display:flex; gap:1.4rem; }
.footer-links a{ font-size:.85rem; color:var(--text-muted); text-decoration:none; }
.footer-links a:hover{ color:var(--accent); }

/* ---------- Legal pages shared ---------- */
.legal-main{ max-width:820px; margin:0 auto; padding:7.5rem 1.4rem 5rem; }
.legal-main h1{ font-size:2rem; margin-bottom:.2em; }
.legal-updated{ color:var(--text-faint); font-size:.85rem; margin-bottom:2.4em; }
.legal-main h2{ font-size:1.2rem; margin-top:2.2em; color:var(--accent); font-family:var(--font-body); text-transform:uppercase; letter-spacing:.05em; }
.legal-main h3{ font-size:1rem; color:var(--text-primary); text-transform:none; letter-spacing:0; margin-top:1.4em; }
.legal-main p, .legal-main li{ color:var(--text-muted); }
.legal-main a{ color:var(--accent); }
.legal-placeholder{
  border:1px dashed var(--ember); background:var(--ember-soft); color:var(--text-primary);
  padding:.9em 1.1em; border-radius:var(--radius); font-size:.9rem;
}
.back-link{ display:inline-block; margin-top:2.5rem; color:var(--accent); text-decoration:none; font-weight:600; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:100;
  max-width:720px; margin:0 auto;
  background:var(--bg-panel-2); border:1px solid var(--ink-line); border-radius:10px;
  padding:1.2rem 1.4rem; box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  transform:translateY(140%); transition:transform .5s ease;
}
.cookie-banner.visible{ transform:translateY(0); }
.cookie-banner p{ flex:1 1 320px; font-size:.88rem; margin:0; color:var(--text-muted); }
.cookie-banner a{ color:var(--accent); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(5,8,11,.9); }
.lightbox-frame{ position:relative; width:100%; max-width:900px; aspect-ratio:16/9; z-index:2; }
.lightbox-video{ width:100%; height:100%; }
.lightbox-video iframe{ width:100%; height:100%; border:0; border-radius:var(--radius); }
.lightbox-close{
  position:absolute; top:-2.4rem; right:0; background:none; border:none; color:var(--text-primary);
  font-size:1.3rem; cursor:pointer;
}