/* ===== Brand ===== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1;
}
.brand__mark{
  width:14px; height:14px;
  border-radius:6px;
  background: rgba(143,107,222,.18);
  border: 1px solid rgba(201,166,255,.22);
  box-shadow: 0 0 14px rgba(143,107,222,.20);
  flex: 0 0 auto;
}
.brand__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand__name{ font-weight:800; letter-spacing:.08em; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand__tag{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }

/* ===== Top buttons ===== */
.topbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
  user-select:none;
}
.topbtn.is-active{
  border-color: rgba(201,166,255,.28);
  box-shadow: 0 0 0 1px rgba(143,107,222,.16) inset, 0 0 22px rgba(143,107,222,.18);
}

/* right-side actions wrapper in topbar */
.topActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex: 0 0 auto;
}

.iconBtn{
  width: 42px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position: relative;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    transform .12s ease;
}
.iconBtn:active{ transform: translateY(1px); }

.burger__bar{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 99px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.bar1{ top: calc(50% - 5px); }
.bar2{ top: calc(50% + 5px); }

/* Closed: 2 lines. Open: X */
.iconBtn .burger__bar{
  transition:
    transform .24s cubic-bezier(.2,.9,.2,1),
    top .24s cubic-bezier(.2,.9,.2,1),
    box-shadow .22s ease,
    background .22s ease,
    opacity .18s ease;
}

/* Luxury hover + open glow */
.iconBtn:hover{
  border-color: rgba(201,166,255,.22);
  background: rgba(0,0,0,.22);
}
.iconBtn.is-open{
  border-color: rgba(201,166,255,.28);
  background: rgba(0,0,0,.26);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 28px rgba(0,0,0,.35),
    0 0 22px rgba(201,166,255,.18);
}

/* Snap both bars to center, then rotate into an X */
.iconBtn.is-open .bar1,
.iconBtn.is-open .bar2{ top: 50%; }
.iconBtn.is-open .bar1{
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 14px rgba(201,166,255,.22);
}
.iconBtn.is-open .bar2{
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 0 14px rgba(201,166,255,.22);
}

/* Slightly brighter bars while open (premium look) */
.iconBtn.is-open .burger__bar{ background: rgba(255,255,255,.92); }

/* ===== Boot block (booting -> OK -> ONLINE) ===== */
.boot{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.boot__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.boot__dot{
  width:8px; height:8px; border-radius:99px;
  background: rgba(201,166,255,.55);
  box-shadow: 0 0 16px rgba(201,166,255,.20);
}
.boot__label{
  font-size: 11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
  transition: opacity .18s ease, transform .18s ease;
}
.boot__status{
  font-size: 11px;
  letter-spacing:.12em;
  color: rgba(255,255,255,.55);
}

/* bar track */
.boot__bar{
  margin-top: 10px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
}

/* moving block: RIGHT -> LEFT */
.boot__fill{
  position:absolute;
  top:0; bottom:0;
  width: 38%;
  left: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(143,107,222,.22), rgba(201,166,255,.40));
  opacity:.95;
  transform: translateX(0);
}

.mobile.is-visible .boot__fill{
  animation: bootMove 1.05s ease-in-out infinite;
}
@keyframes bootMove{
  0%   { left: -38%; }
  100% { left: 100%; }
}

.mobile.boot-online .boot__fill{
  animation:none;
  left:0;
  width:100%;
}

/* subtle scan shimmer */
.boot__scan{
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(60%);
  animation: bootScan 1.4s linear infinite;
  opacity:.55;
  mix-blend-mode: screen;
}
@keyframes bootScan{ to{ transform: translateX(-60%);} }

/* status states */
.mobile.boot-ok .boot__status{ color: rgba(201,255,226,.72); }
.mobile.boot-online .boot__status{ color: rgba(201,255,226,.92); }

/* When OK/ONLINE appears, hide the BOOTING label */
.mobile.boot-ok .boot__label{
  opacity: 0;
  transform: translateY(-2px);
}
.mobile.boot-ok .boot__dot,
.mobile.boot-online .boot__dot{
  background: rgba(167,255,214,.75);
  box-shadow: 0 0 16px rgba(167,255,214,.22);
}

/* brief vibration on OK */
.mobile.nav-vibe .mobile__inner{
  animation: navVibe 220ms linear 1;
}
@keyframes navVibe{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-1px); }
  80%{ transform: translateX(1px); }
  100%{ transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .mobile.is-visible .boot__fill{ animation: none; left: 0; width: 100%; }
  .boot__scan{ animation: none; opacity: .25; }
  .mobile.nav-vibe .mobile__inner{ animation: none; }
}

 /* ===== Menu items ===== */
