/* ===== Bierfest Bier-Quiz — Teaser + Overlay-App ===== */
/* Teaser-Section (auf der Detailseite, weit oben) */
#bierquiz{scroll-margin-top:90px}
.bfq-teaser-sec{padding:8px 0 0}
.bfq-teaser{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(245,201,64,.4);background:radial-gradient(120% 140% at 0% 0%,#1c160c 0%,#12100c 55%,#0d0b08 100%);padding:34px 30px;text-align:center}
.bfq-teaser-glow{position:absolute;inset:-40% -10% auto auto;width:60%;height:140%;background:radial-gradient(circle,rgba(245,201,64,.22),transparent 60%);pointer-events:none}
.bfq-teaser-emojis{font-size:30px;letter-spacing:6px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.bfq-teaser-eyebrow{display:inline-block;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--beer);background:rgba(245,201,64,.12);border:1px solid rgba(245,201,64,.4);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.bfq-teaser-h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,6vw,60px);line-height:.95;text-transform:uppercase;color:var(--cream);margin:0 0 12px}
.bfq-teaser-h2 em{font-style:normal;color:var(--beer)}
.bfq-teaser-p{font-family:'Oswald',sans-serif;font-size:15px;line-height:1.6;color:var(--cream);opacity:.82;max-width:540px;margin:0 auto 22px}
.bfq-teaser-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px;padding:17px 34px;border-radius:14px;border:none;cursor:pointer;background:var(--beer);color:var(--black);transition:transform .12s,box-shadow .12s;box-shadow:0 8px 24px rgba(245,201,64,.25)}
.bfq-teaser-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,201,64,.35)}
.bfq-teaser-btn:active{transform:scale(.98)}
.bfq-teaser-meta{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--cream);opacity:.5;margin-top:16px}
@media(max-width:600px){.bfq-teaser{padding:26px 20px}}

