/* ─────────────────────────────────────────────────────────────
   Pingt member view — shared styles (home + listing pages + details)
   Monochrome UI: black / white / greys. Colour comes only from
   partner photos, videos and Flash content.
   Headlines/titles of Flashes + partner names: League Spartan.
   Everything else: Inter.
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --black:#0A0A0A;--white:#FFFFFF;--grey-dark:#4A4A4A;--grey-mid:#8A8A8A;
  --grey-light:#F2F2F2;--grey-border:#E0E0E0;
  --head:'League Spartan','Inter',sans-serif;--body:'Inter',sans-serif;
  /* One page margin everywhere — scales with screen width (16px on small phones, up to 28px). */
  --orange:#F4511E;
  --gutter:clamp(16px,5vw,28px);
  --radius:14px;
}
html,body{height:100%;}
body{font-family:var(--body);background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;cursor:pointer;}
button{font-family:inherit;}
.link{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;}
/* Wider screens (unfolded phones, tablets, desktop): frame the app column. */
@media (min-width:560px){body{background:var(--grey-light);} .app{background:var(--white);border-left:1px solid var(--grey-border);border-right:1px solid var(--grey-border);}}

/* ── Login gate ── */
.auth-loading{flex:1;display:flex;align-items:center;justify-content:center;min-height:100dvh;}
.login-screen{display:none;flex:1;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;}
.login-logo{width:120px;margin-bottom:28px;}
.login-title{font-size:22px;font-weight:900;letter-spacing:-0.6px;margin-bottom:8px;}
.login-sub{font-size:13px;color:var(--grey-mid);font-weight:300;margin-bottom:28px;max-width:280px;line-height:1.6;}
.login-form{width:100%;max-width:320px;display:flex;flex-direction:column;}
.login-input{padding:14px 16px;font-size:14px;font-family:var(--body);border:1px solid var(--black);border-bottom:none;outline:none;}
.login-input:last-of-type{border-bottom:1px solid var(--black);}
.login-btn{background:var(--black);color:var(--white);border:none;padding:14px;font-size:13px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:0.02em;margin-top:12px;}
.login-error{font-size:12px;color:var(--black);font-weight:600;margin-top:10px;min-height:16px;}

/* ── Top bar ── */
.topbar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--grey-border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top));}
.loc{background:none;border:none;display:flex;align-items:baseline;gap:6px;font-size:clamp(14px,4.2vw,16px);color:var(--black);cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-explore{color:var(--grey-mid);font-weight:400;}
.loc-sep{color:var(--grey-border);}
.loc strong{font-weight:800;}
/* Header: "Explore" (Inter Medium) + neighbourhood in orange bold.
   The neighbourhood becomes a picker once there's more than one. */
.loc-enjoy{font-weight:500;color:var(--black);}
.loc .loc-hood{font-weight:800;color:var(--orange);}
.loc i{font-size:11px;color:var(--grey-mid);}
.user-btn{font-size:26px;color:var(--orange);line-height:1;flex-shrink:0;}
.back-btn{background:none;border:none;font-size:18px;color:var(--black);cursor:pointer;padding:2px 6px 2px 0;}

/* ── Sections ── */
.sec{padding:26px 0 8px;}
.sec.alt{background:var(--grey-light);padding-bottom:18px;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--gutter) 14px;}
.sec-title{font-size:clamp(17px,4.9vw,20px);font-weight:800;letter-spacing:-0.4px;display:flex;align-items:center;gap:8px;color:var(--black);}
/* Linked section titles (Angebote, Ankündigungen, Community) are orange — links are orange. */
a.sec-title{color:var(--orange);}
.sec-title i{font-size:13px;color:var(--orange);}
.sec-all{font-size:11px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:var(--orange);}
/* Offers band on Home: orange background, white text. */
.sec-orange{background:var(--orange);color:var(--white);padding-top:18px;padding-bottom:0;}
.sec-orange .sec-head{padding-bottom:10px;}
.sec-orange .hscroll{padding-bottom:16px;}
.sec-orange a.sec-title,.sec-orange .sec-title i,.sec-orange .sec-all{color:var(--white);}
.sec-orange .row-label{color:rgba(255,255,255,0.82);}
.sec-orange .card-partner,.sec-orange .card-title{color:var(--white);}
/* Offers matter most: show up to 3 lines of the offer text. */
.sec-orange .card-title{-webkit-line-clamp:3;font-size:23px;line-height:1.08;}
.sec-orange .card-meta{color:rgba(255,255,255,0.92);}
.sec-orange .card-media{background:rgba(255,255,255,0.18);}
.sec-orange .card-more{color:var(--white);border-color:rgba(255,255,255,0.75);}
.sec-orange .sec-empty{color:rgba(255,255,255,0.9);}
.row-label{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-mid);padding:0 var(--gutter) 10px;}
.sec-empty{font-size:13px;color:var(--grey-mid);font-weight:300;padding:4px var(--gutter) 12px;line-height:1.6;}

