*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --warm-white:#FDFAF4;
  --parchment:#F0E8D5;
  --parch2:#E8DCC4;
  --gold:#C9A84C;
  --gold-l:#E4C97A;
  --text:#3B2A1A;
  --text-s:#6B5444;
  --text-m:#9E8A78;
  --white:#FFFFFF;
  --dark:#2A1E12;
  --wine:#6B2737;
}

html{ scroll-behavior: smooth; }
body{
  font-family:'Lato',sans-serif;
  background:var(--warm-white); color:var(--text);
  font-size:17px; line-height:1.7; padding-top:64px;
}

/* NAV, uebernommen von worshipT.org */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(253,250,244,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--parch2); height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
}
.nav-logo{
  font-family:'Cinzel',serif; font-size:1.05rem; font-weight:700;
  color:var(--text); text-decoration:none; letter-spacing:.04em;
  white-space:nowrap;
}
.nav-logo span{ color:var(--gold); }
.nav-links{ display:flex; gap:1.5rem; list-style:none; align-items:center; flex-wrap:wrap; }
.nav-links a{
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-s); text-decoration:none; transition:color .2s;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.nav-links a:hover, .nav-links a:focus{ color:var(--gold); outline:none; }
.nav-links a.current{ color:var(--gold); border-bottom-color:var(--gold); }

/* SEITEN-HERO */
.page-hero{
  padding:3.2rem 1.5rem 2.6rem; text-align:center; background:var(--warm-white);
}
.label{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.7rem;
}
h1{
  font-family:'Cinzel',serif; font-size:clamp(1.7rem,4.5vw,2.5rem);
  font-weight:600; color:var(--text); letter-spacing:.02em; margin-bottom:.7rem;
}
.divider{ width:40px; height:2px; background:var(--gold); margin:0 auto 1.2rem; }
.lead{
  font-size:1rem; color:var(--text-s); font-style:italic; font-weight:300;
  max-width:560px; margin:0 auto; line-height:1.65;
}

main{ max-width:1080px; margin:0 auto; padding:0 1.5rem 2rem; }
.hint{ text-align:center; font-size:.85rem; color:var(--text-m); margin:0 0 1.2rem; }

