/* BKB Wandergruppe — site styles */

@font-face{
  font-display:swap;
  font-family:Akronim;
  src:url('Akronim-Regular.woff2') format('woff2'),url('Akronim-Regular.woff') format('woff');
  font-weight:400;
}
@font-face{
  font-display:swap;
  font-family:Abel;
  src:url('Abel-Regular.woff2') format('woff2'),url('Abel-Regular.woff') format('woff');
  font-weight:400;
}

:root{
  --bg:#f6f0e4;
  --ink:#2a1f16;
  --ink-soft:#5a4a3a;
  --card-bg:#fffdf9;
  --maroon:#401714;
  --maroon-deep:#2a0e0c;
  --gold:#cb8315;
  --gold-light:#e7ab4a;
  --terracotta:#b5502a;
  --radius:16px;
  --shadow:0 10px 30px rgba(42,15,12,.14);
  --shadow-sm:0 3px 10px rgba(42,15,12,.10);
  --max:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
h1,h2,h3{font-family:Abel,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--gold);color:var(--maroon-deep);
  padding:.6em 1em;border-radius:0 0 8px 0;z-index:10;font-weight:600;
}
.skip-link:focus{left:0}

/* ---- Hero ---- */
.hero{
  position:relative;
  min-height:46vh;
  display:flex;
  align-items:flex-end;
  color:#fdf6ea;
  background-color:var(--maroon-deep);
  background-image:url('../images/j/sunset-142698-960.jpg');
  background-size:cover;
  background-position:center;
}
@media (min-width:820px){
  .hero{
    min-height:52vh;
    background-image:url('../images/1/sunset-142698-1920-1.jpg');
  }
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,15,12,.15) 0%,rgba(42,15,12,.78) 100%);
}
.hero-badge{
  position:absolute;
  top:1rem;
  right:1rem;
  width:76px;
  height:76px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
@media (min-width:600px){
  .hero-badge{width:104px;height:104px;top:1.5rem;right:1.5rem}
}
@media (min-width:820px){
  .hero-badge{width:132px;height:132px;top:2rem;right:2rem}
}
.hero-inner{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:2rem 1.25rem 2.25rem;
}
.hero h1{
  font-family:Akronim,cursive;
  font-size:clamp(2.6rem,8vw,4.6rem);
  color:var(--gold-light);
  line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.hero p{
  margin:.6rem 0 0;
  font-size:clamp(1rem,2.4vw,1.2rem);
  color:#f1e2c8;
  max-width:46ch;
}

/* ---- Year quick nav ---- */
.year-nav{
  max-width:var(--max);
  margin:0 auto;
  padding:1.1rem 1.25rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.year-nav a{
  text-decoration:none;
  background:var(--card-bg);
  border:1px solid rgba(64,23,20,.15);
  color:var(--maroon);
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  box-shadow:var(--shadow-sm);
}
.year-nav a:hover{background:var(--gold-light);border-color:var(--gold-light)}

/* ---- Main / year groups ---- */
main{
  max-width:var(--max);
  margin:0 auto;
  padding:1.5rem 1.25rem 3rem;
}

.year-group{
  margin-top:1.25rem;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.year-group > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.4rem;
  background:var(--maroon);
  color:#fbe9cf;
}
.year-group > summary::-webkit-details-marker{display:none}
.year-group > summary h2{font-size:1.6rem;color:#fbe9cf}
.year-group > summary .meta{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.year-group > summary .count{
  font-size:.85rem;
  color:var(--gold-light);
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}
.year-group > summary .chevron{
  transition:transform .2s ease;
  flex-shrink:0;
}
.year-group[open] > summary .chevron{transform:rotate(180deg)}

.hike-list{
  display:flex;
  flex-direction:column;
}

/* ---- Jahresprogramm ---- */
.program-card{
  margin-top:1.25rem;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.program-header{
  padding:1.1rem 1.4rem;
  background:var(--maroon);
  color:#fbe9cf;
}
.program-header h2{font-size:1.6rem;color:#fbe9cf}
.program-body{
  padding:1.4rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}
@media (min-width:720px){
  .program-body{grid-template-columns:1fr 1fr}
}
.program-col h3{
  font-size:1.05rem;
  color:var(--maroon);
  margin-bottom:.8rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(64,23,20,.15);
}
.program-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.program-item{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.program-date{
  font-weight:700;
  color:var(--terracotta);
  font-size:.85rem;
}
.program-title-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:.5rem;
  row-gap:.1rem;
}
.program-title{
  color:var(--ink);
}
a.program-item{
  text-decoration:none;
  border-radius:8px;
  margin:0 -.5rem;
  padding:.2rem .5rem;
  transition:background .15s ease;
}
a.program-item:hover{background:rgba(203,131,21,.12)}
a.program-item .program-title{color:var(--maroon);font-weight:600}
.program-video-badge{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
  flex-shrink:0;
}
.program-video-badge svg{width:11px;height:11px}
.program-col.future .program-title{color:var(--ink-soft);font-style:italic}
.program-col.future a.program-item .program-title{color:var(--maroon);font-style:normal;font-weight:600}
.program-source{display:none}
.program-empty{
  color:var(--ink-soft);
  font-size:.9rem;
  font-style:italic;
}

/* ---- Hike card ---- */
.hike{
  padding:1.4rem;
  border-top:1px solid rgba(64,23,20,.1);
  scroll-margin-top:1rem;
}
.hike-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1rem;
  margin-bottom:.9rem;
}
.hike-head time{
  font-weight:700;
  color:var(--terracotta);
  font-size:.95rem;
  letter-spacing:.02em;
}
.hike-head h3{
  font-size:1.5rem;
  color:var(--maroon);
}

.tours{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
}
@media (min-width:720px){
  .tours.two{grid-template-columns:1fr 1fr}
}

.tour-label{
  display:flex;
  align-items:center;
  min-height:2rem;
  gap:.5rem;
  margin-bottom:.5rem;
  font-size:1.05rem;
  color:var(--ink);
  font-weight:600;
}
.tour-label .note{
  font-weight:400;
  color:var(--ink-soft);
  font-size:.88rem;
}
.gpx-link{
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:.3rem;
  text-decoration:none;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.02em;
  color:#fff;
  background:var(--terracotta);
  border:1px solid var(--terracotta);
  border-radius:999px;
  padding:.25rem .75rem .25rem .6rem;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.gpx-link svg{width:13px;height:13px;flex-shrink:0}
.gpx-link:hover{background:var(--maroon);border-color:var(--maroon)}

.player-wrap{
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease;
}
.player-wrap video{width:100%;height:100%}

/* ---- Cinema mode: video enlarges while playing ---- */
.cinema-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,10,8,.86);
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.cinema-backdrop.active{opacity:1;pointer-events:auto}
body.cinema-lock{overflow:hidden}

.player-wrap.cinema{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(94vw,1100px);
  max-height:88vh;
  z-index:1000;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  border-radius:12px;
}

.route-note{
  margin-top:.85rem;
  font-size:.92rem;
  color:var(--ink-soft);
}

footer{
  text-align:center;
  padding:2rem 1.25rem 3rem;
  color:var(--ink-soft);
  font-size:.88rem;
}

/* ---- Plyr theming to match brand ---- */
:root{
  --plyr-color-main:#cb8315;
}
.plyr__control--overlaid{background:rgba(203,131,21,.85)}
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true]{background:#cb8315}