/* Second Offer row ("Endet bald") sits on white below the orange band (17 Oct). */
.sec-orange .o-band-2{background:var(--white);padding-top:16px;}
.sec-orange .o-band-2 .row-label{color:var(--grey-mid);}
.sec-orange .o-band-2 .card-partner,.sec-orange .o-band-2 .card-title{color:var(--black);}
.sec-orange .o-band-2 .card-meta{color:var(--grey-dark);}
.sec-orange .o-band-2 .card-media{background:var(--grey-light);}
.sec-orange .o-band-2 .card-more{color:var(--orange);border-color:var(--orange);}

/* ── Horizontal rows ── */
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
/* Trailing space so the last card also stops at the margin, not the screen edge. */
.hscroll::after{content:'';flex:0 0 calc(var(--gutter) - 12px);}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll > *{scroll-snap-align:start;flex-shrink:0;}

/* ── Flash card ── */
.card{width:58%;max-width:240px;}
/* Announcement cards: same width as Offers, photo fixed at 120px tall. */
.card.card-tall .card-media{aspect-ratio:auto;height:108px;}
.card-media{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--grey-light);cursor:pointer;}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.card-media .icon-fill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--grey-border);border-radius:14px;}
.card-media .icon-fill i{font-size:64px;color:var(--black);}
.tag{position:absolute;top:10px;right:10px;background:var(--black);color:var(--white);font-size:9.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:5px 8px;}
.timer{position:absolute;left:10px;bottom:10px;background:var(--white);color:var(--black);font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;}
.timer.urgent{background:var(--black);color:var(--white);}
.card-partner{display:block;margin-top:10px;font-size:11px;font-weight:400;letter-spacing:0.04em;text-transform:uppercase;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-title{font-family:var(--head);font-size:17px;font-weight:700;line-height:1.15;margin-top:4px;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-meta{font-size:12px;color:var(--grey-dark);margin-top:5px;}
.card-more{width:30%;max-width:130px;color:var(--orange);border-color:var(--orange);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;align-self:stretch;max-height:240px;border:1px solid var(--grey-border);border-radius:var(--radius);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;}
.card-more i{font-size:20px;}

/* ── Feature (video) carousel ── */
.feat-stage{position:relative;aspect-ratio:4/3;background:var(--black);overflow:hidden;margin:0 var(--gutter) 12px;border-radius:var(--radius);}
.feat-stage video,.feat-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.feat-shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,0.6) 100%);pointer-events:none;}
.feat-cap{position:absolute;left:16px;right:16px;bottom:18px;color:var(--white);pointer-events:none;}
.feat-cap-partner{font-size:10.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;opacity:0.9;margin-bottom:4px;}
.feat-cap-title{font-family:var(--head);font-size:22px;font-weight:700;line-height:1.15;}
.feat-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,0.18);color:var(--white);font-size:16px;cursor:pointer;z-index:2;}
.feat-arrow.prev{left:10px;}.feat-arrow.next{right:10px;}
.feat-dots{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;}
.feat-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.45);}
.feat-dot.on{background:var(--white);}

