/* Luxury Girl — popups.css
   Sheets slide up from the bottom on phones and scale in as a centered card from 600px (tablets, foldables, phones on their side). */

html.lg-lock{overflow:hidden}

/* ---------- base layer ---------- */
.pop{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.pop:not(.is-open){pointer-events:none}          /* a sheet fading out never blocks taps */
.pop-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s var(--ease)}
.pop-card{position:relative;width:100%;max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow:auto;overscroll-behavior:contain;background:#1c1c1e;color:var(--paper);
  border-radius:28px 28px 0 0;padding:12px max(20px,var(--sar)) calc(24px + env(safe-area-inset-bottom)) max(20px,var(--sal));
  transform:translate3d(0,100%,0);transition:transform .5s var(--ease-out);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.pop.is-open .pop-scrim{opacity:1}
.pop.is-open .pop-card{transform:none}
.pop-grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 15px}
.pop-x{position:absolute;z-index:5;top:16px;right:max(16px,var(--sar));width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--mist-2);transition:background-color .2s}
.pop-card:focus,.ph-wrap:focus,.age-in:focus{outline:none}
.pop-x::after{content:"";position:absolute;inset:-7px}                  /* 44 px tap area around the 30 px circle */
@media (hover:hover){.pop-x:hover{background:rgba(255,255,255,.2);color:var(--paper)}}
.pop-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.pop-title{font-family:var(--fd);font-weight:600;font-size:28px;line-height:32px;letter-spacing:-.026em;padding-right:36px;--gx-pr:36px;text-wrap:balance}
@media (max-width:319.98px){.pop-title{font-size:max(22px,8.4vw);line-height:calc(1em + 4px)}}   /* under 320 px (Duo Split View, fold cover screens): one long word ("Geschäftsanfragen") still clears the close button */
.pop-text{margin-top:12px;color:var(--mist-2);font-size:16px;line-height:24px}
.pop-actions{margin-top:24px;display:grid;gap:12px}
.pop-actions .btn{width:100%}
.pop .fine{margin-top:16px}
@media (min-width:600px){
  .pop{align-items:center;--pb:max(24px,env(safe-area-inset-bottom));padding:24px max(24px,var(--sar)) var(--pb) max(24px,var(--sal))}   /* clear of the home indicator */
  .pop-card{max-width:480px;max-height:calc(100vh - 24px - var(--pb));max-height:calc(100svh - 24px - var(--pb));border-radius:28px;padding:0 36px 36px;transform:scale(.94);opacity:0;transition:transform .45s var(--ease-out),opacity .3s var(--ease)}
  .pop.is-open .pop-card{transform:none;opacity:1}
  .pop-grab{display:none}
  /* the close button stays in the corner while a tall sheet scrolls: sticky, in the flow with zero net height. The card has no top
     padding (the button's margin gives it), so the sticky limit is the same whichever box a browser measures it from */
  .pop-card > .pop-x{position:sticky;top:18px;right:auto;margin:18px -18px -14px auto}
  .pop-card{--px-mb:-14px}                                          /* = the button's bottom margin (the title below takes it into account) */
}

/* ---------- platform sheet ---------- */
.plat-list{margin-top:24px;display:grid;gap:12px}
.plat{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--r-btn);background:rgba(255,255,255,.06);transition:background-color .2s}
@media (hover:hover){.plat:hover{background:rgba(255,255,255,.1)}}
.plat b{display:block;font-weight:600;font-size:17px;line-height:22px}
.plat div span{display:block;font-size:13px;color:var(--mist-2);line-height:18px;margin-top:0}   /* --mist-2: 4.5:1 and more on the row */
.plat div{flex:1;min-width:0}

