:root{
    --bg: #120F1B;
    --surface: #1C1830;
    --surface-2: #241F3D;
    --line: #322B52;
    --amber: #FF375F;
    --violet: #BF5AF2;
    --grad: linear-gradient(100deg, #FF375F, #FF9F0A, #BF5AF2, #0A84FF, #FF375F);
    --text: #F5F3FF;
    --muted: #9089B0;
    --ok: #5FD4A0;
    --bad: #FF6B6B;
    --radius: 18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter', sans-serif; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  h1,h2,h3,.display{ font-family:'Bricolage Grotesque', sans-serif; font-weight:700; letter-spacing:-0.02em; }
  .mono{ font-family:'JetBrains Mono', monospace; }
  .muted{ color:var(--muted); }
  a{color:inherit;}
  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

  /* NAV */
  nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(18,15,27,0.75); border-bottom:1px solid var(--line); }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; position:relative; }
  .logo{ font-family:'Satoshi', sans-serif; font-size:21px; font-weight:900; letter-spacing:-0.015em; color:var(--text); }
  .navlinks{ display:flex; gap:28px; font-size:14px; color:var(--muted); }
  .navlinks a:hover{ color:var(--text); }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .hamburger-btn{ display:none; width:38px; height:38px; flex-shrink:0; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .hamburger-btn span{ display:block; width:16px; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nav-dropdown{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px; background:var(--surface); border-bottom:1px solid var(--line); padding:10px 24px 18px; box-shadow:0 16px 28px rgba(0,0,0,0.4); }
  .nav-dropdown.open{ display:flex; }
  .nav-dropdown a{ padding:13px 4px; border-bottom:1px solid var(--line); color:var(--text); font-size:15px; font-weight:600; }
  .nav-dropdown a:last-of-type{ border-bottom:none; }
  .nav-dropdown-cta{ color:var(--amber) !important; }
  @media (max-width:680px){
    .navlinks{ display:none; }
    #navBookBtn, #myBookingBtn{ display:none !important; }
    .hamburger-btn{ display:flex; }
    nav .wrap{ gap:12px; }
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:999px; padding:12px 22px; font-weight:600; font-size:14.5px;
    border:none; cursor:pointer; transition:transform .15s ease, opacity .15s ease;
    text-decoration:none;
  }
  .btn:active{ transform:scale(0.97); }
  .btn-primary{ background:var(--amber); color:#fff; }
  .btn-primary:hover{ opacity:0.92; }
  .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
  .btn-ghost:hover{ background:var(--surface); }
  .btn-violet{ background:var(--violet); color:white; }
  .btn-whatsapp{ background:#25D366; color:#fff; }
  .btn-whatsapp:hover{ opacity:0.92; }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  /* HERO */
  .hero{ position:relative; padding:88px 0 64px; overflow:hidden; }
  .hero-wave{ position:absolute; inset:0; z-index:0; opacity:0.7; pointer-events:none; }
  .hero-content{ position:relative; z-index:1; text-align:center; }
  .eyebrow{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-bottom:18px;}
  .hero h1{ font-size:clamp(38px, 7vw, 74px); margin:0 0 20px; line-height:1.02; }
  .hero p{ font-size:18px; color:var(--muted); max-width:520px; margin:0 auto 36px; }
  .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  /* Die Welle nutzt preserveAspectRatio="none" und streckt sich exakt auf die .hero-Box —
     auf Mobile ist .hero durch umbrechende Headline + gestapelte Buttons viel höher als breit,
     die Welle wird dadurch vertikal überdehnt und wirkt spitz/verzerrt. Feste, niedrigere Höhe
     statt voller Section-Höhe behält die ursprünglichen Proportionen bei. */
  @media (max-width:680px){
    .hero-wave{ top:50%; bottom:auto; height:220px; transform:translateY(-50%); }
  }

  section{ padding:72px 0; scroll-margin-top:80px; }
  .anchor-target{ display:block; scroll-margin-top:88px; }
  .section-head{ text-align:center; max-width:560px; margin:0 auto 44px; }
  .section-head .eyebrow{ margin-bottom:10px; }
  .section-head h2{ font-size:clamp(28px,4vw,40px); margin:0 0 12px; }
  .section-head p{ color:var(--muted); font-size:16px; margin:0; }

  /* PRODUCTS */
  .products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
  .card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
  .card:hover{ border-color:var(--amber); transform:translateY(-2px); }
  .card h3{ font-size:19px; margin:0 0 6px; }
  .card .price{ font-family:'JetBrains Mono',monospace; font-size:26px; color:var(--amber); margin:14px 0 4px; }
  .card .price small{ font-size:13px; color:var(--muted); font-weight:400; }
  .card ul{ list-style:none; padding:0; margin:16px 0 0; font-size:14px; color:var(--muted); }
  .card li{ padding:5px 0; border-top:1px solid var(--line); }
  .card li:first-child{ border-top:none; }
  .tag{ display:inline-block; font-size:11px; background:var(--surface-2); color:var(--muted); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
  .card-cta{ margin-top:16px; font-size:13.5px; font-weight:700; color:var(--amber); }
  .card:hover .card-cta{ text-decoration:underline; }
  /* Info-Badge + Flip-Panel: für Karten, deren volle Details (Zusatzinfos, Feinschrift) die
     Kachel selbst überladen würden — Kachel zeigt nur den Kern-Hook, Rest hinterm (i). */
  .info-badge{ position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface-2); color:var(--muted); font-family:'JetBrains Mono',monospace; font-style:italic; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; z-index:2; transition:border-color .15s ease, color .15s ease; }
  .info-badge:hover{ border-color:var(--amber); color:var(--amber); }
  .info-panel{ display:none; position:absolute; inset:0; background:var(--surface); border:1.5px solid var(--amber); border-radius:var(--radius); padding:24px 26px; z-index:3; cursor:default; overflow-y:auto; }
  .info-panel.open{ display:block; }
  .info-panel h3{ font-size:16px; margin:0 0 12px; padding-right:24px; }
  .info-panel ul{ list-style:none; padding:0; margin:0 0 14px; font-size:13px; color:var(--muted); }
  .info-panel li{ padding:4px 0; border-top:1px solid var(--line); }
  .info-panel li:first-child{ border-top:none; }
  .info-panel p{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0; }
  .info-panel-close{ position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface-2); color:var(--muted); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
  .info-panel-close:hover{ border-color:var(--amber); color:var(--amber); }
  /* Produktfotos: heller Rahmen dahinter, damit Fotos mit weißem Studiohintergrund nicht wie
     ein Fremdkörper im dunklen Design wirken, egal ob PNG mit Transparenz oder Foto mit Kante. */
  .product-photo-wrap{ background:#fff; border-radius:12px; padding:14px; margin-bottom:16px; height:130px; display:flex; align-items:center; justify-content:center; }
  .product-photo-wrap img{ max-width:100%; max-height:100%; object-fit:contain; }
  .info-panel .product-photo-wrap{ height:100px; margin-bottom:14px; }
  .extras-teaser{ margin-top:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 28px; }
  .extras-teaser h3{ font-size:18px; margin:0 0 6px; }
  .extras-teaser p{ font-size:14px; color:var(--muted); margin:0; max-width:440px; }
  .extras-teaser .btn{ flex-shrink:0; }
  /* Logos direkt auf dem dunklen Seitenhintergrund, kein Kasten: einfarbige Logos (Feldwerke,
     Lio, StartMunich, CoCrafter-Schriftzug) werden per Invert-Filter zu ruhigen weißen
     Silhouetten; Logos mit eigener Farbgebung/Fotohintergrund (BMW-Roundel, Momento, DJK)
     verlieren dabei ihre Form und bleiben deshalb über .no-mono in Originalfarbe. */
  /* Feste Grid-Wand mit Trennlinien statt loser flex-wrap-Reihe — dadurch stehen alle Logos
     exakt in Reih und Glied, unabhängig von ihrer jeweiligen Eigenbreite, statt bei jeder
     Fensterbreite an anderer Stelle umzubrechen. */
  .partner-row{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .partner-chip{ display:flex; align-items:center; justify-content:center; min-height:90px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .partner-chip img{ display:block; max-height:34px; max-width:130px; width:auto; height:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:0.7; transition:opacity .15s ease, filter .15s ease; }
  .partner-chip img.no-mono{ filter:none; opacity:1; max-height:42px; }
  .partner-chip img:hover{ filter:none; opacity:1; }
  @media (max-width:640px){ .partner-row{ grid-template-columns:repeat(2, 1fr); } }
  .map-embed{ position:relative; width:100%; max-width:640px; margin:0 auto; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
  .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
  .personal-note{ position:relative; max-width:640px; margin:0 auto 44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 32px 26px; }
  .personal-note .quote-mark{ position:absolute; top:6px; left:22px; font-family:'Bricolage Grotesque', sans-serif; font-size:64px; color:var(--amber); opacity:0.35; line-height:1; }
  .personal-note p{ font-size:15.5px; line-height:1.65; color:var(--text); margin:8px 0 14px; position:relative; z-index:1; }
  .personal-note .signature{ font-size:13.5px; color:var(--muted); font-weight:600; }
  .agb-text h4{ font-size:16px; margin:28px 0 10px; color:var(--amber); }
  .agb-text h4:first-child{ margin-top:0; }
  .agb-text p{ font-size:14px; line-height:1.7; color:var(--text); margin:0 0 10px; }
  .agb-table{ width:100%; border-collapse:collapse; margin:12px 0 16px; font-size:13.5px; }
  .agb-table th, .agb-table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
  .agb-table th{ background:var(--surface-2); color:var(--muted); font-weight:600; }
  .photo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-top:20px; }
  .photo-slot{ position:relative; aspect-ratio:1; border-radius:14px; border:1.5px dashed var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; overflow:hidden; transition:border-color .15s ease; }
  .photo-slot:hover{ border-color:var(--amber); }
  .photo-slot input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .photo-slot .photo-icon{ font-size:22px; }
  .photo-slot .photo-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
  .photo-slot.filled{ border-style:solid; border-color:var(--ok); }
  .photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .photo-slot .check-badge{ position:absolute; top:6px; right:6px; background:var(--ok); color:#0B1F17; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; z-index:2; }
  /* Live-Kamera-Ansicht für Ausweis-/Selfie-Verifizierung, im Stil professioneller ID-Check-Anbieter */
  .cam-wrap{ position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#000; }
  .cam-wrap video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(var(--cam-flip,1)); }
  .cam-frame{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,0.92); box-shadow:0 0 0 9999px rgba(6,4,16,0.6); transition:border-color .2s ease; }
  .cam-wrap.cam-card .cam-frame{ width:80%; aspect-ratio:1.586/1; border-radius:14px; }
  .cam-wrap.cam-face .cam-frame{ width:52%; aspect-ratio:3/4; border-radius:50%; top:44%; }
  .cam-corner{ position:absolute; width:22px; height:22px; }
  .cam-corner.tl{ top:-2px; left:-2px; border-top:3px solid var(--amber); border-left:3px solid var(--amber); border-top-left-radius:10px; }
  .cam-corner.tr{ top:-2px; right:-2px; border-top:3px solid var(--amber); border-right:3px solid var(--amber); border-top-right-radius:10px; }
  .cam-corner.bl{ bottom:-2px; left:-2px; border-bottom:3px solid var(--amber); border-left:3px solid var(--amber); border-bottom-left-radius:10px; }
  .cam-corner.br{ bottom:-2px; right:-2px; border-bottom:3px solid var(--amber); border-right:3px solid var(--amber); border-bottom-right-radius:10px; }
  .cam-hint-pill{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(6,4,16,0.72); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; white-space:nowrap; backdrop-filter:blur(4px); }
  .cam-wrap.cam-loading::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--amber); box-shadow:0 0 8px var(--amber); animation:camScan 1.6s ease-in-out infinite; }
  @keyframes camScan{ 0%{ top:8%; opacity:0; } 15%{ opacity:1; } 50%{ top:88%; opacity:1; } 65%{ opacity:0; } 100%{ top:8%; opacity:0; } }
  .cam-shutter{ width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
  .cam-shutter[disabled]{ opacity:0.55; cursor:default; }
  .cam-progress-track{ width:100%; max-width:280px; height:6px; background:var(--surface-2); border-radius:999px; margin:0 auto; overflow:hidden; }
  .cam-progress-bar{ height:100%; width:0%; background:var(--amber); border-radius:999px; animation:camProgress 0.9s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes camProgress{ from{ width:2%; } to{ width:100%; } }
  .box-toggle{ padding:10px 18px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); font-weight:700; font-size:14px; font-family:'JetBrains Mono',monospace; cursor:pointer; }
  .box-toggle:hover{ border-color:var(--amber); }
  .box-toggle.selected{ border-color:var(--ok); background:rgba(95,212,160,0.12); color:var(--ok); }
  @keyframes shimmer{ to{ background-position:300% center; } }
  .rotate-wrap{ display:inline-grid; perspective:600px; vertical-align:bottom; height:1.15em; }
  .rotate-drum{ grid-area:1/1; position:relative; width:9.4em; height:1.15em; transform-style:preserve-3d;
                animation:spinDrum 9.6s ease-in-out infinite; }
  .rotate-face{ position:absolute; left:0; top:0; width:100%; white-space:nowrap; backface-visibility:hidden;
                background:var(--grad); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
                animation:shimmer 6s linear infinite; }
  @keyframes spinDrum{
    0%   { transform:rotateX(0deg); }
    20%  { transform:rotateX(0deg); }
    28%  { transform:rotateX(-90deg); }
    45%  { transform:rotateX(-90deg); }
    53%  { transform:rotateX(-180deg); }
    70%  { transform:rotateX(-180deg); }
    78%  { transform:rotateX(-270deg); }
    95%  { transform:rotateX(-270deg); }
    100% { transform:rotateX(-360deg); }
  }

  /* BOOKING */
  .booking-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
  @media (max-width:860px){ .booking-grid{ grid-template-columns:1fr; } }
  .panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
  .panel h3{ font-size:16px; margin:0 0 18px; display:flex; align-items:center; justify-content:space-between; }

  .seg{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface-2); border-radius:12px; padding:4px; gap:4px; margin-bottom:18px; }
  @media (max-width:380px){
    .seg button{ font-size:11.5px; padding:10px 2px; }
  }
  .seg button{ border:none; background:transparent; color:var(--muted); padding:10px 4px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
  .seg button.active{ background:var(--violet); color:white; }

  .months{ display:flex; gap:20px; flex-wrap:wrap; }
  .month{ flex:1; min-width:240px; }
  .month-title{ font-size:14px; font-weight:600; margin-bottom:10px; text-transform:capitalize; }
  .cal-nav{ display:flex; align-items:center; gap:8px; }
  .cal-nav-btn{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; }
  .cal-nav-btn:hover:not(:disabled){ border-color:var(--amber); }
  .cal-nav-btn:disabled{ opacity:.35; cursor:default; }
  .cal-nav-label{ font-size:12px; color:var(--muted); font-family:'JetBrains Mono',monospace; min-width:96px; text-align:center; text-transform:capitalize; }
  .grid7{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .dow{ font-size:10.5px; text-align:center; color:var(--muted); padding-bottom:4px; }
  /* Statt reiner Farbcodierung zeigt jeder Tag die tatsächliche freie Stückzahl (z.B. "2/4") —
     eindeutig statt interpretationsbedürftig. "limited" (weniger frei als aktuell gewählt,
     aber mehr als 0) ist bewusst optisch von "blocked" (komplett ausgebucht) unterschieden.
     Der kleine Punkt oben rechts markiert einen Rückgabetag (ab 12 Uhr frei), unabhängig vom
     Status — ersetzt die frühere diagonale Aufteilung, die als unklar empfunden wurde. */
  .day{ aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
        font-size:12.5px; cursor:pointer; position:relative; background:var(--surface-2); color:var(--text); border:1px solid transparent; }
  .day-num{ line-height:1.1; }
  .day-sub{ font-size:8px; line-height:1; font-family:'JetBrains Mono',monospace; color:var(--muted); }
  .day-turnover-dot{ position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 1.5px var(--surface-2); }
  .day.empty{ background:transparent; cursor:default; }
  .day.past{ opacity:0.25; cursor:not-allowed; }
  .day.free .day-sub{ color:var(--ok); }
  .day.free:hover{ border-color:var(--amber); }
  .day.free.selected{ background:var(--amber); color:#fff; font-weight:700; }
  .day.free.selected .day-sub{ color:rgba(255,255,255,0.85); }
  .day.free.in-range{ background:rgba(255,55,95,0.3); }
  .day.limited{ background:transparent; color:var(--muted); opacity:0.6; cursor:not-allowed; }
  .day.limited .day-sub{ color:var(--amber); }
  .day.blocked{ background:transparent; color:var(--bad); opacity:0.5; cursor:not-allowed; text-decoration:line-through; }
  .day.blocked .day-sub{ color:var(--bad); text-decoration:none; }
  .legend{ display:flex; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--muted); }
  .legend span{ display:inline-flex; align-items:center; gap:6px; padding:0 14px; border-left:1px solid var(--line); }
  .legend span:first-child{ padding-left:0; border-left:none; }
  .dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }

  .summary-row{ display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--line); }
  .summary-row.total{ font-weight:700; font-size:16px; border-bottom:none; padding-top:14px; }
  .summary-row .val{ font-family:'JetBrains Mono',monospace; }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .toggle-row:last-child{ border-bottom:none; }
  .extra-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .extra-row:last-child{ border-bottom:none; }
  .thumb{ width:42px; height:42px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; }
  .thumb img{ width:100%; height:100%; object-fit:cover; }
  .extra-info{ flex:1; min-width:0; }
  .extra-info .sub{ font-size:11.5px; color:var(--muted); }
  .extra-info .sub.warn{ color:var(--amber); font-weight:600; }
  .extra-info .sub.soldout{ color:var(--bad); font-weight:600; }
  .badge-included{ font-size:11px; background:rgba(95,212,160,0.15); color:var(--ok); padding:5px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
  .price-tag{ white-space:nowrap; }
  .qty-stepper{ display:flex; align-items:center; gap:10px; }
  .qty-btn{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; }
  .qty-btn:hover{ border-color:var(--amber); }
  .qty-btn:disabled{ opacity:0.35; cursor:not-allowed; border-color:var(--line); }
  .qty-btn:disabled:hover{ border-color:var(--line); }
  .qty-val{ font-family:'JetBrains Mono',monospace; min-width:14px; text-align:center; font-size:14px; }
  .discount-pill{ font-size:10.5px; font-weight:700; color:var(--amber); background:rgba(255,55,95,0.12); padding:2px 6px; border-radius:999px; margin-left:6px; vertical-align:middle; }
  .switch{ width:40px; height:23px; background:var(--surface-2); border-radius:999px; position:relative; cursor:pointer; border:1px solid var(--line); flex-shrink:0; }
  .switch.on{ background:var(--violet); }
  .switch::after{ content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; background:white; border-radius:50%; transition:transform .15s ease; }
  .switch.on::after{ transform:translateX(17px); }
  .note{ font-size:12.5px; color:var(--muted); background:var(--surface-2); border-radius:10px; padding:12px 14px; margin-top:14px; }

  /* HOW IT WORKS */
  .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
  .step{ padding:22px; }
  .step .num{ font-family:'JetBrains Mono',monospace; color:var(--violet); font-size:13px; margin-bottom:10px; }
  .step h3{ font-size:16px; margin:0 0 8px; }
  .step p{ color:var(--muted); font-size:14px; margin:0; }

  footer{ border-top:1px solid var(--line); padding:32px 0; text-align:center; color:var(--muted); font-size:13px; }

  /* MODAL / CHECKOUT */
  .overlay{ position:fixed; inset:0; height:100vh; height:100dvh; background:rgba(8,6,14,0.75); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:100; }
  .overlay.show{ display:flex; }
  @media (min-width:640px){ .overlay{ align-items:center; } }
  /* svh statt vh, damit der Dialog nie unter der (ein-/ausblendbaren) Adress-/Tab-Leiste
     mobiler Browser verschwindet — vh rechnet mit der größten möglichen Ansicht, svh mit
     der kleinsten garantiert sichtbaren. Safe-Area-Padding zusätzlich gegen die Home-Indicator-
     Leiste bei iPhones ohne Home-Button. */
  .modal{ background:var(--surface); border:1px solid var(--line); border-radius:24px 24px 0 0; width:100%; max-width:480px; max-height:88vh; max-height:88svh; overflow-y:auto; overflow-x:hidden; padding:28px; padding-bottom:max(28px, env(safe-area-inset-bottom)); box-sizing:border-box; }
  @media (min-width:640px){ .modal{ border-radius:24px; } }
  .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .close-x{ background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; }
  .step-dots{ display:flex; gap:6px; margin-bottom:22px; }
  .step-dots span{ height:4px; flex:1; background:var(--surface-2); border-radius:2px; }
  .step-dots span.done{ background:var(--amber); }
  .checklist-item{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
  .checklist-item:last-child{ border-bottom:none; }
  .checklist-item .chk{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; }
  .checklist-item .chk.checked{ background:var(--ok); border-color:var(--ok); color:#0B1F17; }
  .checklist-item label{ font-size:14px; cursor:pointer; }
  .checklist-item .sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
  .code-box{ text-align:center; padding:28px 0; }
  .code{ font-family:'JetBrains Mono',monospace; font-size:40px; letter-spacing:0.15em; color:var(--amber); font-weight:700; margin:14px 0; }