/* ── Community rows ── */
.c-list{padding:0 var(--gutter);}
.c-row{display:flex;align-items:flex-start;gap:14px;padding:10px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.c-icon{width:62px;height:62px;flex-shrink:0;border:1.5px solid var(--orange);border-radius:12px;background:var(--white);display:flex;align-items:center;justify-content:center;}
.c-icon i{font-size:26px;color:var(--orange);}
.c-icon.saved{background:var(--orange);}
.c-icon.saved i{color:var(--white);}
.c-info{min-width:0;flex:1;}
.c-date{font-size:12px;font-weight:400;color:var(--black);margin-bottom:2px;}
/* Text starts level with the top of the icon box instead of riding above it. */
.c-info{padding-top:4px;}
.c-title{font-family:var(--head);font-size:17px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.c-place{font-size:11.5px;color:var(--grey-mid);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Member photos ── */
.mp{width:44%;max-width:210px;cursor:pointer;}
.mp img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block;background:var(--grey-light);}
.mp-cap{font-size:12px;font-weight:400;color:var(--grey-dark);margin-top:6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mp-partner{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.04em;margin-top:6px;}

/* ── Map ── */
.home-map{height:320px;background:var(--grey-light);margin:0 var(--gutter) 28px;border-radius:var(--radius);overflow:hidden;}

/* ── Stats (preview only) ── */
.stats{background:var(--orange);color:var(--white);padding:36px var(--gutter);margin:0 var(--gutter) 28px;border-radius:var(--radius);display:flex;flex-direction:column;gap:26px;text-align:center;}
.stat-num{font-size:64px;font-weight:900;letter-spacing:-2px;line-height:1;}
.stat-label{font-size:18px;font-weight:700;margin-top:6px;}

/* ── Footer ── */
.footer{background:var(--grey-light);padding:28px var(--gutter) calc(36px + env(safe-area-inset-bottom));font-size:14px;margin-top:auto;}
.footer a{display:block;padding:4px 0;}
.footer-lang{margin-top:18px;display:flex;gap:10px;}
.footer-lang a{display:inline;color:var(--grey-mid);cursor:pointer;}
.footer-lang a.on{color:var(--black);font-weight:800;}
.footer-copy{margin-top:22px;font-size:13px;color:var(--grey-dark);}

/* ─────────────── DETAIL POPOVER ─────────────── */
.d-overlay{position:fixed;inset:0;z-index:300;background:var(--white);display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.d-overlay.open{opacity:1;pointer-events:all;}
.d-panel{width:100%;max-width:520px;height:100dvh;display:flex;flex-direction:column;transform:translateY(20px);transition:transform .25s ease;}
.d-overlay.open .d-panel{transform:none;}
.d-scroll{flex:1;overflow-y:auto;min-height:0;}
.d-hero{position:relative;aspect-ratio:4/3;background:var(--grey-light);overflow:hidden;margin:calc(var(--gutter) + env(safe-area-inset-top)) var(--gutter) 0;border-radius:var(--radius);}
.d-hero img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.d-hero .icon-fill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--orange);border-radius:var(--radius);}
.d-hero .icon-fill i{font-size:clamp(90px,30vw,150px);color:var(--orange);}
.d-close,.d-back{position:absolute;top:12px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,0.94);color:var(--black);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,0.12);z-index:2;}
.d-close{right:12px;}.d-back{left:12px;}
.d-body{padding:20px var(--gutter) 28px;}
.d-kicker{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--black);margin-bottom:10px;}
.d-kicker.link,.d-kicker.link i{color:var(--orange);}
.d-kicker i{font-size:10px;color:var(--grey-mid);}
.d-kicker.static{color:var(--grey-dark);}
.d-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.d-title{font-family:var(--head);font-size:clamp(26px,8vw,34px);font-weight:700;line-height:1.08;color:var(--black);}
/* Centred block on detail pages (title, availability/date, links, address). */
.d-center{text-align:center;}
.d-center .d-links{justify-content:center;}
.d-center .d-kicker{justify-content:center;}
.d-center .d-addr{margin-top:18px;}
.d-stat{font-size:17px;font-weight:800;margin-top:14px;}
.d-meta{font-size:13px;color:var(--grey-dark);margin-top:6px;line-height:1.5;}
.d-label{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-mid);margin:24px 0 6px;}
.d-desc{font-size:15px;line-height:1.6;color:var(--grey-dark);white-space:pre-wrap;}
.d-addr{font-size:14px;line-height:1.5;color:var(--black);margin-top:12px;}
.d-maplink{display:inline-block;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--orange);text-decoration:underline;text-underline-offset:3px;}
.d-links{display:flex;gap:22px;margin-top:22px;}
.d-link{background:none;border:none;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--orange);cursor:pointer;padding:0;}
.d-link i{font-size:16px;}
.heart{background:none;border:none;font-size:26px;color:var(--black);cursor:pointer;padding:4px 0 0;flex-shrink:0;line-height:1;}
.d-cal{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--orange);background:var(--white);font-size:13px;font-weight:800;color:var(--orange);cursor:pointer;}
.d-cal.on{background:var(--orange);color:var(--white);}
.d-cal i{font-size:16px;}
.d-map{width:calc(100% - var(--gutter) * 2);aspect-ratio:16/10;border:none;display:block;background:var(--grey-light);margin:0 var(--gutter) var(--gutter);border-radius:var(--radius);}
/* Main action button on every detail page is orange. */
.d-bar .btn-primary{background:var(--orange);}
.d-bar .btn-primary:disabled{background:var(--grey-border);color:var(--grey-mid);}
.d-bar{flex-shrink:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--grey-border);}
.btn-primary{width:100%;padding:16px;border-radius:10px;border:none;background:var(--black);color:var(--white);font-size:15px;font-weight:800;cursor:pointer;letter-spacing:0.01em;}
.btn-primary:disabled{background:var(--grey-border);color:var(--grey-mid);cursor:not-allowed;}
.btn-secondary{width:100%;padding:14px;border-radius:10px;border:1px solid var(--black);background:var(--white);color:var(--black);font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}

