/* css/base.css */
:root{
  --text:#fff;

  --logo-w: 240px;
  --logo-w-mobile: 190px;

  --bottom-offset: 80px;
  --bottom-offset-mobile: 56px;

  --logo-inner-left: 4px;
  --logo-inner-right: 18px;

  --slogan-size: 24px;
  --slogan-size-mobile: 28px;
  --slogan-gap: 12px;
  --contact-gap: 14px;
  --slogan-stretch: 1.02;

  --contact-weight: 200;

  /* Drag/Position */
  --home-left: 12vw;
  --home-x: 0px;
  --home-y: 5px;

  /* Vordergrund manuell nachjustieren */
  --fg-shift-y: 12px;

  /* MENU */
  --bubble-width: 380px;
  --bubble-padding-x: 28px;
  --bubble-padding-y: 30px;
  --bubble-border: 2px;

  /* Bubble offset (nur Box) */
  --bubble-shift-x: 0px;
  --bubble-shift-y: 0px;

  /* Feintuning: alle Targets gemeinsam */
  --orb-target-shift-x: 0px;
  --orb-target-shift-y: 0px;

  /* Desktop: Bubble-ECKE exakt aufs Plus (zusätzliche Feinkorrektur in px) */
  --bubble-anchor-shift-x: 0px;
  --bubble-anchor-shift-y: 0px;

  --menu-font: 44px;
  --menu-gap: 26px;

  --bubble-radius: 16px;

  /* PLUS-QUADRAT (Prozentwerte) */
  --plus-left-pct: 81.4233;
  --plus-top-pct: 0.9190;
  --plus-w-pct: 18.2321;
  --plus-h-pct: 98.0200;

  /* Klickfläche 50% größer */
  --plus-hit-scale: 1.5;

  /* (nur Referenz, unsichtbar) */
  --plus-size: 30px;

   --accent-green: rgb(48, 255, 170); /* exakt wie Batterie/Logo-Grün */
}

*{ box-sizing:border-box; }
html, body{ width:100%; height:100%; }

body{
  margin:0;
  overflow:hidden;
  font-family:"MuseoModerno", sans-serif;
  background:#000;
  color:var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Video background */
.video-wrap{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:#000;
}
.video-wrap iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  transform:translate(-50%, -50%);
  border:0;
  pointer-events:none;
}

#video-overlay{ position:fixed; inset:0; z-index:0; }

