/* ============================================================
   Sommernachtsladen 2026 — cream / vermillion / ink editorial
   Self-hosted Neue Haas Grotesk Display Pro (Medium + Medium Italic
   primary, per brand). Files in assets/fonts/.
   ============================================================ */
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("assets/fonts/nhg-roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("assets/fonts/nhg-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("assets/fonts/nhg-medium-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("assets/fonts/nhg-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("assets/fonts/nhg-bold-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --font:"Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;
  --paper:#ffffff;        /* white chrome */
  --paper-2:#f2efe9;
  --ink:#1c1714;
  --red:#d12f24;          /* hanko vermillion */
  --muted:#6e665b;        /* darkened for AA contrast on white */
  --line:rgba(28,23,20,.1);
  --bar-h:84px; --top-h:64px; --shut:62px;
  --ease:cubic-bezier(.5,.05,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);font-weight:500;color:var(--ink);background:var(--paper);
  line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
em,i{font-style:italic}

/* ---------- entry splash ---------- */
.splash{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;cursor:pointer;
  background:#efe9dd center 40%/cover no-repeat;
  background-image:image-set(url("assets/img/splash_land.webp") type("image/webp"),
                             url("assets/img/splash_land.jpg") type("image/jpeg"));
  transition:transform .85s cubic-bezier(.65,0,.2,1);will-change:transform;
}
.splash--up{transform:translateY(-100%)}
.splash-logo{width:min(38vw,360px);height:auto;display:block;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.12));
  animation:splashIn .9s var(--ease) both}
.splash-hint{position:absolute;bottom:clamp(34px,7vh,70px);left:50%;transform:translateX(-50%);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  animation:hintPulse 2.2s ease-in-out infinite}
@keyframes splashIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (max-width:760px){
  .splash{background-image:image-set(url("assets/img/splash_port.webp") type("image/webp"),
                                     url("assets/img/splash_port.jpg") type("image/jpeg"));
    background-position:center}
  .splash-logo{width:min(62vw,330px)}
}
@media (prefers-reduced-motion:reduce){.splash-logo,.splash-hint{animation:none}}

/* ---------- top bar ---------- */
.topbar{
  flex:0 0 auto;min-height:var(--top-h);display:flex;align-items:center;
  gap:12px clamp(14px,2vw,20px);flex-wrap:wrap;padding:10px clamp(16px,3vw,34px);
  background:var(--paper);border-bottom:1px solid var(--line);z-index:5;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0;order:1}
.brand .logo{width:42px;height:42px;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-name{font-size:clamp(15px,2vw,20px);font-weight:500;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name .yr{color:var(--red)}
.brand-tag{font-size:clamp(10px,1.3vw,12.5px);font-style:italic;color:var(--red);letter-spacing:.01em;white-space:nowrap}
.sponsors{order:2;margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.btn-cal{order:3;display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;
  border-radius:50%;color:var(--ink);background:transparent;border:1px solid rgba(28,23,20,.25);
  text-decoration:none;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.btn-cal:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.btn-cal svg{width:17px;height:17px}
.btn-wa-sm{order:4;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:inherit;font-weight:500;font-size:13px;line-height:1;
  padding:8px 14px;border-radius:999px;text-decoration:none;cursor:pointer;
  background:#25d366;color:#fff;border:1px solid transparent;
  transition:transform .2s var(--ease),background .2s}
.btn-wa-sm:hover{transform:translateY(-1px);background:#20bd5a}
.btn-wa-sm svg{width:15px;height:15px}
.spon-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spon-logo-link{display:inline-flex;align-items:center;text-decoration:none;transition:opacity .2s}
.spon-logo-link:hover{opacity:.6}
.spon-logo{height:20px;width:auto;display:block;opacity:.9}
.spon-logo--infinity{height:16px}
.spon-dot{width:1px;height:18px;background:var(--line)}

/* ---------- accordion ---------- */
.accordion{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);gap:3px}
.panel{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#1c1714;                 /* dark fallback behind art */
  flex:0 0 var(--shut);flex-grow:0;
  transition:flex-grow .55s var(--ease),flex-basis .55s var(--ease);
}
.panel.is-active{flex-grow:1;flex-basis:0}

/* art layer — visible on every tile, even collapsed */
.panel-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 42%;
  transition:transform 1.2s var(--ease);transform:scale(1.02);
}
/* collapsed: darken the left where number+date sit */
.panel-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,12,9,.84) 0%,rgba(18,12,9,.45) 38%,rgba(18,12,9,.18) 100%)}
/* active: darken top (header) and bottom (details), keep the art bright in the middle */
.panel.is-active .panel-bg{transform:scale(1.05)}
.panel.is-active .panel-bg::after{
  background:linear-gradient(90deg,rgba(18,12,9,.5) 0%,rgba(18,12,9,.08) 60%),
             linear-gradient(0deg,rgba(18,12,9,.85) 0%,rgba(18,12,9,.12) 44%,rgba(18,12,9,.5) 100%)}
.panel:hover:not(.is-active) .panel-bg{transform:scale(1.05)}

/* header bar */
.panel-head{
  position:relative;z-index:2;width:100%;flex:0 0 var(--shut);height:var(--shut);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;font-weight:500;color:#fff;
  padding:0 clamp(18px,3vw,40px);
}
.p-no{font-size:clamp(28px,4.2vw,50px);line-height:1;min-width:1.5em;color:#fff;
  font-weight:500;font-feature-settings:"tnum"}
.p-date{font-size:clamp(18px,2.5vw,26px);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-date .dow{color:#ffb59c}
.panel.is-past:not(.is-active) .p-no,
.panel.is-past:not(.is-active) .p-date{color:rgba(255,255,255,.62)}
.panel.is-past:not(.is-active) .p-date .dow{color:rgba(255,255,255,.55)}
.p-flag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:5px 12px;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;white-space:nowrap;color:#fff}
.panel.is-active .p-flag{background:var(--red);border-color:var(--red);color:#fff}
.panel.is-past:not(.is-active) .p-flag{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.6)}
.p-chev{width:22px;height:22px;flex:0 0 auto;opacity:.8;color:#fff;transition:transform .5s var(--ease)}
.panel.is-active .p-chev{transform:rotate(180deg)}

/* detail — white over art, anchored to bottom (stories style) */
.panel-detail{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(18px,3vw,40px);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s;
}
.panel.is-active .panel-detail{opacity:1;transform:none;pointer-events:auto}
.pd-inner{max-width:680px;padding-bottom:clamp(18px,2.6vh,34px);
  padding-left:calc(1.5em + clamp(14px,2.4vw,26px));
  display:flex;flex-direction:column;gap:clamp(11px,1.6vh,18px);color:#fff}
.pd-row{display:flex;flex-direction:column;gap:3px}
.pd-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pd-v{font-size:clamp(17px,2.2vw,23px)}
.pd-v.tba{color:rgba(255,255,255,.7);font-style:italic}
.pd-cta{margin-top:4px}
.btn-wa{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:500;
  font-size:15px;padding:12px 22px;border-radius:999px;text-decoration:none;cursor:pointer;
  background:var(--red);color:#fff;border:1px solid transparent;
  transition:transform .2s var(--ease)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-wa svg{width:18px;height:18px}

/* ---------- custom branded player ---------- */
.player-bar{position:relative;flex:0 0 var(--bar-h);display:flex;align-items:center;
  gap:clamp(13px,2vw,20px);padding:0 clamp(16px,3vw,34px);
  background:var(--paper);border-top:1px solid var(--line);z-index:6}
.pl-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(28,23,20,.12);cursor:pointer}
.pl-progress-fill{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}
.pl-play{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--red);color:#fff;display:grid;place-items:center;
  transition:transform .2s var(--ease);padding:0}
.pl-play:hover{transform:scale(1.06)}
.pl-play svg{width:22px;height:22px}
.pl-play .ic-pause{display:none}
.pl-play[aria-pressed="true"] .ic-play{display:none}
.pl-play[aria-pressed="true"] .ic-pause{display:block}
.pl-play .ic-play{margin-left:2px}        /* optical centering of the triangle */
.pl-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.pl-title{font-size:clamp(13px,1.7vw,15.5px);font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl-listbtn{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .2s,color .2s,background .2s}
.pl-listbtn:hover,.pl-listbtn[aria-expanded="true"]{border-color:var(--red);color:var(--red)}
.pl-listbtn[aria-expanded="true"]{background:rgba(209,47,36,.06)}
.pl-listbtn svg{width:18px;height:18px}
.pl-sc{flex:0 0 auto;color:var(--muted);display:grid;place-items:center;transition:color .2s}
.pl-sc:hover{color:var(--red)}
.pl-sc svg{width:26px;height:26px}

/* ---------- slide-up playlist (custom reversed tracklist) ---------- */
.playlist{position:fixed;left:0;right:0;bottom:var(--bar-h);z-index:5;
  display:flex;flex-direction:column;max-height:min(56vh,500px);
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -22px 44px -24px rgba(28,23,20,.45);
  transform:translateY(calc(100% + var(--bar-h)));transition:transform .42s var(--ease);
  visibility:hidden;}
.playlist.is-open{transform:translateY(0);visibility:visible}
.playlist-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,3vw,28px);border-bottom:1px solid var(--line)}
.playlist-title{font-size:14px;color:var(--ink)}
.playlist-title em{color:var(--red);font-style:italic}
.playlist-close{width:32px;height:32px;border:0;background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;border-radius:8px;transition:color .2s,background .2s}
.playlist-close:hover{color:var(--red);background:var(--paper-2)}
.playlist-close svg{width:18px;height:18px}
.playlist-tracks{flex:1 1 auto;overflow-y:auto;list-style:none;margin:0;padding:6px 0;-webkit-overflow-scrolling:touch}
.pl-track{display:flex;align-items:center;gap:13px;cursor:pointer;color:var(--ink);
  padding:9px clamp(16px,3vw,28px);transition:background .15s,color .15s}
.pl-track:hover{background:var(--paper-2)}
.pl-track.is-current{color:var(--red)}
.pl-track .t-num{flex:0 0 auto;min-width:1.7em;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl-track.is-current .t-num{display:none}
.pl-track .t-eq{flex:0 0 auto;display:none;align-items:flex-end;gap:2px;width:1.7em;height:14px;justify-content:flex-end}
.pl-track.is-current .t-eq{display:flex}
.pl-track .t-eq i{width:2.5px;background:var(--red);height:35%;animation:eq .9s ease-in-out infinite}
.pl-track .t-eq i:nth-child(2){animation-delay:.3s}
.pl-track .t-eq i:nth-child(3){animation-delay:.55s}
@keyframes eq{0%,100%{height:28%}50%{height:100%}}
.pl-track .t-title{flex:1 1 auto;min-width:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track .t-dur{flex:0 0 auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.playlist-empty{padding:20px clamp(16px,3vw,28px);color:var(--muted);font-size:14px}
.playlist-empty a{color:var(--red)}
#sc-widget{position:absolute;left:-9999px;top:0;width:320px;height:120px;border:0;opacity:0;pointer-events:none}
@media (max-width:720px){.playlist{max-height:62vh}}

/* ---------- responsive ---------- */
@media (max-width:720px){
  :root{--shut:58px;--bar-h:80px;--top-h:auto}
  .topbar{gap:8px 10px;padding:9px 16px}
  .brand{order:1;flex:0 0 100%}                         /* row 1: brand alone */
  .sponsors{order:2;flex:1 1 auto;margin-left:0;justify-content:flex-start;gap:10px}
  .btn-cal{order:3;width:34px;height:34px}              /* row 2: sponsors | cal | infos */
  .btn-wa-sm{order:4;margin-left:0;padding:6px 11px;font-size:12px;gap:5px}
  .btn-wa-sm svg{width:13px;height:13px}
  .spon-logo{height:17px}
  .spon-logo--infinity{height:13px}
  .spon-label{display:none}
  .pb-label{display:none}
  .pd-inner{padding-left:0}
  .p-flag{display:none}
}
@media (max-width:420px){.p-no{font-size:26px}.p-date{font-size:17px}.brand .logo{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}