/* Partner detail extras */
.p-desc-more{font-weight:800;color:var(--black);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.p-section{border-top:1px solid var(--grey-border);padding:18px 0 4px;}
.p-section-head{font-size:12px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:0 var(--gutter) 8px;}
.pf-row{display:flex;align-items:center;gap:12px;padding:10px var(--gutter);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pf-thumb{position:relative;width:84px;height:64px;border-radius:10px;overflow:hidden;background:var(--grey-light);flex-shrink:0;}
.pf-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pf-info{flex:1;min-width:0;}
.pf-type{font-size:10.5px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-mid);}
.pf-title{font-family:var(--head);font-size:17px;font-weight:700;line-height:1.2;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pf-sub{font-size:12px;color:var(--grey-dark);}
.pf-empty{font-size:13px;color:var(--grey-mid);padding:4px var(--gutter) 14px;}
.gal{position:relative;width:40%;max-width:180px;cursor:zoom-in;border-radius:12px;overflow:hidden;}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;background:var(--grey-light);}

/* Claim success */
.claim-ok{text-align:center;padding:56px var(--gutter);}
.claim-ok .d-kicker{justify-content:center;}
.claim-code{font-size:38px;font-weight:900;letter-spacing:6px;margin:18px 0 12px;}
.claim-note{font-size:13px;color:var(--grey-dark);line-height:1.6;}

/* ── Bottom sheet (share / calendar) ── */
.sheet-overlay{position:fixed;inset:0;z-index:400;background:rgba(10,10,10,0.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.sheet-overlay.open{opacity:1;pointer-events:all;}
.sheet{width:100%;max-width:520px;background:var(--white);border-radius:18px 18px 0 0;padding:22px var(--gutter) calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;transform:translateY(30px);transition:transform .2s;}
.sheet-overlay.open .sheet{transform:none;}
.sheet-title{font-size:17px;font-weight:800;margin-bottom:4px;}
.sheet-sub{font-size:12px;color:var(--grey-mid);margin-bottom:6px;line-height:1.5;}
.sheet-cancel{background:none;border:none;padding:12px;font-size:13px;font-weight:700;color:var(--grey-dark);cursor:pointer;}
/* Partner preview — demo claim explainer sheet */
.pv-steps{display:flex;flex-direction:column;gap:14px;margin:4px 0 6px;}
.pv-step{display:flex;gap:12px;align-items:flex-start;}
.pv-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--black);color:var(--white);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.pv-step-t{font-size:14px;font-weight:700;line-height:1.3;}
.pv-step-d{font-size:13px;color:var(--grey-dark);line-height:1.5;margin-top:2px;}
.pv-code{border:1px dashed var(--grey-border);border-radius:var(--radius);padding:12px;text-align:center;font-size:26px;font-weight:900;letter-spacing:5px;color:var(--grey-mid);}
.pv-code span{display:block;font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}
.pv-note{margin:2px 0 4px;}
.sheet-input{width:100%;padding:12px 0;font-size:15px;border:none;border-bottom:1px solid var(--grey-border);outline:none;font-family:var(--body);}
.sheet-input:focus{border-bottom-color:var(--black);}

/* ── Lightbox ── */
.lb{position:fixed;inset:0;z-index:500;background:rgba(10,10,10,0.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 16px 40px;}
.lb.open{display:flex;}
.lb img{max-width:100%;max-height:72vh;object-fit:contain;}
.lb-cap{color:var(--white);font-size:14px;margin-top:16px;text-align:center;max-width:420px;line-height:1.5;}
.lb-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.15);color:var(--white);font-size:18px;cursor:pointer;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,0.15);color:var(--white);font-size:18px;cursor:pointer;}
.lb-nav.prev{left:10px;}.lb-nav.next{right:10px;}

