
:root{
 --bg:#f3eee5;--paper:#fbf8f1;--ink:#1b1915;--muted:#6f695f;--deep:#18201c;
 --accent:#9d7747;--accent2:#c5a778;--line:rgba(27,25,21,.16);--white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.7}
a{color:inherit}
img{max-width:100%;display:block}
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:18px 5vw;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0))}
.brand{font-size:13px;letter-spacing:.18em;text-decoration:none;font-weight:700}
.nav{display:flex;gap:23px}.nav a{font-size:12px;text-decoration:none;opacity:.93}
.lang-switch{justify-self:end;display:flex;gap:7px;align-items:center}.lang{border:0;background:none;color:#fff;cursor:pointer;opacity:.55;font-weight:700}.lang.active{opacity:1}
.hero{min-height:94vh;display:grid;place-items:center;text-align:center;color:#fff;padding:130px 7vw 80px;background:linear-gradient(rgba(9,13,10,.28),rgba(9,13,10,.64)),url("assets/images/odzak-hero.png") center/cover no-repeat}
.hero-content{max-width:940px}.eyebrow,.kicker{letter-spacing:.23em;font-size:11px;font-weight:700}.hero h1,.section h2,.section h3,.legal-page h1,.legal-page h2{font-family:Georgia,"Times New Roman",serif;margin:0;line-height:1.08}
.hero h1{font-size:clamp(54px,8.5vw,116px);font-weight:500}.hero-line{font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,3vw,43px);margin:18px 0 5px}.hero-sub{opacity:.87}.button{display:inline-block;margin-top:24px;padding:12px 20px;border:1px solid rgba(255,255,255,.65);text-decoration:none;font-size:13px;letter-spacing:.05em}
.section{padding:105px 8vw;border-top:1px solid var(--line)}.section h2{font-size:clamp(42px,5vw,72px);font-weight:500}.section h3{font-size:31px;font-weight:500}.kicker{color:var(--accent);margin:0 0 13px}.lead{font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.5;max-width:820px}.muted{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:7vw;align-items:center}
.portrait{background:#d3c6b4;padding:12px}.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:sepia(.18)}
.caption{font-size:11px;color:var(--muted);margin-top:9px}
.timeline{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}.stop{background:var(--paper);padding:24px;border-top:3px solid var(--accent)}.stop .year{font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.dark{background:var(--deep);color:#f6f1e7}.dark .muted{color:#c4bdb1}
.religion-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:35px}.quote-card{padding:28px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03)}.quote-card h3{font-size:28px}.quote-card p{color:#d7d0c5}
.songs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}.song{background:var(--paper);border:1px solid var(--line);overflow:hidden}.song img{width:100%;aspect-ratio:1/1;object-fit:cover}.song-body{padding:22px}.song h3{font-size:30px}.song p{font-size:14px;color:var(--muted)}audio{width:100%;margin-top:12px}.tag{display:inline-block;font-size:10px;letter-spacing:.12em;border:1px solid var(--line);padding:5px 8px;margin-top:8px}
.sources{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:35px}.source{padding:22px;background:var(--paper);border:1px solid var(--line)}.source h3{font-size:23px}.source p{font-size:14px;color:var(--muted)}.source a{font-size:13px;text-underline-offset:4px}
.project-note{max-width:860px}.project-note strong{font-weight:700}
.contact{text-align:center}.socials{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-top:25px}
footer{background:#111512;color:#d8d1c6;padding:24px 5vw;display:flex;justify-content:space-between;gap:20px;font-size:12px}.legal-links{display:flex;gap:18px}
.legal-page{min-height:100vh;background:var(--paper);padding:80px 8vw}.legal-wrap{max-width:850px;margin:auto}.legal-back{display:inline-block;margin-bottom:34px}.legal-page h1{font-size:clamp(45px,7vw,78px);margin-bottom:30px}.legal-page h2{font-size:28px;margin:34px 0 7px}.legal-page p{max-width:800px}
@media(max-width:980px){.site-header{grid-template-columns:1fr auto}.nav{display:none}.two-col,.religion-grid,.songs,.sources,.timeline{grid-template-columns:1fr}.hero{min-height:88vh}.section{padding:82px 7vw}footer{flex-direction:column}}


/* V5: ruhigerer, magazinartiger Seitenaufbau */
.content-width{
  width:min(100%, 1280px);
  margin-left:auto;
  margin-right:auto;
}
.content-shell{
  width:min(100%, 1280px);
  margin-left:auto;
  margin-right:auto;
}
.section{
  padding-left:max(5vw,24px);
  padding-right:max(5vw,24px);
}
.two-col{
  grid-template-columns:minmax(0,1.25fr) minmax(320px,430px);
  gap:72px;
}
.portrait{
  width:100%;
  max-width:430px;
  justify-self:end;
}
.timeline{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.stop{
  min-height:185px;
}
.songs{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.song{
  max-width:400px;
  width:100%;
  justify-self:center;
}
.song img{
  aspect-ratio:1/1;
  max-height:400px;
}
.sources{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero{
  width:100%;
}
@media (min-width:1500px){
  .hero h1{font-size:104px}
}
@media(max-width:980px){
  .content-width,.content-shell{width:100%}
  .two-col{grid-template-columns:1fr;gap:40px}
  .portrait{max-width:520px;justify-self:start}
  .timeline,.songs,.sources{grid-template-columns:1fr}
  .song{max-width:520px;justify-self:start}
  .stop{min-height:auto}
}


/* V6: komplette Website zentriert und nicht mehr bildschirmbreit */
body.site-centered{
  background:#e7e0d5;
}

.site-centered .site-header,
.site-centered main,
.site-centered footer{
  width:min(calc(100% - 48px), 1360px);
  margin-left:auto;
  margin-right:auto;
}

.site-centered .site-header{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}

.site-centered .hero{
  width:100%;
  min-height:720px;
  border-left:1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
}

.site-centered main{
  background:var(--bg);
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
}

.site-centered .section{
  width:100%;
}

.site-centered .content-width,
.site-centered .content-shell{
  width:min(100%, 1180px);
}

.site-centered footer{
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
}

@media(max-width:980px){
  .site-centered .site-header,
  .site-centered main,
  .site-centered footer{
    width:100%;
  }
  .site-centered .site-header{
    left:0;
    transform:none;
  }
  .site-centered .hero{
    min-height:640px;
  }
}


/* V7: Originalgedichte und Bearbeitungshinweise */
.poem-notes{
  margin-top:56px;
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.poem-block{
  background:var(--paper);
  border:1px solid var(--line);
  padding:26px 28px;
}
.poem-block h3{
  margin-bottom:10px;
}
.poem-meta{
  margin:0 0 14px;
  color:var(--muted);
  max-width:900px;
}
.poem-block details{
  border-top:1px solid var(--line);
  padding-top:14px;
}
.poem-block summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
}
.lyrics{
  margin-top:18px;
  max-width:780px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.8;
}
.lyrics p{
  margin:0 0 18px;
}


/* V8: klarer Unterschied zwischen Originalgedicht und Songfassung */
.dedication{
  font-style:italic;
  margin-bottom:20px !important;
}
.text-source{
  margin-top:24px !important;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  line-height:1.55 !important;
  color:var(--muted);
}


/* V9: Mobile-Fix gegen rechten Rand / horizontales Überlaufen */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

.site-centered,
.site-centered main,
.site-centered .section,
.site-centered .content-width,
.site-centered .content-shell,
.site-centered .two-col,
.site-centered .religion-grid,
.site-centered .timeline,
.site-centered .songs,
.site-centered .sources,
.site-centered .quote-card,
.site-centered .stop,
.site-centered .song,
.site-centered .source{
  min-width:0;
  max-width:100%;
}

.site-centered h1,
.site-centered h2,
.site-centered h3,
.site-centered p{
  overflow-wrap:anywhere;
  word-break:normal;
}

@media(max-width:700px){
  .site-centered .section{
    padding-left:22px;
    padding-right:22px;
  }

  .site-centered .section h2{
    font-size:clamp(36px, 12vw, 54px);
    line-height:1.02;
  }

  .site-centered .quote-card h3{
    font-size:clamp(30px, 9vw, 42px);
    line-height:1.08;
  }

  .site-centered .quote-card{
    padding:24px 20px;
  }

  .site-centered .quote-card p{
    font-size:18px;
    line-height:1.62;
  }

  .site-centered .religion-grid{
    gap:20px;
  }

  .site-centered .site-header{
    padding-left:18px;
    padding-right:18px;
  }
}


/* V10: sechs Vertonungen */
@media(min-width:981px){
  .songs{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:701px) and (max-width:980px){
  .songs{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.original-poems-head{
  margin-top:72px;
  margin-bottom:26px;
}
.original-poems-head h2{margin-bottom:12px}


/* V14: ruhigere Songkarten, Player exakt am Kartenboden */
.songs{
  align-items:stretch;
}
.song{
  display:flex;
  flex-direction:column;
  height:100%;
}
.song img{
  flex:0 0 auto;
}
.song-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:255px;
}
.song-body h3{
  margin-top:7px;
  margin-bottom:8px;
}
.song-body p{
  margin-top:8px;
  margin-bottom:18px;
}
.song-body audio{
  margin-top:auto;
  width:100%;
}
.tag{
  align-self:flex-start;
}

/* Originalgedichte: weniger Wiederholung, mehr Inhalt */
.original-note{
  max-width:900px;
  margin-top:12px;
}
.poem-meta{
  line-height:1.7;
  max-width:900px;
}
.research-link{
  margin:7px 0 15px;
  font-size:12px;
}
.research-link a{
  color:var(--accent);
  text-underline-offset:3px;
}
.poem-block details{
  margin-top:6px;
}

@media(max-width:700px){
  .song-body{min-height:0}
}

.source-note{
  max-width:900px;
  margin-top:14px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* V17: Sprach- und Typografie-Feinschliff */
#vjera .content-shell > h2{
  max-width:980px;
  font-size:clamp(42px,5.4vw,70px);
  line-height:1.02;
}
@media(max-width:700px){
  #vjera .content-shell > h2{
    font-size:clamp(36px,10.5vw,50px);
  }
}


/* V18: Bedeutung, Jubiläum, kompakte Fakten */
.importance-section .lead{
  max-width:960px;
}
.fact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
}
.fact-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:22px;
  min-height:230px;
}
.fact-number{
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  line-height:1;
  color:var(--accent);
  margin-bottom:17px;
}
.fact-card h3{
  font-size:24px;
  margin-bottom:12px;
}
.fact-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
.anniversary-card{
  border-top:3px solid var(--accent);
}
.importance-copy{
  max-width:920px;
  margin-top:48px;
}
.importance-copy h3{
  margin-top:28px;
  margin-bottom:8px;
}
.source-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.source-chips a{
  display:inline-block;
  border:1px solid var(--line);
  background:var(--paper);
  padding:8px 10px;
  font-size:12px;
  text-decoration:none;
}
.source-chips a:hover{
  text-decoration:underline;
}
@media(max-width:980px){
  .fact-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .fact-grid{grid-template-columns:1fr;}
  .fact-card{min-height:auto;}
}


/* V19: Struktur- und Musiklayout-Fix */
#muzika{
  width:min(100%, 1180px);
  margin-left:auto;
  margin-right:auto;
}

#muzika > h2{
  max-width:900px;
}

#muzika .songs{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

#muzika .song{
  max-width:none;
  width:100%;
  justify-self:stretch;
}

#muzika .song img{
  width:100%;
  max-height:none;
  aspect-ratio:1/1;
  object-fit:cover;
}

#muzika .song-body{
  min-height:270px;
}

