/* ========== FONTS ========== */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/oswald-regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/montserrat-regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/montserrat-700.woff2") format("woff2");
}

/* ========== ROOT / RESET ========== */
:root{
  --panelW: clamp(280px, 32vw, 360px);
  --contentPad: clamp(16px, 4vw, 80px);
  --socialSize: clamp(36px, 3.2vw, 46px);
  --socialIcon: clamp(18px, 1.6vw, 24px);
  --socialGap : clamp(10px, 1.2vw, 14px);
}

*{ box-sizing: border-box; }

html{
  width:100%;
  height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  min-height:100vh; min-height:100svh; min-height:100dvh;
}
body{
  width:100%;
  min-height:100%;
  margin:0; padding:0;
  overflow:hidden;                 /* Seite selbst scrollt nicht */
  background:#000; color:#F0F0F0;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
::selection{ background:#0F0F0F; color:#FFF; }
.disabled{ pointer-events:none; }

/* ========== HERO / CONTENT ========== */
.rvk{
  position:relative;
  min-height:100vh; min-height:100svh; min-height:100dvh;
}

.rvk .rocks{
  position:relative;
  left:0; transform:none; z-index:3;
  height:100vh; height:100svh; height:100dvh;
  width:min(100%,1200px);
  margin:0;
  padding-left:clamp(16px,6vw,120px);
  padding-right:clamp(8px,3vw,40px);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:12px;
  transition:left .75s cubic-bezier(.75,0,.25,1);
}
.rvk .rocks.on{ left:var(--panelW); }

@media (max-height:620px){
  body{ overflow:auto; }                     /* nur bei sehr kleinen Höhen */
  .rvk .rocks{ height:auto; min-height:100svh; }
}

.rvk .rocks h2{
  width: clamp(180px, 40vw, 420px);
  aspect-ratio: 870/320;
  margin:0 0 10px; padding:0;
  background:url("./media/logo_white.png") center/contain no-repeat;
  overflow:hidden; text-indent:-9999px;
  opacity:0; transition:opacity 1.2s;
}
.rvk .rocks h2.show{ opacity:1; }

.rvk .rocks h1{
  max-width:28ch; margin:0; padding:0;
  font-family:"Oswald",sans-serif; font-weight:400;
  font-size:clamp(38px,9vw,120px); line-height:1.02;
  letter-spacing:clamp(-1px,-0.4vw,-5px);
  text-transform:uppercase; text-align:left;
  color:#ab0733ab;
  opacity:0; transition:opacity 1.2s .2s;
}
.rvk .rocks h1.show{ opacity:1; }
.rvk .rocks h1 .white{ color:#fff; }
.rvk .rocks h1 .pink{ color:#b01746; }

.rvk .rocks p{
  max-width:62ch; margin:0 0 8px;
  font: 400 clamp(14px,2.2vw,16px)/clamp(1.45,2.6vw,1.65) Montserrat, sans-serif;
  letter-spacing:0;
  background-color:#0f0f0fd4; padding:10px; border-radius:2px;
  opacity:0; transition:opacity 1.2s .4s;
}
.rvk .rocks p.show{ opacity:1; }

/* Buttons (große drei) */
.rvk .rocks button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 22px; margin:6px 6px 0 0;
  font-family:Oswald,sans-serif; font-weight:400;
  font-size:clamp(14px,2.2vw,20px); line-height:1.1; text-transform:uppercase;
  background:none; color:#F0F0F0; border:2px solid #F0F0F0;
  outline:0; cursor:pointer; position:relative; overflow:hidden;
  opacity:0; transition:opacity .8s .6s, color .3s cubic-bezier(.75,0,.25,1);
}
.rvk .rocks button.impressum{ margin-left:6px; }
.rvk .rocks button:before{
  content:""; position:absolute; inset:0 auto 0 0; z-index:-1;
  width:0.01%; height:100%; background:#b01746;
  transition:width .35s cubic-bezier(.75,0,.25,1);
}
.rvk .rocks button:hover,
.rvk .rocks button.on{ color:#fff; }
.rvk .rocks button:hover:before,
.rvk .rocks button.on:before{ width:100%; }
.rvk .rocks button.on{ pointer-events:none; }
.rvk .rocks button.show{ opacity:1; }

/* Button-Row: drei gleich breite; auf klein stapeln */
.rvk .rocks .btns{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  align-self:flex-start;
  width:clamp(540px,55vw,720px);
  margin-top:8px;
}
.rvk .rocks .btns button{ width:100%; margin:0; }
@media (max-width:760px){
  .rvk .rocks .btns{ grid-template-columns:1fr; width:clamp(220px,80vw,360px); }
}

/* ========== SIDEPANELS (links) ========== */
.rvk .info{
  position:absolute; top:0; bottom:0; left:calc(-1 * var(--panelW));
  z-index:3; width:var(--panelW); background:#fff; color:#111;
  transition:left .75s cubic-bezier(.6,0,.25,1);
  overflow:hidden;
}
.rvk .info.on{ left:0; }

.rvk .info > i{
  position:absolute; top:0; left:0; z-index:2;
  width:48px; height:48px; padding:15px; margin:0; cursor:pointer;
  opacity:0; transition:opacity .5s 1.2s;
}
.rvk .info.on > i{ opacity:1; }
.rvk .info > i span{ position:relative; display:block; width:18px; height:18px; }
.rvk .info > i span:before,
.rvk .info > i span:after{
  content:""; position:absolute; top:50%; left:50%;
  width:100%; height:1px; background:#111;
  transform:translate(-50%,-50%);
}
.rvk .info > i span:before{ transform:translate(-50%,-50%) rotate(45deg); }
.rvk .info > i span:after { transform:translate(-50%,-50%) rotate(-45deg); }

/* generische Panel-Animation + default unsichtbar */
.rvk .info > div{
  position:absolute; top:150%; left:0; transform:translateY(-50%);
  padding:40px;
  visibility:hidden; pointer-events:none;
  transition:top .75s cubic-bezier(.75,0,.25,1);
}
.rvk .info > div.on{
  top:50%;
  visibility:visible; pointer-events:auto;
  transition:top 1.25s cubic-bezier(.75,0,.25,1);
}

/* Über mich: vollhöhen-scrollbar */
.rvk .info > .about-us.on{
  top:0 !important; transform:none !important;
  height:100vh; height:100svh; height:100dvh;
  padding:40px 28px 40px 40px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
}

/* Impressum: initial hidden, on = vollhöhen-scrollbar */
.rvk .info > .contact-us.scrollable{ display:none; }
.rvk .info > .contact-us.scrollable.on{
  display:block;
  top:0 !important; transform:none !important;
  height:100vh; height:100svh; height:100dvh;
  padding:40px 28px 40px 40px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
  scrollbar-width:thin; scrollbar-color:#999 transparent;
}
.rvk .info > .contact-us.scrollable.on::-webkit-scrollbar{ width:10px; }
.rvk .info > .contact-us.scrollable.on::-webkit-scrollbar-track{ background:transparent; }
.rvk .info > .contact-us.scrollable.on::-webkit-scrollbar-thumb{
  background:#bdbdbd; border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}
.rvk .info > .contact-us.scrollable.on::-webkit-scrollbar-thumb:hover{ background:#a6a6a6; }

.rvk .info > div p{
  margin:0 0 16px;
  font:400 14px/22.75px Montserrat, sans-serif;
}
.rvk .info > div p strong{ font-weight:700; }
.rvk .info > div h3{
  margin:18px 0; font:400 18px/24px Montserrat, sans-serif;
}
.rvk .info > div a{ position:relative; color:#000; text-decoration:none; }
.rvk .info > div a i{ position:absolute; bottom:-1px; left:0; width:100%; height:1px; }
.rvk .info > div a i:before,
.rvk .info > div a i:after{
  content:""; position:absolute; bottom:0;
  width:0.001%; height:100%;
}
.rvk .info > div a i:before{
  left:0; transition:width 0s, background .5s;
}
.rvk .info > div a i:after{
  right:0; background:#000; transition:width .5s;
}
.rvk .info > div a:hover i:before{ width:100%; background:#000; transition:width .5s; }
.rvk .info > div a:hover i:after{ width:100%; background:transparent; transition:background 0s; }

/* ========== OVERLAY + VIDEO ========== */
.rvk .cover,
.rvk .tv{
  width:100vw; width:100dvw;
  height:100vh; height:100svh; height:100dvh;
}

.rvk .cover{
  position:fixed; inset:0; z-index:2;
  background:#00000073; opacity:0; transition:opacity 4s;
}
.rvk .cover.on{ opacity:.6; }
.rvk .cover.off{ display:none; }

.rvk .tv{
  position:fixed; inset:0; z-index:1;
  overflow:hidden; background:#000;
  transition:left .75s cubic-bezier(.6,0,.25,1);
}
.rvk .tv.on{ left:var(--panelW); }

.rvk .tv .screen{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 4s;
}
.rvk .tv .screen.on{ opacity:1; }

.rvk .tv .screen .bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s linear;
}
.rvk .tv .screen .bg-video.active{ opacity:1; }

/* Poster-Fallback */
html.no-video .tv .screen .bg-video{ display:none; }
html.no-video .tv .screen{
  background:center/cover no-repeat url("/media/bg-poster.jpg");
  opacity:1;
}

/* ========== TOP-ACTIONS (Rabatt + Socials) ========== */
.top-actions{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  z-index:6;
  display:flex; align-items:center;
  gap:clamp(10px,1.2vw,16px);
}
.top-actions .discount-btn{ margin-right:2px; }

/* Basis: Socials (als Fixed nutzbar) */
.socials{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  z-index:5;
  display:flex; align-items:center; gap:var(--socialGap);
  pointer-events:auto;
}
/* Im Wrapper statisch, damit der Rabattbutton davor liegen kann */
.top-actions .socials{ position:static; inset:auto; z-index:auto; margin:0; }

.socials a{
  width:var(--socialSize); height:var(--socialSize);
  display:grid; place-items:center;
  border-radius:9999px; border:1.6px solid #F0F0F0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  text-decoration:none;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.socials svg{
  width:var(--socialIcon); height:var(--socialIcon);
  stroke:#F0F0F0; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .2s ease;
}
.socials a:hover, .socials a:focus-visible{
  background:#b01746; border-color:#b01746; transform:translateY(-1px); outline:none;
}
.socials a:hover svg, .socials a:focus-visible svg{ stroke:#fff; }

.discount-btn{
  appearance:none;
  border:2px solid #b01746; background:#b01746; color:#fff;
  font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.5px;
  font-size:clamp(12px,1.2vw,14px); line-height:1;
  padding:10px 14px; border-radius:9999px; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.discount-btn:hover, .discount-btn:focus-visible{
  background:#cf1d57; border-color:#cf1d57; transform:translateY(-1px); outline:none;
}

/* ========== RIGHT SIDEBAR (Rabatte) ========== */
.rvk .info-right{
  position:fixed; top:0; right:calc(-1 * var(--panelW));
  height:100vh; width:var(--panelW);
  z-index:5; background:#fff; color:#111;
  transition:right .75s cubic-bezier(.6,0,.25,1);
  box-shadow:-10px 0 20px rgba(0,0,0,.25);
  overflow:hidden;
}
.rvk .info-right.on{ right:0; }

.rvk .info-right > i.close{
  position:absolute; top:0; right:0; width:48px; height:48px;
  padding:15px; cursor:pointer;
}
.rvk .info-right > i.close span{ position:relative; display:block; width:18px; height:18px; }
.rvk .info-right > i.close span:before,
.rvk .info-right > i.close span:after{
  content:""; position:absolute; top:50%; left:50%;
  width:100%; height:1px; background:#111;
}
.rvk .info-right > i.close span:before{ transform:translate(-50%,-50%) rotate(45deg); }
.rvk .info-right > i.close span:after { transform:translate(-50%,-50%) rotate(-45deg); }

.rvk .info-right .discounts.scrollable{
  position:absolute; inset:0;
  padding:56px 28px 40px 32px;           /* Platz fürs Close-X */
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#999 transparent;
}
.rvk .info-right .discounts.scrollable::-webkit-scrollbar{ width:10px; }
.rvk .info-right .discounts.scrollable::-webkit-scrollbar-track{ background:transparent; }
.rvk .info-right .discounts.scrollable::-webkit-scrollbar-thumb{
  background:#bdbdbd; border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}
.rvk .info-right .discounts.scrollable::-webkit-scrollbar-thumb:hover{ background:#a6a6a6; }

.rvk .info-right .discounts h1{
  margin:8px 0 14px; font:700 28px/1.25 Montserrat,sans-serif;
}
.rvk .info-right .codes{ margin:0 0 16px; padding:0 0 0 18px; }
.rvk .info-right .codes li{ margin:0 0 10px; font:400 14px/1.6 Montserrat,sans-serif; }
.rvk .info-right .codes code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:#f2f2f2; color:#b01746; padding:2px 6px; border-radius:4px;
}
.rvk .info-right .hint{ font:400 12px/1.5 Montserrat,sans-serif; color:#555; }

/* ========== RESPONSIVE TWEAKS ========== */
@media (max-height:700px){
  .rvk .rocks{ gap:8px; }
  .rvk .rocks h1{ font-size:clamp(32px,7.5vw,72px); }
  .rvk .rocks p { font-size:clamp(13px,2vw,15px); }
}
@media (max-width:420px){
  .rvk .rocks h2{ width:clamp(150px,48vw,260px); }
  .rvk .rocks h1{ max-width:22ch; }
  .rvk .rocks p { max-width:90%; }
  .top-actions{ gap:8px; }
}

/* Body-Lock wenn Panel offen */
html.panel-open, html.panel-open body{ overflow:hidden !important; }