/* ── Toast ── */
.toast{position:fixed;top:16px;left:var(--gutter);right:var(--gutter);max-width:488px;border-radius:10px;margin:0 auto;background:var(--black);color:var(--white);padding:14px 16px;z-index:600;}
.toast b{display:block;font-size:13px;margin-bottom:2px;}
.toast span{font-size:12px;color:#BDBDBD;}

.spinner{width:22px;height:22px;border:3px solid var(--grey-border);border-top-color:var(--black);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
[hidden]{display:none !important;}

/* ─────────────── LISTING PAGES (offers / announcements / community) ─────────────── */
.l-head{display:flex;align-items:center;gap:10px;background:var(--grey-light);padding:16px var(--gutter);}
.l-back{font-size:16px;color:var(--black);padding:4px 4px 4px 0;}
.l-title{flex:1;font-size:clamp(21px,6vw,25px);font-weight:800;letter-spacing:-0.4px;color:var(--black);}
.l-filter{position:relative;background:none;border:none;font-size:22px;color:var(--orange);cursor:pointer;padding:4px;}
.l-badge{position:absolute;top:-2px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--orange);color:var(--white);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--grey-light);}
.l-active{display:flex;flex-wrap:wrap;gap:8px;padding:12px var(--gutter) 0;}
.l-row{display:flex;align-items:center;gap:14px;padding:12px var(--gutter);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.l-row:first-child{padding-top:18px;}
.l-row.soldout{opacity:0.5;}
.l-thumb{position:relative;width:40%;max-width:170px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--grey-light);flex-shrink:0;}
.l-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.l-thumb .timer{left:6px;bottom:6px;font-size:10px;padding:4px 7px;}
.l-info{flex:1;min-width:0;}
.l-partner{display:block;font-size:10.5px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--black);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-date{font-size:12px;font-weight:800;color:var(--black);margin-bottom:3px;}
.l-name{font-family:var(--head);font-size:clamp(16px,4.6vw,19px);font-weight:700;line-height:1.15;color:var(--orange);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.l-meta{font-size:12px;color:var(--grey-dark);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-video{padding:14px 0 6px;}
.l-video .feat-stage{margin-bottom:0;}
.l-reset{color:var(--orange);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* Filter sheet */
.sheet-label{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-mid);margin-top:10px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1.5px solid var(--grey-border);border-radius:999px;font-size:13px;font-weight:700;color:var(--black);background:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.chip.on{background:var(--orange);border-color:var(--orange);color:var(--white);}
.chip i{font-size:11px;}
.btn-orange{background:var(--orange);}

/* ─────────────── SUPER FLASHES ─────────────── */
/* Home: same card size, 3px outline drawn inside the photo so nothing shifts. */
.card.super .card-media::after{content:'';position:absolute;inset:0;border:3px solid var(--orange);border-radius:inherit;pointer-events:none;}
.card.super-offer .card-media::after{border-color:var(--white);}
.card-media video{width:100%;height:100%;object-fit:cover;display:block;}
.d-hero video{width:100%;height:100%;object-fit:cover;display:block;}
/* Listing pages: full content width, photo or video. */
.l-super{padding:16px var(--gutter) 18px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.l-super.soldout{opacity:0.5;}
.l-super-media{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--black);}
.l-super-media img,.l-super-media video{width:100%;height:100%;object-fit:cover;display:block;}
.l-super-info{margin-top:12px;}
.l-super .l-name{font-size:clamp(21px,6.2vw,26px);-webkit-line-clamp:3;}

/* League Spartan headlines: tracking −4 (−0.04em), so it scales with every size. */
.card-title,.feat-cap-title,.c-title,.d-title,.pf-title,.l-name{letter-spacing:-0.04em;}

/* Full-screen map on the partner preview ("Karte ansehen" / "View map"). */
.pv-map{position:fixed;inset:0;z-index:250;background:var(--white);display:flex;flex-direction:column;max-width:520px;margin:0 auto;}
.pv-map[hidden]{display:none !important;}
.pv-map-head{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid var(--grey-border);font-size:16px;}
.pv-map-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--grey-border);background:var(--white);font-size:16px;cursor:pointer;}
.pv-map-canvas{flex:1;min-height:0;background:var(--grey-light);}

/* ─────────────── DEMO WATERMARK ───────────────
   Partners marked "Label as demo" in Admin: DEMO in League Spartan, orange at
   28% opacity, rotated 24° counter-clockwise across the image. Sized from the
   image's own width so it fits small thumbnails and big hero photos alike. */
.card-media,.l-thumb,.l-super-media,.d-hero,.pf-thumb,.gal,.mp-img{container-type:inline-size;}
.demo-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;
  font-family:var(--head);font-weight:800;font-size:34cqw;line-height:1;letter-spacing:0.02em;text-transform:uppercase;
  color:var(--orange);opacity:0.28;transform:rotate(-24deg);white-space:nowrap;user-select:none;}