/* Overlay */
.bfq-overlay{position:fixed;inset:0;z-index:9998;background:#0a0a0a;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
.bfq-overlay.open{display:block;animation:bfqfade .25s ease both}
@keyframes bfqfade{from{opacity:0}to{opacity:1}}
.bfq-close{position:fixed;top:14px;right:14px;z-index:10000;width:42px;height:42px;border-radius:50%;border:1px solid #3a342c;background:rgba(20,17,13,.9);color:var(--cream);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.bfq-close:hover{border-color:var(--beer);color:var(--beer)}
.bfq-app{max-width:520px;margin:0 auto;min-height:100dvh}

/* ===== App-Screens (gescoped unter .bfq-app) ===== */
.bfq-app .screen{display:flex;flex-direction:column;justify-content:center;padding:28px 24px;min-height:100dvh;animation:bfqfo .3s ease both;will-change:opacity,transform}
@keyframes bfqfo{from{opacity:0}to{opacity:1}}
.bfq-app .screen.leaving{animation:bfqout .16s ease forwards}
@keyframes bfqout{to{opacity:0;transform:translateY(-16px)}}
@keyframes bfqfade2{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bfqin{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.bfq-app .opts .opt{animation:bfqin .42s cubic-bezier(.2,.85,.25,1) both}
.bfq-app .opts .opt:nth-child(1){animation-delay:.03s}
.bfq-app .opts .opt:nth-child(2){animation-delay:.08s}
.bfq-app .opts .opt:nth-child(3){animation-delay:.13s}
.bfq-app .opts .opt:nth-child(4){animation-delay:.18s}
.bfq-app .opts .opt:nth-child(5){animation-delay:.23s}
@keyframes bfqpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes bfqpick{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(.99)}}
.bfq-app .eyebrow{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--beer);font-weight:600;margin-bottom:14px}
.bfq-app h1.big{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,15vw,84px);line-height:.92;text-transform:uppercase;color:var(--cream)}
.bfq-app h1.big em{font-style:normal;color:var(--beer)}
.bfq-app .sub{font-family:'Oswald',sans-serif;font-size:16px;line-height:1.55;color:var(--cream);opacity:.82;margin-top:18px;max-width:420px}
.bfq-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px;padding:18px 26px;border-radius:14px;border:none;cursor:pointer;background:var(--beer);color:var(--black);transition:transform .12s;width:100%}
.bfq-app .btn:active{transform:scale(.97)}
.bfq-app .btn.ghost{background:transparent;color:var(--cream);border:2px solid #3a342c}
.bfq-app .btn.copied{background:#25D366;color:#fff}
.bfq-app .tag-hint{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);opacity:.5;margin-top:22px}
.bfq-app .qhead{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.bfq-app .dots{display:flex;gap:6px}
.bfq-app .dots i{width:8px;height:8px;border-radius:50%;background:#3a342c;transition:.3s}
.bfq-app .dots i.on{background:var(--beer);width:22px;border-radius:5px}
.bfq-app .qnum{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--beer);font-weight:600;margin-left:auto}
.bfq-app .qtitle{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,9vw,52px);line-height:1;text-transform:uppercase;color:var(--cream);margin-bottom:26px}
.bfq-app .opts{display:grid;gap:12px}
.bfq-app .opt{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;background:#1c1813;border:2px solid #3a342c;cursor:pointer;transition:transform .12s,border-color .2s,background .2s;text-align:left;color:var(--cream);font-family:'Oswald',sans-serif}
.bfq-app .opt:active{transform:scale(.98)}
.bfq-app .opt:hover{border-color:#5a5046;background:#241f18;transform:translateY(-1px)}
.bfq-app .opt:focus{outline:none}
.bfq-app .opt:focus-visible{outline:2px solid var(--beer);outline-offset:3px}
.bfq-app .opt.pick{border-color:var(--beer)!important;background:rgba(245,201,64,.16)!important;animation:bfqpick .26s ease both}
@media(hover:none){.bfq-app .opt:hover{border-color:#3a342c;background:#1c1813;transform:none}}
.bfq-app .opt .emo{font-size:30px;line-height:1;flex-shrink:0}
.bfq-app .opt .ot{font-size:18px;font-weight:600;color:var(--cream)}
.bfq-app .opt .od{font-size:13px;color:var(--cream);opacity:.62;margin-top:2px}
.bfq-app .compute{align-items:center;text-align:center}
.bfq-app .glass{font-size:80px;animation:bfqswirl 1.1s ease-in-out infinite}
@keyframes bfqswirl{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.bfq-app .result{padding-top:30px;padding-bottom:104px;justify-content:flex-start}
.bfq-app .shared-banner{background:#161310;border:1px solid #2a2622;border-radius:10px;padding:9px 14px;font-family:'Oswald',sans-serif;font-size:12px;color:var(--beer);text-align:center;margin-bottom:16px}
.bfq-app .persona-card{border-radius:24px;padding:30px 26px 26px;text-align:center;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);color:#fff;font-family:'Oswald',sans-serif;animation:bfqpop .5s cubic-bezier(.2,.9,.3,1.25) both}
.bfq-app .persona-card .pemo{animation:bfqpop .6s cubic-bezier(.2,.9,.3,1.4) .1s both}
.bfq-app .persona-card .pemo,.bfq-app .persona-card .pname,.bfq-app .persona-card .ptag,.bfq-app .persona-card .plabel{text-shadow:0 2px 10px rgba(0,0,0,.42)}
.bfq-app .persona-card .pemo{font-size:74px;line-height:1}
.bfq-app .persona-card .plabel{font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-top:12px;font-weight:600}
.bfq-app .persona-card .pname{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,12vw,64px);line-height:.95;text-transform:uppercase;margin:4px 0 10px}
.bfq-app .persona-card .ptag{font-size:15px;line-height:1.5;opacity:.92;max-width:360px;margin:0 auto}
.bfq-app .persona-card .pmeta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.bfq-app .persona-card .chip{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.32);color:#fff}
.bfq-app .rarity{display:flex;align-items:center;gap:14px;justify-content:center;background:#161310;border:1px solid #2a2622;border-radius:14px;padding:14px 18px;margin-top:14px}
.bfq-app .rarity .rpct{font-family:'Bebas Neue',sans-serif;font-size:42px;line-height:.85;color:var(--beer)}
.bfq-app .rarity .rtxt{font-family:'Oswald',sans-serif;font-size:13px;color:var(--cream);opacity:.82;text-align:left;line-height:1.35}
.bfq-app .rarity .rtxt b{color:var(--cream);font-weight:700;display:block;margin-top:3px;opacity:1}
.bfq-app .community{font-family:'Oswald',sans-serif;text-align:center;font-size:13px;color:var(--cream);opacity:.6;line-height:1.5;margin:12px auto 0;max-width:420px}
.bfq-app .sec-title{font-family:'Bebas Neue',sans-serif;font-size:30px;text-transform:uppercase;letter-spacing:.02em;color:var(--cream);margin:34px 0 4px}
.bfq-app .sec-sub{font-family:'Oswald',sans-serif;font-size:13px;color:var(--cream);opacity:.6;margin-bottom:16px;line-height:1.5}
.bfq-app .progress-wrap{background:#161310;border:1px solid #2a2622;border-radius:14px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:14px}
.bfq-app .progress-bar{flex:1;height:10px;border-radius:6px;background:#2a2622;overflow:hidden}
.bfq-app .progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--beer),#ffe08a);border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bfq-app .progress-num{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--beer);white-space:nowrap}
.bfq-app .route{display:grid;gap:12px}
.bfq-app .stop{display:flex;gap:14px;padding:16px;border-radius:16px;background:#161310;border:2px solid #2a2622;cursor:pointer;transition:border-color .2s,background .2s,transform .1s;position:relative}
.bfq-app .stop:active{transform:scale(.99)}
.bfq-app .stop .num{width:38px;height:38px;border-radius:50%;background:#2a2622;color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;flex-shrink:0;transition:.25s}
.bfq-app .stop .body{flex:1;min-width:0;padding-right:30px}
.bfq-app .stop .beer{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--cream);line-height:1.15}
.bfq-app .stop .brew{font-family:'Oswald',sans-serif;font-size:13px;color:var(--beer);font-weight:600;margin-top:1px}
.bfq-app .stop .note{font-family:'Oswald',sans-serif;font-size:13px;color:var(--cream);opacity:.72;line-height:1.45;margin-top:7px}
.bfq-app .stop .why{font-family:'Oswald',sans-serif;font-size:12px;color:var(--cream);opacity:.55;margin-top:6px;font-style:italic}
.bfq-app .stop .styles{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.bfq-app .stop .stag{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#241f1a;color:#cbb88a}
.bfq-app .stop .check{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;border:2px solid #4a4138;display:flex;align-items:center;justify-content:center;font-size:15px;color:#0a0a0a;transition:.2s}
.bfq-app .stop.done{border-color:rgba(245,201,64,.5);background:rgba(245,201,64,.07)}
.bfq-app .stop.done .num{background:var(--beer);color:#0a0a0a}
.bfq-app .stop.done .check{background:var(--beer);border-color:var(--beer)}
.bfq-app .celebrate{text-align:center;background:linear-gradient(135deg,rgba(245,201,64,.16),rgba(245,201,64,.04));border:2px solid rgba(245,201,64,.4);border-radius:18px;padding:22px;margin-top:18px;display:none}
.bfq-app .celebrate.show{display:block;animation:bfqfade2 .4s ease both}
.bfq-app .celebrate .ce{font-size:44px}
.bfq-app .celebrate .ct{font-family:'Bebas Neue',sans-serif;font-size:30px;text-transform:uppercase;color:var(--cream);margin:6px 0 4px}
.bfq-app .celebrate div{font-family:'Oswald',sans-serif;color:var(--cream)}
.bfq-app .block{background:#13110d;border:1px solid #2a2622;border-radius:18px;padding:20px;margin-top:24px}
.bfq-app .block h3{font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--beer);margin-bottom:6px}
.bfq-app .block p{font-family:'Oswald',sans-serif;font-size:13px;color:var(--cream);opacity:.72;line-height:1.5;margin-bottom:14px}
.bfq-app .save-grid{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.bfq-app .qr{width:104px;height:104px;border-radius:10px;background:#fff;padding:7px;flex-shrink:0}
.bfq-app .qr img{width:100%;height:100%;display:block}
.bfq-app .save-btns{display:grid;gap:10px}
.bfq-app .share-row{display:grid;gap:10px;margin-top:14px}
.bfq-app .share-row .btn-ig{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);color:#fff}
.bfq-app .share-row .btn-wa{background:#25D366;color:#fff}
.bfq-app .btn-ig{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);color:#fff}
.bfq-app .bfq-share-hero{font-size:18px;padding:21px;margin-top:20px;/* Dauer-Glow entfernt (Calm-Pass) */}
.bfq-app .bfq-share-hero-sub{font-family:'Oswald',sans-serif;text-align:center;font-size:13px;color:var(--cream);opacity:.6;margin-top:8px}
@keyframes bfqglow{0%,100%{box-shadow:0 8px 22px rgba(220,39,67,.28)}50%{box-shadow:0 10px 34px rgba(220,39,67,.55)}}
.bfq-app .bfq-share-main{font-size:18px;padding:20px;box-shadow:0 8px 24px rgba(220,39,67,.3)}
.bfq-app .bfq-share-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bfq-app .bfq-tt{background:#000;border:1px solid #2a2a2a;color:#fff;position:relative}
.bfq-app .bfq-tt:hover{border-color:#25F4EE}
/* Sticky Teilen-Leiste (immer sichtbar im Ergebnis) */
.bfq-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;padding:14px 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.82) 32%,#0a0a0a 70%);pointer-events:none}
.bfq-sticky.show{display:block;animation:bfqfo .3s ease both}
.bfq-sticky .inner{max-width:520px;margin:0 auto;pointer-events:auto}
.bfq-sticky .btn{width:100%;font-size:18px;padding:19px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:14px;cursor:pointer;background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);color:#fff;box-shadow:0 10px 34px rgba(220,39,67,.5)}
.bfq-sticky .btn:active{transform:scale(.98)}
.bfq-app .mail-note{font-family:'Oswald',sans-serif;font-size:11px;color:var(--cream);opacity:.55;margin-top:10px;line-height:1.5}
.bfq-app .foot{font-family:'Oswald',sans-serif;text-align:center;font-size:12px;color:var(--cream);opacity:.45;margin-top:30px;line-height:1.7;letter-spacing:.03em}
.bfq-app .restart{background:none;border:none;color:var(--beer);font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-top:16px;text-decoration:underline;width:100%}
.bfq-app .back{background:none;border:none;color:var(--cream);opacity:.5;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.06em;cursor:pointer;margin-top:18px;width:100%}
.bfq-conf{position:fixed;top:-10px;width:10px;height:14px;z-index:10001;pointer-events:none;border-radius:2px}

/* ===== Foto-Assets (Juni 2026) ===== */
.bfq-teaser.has-photo{background:linear-gradient(100deg,rgba(13,11,8,.93) 28%,rgba(13,11,8,.68) 65%,rgba(13,11,8,.88)),var(--bfq-tbg) center/cover}
.bfq-teaser.has-photo .bfq-teaser-emojis{display:none}
.bfq-teaser.has-photo .bfq-teaser-p,.bfq-teaser.has-photo .bfq-teaser-meta{text-shadow:0 1px 6px rgba(0,0,0,.85)}
.bfq-app .opt .oimg{flex:0 0 60px;width:60px;height:60px;border-radius:12px;overflow:hidden;border:1px solid rgba(245,201,64,.25)}
.bfq-app .opt .oimg img{width:100%;height:100%;object-fit:cover;display:block}
.bfq-app .opt.has-img{padding:12px 18px 12px 12px}
.bfq-app .screen.compute{position:relative;overflow:hidden}
.bfq-app .compute-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;pointer-events:none}
.bfq-app .compute .glass,.bfq-app .compute .qtitle,.bfq-app .compute .sub{position:relative;z-index:1}
.bfq-app .persona-card.has-photo{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.bfq-app .persona-card.has-photo .chip{background:rgba(0,0,0,.32);text-shadow:none}
.bfq-app .opt .oicon{flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:rgba(245,201,64,.07);border:1px solid rgba(245,201,64,.28);display:flex;align-items:center;justify-content:center}
.bfq-app .opt .oicon svg{width:34px;height:34px;display:block}
.bfq-app .persona-card .pemo svg{width:62px;height:62px;display:block;margin:0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
/* ===== CALM-PASS (12.06.2026) ===== */
.bfq-teaser.has-photo .bfq-teaser-glow{display:none}
@media(max-width:600px){
  .bfq-teaser{padding:22px 16px}
  .bfq-teaser-h2{font-size:clamp(28px,8vw,36px)}
  .bfq-teaser-p{font-size:13px;margin-bottom:16px}
  .bfq-teaser-meta{font-size:11px;margin-top:12px}
  .bfq-teaser-eyebrow{font-size:10px;padding:4px 10px;margin-bottom:10px}
}