/* ===== Base ===== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0a0a0a;
  color: #e5e7eb;
  font: 400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:#ddd; text-decoration:none; }
a:hover{ color:#facc15; }

:root{
  --amber: #facc15;
  --amber-weak: rgba(250,204,21,.12);
  --amber-mid: rgba(250,204,21,.2);
  --line: rgba(255,255,255,.10);
  --panel: rgba(20,20,20,.7);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.section { padding: 4rem 0; }
.grid { display:grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.gap12{ gap:12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 1rem; }
.heading-amber { color:#fde68a; font-weight: 900; margin: 0 0 .4rem; font-size: clamp(1.4rem, .8rem + 1.2vw, 2rem); }
.heading-amber.small { font-size: 1.1rem; }
.muted { color:#9ca3af; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:14px; border:1px solid transparent;
  font-weight:700; background:#e5e7eb; color:#111; cursor:pointer; transition:.18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform:none; }
.btn.amber{ background:var(--amber); color:#111; }
.btn.ghost{ background:transparent; color:#e5e7eb; border:1px solid var(--line); }
.btn.block{ width:100%; }

/* ===== Inputs ===== */
input[type="text"], input[type="email"], select, textarea {
  width: 100%; height:44px; padding:0 12px; border-radius:10px;
  color:#f3f4f6; background:#3f3f46; border:1px solid rgba(255,255,255,.28);
  outline:none; transition:.15s ease;
}
textarea { height:auto; padding:12px; min-height:120px; resize:vertical; }
input::placeholder, textarea::placeholder { color:#cbd5e1; opacity:.75; }
input:focus, select:focus, textarea:focus {
  border-color:var(--amber); box-shadow:0 0 0 3px rgba(250,204,21,.18);
}
.label { display:block; font-size:.9rem; color:#e5e7eb; margin:.2rem 0 .5rem; }

/* ===== Topbar ===== */
header.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar .inner{
  max-width:1280px; margin:0 auto; padding:.55rem 1rem;
  display:flex; align-items:center; gap:.75rem;
}
.topbar .logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.06em; white-space:nowrap; }
.topbar .logo .mark{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, #fde68a, #d97706);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.topbar .nav{ margin-left:auto; display:flex; align-items:center; gap:22px; }
.topbar .nav a{ color:#ddd; }
.topbar .nav a:hover{ color:#facc15; }
.topbar .btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:9999px; line-height:1;
  background:var(--amber); color:#111; font-weight:700;
  box-shadow:0 6px 18px rgba(250,204,21,.22);
}
.topbar .btn-cta:hover{ background:#fde047; }
.topbar .lang{ display:flex; gap:.4rem; }
.topbar .lang button{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 10px; border-radius:10px; line-height:1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color:#eee; cursor:pointer;
}
.topbar .lang button:hover{ background:rgba(255,255,255,.18); }
.topbar .burger{ display:none; margin-left:auto; cursor:pointer; background:none; border:none; }
.topbar .burger span{ display:block; width:22px; height:2px; background:#fff; margin:.25rem 0; border-radius:2px; }

.mobile-menu{ display:none; background:#111; border-top:1px solid var(--line); }
.mobile-menu.active{ display:flex; flex-direction:column; gap:1rem; padding:1rem; }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:60vh;
  background-size:cover; background-position:center; overflow:hidden;
}
.hero .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)); }
.hero .content{ position:relative; z-index:1; padding: 4rem 0 3rem; }
.hero .kicker{ text-transform:uppercase; letter-spacing:.28em; color:rgba(250,204,21,.9); font-size:.8rem; }
.hero h1{ margin:.6rem 0; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height:1.1; font-weight:900; }
.hero .sub{ color:#d1d5db; max-width:48ch; font-size:1.1rem; }
.hero .hero-cta{ margin-top:1rem; display:flex; gap:.8rem; align-items:center; }
.hero .hero-more{ color:#d1d5db; }
.hero .hero-more:hover{ color:var(--amber); }

/* ===== Produktpanel / Konfigurator ===== */
.panel{ padding:1rem; }
.panel-inner{ max-width: 1120px; margin: 0 auto; }

/* Medien + Formular nebeneinander */
.config-wrap{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 22px;
  align-items: start;
}
.config-media{ position: sticky; top: 88px; }

/* --- PRODUKTBILD: */
.product-frame{
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
              linear-gradient(180deg, rgba(30,30,30,.7), rgba(12,12,12,.7));
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
  display:flex; align-items:center; justify-content:center;
  padding: 24px 22px 18px;
  overflow: hidden;
}
.product-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  background: transparent !important;
  filter: none;
  transform: none;
}
/* --- ENDE PRODUKTBILD --- */

.product-name{ margin:.75rem 0 .15rem; font-weight: 900; color:#fef3c7; font-size:1.05rem; }
.product-sub{ margin:0; color:#a3a3a3; font-size:.92rem; }
.spec-chips{
  list-style:none; padding:0; margin:.75rem 0 0;
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
}
.spec-chips li{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(250,204,21,.08);
  color:#fde68a; font-weight:700; font-size:.78rem;
  padding:.28rem .55rem; border-radius:999px;
}

.config-form{ line-height: 1.45; }
.packs{ margin-top: 1rem; }
.pack-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.pack{
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:.8rem .9rem;
  background: rgba(30,30,30,.6); cursor:pointer; transition:.15s ease;
  text-align:left;
}
.pack:hover{ border-color: rgba(255,255,255,.3); }
.pack.active{ border-color: var(--amber); background: rgba(250,204,21,.1); }
.pack .title{ font-weight:700; color:#fef3c7; }
.pack .price{ color:#fde68a; font-size:.9rem; }

.stages{ margin-top:12px; }
.stage-details{ margin-top:.5rem; }
.stage-details .title{
  display:flex; align-items:center; gap:.5rem;
  color:#fde68a; font-weight:800; font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem);
}
/* Stage-Details: Beschreibung + Hardware */
.stage-details .desc { white-space: pre-line; }

.stage-details .hw{
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
  color: #d1d5db;
  font-size: .95rem;
}
.stage-details .hw strong{
  color:#fde68a;
  font-weight: 800;
}
.ps-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.22rem .55rem; border-radius:.55rem; background: rgba(250,204,21,.18);
  color:#fde68a; font-weight:900; font-size:1.05rem;
}

/* Stage-Desc mit Zeilenumbrüchen */
.stage-details .desc { white-space: pre-line; }

.explainer{ border:1px solid var(--line); background: rgba(20,20,20,.7); border-radius:14px; padding:1rem; color:#e5e7eb; margin-top:12px; }
.explainer .heading{ display:flex; align-items:center; gap:.5rem; color:#fde68a; font-weight:800; }
.bp-list{ margin:.5rem 0 .5rem 1rem; }
.pair{ color:#d1d5db; font-size:.9rem; }

.price-card{
  margin-top:1rem; border:1px solid rgba(251,191,36,.55);
  background: rgba(251,191,36,.10); border-radius:16px; padding:1rem;
}
.price-card .row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.presale-label{ color:#fde68a; font-size:.9rem; }
.presale-price{ color:#facc15; font-size:2.4rem; font-weight:900; line-height:1; }
.breakdown{ color:#d1d5db; font-size:.9rem; margin-top:.25rem; }
.badge-ship{
  display:inline-flex; align-items:center; background: rgba(251,191,36,.1);
  color:#fde68a; font-weight:700; font-size:.8rem; padding:.25rem .6rem; border-radius:9999px; margin-top:.4rem;
}
.msrp-label{ color:#fde68a; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; }
.msrp-price{ color:#f3f4f6; font-size:1.35rem; font-weight:800; }
.save{
  display:inline-flex; align-items:center; background: rgba(251,191,36,.2);
  color:#fde68a; border-radius:9999px; padding:.2rem .5rem; font-size:.8rem; font-weight:800; margin-top:.35rem;
}

.inline-cta{ display:flex; gap:.75rem; align-items:center; margin-top:1rem; }
.inline-cta input{ flex:1; }
.legal{ color:#a1a1aa; font-size:.85rem; margin:.8rem 0 0; }

.trust{ display:grid; grid-template-columns: repeat(3,1fr); gap:.75rem; margin-top:.8rem; }
.trust .trust-item{
  background: var(--amber-weak); border:1px solid var(--amber);
  color:#fde68a; font-weight:800; padding:.8rem .9rem; border-radius:14px; text-align:center;
}

/* ===== Features ===== */
.features { gap: 12px; align-items:start; align-content:start; grid-auto-rows:max-content; margin-top:1rem; }
.feature-row{
  display:grid; grid-template-columns:44px 1fr; align-items:center;
  padding:10px 14px; border-radius:14px;
  background:linear-gradient(180deg,rgba(30,30,30,.7),rgba(18,18,18,.7));
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.feature-row:hover{ box-shadow:0 10px 24px rgba(0,0,0,.32), 0 0 0 1px rgba(250,204,21,.06) inset; }
.feature-row .f-icon{ width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:rgba(250,204,21,.12);border:1px solid rgba(255,255,255,.12); }
.feature-row .f-icon svg{ width:22px;height:22px;display:block; }
.feature-row .f-content{ min-width:0; }
.feature-row .f-title{ font-weight:900;color:#fde68a;line-height:1.2;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
.feature-row .f-body{ color:#d1d5db;font-size:.95rem;line-height:1.4; }

/* ===== App Section ===== */
.app-bullets{ margin:.6rem 0 0 1.1rem; }
.app-bullets li{ margin:.25rem 0; }
.phone-frame{
  aspect-ratio:9/16; border:1px solid var(--line);
  background: rgba(30,30,30,.7); border-radius:24px;
  display:grid; place-items:center; color:#9ca3af;
}

/* ===== Contact ===== */
.contact .maxw{ max-width: 980px; margin: 0 auto; }
.checkbox{ display:flex; align-items:center; gap:10px; margin:8px 0 6px; color:#d1d5db; }
.checkbox input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--amber); }

/* ===== Footer ===== */
footer{ border-top:1px solid var(--line); color:#9ca3af; }
footer .inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; }
footer .brand{ display:flex; align-items:center; gap:.6rem; }
footer .brand .mark{
  width:32px; height:32px; border-radius:10px; background: linear-gradient(135deg,#fde68a,#d97706);
}

/* ===== Modal (Embedded Checkout) ===== */
.demo-modal{ border:none; padding:0; background: transparent; }
.demo-modal::backdrop{ background: rgba(0,0,0,.6); }
.modal-card{ background:#111; border:1px solid var(--line); border-radius: 16px; padding: 1rem; color:#e5e7eb; width:min(720px, 92vw); }
.modal-actions{ margin-top:.8rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .panel-inner{ padding: .25rem; }
}
@media (max-width: 1024px){
  .grid-2 { grid-template-columns: 1fr; }
  .config-wrap{ grid-template-columns: 1fr; }
  .config-media{ position: static; top: auto; max-width: 520px; margin: 0 auto; }
  .trust{ grid-template-columns:1fr; }
}
@media (max-width: 992px){
  .topbar .nav{ display:none; }
  .topbar .burger{ display:block; }
}
@media (max-width: 768px){
  .section{ padding: 3rem 0; }
  .inline-cta{ flex-direction: column; align-items: stretch; }
  .inline-cta .btn{ width:100%; }
  .pack-grid{ grid-template-columns:1fr; }
  .hero{ min-height:56vh; }
  .hero .content{ padding: 3.5rem 1.5rem 2.5rem; } 
  .grid-3 { grid-template-columns: 1fr; }
  .hero .hero-cta{
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .hero .hero-cta .btn{ width:100%; }
}
@media (max-width: 480px){
  .hero h1{ font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .presale-price{ font-size: 2rem; }
  .msrp-price{ font-size: 1.2rem; }
}

/* FAQ Cards */
.faq .card .q{
  display:block;
  margin:0 0 .5rem;
  padding:0 0 .4rem;
  border-bottom:1px solid var(--line);
  color:#fde68a;
  font-weight:900;
  font-size:1.05rem;
}
.faq .card .a{ color:#d1d5db; }

/* === APP-Layout === */
.app-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items:start;
}
.app-left .phone-frame{
  aspect-ratio: 9/16;
  border:1px solid var(--line);
  background: rgba(30,30,30,.7);
  border-radius:24px;
  display:grid; place-items:center;
  color:#9ca3af;
  min-height: 420px;
}

/* Kachel-Grid */
.app-tiles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.tile{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(30,30,30,.7),rgba(18,18,18,.7));
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.tile:hover{ box-shadow:0 10px 24px rgba(0,0,0,.32), 0 0 0 1px rgba(250,204,21,.06) inset; }

.tile-icon{
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(250,204,21,.12);
  border:1px solid rgba(255,255,255,.12);
  color:#FDE68A;
}
.tile-icon svg{ width:22px; height:22px; display:block; }

.tile-title{ font-weight:900; color:#fde68a; line-height:1.2; margin-bottom:2px; }
.tile-text{ color:#d1d5db; font-size:.95rem; line-height:1.4; margin:0; }

/* Responsiv */
@media (max-width: 1024px){
  .app-grid{ grid-template-columns: 1fr; }
  .app-left .phone-frame{ min-height: 380px; }
}
@media (max-width: 640px){
  .app-tiles{ grid-template-columns: 1fr; }
  .tile{ grid-template-columns: 40px 1fr; }
  .tile-icon{ width:40px; height:40px; }
  .tile-icon svg{ width:20px; height:20px; }
}

/* === APP Sektion: Features links, Phone rechts === */
.app-grid{
  display:grid;
  grid-template-columns: 1fr 350px; 
  gap: 32px;
  align-items:start;
}
.app-tiles.single{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.app-right .phone-frame{
  aspect-ratio: 9/16;
  border:1px solid var(--line);
  background: rgba(30,30,30,.7);
  border-radius:24px;
  display:grid; place-items:center;
  color:#9ca3af;
  min-height: 520px;
}

/* mobil */
@media (max-width: 1024px){
  .app-grid{ grid-template-columns: 1fr; }
  .app-right{ order:-1; }
  .app-right .phone-frame{ min-height: 420px; }
}

/* APP grid: equal height */
.app-grid{
  display:grid;
  grid-template-columns: 1fr 350px;
  gap: 32px;
  align-items: stretch;
}
.app-right{ display:flex; }
.app-right .phone-frame{
  height: 100%;
  min-height: unset;
  aspect-ratio: auto;
}
@media (max-width:1024px){
  .app-grid{ grid-template-columns:1fr; }
  .app-right .phone-frame{
    height: auto;
    min-height: 420px;
    aspect-ratio: 9 / 16;
  }
}

/* Contact width fixes */
.contact .maxw{ max-width: 100%; width: 100%; }
.contact .card.pad.maxw{ width: 100%; display: block; }
/* === Tighter vertical rhythm between sections === */
:root{
  /* global knob for section spacing */
  --section-pad: 2.5rem; /* vorher 4rem */
}

.section{
  padding: var(--section-pad) 0;
}

/* zusätzlich: direkt aufeinanderfolgende Sections noch etwas enger */
.section + .section{
  padding-top: calc(var(--section-pad) - .75rem);
}

/* große Screens etwas luftiger als mobile */
@media (max-width: 1024px){
  :root{ --section-pad: 2rem; }
}
@media (max-width: 768px){
  :root{ --section-pad: 1.5rem; }
}
@media (max-width: 480px){
  :root{ --section-pad: 1.25rem; }
}

.section .card.pad.maxw{ margin-top: .25rem; }
.section .heading-amber{ margin-bottom: .35rem; }
/* --- Brand Icon (Nav & Footer) --- */
.topbar .logo .brand-icon,
footer .brand .brand-icon{
  display:block;
  width:36px; height:36px;              
  border-radius:12px;                   
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(0,0,0,.35);        
  object-fit: cover;
}

footer .brand .brand-icon{
  width:32px; height:32px; border-radius:10px;
}

.topbar .logo .mark,
footer .brand .mark{ display:none !important; }

/* === Brand Icon Fix (Nav & Footer) === */
.topbar .logo,
footer .brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-icon {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  background: #0a0a0a;
}

.topbar .logo span,
footer .brand span {
  line-height: 1;
  font-weight: 800;
  letter-spacing: .05em;
  font-size: 1rem;
}

footer .brand .brand-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* === Logo/Icon === */
.topbar .logo,
footer .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: contain;             
  padding: 2px;                    
  background: radial-gradient(circle at 30% 30%, #114a7d, #062743);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  vertical-align: middle;
  transition: transform .2s ease;
}
.brand-icon:hover {
  transform: scale(1.05);
}


.topbar .logo span,
footer .brand span {
  font-weight: 800;
  letter-spacing: .05em;
  font-size: 1rem;
  color: #f9fafb;
  position: relative;
  top: 1px;
}


footer .brand .brand-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  box-shadow: 0 1px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
footer .brand span {
  color: #d4d4d8;
  font-size: .95rem;
}
/* === Brand Icon Badge  === */
:root{
 --brand-icon-img: url("../img/mjet-icon-512.png");
}

.topbar .logo,
footer .brand{
  display:flex;
  align-items:center;
  gap:.6rem;
}


.brand-icon{
  --size: 26px;              
  --pad:  2px;                
  width: var(--size);
  height: var(--size);
  display:inline-block;
  position:relative;
  border-radius: 8px;
  background: #0b2233;         
  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;             
}


.brand-icon::before{
  content:"";
  position:absolute;
  inset: var(--pad);
  border-radius: calc(8px - 1px);
  background: var(--brand-icon-img) center/cover no-repeat;

  transform: scale(.92);
  transform-origin:center;
}


.brand-icon--footer{
  --size: 24px;
  --pad:  2px;
  border-radius: 7px;
}


.topbar .logo span,
footer .brand span{
  line-height:1;
  font-weight:800;
  letter-spacing:.05em;

  position: relative;
  top: 1px;
}
.app-right .phone-frame {
  width: 100%;
  max-width: 420px;             
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-right .app-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;             
  transform: scale(1.25);       
  transform-origin: center;
}
/* --- App Preview  --- */
.app-right .phone-frame {
  position: relative;
  width: 100%;
  max-width: 420px;       /* Rahmen-Breite */
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-right .app-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;    
  transform: scale(1.4);  
  transform-origin: center;
  image-rendering: -webkit-optimize-contrast;
}
/* --- App Preview GIF  --- */
.app-right {
  background: #000 !important;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-right .phone-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 9 / 16 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-right .phone-frame > img.app-preview,
.app-right .app-preview {
  display: block !important;
  background: #000 !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  position: static !important;
  transform: none !important;
  border-radius: 0 !important;
  image-rendering: optimizeQuality;
}
/* === Mobile: E-Mail-Feld & Button === */
@media (max-width: 768px){
  .inline-cta{
    gap: .65rem;                 
    align-items: stretch;
  }

  .inline-cta input[type="email"]{
    height: 54px;                
    font-size: 25px;             
    line-height: 1.2;
    padding: 0 14px;
    border-radius: 12px;
    -webkit-appearance: none;    
  }

  .inline-cta .btn{
    height: 54px;                
    border-radius: 14px;
    font-size: 16px;
  }
}
/* --- Mobile Nav overlay + drawer (works with your markup) --- */
.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; transition:.2s ease; }

@media (max-width: 992px){
  .topbar .nav{ display:none; }
  .burger{ display:block; }
}

/* Drawer unter der Topbar fixieren */
.mobile-menu{
  position: fixed;
  top: 56px;                    /* Höhe deiner Topbar (ggf. anpassen) */
  left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--line);
  z-index: 9999;
}
.mobile-menu a{ font-size:1.05rem; }
.mobile-menu.active{ display:flex; }

/* Body-Scroll sperren, wenn offen */
body.nav-open{ overflow:hidden; }
/* ==== Mobile Menu: fester, dunkler Drawer mit Blur & Scroll-Lock ==== */

/* Body fix: Scroll sperren wenn Menü offen */
body.nav-open { overflow: hidden; }

/* Topbar über alles */
header.topbar { z-index: 2000; }

/* Drawer */
header.topbar .mobile-menu{
  position: fixed;
  left: 0; right: 0;
  /* Höhe der Topbar + Notch berücksichtigen */
  top: calc(56px + env(safe-area-inset-top));
  bottom: 0;

  /* deckender Hintergrund */
  background: rgba(10,10,10,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  z-index: 1999;

  display: flex;               /* immer Flex – Sichtbarkeit per Opacity */
  flex-direction: column;
  gap: 10px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

/* sichtbar */
header.topbar .mobile-menu.active{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Links/Buttons im Drawer */
header.topbar .mobile-menu a,
header.topbar .mobile-menu .btn-cta{
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #f3f4f6;
  font-weight: 800;
}

/* CTA gelb */
header.topbar .mobile-menu .btn-cta{
  background: var(--amber);
  color: #111;
  border-color: var(--amber);
  text-align: center;
}

/* Sprachtoggle im Drawer */
header.topbar .mobile-menu .lang{
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
header.topbar .mobile-menu .lang button{
  flex: 1 1 0;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #eee;
  font-weight: 700;
}

/* Kleinere Screens etwas mehr Abstand */
@media (max-width: 420px){
  header.topbar .mobile-menu a,
  header.topbar .mobile-menu .btn-cta{ padding: 12px; }
}
/* ====== MOBILE MENU: Fullscreen Drawer mit solidem Hintergrund ====== */
:root{ --topbar-h: 64px; } /* wird unten per JS noch exakt gesetzt */

header.topbar{ z-index: 3000; }

/* Basis-Zustand: unsichtbar, aber bereits positioniert */
header.topbar .mobile-menu{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--topbar-h) !important;           /* unter der Topbar starten */
  height: calc(100vh - var(--topbar-h)) !important;
  background: #0a0a0a !important;            /* SOLID – kein Durchscheinen */
  z-index: 2999 !important;

  padding: 14px 12px calc(16px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* sichtbar */
header.topbar .mobile-menu.active{
  opacity: 1; pointer-events: auto; transform: none;
}

/* Scroll des Body sperren, wenn offen */
body.nav-open{ overflow: hidden !important; }

/* Links/Buttons im Drawer */
header.topbar .mobile-menu a,
header.topbar .mobile-menu .btn-cta{
  display:block; width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#f3f4f6; font-weight:800;
}
header.topbar .mobile-menu .btn-cta{
  background: var(--amber); color:#111; border-color: var(--amber);
  text-align:center;
}

/* Sprache im Drawer */
header.topbar .mobile-menu .lang{ display:flex; gap:8px; margin-top:4px; }
header.topbar .mobile-menu .lang button{
  flex:1 1 0; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#eee; font-weight:700;
}

@media (max-width:420px){
  header.topbar .mobile-menu a,
  header.topbar .mobile-menu .btn-cta{ padding:12px; }
}