#muzika .song-body audio{
  margin-top:auto;
}

@media (min-width:701px) and (max-width:980px){
  #muzika .songs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  #muzika .songs{
    grid-template-columns:1fr;
  }
  #muzika .song-body{
    min-height:0;
  }
}


/* V22: Werkumfang und weitere Gedichte */
.opus-context{
  max-width:900px;
  margin:34px 0 40px;
  padding:24px 26px;
  background:var(--paper);
  border-left:3px solid var(--accent);
}
.opus-context h3{
  margin:0 0 10px;
  font-size:30px;
}
.opus-context p{
  margin:0 0 10px;
}
.opus-source{
  font-size:12px;
}
.opus-source a{
  color:var(--accent);
  text-underline-offset:3px;
}

.more-poems{
  margin-top:74px;
  padding-top:52px;
  border-top:1px solid var(--line);
}
.more-poems h3{
  font-size:34px;
  margin-bottom:10px;
}
.more-poems-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 14px;
  margin-top:24px;
  max-width:900px;
}
.more-poems-grid a{
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px 14px;
  text-decoration:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
}
.more-poems-grid a:hover{
  text-decoration:underline;
}
.more-poems-all{
  margin-top:20px;
  font-size:13px;
}
.more-poems-all a{
  color:var(--accent);
  text-underline-offset:3px;
}
@media(max-width:800px){
  .more-poems-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .more-poems-grid{
    grid-template-columns:1fr;
  }
}