.timer,.d-close,.d-back{z-index:2;}
.mp-img{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;}
.mp-img img{border-radius:0;}

/* ── Auto-translation note under Flash / partner / community text ── */
.tr-note{display:inline-flex;align-items:center;gap:6px;margin-top:14px;min-height:36px;padding:0;background:none;border:none;font-family:var(--body);font-size:12px;color:var(--grey-mid);cursor:pointer;text-align:left;}
.tr-note u{color:var(--orange);text-decoration:none;font-weight:600;}
.tr-note i{font-size:13px;}

/* ═════════════════════════════════════════════════════════════
   TABLET & DESKTOP (16 Oct 2026)
   Phones are unchanged — everything below only applies from 768px.
   768px+  : wider app (up to 1040px), rows become grids (no sideways
             scrolling with a mouse), 2-column lists, details open as a
             centred panel, sheets as centred dialogs.
   1100px+ : Flash lists switch to 3 columns of photo cards.
   ═════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  :root{--gutter:32px;}
  .app{max-width:1040px;}

  /* Section titles a step larger */
  .sec{padding-top:34px;}
  .sec-title{font-size:23px;}
  .sec-orange{padding-top:26px;}
  .sec-orange .o-band-2{padding-top:26px;}

  /* Home rows (Offers, Announcements, member photos): grid instead of sideways scroll */
  .hscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 18px;overflow:visible;scroll-snap-type:none;padding-bottom:24px;}
  .hscroll::after{display:none;}
  .card,.mp{width:auto;max-width:none;}
  /* "See all" tile not needed here — the orange section title links to the full list */
  .hscroll .card-more{display:none;}
  .card.card-tall .card-media{height:117px;}

  /* Video, map, counters */
  .feat-stage{aspect-ratio:2/1;}
  .sec-orange .card-title{font-size:21px;}
  .feat-cap{left:24px;right:24px;bottom:24px;}
  .feat-cap-title{font-size:28px;}
  .home-map{height:440px;}
  .stats{flex-direction:row;justify-content:space-around;padding:44px var(--gutter);}

  /* Community: two columns */
  .c-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;}
  .c-list > .sec-empty{grid-column:1/-1;}

  .footer{padding-top:36px;}

  /* ── Listing pages ── */
  .l-head{padding:22px var(--gutter);}
  .l-title{font-size:30px;}
  #lTop,#lRest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;padding:10px var(--gutter) 0;}
  #lTop > .spinner,#lTop > .sec-empty,#lRest > .sec-empty{grid-column:1/-1;}
  #lTop > .sec-empty{padding-left:0;}
  .l-row,.l-row:first-child{padding:14px 0;}
  /* Super Flash: photo/video left, text right, across the full row */
  .l-super{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px;align-items:center;padding:22px 0;}
  .l-super-info{margin-top:0;}
  .l-super .l-name{font-size:32px;-webkit-line-clamp:4;}
  .l-video{padding:20px 0 6px;}

  /* ── Detail view: centred panel over a dimmed page ── */
  .d-overlay{background:rgba(10,10,10,0.5);align-items:center;padding:24px;}
  .d-panel{max-width:720px;height:calc(100dvh - 48px);background:var(--white);border-radius:18px;overflow:hidden;}
  .d-hero{margin-top:var(--gutter);}
  .d-title{font-size:38px;}
  .d-desc{font-size:16px;}

  /* ── Share / calendar / filter sheets: centred dialog ── */
  .sheet-overlay{align-items:center;padding:24px;}
  .sheet{max-width:480px;border-radius:18px;padding-bottom:22px;}

  /* Full-screen map on the partner preview really is full screen */
  .pv-map{max-width:none;}

  .lb-nav.prev{left:24px;}.lb-nav.next{right:24px;}
}