.mitem{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 14px 16px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}
.mitem--cta{
  border-color: rgba(201,166,255,.22);
  background: linear-gradient(180deg, rgba(143,107,222,.18), rgba(0,0,0,.18));
}

.mlite{ opacity:.88; }
.mlite:hover{ opacity: 1; }

/* ===== Typography blocks ===== */
.kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 10px;
}
.h1{
  font-size: clamp(30px, 7.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.lead{
  margin: 12px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.55;
}

/* ===== Partner gallery (1 column, equal cards) ===== */
.partnerGrid{
  display: grid;
  grid-template-columns: 1fr; /* always 1 column */
  gap: 18px;
}

/* Ultra clean editorial card */
.pCard{
  width: 92%;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(6,6,14,.92);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  transform: translateZ(0);
  transition: transform .18s ease;
}

/* enforce credit-card ratio */
.pCard__img{
  width: 100%;
  aspect-ratio: 1.586 / 1;
  object-fit: cover;
  display:block;
}

.pCard:active{ transform: scale(.993); }


/* ===== Minimal Back-to-top ===== */
.toTop{
  position: fixed;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  font-weight: 900;
  color: rgba(255,255,255,.85);
}

/* keep it minimal (no bouncing) */
.toTop:active{ transform: translateY(1px); }


/* ===== Floating CTA Pill (FAB) ===== */
.fab{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
  height: var(--fab-h);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--fab-border);
  background: var(--fab-bg);
  box-shadow: var(--fab-shadow);
  backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  gap: var(--fab-gap);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.fab::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: var(--fab-sheen);
  opacity: .9;
  pointer-events:none;
}
.fab::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: inherit;
  background: radial-gradient(closest-side, var(--fab-glow), transparent 65%);
  filter: blur(10px);
  opacity: .75;
  pointer-events:none;
}
.fab.is-on{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hide FAB when mobile nav is open (keeps focus clean) */
html.nav-open .fab{ opacity: 0; pointer-events:none; }

.fab__btn{
  position: relative;
  z-index: 1;
  height: calc(var(--fab-h) - 12px);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--fab-btn-line);
  background: linear-gradient(180deg, var(--fab-btn-bg), var(--fab-btn-bg2));
  color: var(--fab-btn-ink);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fab__btn:active{ transform: scale(.98); }
.fab__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 1px rgba(201,166,255,.24) inset;
}

.fab__btn--primary{
  border-color: rgba(201,166,255,.22);
  box-shadow: 0 0 0 1px rgba(143,107,222,.12) inset;
}
.fab__btn--primary .fab__dot{
  background: var(--fab-grad);
  box-shadow: 0 0 18px rgba(143,107,222,.25);
}

.fab__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 14px rgba(255,255,255,.06);
}

/* Give content breathing room so the FAB never covers the last CTA */
html.has-fab main{ padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce){
  .fab{ transition: none; }
  .fab__btn{ transition: none; }
}

/* ===== Footer Divider ===== */

.footer-divider{
  height:1px;
  width:100%;
  margin:32px 0 24px 0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 15%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.15) 85%,
    transparent 100%
  );
  opacity:.6;
}

.footer-legal__links{
  display:flex;
  flex-direction:column;      /* EN-Zeile über DE-Zeile */
  align-items:center;
  row-gap:14px;               /* Abstand zwischen den beiden Zeilen */
}

/* jede Zeile */
.footer-legal__links > div{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:22px;            /* Abstand zwischen Links */
  row-gap:10px;               /* falls eine Zeile umbrechen muss */
}

.footer-legal__links a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  color:var(--text-muted);
  transition:opacity .25s ease, color .25s ease;
}

.footer-legal__links a:hover{
  opacity:1;
  color:var(--brand);
}

.footer-legal__copyright{
  text-align:center;
  margin:0;
  padding-bottom:10px; /* oder 12px / 14px nach Geschmack */
}

.footer-contact{
  margin-top: 18px;
  text-align: center;
}

.footer-contact__mail{
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .3s ease, text-shadow .3s ease;
}

.footer-contact__mail:hover{
  color: var(--brand);
  text-shadow: 0 0 12px rgba(255,255,255,0.15);
}

.footer-logo{
  display:flex;
  justify-content:center;
  margin-top:18px;
  opacity:.9;
}

.footer-logo img{
  height:88px;
  width:auto;
  filter:drop-shadow(0 0 6px rgba(170,120,255,.25));
}

.brand__logo{
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}