/* UEBERSICHTSBILD MIT PINS */
.image-wrap{
  position:relative; width:100%; border-radius:4px; overflow:hidden;
  box-shadow:0 8px 28px rgba(59,42,26,.12); border:1px solid var(--parch2); background:#000;
}
.image-wrap img{ display:block; width:100%; height:auto; }
.pin{
  position:absolute; width:34px; height:34px; margin-left:-17px; margin-top:-17px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-l), var(--gold) 65%, #a3811f 100%);
  border:2px solid var(--warm-white); color:var(--dark);
  font-family:'Cinzel',serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 4px rgba(201,168,76,.18);
  transition:transform .15s, box-shadow .15s;
}
.pin:hover, .pin:focus-visible{ transform:scale(1.12); outline:none; }
.pin.active{
  background:radial-gradient(circle at 32% 28%, #e7c9c9, var(--wine) 75%, #46161f 100%);
  color:var(--warm-white); box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 6px rgba(107,39,55,.25);
}
@media (prefers-reduced-motion:no-preference){
  .pin{ animation:breathe 2.6s ease-in-out infinite; }
  .pin.active{ animation:none; }
  @keyframes breathe{
    0%,100%{ box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 4px rgba(201,168,76,.18); }
    50%{ box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 8px rgba(201,168,76,.05); } }
}

.panel{
  margin-top:1.1rem; background:var(--white); border:1px solid var(--parch2);
  border-radius:4px; padding:1.4rem 1.5rem; min-height:110px;
}
.panel-img{ width:100%; border-radius:3px; margin-bottom:1rem; display:block; border:1px solid var(--parch2); }
.panel-empty{ color:var(--text-m); font-size:.9rem; text-align:center; padding:1.4rem .6rem; font-style:italic; }
.panel-num{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background:var(--wine); color:var(--warm-white);
  font-family:'Cinzel',serif; font-weight:700; font-size:12px; margin-right:.6rem; flex:none;
}
.panel-title-row{ display:flex; align-items:center; margin-bottom:.6rem; }
.panel-title{ font-family:'Cinzel',serif; font-size:1.15rem; color:var(--wine); font-weight:600; }
.panel-text{ font-size:.98rem; line-height:1.65; }
.flag{
  display:inline-block; margin-top:.7rem; font-size:.72rem; color:#8A6B2E;
  background:rgba(201,168,76,.12); border:1px solid var(--gold-l); border-radius:3px; padding:.2rem .55rem;
}

nav.stations{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1rem; }
nav.stations button{
  font-family:'Lato',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--text-s); background:var(--white); border:1px solid var(--parch2); border-radius:20px;
  padding:.4rem .9rem; cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
nav.stations button:hover, nav.stations button:focus-visible{ border-color:var(--gold); color:var(--gold); outline:none; }
nav.stations button.active{ background:var(--wine); border-color:var(--wine); color:var(--warm-white); }

/* KARTEN, im Stil der song-card von worshipT.org */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.card{
  background:var(--white); border:1px solid var(--parch2); border-radius:4px; overflow:hidden;
  position:relative; transition:box-shadow .2s, transform .2s;
}
.card::before{
  content:''; position:absolute; top:0; left:0; width:3px; height:0;
  background:var(--gold); transition:height .25s;
}
.card:hover{ box-shadow:0 8px 24px rgba(59,42,26,.1); transform:translateY(-2px); }
.card:hover::before{ height:100%; }
.card img{ width:100%; display:block; }
.card-label{ padding:.7rem .8rem .8rem; text-align:left; }
.card-kicker{ font-family:'Cinzel',serif; color:var(--gold); font-size:.7rem; letter-spacing:.06em; font-weight:600; }
.card-title{ font-size:.86rem; line-height:1.4; margin:.2rem 0 0; color:var(--text); }
.card-flag{
  display:block; margin-top:.5rem; font-size:.68rem; color:#8A6B2E;
  background:rgba(201,168,76,.12); border:1px solid var(--gold-l); border-radius:3px; padding:.15rem .4rem;
}
button.card.zoomable{ cursor:zoom-in; font:inherit; text-align:left; width:100%; display:block; border:1px solid var(--parch2); }
button.card.zoomable:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.pair .card-title{ font-family:'Cinzel',serif; color:var(--wine); font-size:1rem; font-weight:600; margin:0 0 .3rem; }
.pair .card-text{ font-size:.86rem; color:var(--text-s); line-height:1.55; margin:0; }
@media (max-width:520px){ .pair{ grid-template-columns:1fr; } }

.section-divider{ max-width:640px; margin:2.8rem auto 1.4rem; text-align:center; }
.section-divider h2{
  font-family:'Cinzel',serif; font-size:1.3rem; color:var(--wine); font-weight:600; margin:0 0 .3rem;
}
.section-divider p{ font-size:.88rem; color:var(--text-s); margin:0; }

.note{
  max-width:640px; margin:1rem auto 0; font-size:.82rem; color:var(--text-m);
  text-align:center; font-style:italic;
}

/* LIGHTBOX */
.lb{ position:fixed; inset:0; z-index:300; display:none; background:rgba(42,30,18,.94); backdrop-filter:blur(3px); }
.lb.open{ display:flex; flex-direction:column; }
.lb-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; color:var(--parchment); flex:none; }
.lb-count{ font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.05em; color:var(--gold-l); }
.lb-close{
  background:none; border:1px solid rgba(240,232,213,.35); color:var(--parchment);
  border-radius:20px; font-size:.82rem; padding:.35rem .9rem; cursor:pointer;
}
.lb-close:hover{ border-color:var(--parchment); }
.lb-stage{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 8px; min-height:0; }
.lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:3px; box-shadow:0 10px 40px rgba(0,0,0,.5); transition:opacity .18s; user-select:none; }
.lb-stage img.fading{ opacity:0; }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(240,232,213,.3); background:rgba(42,30,18,.55); color:var(--parchment);
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb-arrow:hover{ background:rgba(42,30,18,.85); border-color:var(--parchment); }
.lb-arrow[disabled]{ opacity:.25; cursor:default; }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-caption{ flex:none; padding:12px 20px 22px; text-align:center; color:var(--parchment); }
.lb-caption .t{ font-family:'Cinzel',serif; font-size:1rem; margin:0 0 .2rem; }
.lb-caption .s{ font-size:.75rem; color:rgba(240,232,213,.55); margin:0; }
.lb-hint{ font-size:.68rem; color:rgba(240,232,213,.4); margin:.5rem 0 0; }

/* FOOTER, im Stil von worshipT.org */
footer{ background:var(--dark); color:rgba(240,232,213,.55); padding:3rem 1.5rem; text-align:center; margin-top:3rem; }
.footer-inner{ max-width:600px; margin:0 auto; }
.footer-cross{
  display:block; width:1px; height:28px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  margin:0 auto 1.3rem; position:relative;
}
.footer-cross::after{
  content:''; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  width:14px; height:1px; background:var(--gold);
}
.footer-logo{ font-family:'Cinzel',serif; font-size:1.1rem; font-weight:700; color:var(--parchment); letter-spacing:.05em; margin-bottom:.3rem; }
.footer-logo span{ color:var(--gold); }
.footer-tag{ font-size:.72rem; font-style:italic; color:rgba(240,232,213,.35); margin-bottom:1.5rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; list-style:none; margin-bottom:1.5rem; }
.footer-links a{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(240,232,213,.45); text-decoration:none; transition:color .2s; }
.footer-links a:hover{ color:var(--gold-l); }
.footer-copy{ font-size:.65rem; color:rgba(240,232,213,.25); }

@media (max-width:640px){
  .nav-links{ gap:.9rem; }
  .nav-links a{ font-size:.68rem; }
  main{ padding:0 1rem 2rem; }
}