/* ---------- photo viewer ---------- */
.pop-photo{background:#000;align-items:stretch}
.pop-photo .pop-scrim{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.ph-wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column;opacity:0;transition:opacity .35s var(--ease)}
.pop-photo.is-open .ph-wrap{opacity:1}
.ph-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) max(var(--gutter),var(--sar)) 10px max(var(--gutter),var(--sal));font-size:14px;color:var(--mist-2);font-variant-numeric:tabular-nums}
.ph-top .pop-x{position:relative;top:0;right:auto;flex:none}
.ph-track{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.ph-track::-webkit-scrollbar{display:none}
.ph-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:0 max(var(--gutter),var(--sar)) 0 max(var(--gutter),var(--sal))}
.ph-slide picture{display:contents}
.ph-slide img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100svh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain;border-radius:14px}
.ph-bottom{position:relative;z-index:2;padding:16px max(var(--gutter),var(--sar)) calc(18px + env(safe-area-inset-bottom)) max(var(--gutter),var(--sal));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ph-bottom p{font-size:14px;color:var(--mist-2)}
.ph-arrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(255,255,255,.12);display:none;place-items:center;color:var(--paper);transition:background-color .2s,opacity .2s}
@media (hover:hover){.ph-arrow:hover{background:rgba(255,255,255,.22)}}
.ph-arrow[disabled]{opacity:.25;cursor:default}
.ph-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-arrow.prev{left:max(24px,var(--sal))}.ph-arrow.next{right:max(24px,var(--sar))}
@media (min-width:600px){
  .pop.pop-photo{padding:0}                       /* the viewer is full screen: no card padding (it cut the photo top and bottom) */
  .ph-bottom .pp-pair{max-width:440px}
  /* no fade-in over black: until the larger copy arrives, the gallery's copy of the same photo lies under it (popups.js warmSlide) */
  .pop-photo .lq img{opacity:1;transition:none}
  .ph-slide img{background-size:100% 100%;background-repeat:no-repeat}
}
@media (min-width:734px){.ph-arrow{display:grid}.ph-slide{padding:0 96px}}
@media (min-width:600px) and (max-height:640.98px) and (orientation:landscape){   /* short landscape screens: the photo gets the height */
  .ph-top{padding-block:calc(6px + env(safe-area-inset-top)) 6px}
  .ph-bottom{padding-top:8px}
  .ph-bottom p{display:none}
  .ph-bottom .pp-pair{margin-top:0}
  .ph-bottom .pp{min-height:48px}
  .ph-slide img{max-height:calc(100vh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100svh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
.shot-btn{display:block;width:100%;text-align:left;cursor:zoom-in;border-radius:var(--r-lg)}
.shot-btn picture{transition:transform .5s var(--ease-out)}
@media (hover:hover){.shot-btn:hover picture{transform:scale(.985)}}

/* ---------- open in Safari ---------- */
.ia-steps{margin-top:20px;display:grid;gap:12px;counter-reset:s}
.ia-steps li{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.4}
.ia-steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:600;font-size:13px}
.ia-dots{display:inline-grid;place-items:center;width:30px;height:22px;border-radius:6px;background:rgba(255,255,255,.14);font-weight:700;letter-spacing:1px;vertical-align:-5px;margin:0 2px}
.ia-copy.is-done{background:#1f8f4e}
.ia-url{width:100%;font:inherit;font-size:15px;color:var(--paper);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px}   /* the link, selected, when copying isn't allowed */

/* ---------- business form ---------- */
.form{margin-top:20px;display:grid;gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:13px;color:var(--mist-2)}
.field input,.field textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--paper);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s,background-color .2s}
.field textarea{min-height:110px;resize:vertical}
/* business form (popup and /business/ pages): the robot-trap field is invisible to people and screen readers;
   while sending the button is dimmed; after sending only the thank-you stays */
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.biz-form{position:relative}
.biz-form .btn[disabled]{opacity:.65;cursor:progress}
.biz-msg{margin-top:14px;color:#ff8a80;font-size:15px;line-height:22px}
.biz-done{margin-top:20px;outline:none}
.biz-done b{display:block;font-family:var(--fd);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.012em;color:var(--paper)}
.biz-done p{margin-top:8px;color:var(--mist-2);font-size:16px;line-height:24px}
.biz-form.is-sent .form,.biz-form.is-sent .pop-actions,.biz-form.is-sent .pop-text,.biz-form.is-sent .biz-msg{display:none}
.biz-page{max-width:560px;margin-top:8px}
.biz-page .biz-done{margin-top:28px}
.field input:focus,.field textarea:focus{border-color:var(--action);background:rgba(255,255,255,.1)}
.pop-title-c{padding:0;--gx-pr:0px}

/* ---------- age gate ---------- */
.pop-age{align-items:center;padding:24px max(24px,var(--sar)) max(24px,env(safe-area-inset-bottom)) max(24px,var(--sal))}
.pop-age .pop-scrim{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
.age-in{position:relative;text-align:center;max-width:360px;max-height:100%;overflow:auto;overscroll-behavior:contain;opacity:0;transform:scale(.96);transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
.pop-age.is-open .age-in{opacity:1;transform:none}
.age-brand{font-family:var(--fd);font-weight:700;font-size:44px;letter-spacing:-.045em;line-height:1}
.age-in .pop-text{margin-top:16px}
.age-in .pop-actions{margin-top:28px}

/* ---------- join preview ---------- */
.join-prev{position:relative;margin:41px 0 20px;height:152px;border-radius:var(--r-md);overflow:hidden;-webkit-clip-path:inset(0 round var(--r-md));clip-path:inset(0 round var(--r-md));background:var(--tile);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:0 24px}
/* the drop preview starts below the close button (its top used to slide under the circle): 41 px collapses with the grab bar's 15 px margin; the role greeting has its own margin */
.jp-img{position:absolute;inset:0}
.jp-img img{width:100%;height:100%;object-fit:cover;filter:blur(16px) brightness(.5);transform:scale(1.3)}
.join-prev.is-video .jp-img img{animation:lg-motion 1.7s ease-in-out infinite}
.join-prev .lock{position:relative;width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.join-prev p{position:relative;font-size:15px;font-weight:600;line-height:20px;max-width:28ch}
.jp-tx{position:relative;display:block}
.jp-t{display:block;font-family:var(--fd);font-weight:600;font-size:24px;line-height:28px;letter-spacing:-.022em}
.jp-t:empty{display:none}
.join-prev.is-role{height:auto;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;text-align:left;padding:0 36px 0 0;background:none;overflow:visible;-webkit-clip-path:none;clip-path:none;margin:2px 0 20px}
.join-prev.is-role .jp-img{position:relative;inset:auto;width:76px;height:76px;flex:none;border-radius:18px;overflow:hidden;background:var(--tile-3)}
.jp-img img.is-wait{visibility:hidden}
.join-prev.is-role .jp-img img{filter:none;transform:none;object-position:50% 25%}
.join-prev.is-role .lock{display:none}
.join-prev.is-role p{margin-top:4px;font-weight:400;font-size:15px;color:var(--mist-2);max-width:none}

/* ---------- age gate title ---------- */
.age-title{margin-top:14px;--gx-mt:14px;font-family:var(--fd);font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-.02em}

/* ---------- tablets and desktop: the sheets on the same type scale as the page (600px+, like the page) ---------- */
@media (min-width:600px){
  .pop-title{font-size:32px;line-height:36px;padding-right:40px;--gx-pr:40px}
  .pop-text{margin-top:14px;font-size:17px;line-height:26px}
  .pop-actions{margin-top:28px;gap:14px}
  .pop .fine{margin-top:18px}
  /* platform rows */
  .plat-list{margin-top:28px;gap:14px}
  .plat{gap:18px;padding:16px 18px}
  .plat .plat-ic{width:48px;height:48px;border-radius:13px;font-size:26px}
  .plat b{font-size:18px;line-height:24px}
  .plat div span{margin-top:1px;font-size:15px;line-height:20px;text-wrap:balance}
  /* role greeting, drop preview */
  .join-prev{height:176px;margin:30px 0 24px}          /* the drop preview starts below the close button (it used to slide under it); the role greeting keeps its own margin */
  .join-prev .lock{width:32px;height:32px}
  .join-prev p{font-size:17px;line-height:24px;max-width:30ch}
  .jp-t{font-size:28px;line-height:32px}
  .join-prev.is-role{gap:20px;padding-right:40px;margin:4px 0 24px}
  .join-prev.is-role .jp-img{width:88px;height:88px;border-radius:20px}
  .join-prev.is-role p{margin-top:6px;font-size:17px;line-height:24px}
  /* photo viewer */
  .ph-top{font-size:15px}
  .ph-bottom p{font-size:16px;line-height:24px}
  /* business form */
  .form{margin-top:24px;gap:14px}
  .field{gap:8px}
  .field label{font-size:14px;line-height:20px}
  .field input,.field textarea{font-size:17px;padding:13px 16px;border-radius:14px}
  .field textarea{min-height:120px}
  /* open in Safari */
  .ia-steps{margin-top:24px;gap:14px}
  .ia-steps li{gap:14px;font-size:17px;line-height:24px}
  .ia-steps li::before{width:28px;height:28px;font-size:14px}
  .ia-url{font-size:16px;padding:13px 16px}
  /* age gate */
  .age-in{max-width:400px}
  .age-brand{font-size:52px}
  .age-title{margin-top:16px;--gx-mt:16px;font-size:32px}
  .age-in .pop-text{margin-top:18px}
}
/* ---------- desktop windows (from 1440 px, or a flat 1280+ px laptop window, and at least 760 px tall): one step up again, like the page
   there (headlines 72, body 19): on a desktop the sheets kept the tablet sizes and read small next to the page. Every title 36 (the role
   greeting was 28 next to 32 elsewhere), text 19/28, platform rows 19 and 16, fine print 14; the card 540 px. Short laptop windows
   (1366×657, 1280×720) keep the tablet sizes so the sheets don't have to scroll ---------- */
@media (min-width:1440px) and (min-height:780px),(min-width:1280px) and (min-aspect-ratio:17/10) and (min-height:780px){
  .pop-card{max-width:540px;padding:0 44px 40px}
  .pop-card > .pop-x{width:34px;height:34px;margin:20px -24px -12px auto;top:20px}
  .pop-card{--px-mb:-12px}
  .pop-x svg{width:13px;height:13px}
  .pop-title{font-size:36px;line-height:40px;padding-right:44px;--gx-pr:44px}
  .pop-text{margin-top:16px;font-size:19px;line-height:28px}
  .pop-actions{margin-top:32px;gap:14px}
  .pop-actions .btn-lg{font-size:18px;min-height:56px}
  .pop .fine{margin-top:20px;font-size:14px;line-height:21px}
  .plat-list{margin-top:32px;gap:14px}
  .plat{gap:20px;padding:18px 20px}
  .plat .plat-ic{width:52px;height:52px;border-radius:14px;font-size:28px}
  .plat b{font-size:19px;line-height:24px}
  .plat div span{margin-top:2px;font-size:16px;line-height:22px}
  .join-prev{height:200px;margin:28px 0 28px}       /* starts 16 px under the close button */
  .join-prev .lock{width:34px;height:34px}
  .join-prev p{font-size:19px;line-height:28px;max-width:30ch}
  .jp-t{font-size:36px;line-height:40px}
  .join-prev.is-role{gap:22px;padding-right:44px;margin:4px 0 28px}
  .join-prev.is-role .jp-img{width:104px;height:104px;border-radius:22px}
  .join-prev.is-role p{margin-top:8px;font-size:19px;line-height:28px}
  .ph-top{font-size:16px}
  .ph-bottom p{font-size:17px;line-height:26px}
  .ph-bottom .pp-pair{max-width:480px}
  .form{margin-top:24px;gap:14px}                    /* the business form fits a MacBook Air window (1440×789) without scrolling */
  .field{gap:6px}
  .field label{font-size:15px;line-height:22px}
  .field input,.field textarea{font-size:18px;padding:12px 18px}
  .field textarea{min-height:110px}
  .ia-steps{margin-top:28px;gap:16px}
  .ia-steps li{gap:16px;font-size:19px;line-height:28px}
  .ia-steps li::before{width:30px;height:30px;font-size:15px}
  .ia-url{font-size:17px;padding:14px 18px}
  .age-in{max-width:460px}
  .age-brand{font-size:60px}
  .age-title{margin-top:18px;--gx-mt:18px;font-size:36px}
  .age-in .pop-text{margin-top:20px}
}
@media (min-width:600px) and (max-height:500.98px){                   /* phones on their side: a compact card that uses the whole height */
  .pop{--pb:max(12px,env(safe-area-inset-bottom));padding:12px max(12px,var(--sar)) var(--pb) max(12px,var(--sal))}
  .pop-card{max-height:calc(100vh - 12px - var(--pb));max-height:calc(100svh - 12px - var(--pb));padding:0 24px 24px}
  .pop-card > .pop-x{top:12px;margin:12px -12px -18px auto}
  .pop-card{--px-mb:-18px}
}

@media (prefers-reduced-motion:reduce){
  .pop-scrim,.pop-card,.ph-wrap,.age-in{transition:none!important}
}

/* short laptop windows (1366×657, 1280×720): the business form a little tighter, so Send is on screen without scrolling; with a mouse,
   a thin scrollbar in a sheet that does scroll */
@media (min-width:1280px) and (max-height:779.98px){
  .pop-card{padding-bottom:24px}
  .form{margin-top:16px;gap:10px}
  .field{gap:6px}
  .field input,.field textarea{padding:10px 16px}
  .field textarea{min-height:64px}
}
@media (min-width:734px) and (pointer:fine){.pop-card{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}}

/* ---------- champagne on the sheet titles (as on the page headings: site.css → "Champagne") ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (height:1lh){
  .pop-title,.age-brand,.age-title,.jp-t{
    background:var(--champ-band) 0 0 / 100% 1lh repeat;background-origin:content-box;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-top:.16em;padding-bottom:.2em;padding-right:calc(var(--gx-pr,0px) + .1em);
    margin-top:calc(var(--gx-mt,0px) - .16em);margin-bottom:-.2em;margin-right:-.1em}
  /* Keep centered age headings inside their scroll area; their extra gradient padding must not create a horizontal scrollbar. */
  .age-in .age-brand,.age-in .age-title{margin-right:0;padding-left:.1em}
  /* right under the close button: its negative bottom margin and the title's collapse to the more negative one (not their sum), so the
     title's own share has to include the button's */
  .pop-x + .pop-title,.pop-x + [hidden] + .pop-title,.pop-x + form > .pop-title:first-child{--gx-mt:var(--px-mb,0px)}   /* (through the form: no padding) */
}