@media (min-width:1100px){
  /* Flash lists: 3 columns of photo cards (Community keeps its compact rows) */
  #lTop,#lRest{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;}
  #lTop > .l-row:has(.l-thumb),#lRest > .l-row:has(.l-thumb){flex-direction:column;align-items:stretch;gap:12px;padding:16px 0;}
  .l-row .l-thumb{width:100%;max-width:none;}
  .l-row .l-name{font-size:21px;}
}

/* Hover feedback where there is a mouse */
@media (hover:hover) and (pointer:fine){
  .card-media img,.l-thumb img,.l-super-media img,.mp-img img{transition:transform .35s ease;}
  .card-media:hover img,.l-row:hover .l-thumb img,.l-super:hover .l-super-media img,.mp-img:hover img{transform:scale(1.03);}
  .c-row:hover .c-title,.l-row:hover .l-name,.card-title:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
}


/* ── tip Berlin concept demo (partner/tip.html, tip_community.html only) ── */
.tip-by{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--grey-dark);white-space:nowrap;}
.tip-logo{height:20px;width:auto;flex-shrink:0;display:block;}
.sec-head .tip-logo{align-self:center;}
.tip-bar{background:var(--grey-light);padding:0 0 12px;display:flex;flex-direction:column;gap:10px;}
.tip-search{display:flex;align-items:center;gap:10px;margin:0 var(--gutter);padding:0 14px;background:var(--white);border:1.5px solid var(--grey-border);border-radius:999px;}
.tip-search:focus-within{border-color:var(--black);}
.tip-search i{font-size:13px;color:var(--grey-mid);}
.tip-search input{flex:1;min-width:0;border:none;outline:none;background:none;padding:11px 0;font-size:15px;font-family:var(--body);color:var(--black);}
.hchips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hchips::-webkit-scrollbar{display:none;}
.hchips .chip{flex-shrink:0;white-space:nowrap;padding:7px 12px;font-size:12.5px;}
.tip-banner{font-size:11px;color:var(--grey-mid);padding:10px var(--gutter) 0;}
.tip-cat{font-size:10.5px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-dark);margin-bottom:2px;}
.tip-cat i{font-size:9px;color:var(--orange);}
.tip-kicker{display:flex;justify-content:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-dark);margin-bottom:6px;}
.tip-hl{color:var(--orange);}
.tip-credit-line{margin-top:22px;padding-top:14px;border-top:1px solid var(--grey-border);font-size:12px;color:var(--grey-dark);}
a.tip-btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;}
a.tip-btn i{font-size:12px;}

.tip-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.tip-ticket-icon{width:52px;height:52px;border-radius:50%;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:6px;}

/* tip Tageshighlights images (icons are Community Events only) */
.tip-img{width:62px;height:62px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--white);border:1px solid var(--grey-border);}
.tip-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tip-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--white);}
.tip-ph img{width:62%;height:auto;object-fit:contain;opacity:0.85;}
.l-thumb .tip-ph{border:1px solid var(--grey-border);border-radius:12px;}
.l-thumb .tip-ph img{width:50%;}
.d-hero .tip-ph{border:1px solid var(--grey-border);border-radius:var(--radius);}
.d-hero .tip-ph img{width:42%;cursor:default;}

/* tip Tageshighlights on Home: card row like the Announcements */
.tip-card .card-media{background:var(--white);border:1px solid var(--grey-border);}
.tip-card .card-media .tip-ph img{width:58%;}
.tip-star{font-size:9px;color:var(--orange);}