/* Netz */
.net-layer{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* Foreground */
.fg-wrap{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.pack{
  position:absolute;
  left: var(--home-left);
  bottom: calc(var(--bottom-offset) + env(safe-area-inset-bottom));
  width: var(--logo-w);
  max-width: 90vw;

  pointer-events:auto;
  touch-action:none;

  transform: translate3d(
    calc(var(--home-x) + 0px),
    calc(var(--home-y) + var(--fg-shift-y)),
    0
  );
  will-change: transform;
}

.align-col{
  margin-left: var(--logo-inner-left);
  margin-right: var(--logo-inner-right);
  text-align:left;
}

.logo-wrap{
  position:relative;
  width:100%;
  margin:0 0 var(--slogan-gap);

  /* werden via JS gesetzt */
  --orb-cx: 0px;
  --orb-cy: 0px;
  --orb-r: 22px;
  --orb-left: 0px;
  --orb-bottom: 0px;
}

.logo{
  display:block;
  width:100%;
  height:auto;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* 1) Exakter Anchor = echtes Plus-Quadrat (nicht klickbar) */
.plus-anchor{
  position:absolute;
  left: calc(var(--plus-left-pct) * 1%);
  top:  calc(var(--plus-top-pct)  * 1%);
  width:  calc(var(--plus-w-pct)  * 1%);
  height: calc(var(--plus-h-pct)  * 1%);
  pointer-events:none;
}

/* 2) Klickbarer Hitbox-Button (50% größer als Plus-Quadrat) */
.orb-btn{
  position:absolute;
  left: calc(var(--plus-left-pct) * 1%);
  top:  calc(var(--plus-top-pct)  * 1%);
  width:  calc(var(--plus-w-pct)  * 1%);
  height: calc(var(--plus-h-pct)  * 1%);

  transform-origin: 50% 50%;
  transform: translate(0,0) scale(var(--plus-hit-scale));

  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  pointer-events:auto;

  border-radius: 10px;
}

.orb-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 10px;
  opacity:0;
  transform:scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease;

  background: rgba(255,255,255,0.14);
  -webkit-mask: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="black" d="M12 16.5 5 9.5l1.4-1.4L12 13.7l5.6-5.6L19 9.5z"/>\
    </svg>') center/60% 60% no-repeat;
          mask: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="black" d="M12 16.5 5 9.5l1.4-1.4L12 13.7l5.6-5.6L19 9.5z"/>\
    </svg>') center/60% 60% no-repeat;
}
.menu-open .orb-btn::after{ opacity:1; transform:scale(1); }

/* nur Referenz (unsichtbar) */
.orb-geom{
  position:absolute;
  right: var(--orb-offset-right);
  top: var(--orb-offset-top);
  width: var(--plus-size);
  height: var(--plus-size);
  pointer-events:none;
  opacity:0;
}

/* Bubble */
.bubble{
  position:absolute;

  left: calc(
    var(--orb-left)
    + var(--bubble-shift-x)
    + var(--bubble-anchor-shift-x)
  );
  top: calc(
    var(--orb-bottom)
    + var(--bubble-shift-y)
    + var(--bubble-anchor-shift-y)
  );

  width: min(78vw, var(--bubble-width));
  padding: var(--bubble-padding-y) var(--bubble-padding-x);

  border-radius: var(--bubble-radius);
  background: rgba(0,0,0,0.28);
  border: var(--bubble-border) solid rgba(255,255,255,0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateY(-100%) scale(0.96);
  transform-origin: 0% 100%;
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.menu-open .bubble{
  opacity:1;
  pointer-events:auto;
  transform: translateY(-100%) scale(1);
}

/* Menüzeilen */
.menu-items{
  display:flex;
  flex-direction:column;
  gap: var(--menu-gap);
  margin:0;
  padding:0;
  list-style:none;
}
.menu-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  color:#fff;
  text-decoration:none;
  font-size: var(--menu-font);
  font-weight: 260;
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.slogan{
  margin:0 0 var(--contact-gap);
  font-size: var(--slogan-size);
  font-weight:100;
  line-height:1.05;
  letter-spacing:0.01em;
  white-space:nowrap;
  color: var(--accent-green);
  opacity:0.92;
}
.slogan-text{
  display:inline-block;
  transform: scaleX(var(--slogan-stretch));
  transform-origin:left center;
}
.slogan-white{
  color: #ffffff;
}

/* bold/dünn */
.slogan-in{ font-weight: 500; }
.slogan-rest{ font-weight: 100; }

.contact-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
  font-weight: var(--contact-weight);
  line-height:1.25;
  opacity:0.95;
}

/* Telefonnummer: normaler Text, aber klickbar wie Telefon */
.tel-wrap{
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.tel-wrap .tel-text{
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
.tel-wrap .tel-hit{
  position:absolute;
  inset:-6px -8px;
  opacity:0;
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
}

/* Responsive Grundlayout */
@media (max-width: 768px){
  .pack{
    width: var(--logo-w-mobile);
    bottom: calc(var(--bottom-offset-mobile) + env(safe-area-inset-bottom));
  }
  .slogan{ font-size: var(--slogan-size-mobile); }
  .contact-lines{ font-size:12px; }
}

@media (max-width: 420px){
  :root{
    --slogan-size-mobile: 24px;
    --slogan-stretch: 1.00;
    --logo-inner-left: 14px;
    --logo-inner-right: 14px;
  }
}
/* Demo: Bern Berlin unsichtbar, bleibt als Text im HTML */
.slogan-places{
  opacity: 0;
}