/* Feel Good Werkstatt Quiz CSS - Isoliert für Elementor Popup */
:root {
  --fgq-blue:   #0F3DC3;
  --fgq-blue-l: #2B52D8;
  --fgq-yellow: #F6BE00;
  --fgq-yell-d: #D9AA00;
  --fgq-black:  #0D0D0D;
  --fgq-white:  #FFFFFF;
  --fgq-bg:     #FFFFFF;
  --fgq-bg2:    #F4F6FB;
  --fgq-gray:   #5A5A6A;
  --fgq-gray-l: #E2E6F0;
  --fgq-font:   'Jost', 'Helvetica Neue', Helvetica, sans-serif;
  --fgq-r: 14px;
  --fgq-sh: 0 2px 16px rgba(15,61,195,.08);
}

#qw {
font-family: var(--fgq-font);
background: var(--fgq-bg);
color: var(--fgq-black);
line-height: 1.5;
max-width: 480px;
margin: 0 auto;
height: auto;
/ --- NEU: Höhenbegrenzung und internes Scrollen --- /
max-height: 85vh; / Fallback für ältere Browser /
max-height: calc(100dvh - 40px); / Berücksichtigt mobile Adressleisten, lässt etwas Luft /
overflow-y: auto; / Aktiviert internes Scrollen /
overflow-x: hidden;
overscroll-behavior: contain; / Verhindert strikt, dass die Hintergrundseite mitscrollt! /
/ ------------------------------------------------ */
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
#qw * { box-sizing: border-box; }


/* HEADER */
#qw .qh { background:var(--fgq-white); border-bottom:2px solid var(--fgq-yellow); padding:14px 22px 12px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
#qw .qh-logo { font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--fgq-blue); }
#qw .qh-step  { font-size:11px; font-weight:600; color:var(--fgq-gray); letter-spacing:.5px; }
#qw .pbw { background:var(--fgq-gray-l); height:4px; position:sticky; top:49px; z-index:99; }
#qw .pbf { height:100%; background:var(--fgq-yellow); transition:width .5s cubic-bezier(.4,0,.2,1); }

/* SCREENS */
/* WICHTIG: display:none standardmäßig, nur sc.on bekommt display:flex */
#qw .sc { display:none; flex-direction:column; flex:1; padding:28px 20px 52px; animation:fu .35s ease both; background: var(--fgq-bg); }
#qw .sc.on { display:flex; }
@keyframes fu { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* COVER - Bugfix: Kein display:flex hier erzwingen, damit es verschwinden kann! /
/ Min-height angepasst, damit das erste Cover im Popup gut aussieht */
#qw #sc-cover { background:var(--fgq-blue); padding:0; min-height: 500px; height: 100%; }
#qw #sc-cover .cvb { padding:40px 24px 48px; flex:1; display:flex; flex-direction:column; justify-content: center; }

#qw .cv-tag { display:inline-block; background:var(--fgq-yellow); color:var(--fgq-black); font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; padding:6px 14px; border-radius:4px; margin-bottom:28px; align-self:flex-start; }
#qw .cv-h1 { font-size:clamp(38px,10vw,54px); font-weight:900; line-height:.97; color:var(--fgq-white); text-transform:uppercase; letter-spacing:-1.5px; margin:0; }
#qw .cv-h1 em { color:var(--fgq-yellow); font-style:normal; display:block; }
#qw .cv-sub { font-size:15px; color:rgba(255,255,255,.72); line-height:1.65; margin-top:18px; margin-bottom:32px; }
#qw .pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
#qw .pill { border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:7px 13px; font-size:11px; font-weight:600; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:6px; }
#qw .pill-dot { width:6px; height:6px; border-radius:50%; background:var(--fgq-yellow); flex-shrink:0; }

/* BUTTONS */
#qw .btn-p { display:block; width:100%; background:var(--fgq-yellow); color:var(--fgq-black); font-family:var(--fgq-font); font-size:15px; font-weight:800; letter-spacing:2px; text-transform:uppercase; text-align:center; padding:18px 20px; border:none; border-radius:var(--fgq-r); cursor:pointer; transition:all .2s; text-decoration:none; margin-top:auto; }
#qw .btn-p:hover { background:var(--fgq-yell-d); transform:translateY(-1px); }
#qw .btn-ghost { display:block; width:100%; background:transparent; color:rgba(255,255,255,.65); font-family:var(--fgq-font); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-align:center; padding:13px 20px; border:1px solid rgba(255,255,255,.25); border-radius:var(--fgq-r); cursor:pointer; margin-top:10px; text-decoration:none; }
#qw .btn-back { background:transparent; border:2px solid var(--fgq-gray-l); border-radius:var(--fgq-r); padding:13px 17px; font-family:var(--fgq-font); font-size:13px; font-weight:700; color:var(--fgq-gray); cursor:pointer; transition:all .2s; flex-shrink:0; }
#qw .btn-back:hover { border-color:var(--fgq-blue); color:var(--fgq-blue); }
#qw .btn-next { flex:1; background:var(--fgq-blue); color:var(--fgq-white); font-family:var(--fgq-font); font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:15px; border:none; border-radius:var(--fgq-r); cursor:pointer; transition:all .2s; opacity:.28; pointer-events:none; }
#qw .btn-next.on { opacity:1; pointer-events:all; }
#qw .btn-next.on:hover { background:var(--fgq-blue-l); }
#qw .nav { display:flex; gap:10px; margin-top:24px; align-items:center; }

/* TEXTS */
#qw .badge { display:inline-flex; align-items:center; gap:7px; background:var(--fgq-blue); color:var(--fgq-white); font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; padding:7px 13px; border-radius:6px; margin-bottom:16px; align-self:flex-start; }
#qw .shl { font-size:clamp(22px,6vw,30px); font-weight:900; line-height:1.08; text-transform:uppercase; letter-spacing:-.5px; margin-bottom:6px; margin-top:0; color:var(--fgq-black); }
#qw .shl span { color:var(--fgq-blue); }
#qw .ssub { font-size:13px; color:var(--fgq-gray); margin-bottom:22px; line-height:1.55; }

/* QUAL / GATE CARDS */
#qw .qg { display:flex; flex-direction:column; gap:9px; margin-bottom: 20px;}
#qw .qc { background:var(--fgq-white); border:2px solid var(--fgq-gray-l); border-radius:var(--fgq-r); padding:14px 16px; cursor:pointer; transition:all .2s; display:flex; align-items:flex-start; gap:12px; box-shadow:var(--fgq-sh); }
#qw .qc:hover { border-color:var(--fgq-yellow); background:#FFFDF0; }
#qw .qc.sel  { border-color:var(--fgq-blue); background:var(--fgq-bg2); }
#qw .qc-ico  { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 26px; flex-shrink:0; margin-top:-2px; line-height: 1;}
#qw .qc-lbl  { font-size:14px; font-weight:700; color:var(--fgq-black); margin-bottom:2px; }
#qw .qc-sub  { font-size:11px; color:var(--fgq-gray); line-height:1.45; }

/* EXIT */
#qw #sc-exit { background:var(--fgq-bg2); text-align:center; justify-content:center; }
#qw .exit-ico { font-size:52px; margin-bottom:18px; line-height:1; }
#qw .exit-hl  { font-size:22px; font-weight:900; text-transform:uppercase; margin-bottom:10px; color:var(--fgq-blue); }
#qw .exit-txt { font-size:14px; color:var(--fgq-gray); line-height:1.7; margin-bottom:28px; }

/* SCALE QUESTION CARDS */
#qw .qcard { background:var(--fgq-white); border-radius:var(--fgq-r); padding:18px 16px 16px; margin-bottom:13px; box-shadow:var(--fgq-sh); border:2px solid transparent; transition:border-color .2s; }
#qw .qcard.ans { border-color:var(--fgq-yellow); }
#qw .qnum { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:var(--fgq-yellow); color:var(--fgq-black); font-size:11px; font-weight:800; border-radius:50%; margin-bottom:10px; }
#qw .qtxt { font-size:14px; font-weight:600; line-height:1.45; margin-bottom:13px; color:var(--fgq-black); }
#qw .slabels { display:flex; justify-content:space-between; font-size:10px; font-weight:600; color:#aaa; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }
#qw .srow { display:flex; justify-content:space-between; gap:5px; }
#qw .sbtn { flex:1; aspect-ratio:1; max-width:52px; border:2px solid var(--fgq-gray-l); border-radius:50%; background:var(--fgq-white); font-family:var(--fgq-font); font-size:13px; font-weight:700; color:var(--fgq-gray); cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; padding:0; }
#qw .sbtn:hover { border-color:var(--fgq-blue); background:var(--fgq-bg2); color:var(--fgq-blue); transform:scale(1.08); }
#qw .sbtn.sel { background:var(--fgq-yellow); border-color:var(--fgq-yellow); color:var(--fgq-black); transform:scale(1.13); box-shadow:0 4px 14px rgba(245,197,24,.45); }

/ SELF CHOICE */
#qw .scg { display:flex; flex-direction:column; gap:9px; margin-top:4px; }
#qw .scb { background:var(--fgq-white); border:2px solid var(--fgq-gray-l); border-radius:var(--fgq-r); padding:14px 16px; font-family:var(--fgq-font); font-size:14px; font-weight:600; color:var(--fgq-black); cursor:pointer; transition:all .18s; text-align:left; line-height:1.4; box-shadow:var(--fgq-sh); white-space:normal; width:100%; }
#qw .scb:hover { border-color:var(--fgq-yellow); background:#FFFDF0; }
#qw .scb.sel  { border-color:var(--fgq-blue); background:var(--fgq-bg2); font-weight:700; }

/* PILLARS */
#qw .pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:20px 0; }
#qw .pcrd { background:var(--fgq-blue); border-radius:12px; padding:16px 8px; text-align:center; }
#qw .pico  { font-size:22px; margin-bottom:8px; line-height: 1;}
#qw .pname { font-size:10px; font-weight:800; color:var(--fgq-yellow); letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; }
#qw .psub  { font-size:9px; color:rgba(255,255,255,.55); }
#qw .notice { background:var(--fgq-bg2); border-left:4px solid var(--fgq-yellow); border-radius:0 10px 10px 0; padding:12px 14px; font-size:12px; color:var(--fgq-gray); line-height:1.6; margin-top:20px; }

/* RESULT */
#qw #sc-result { padding:0; }
#qw .res-hdr { background:var(--fgq-blue); padding:40px 24px 48px; text-align:center; }
#qw .res-hdr-lbl { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--fgq-yellow); margin-bottom:16px; }

/* Score circle */
#qw .score-wrap { display:flex; justify-content:center; margin:0 0 12px; position:relative; }
#qw .ssv { width:170px; height:170px; }
#qw .sctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#qw .snum { font-size:50px; font-weight:900; color:var(--fgq-white); line-height:1; letter-spacing:-2px; }
#qw .ssub2 { font-size:11px; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:1px; }
#qw .score-zone { display:inline-block; padding:6px 16px; border-radius:100px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-top:8px; }
#qw .zone-green  { background:rgba(46,204,113,.15); color:#2ECC71; }
#qw .zone-yellow { background:rgba(245,197,24,.15);  color:var(--fgq-yellow); }
#qw .zone-red    { background:rgba(231,76,60,.15);   color:#E74C3C; }

/* White result body */
#qw .res-body { background:var(--fgq-white); padding:28px 20px 52px; }
#qw .areas { margin:0 0 24px; }
#qw .arow  { margin-bottom:16px; }
#qw .ahead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
#qw .aname { font-size:12px; font-weight:700; color:var(--fgq-black); display:flex; align-items:center; gap:6px; }
#qw .apct  { font-size:13px; font-weight:800; color:var(--fgq-blue); }
#qw .bbar  { background:var(--fgq-gray-l); border-radius:100px; height:9px; overflow:hidden; }
#qw .bfill { height:100%; border-radius:100px; transition:width 1.1s cubic-bezier(.4,0,.2,1); }

/* Message box */
#qw .msgbox { background:var(--fgq-bg2); border-left:4px solid var(--fgq-blue); border-radius:0 var(--fgq-r) var(--fgq-r) 0; padding:18px; margin:0 0 24px; }
#qw .msgbox h3 { font-size:13px; font-weight:800; color:var(--fgq-blue); text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; margin-top:0; }
#qw .msgbox p  { font-size:13px; color:var(--fgq-gray); line-height:1.65; margin:0; }

/* Service cards */
#qw .svc-lbl { font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--fgq-gray); margin-bottom:11px; }
#qw .svc { background:var(--fgq-white); border-radius:var(--fgq-r); padding:16px 14px; margin-bottom:9px; display:flex; align-items:flex-start; gap:12px; position:relative; overflow:hidden; text-decoration:none; border:2px solid var(--fgq-gray-l); box-shadow:var(--fgq-sh); transition:border-color .2s; }
#qw .svc:hover { border-color:var(--fgq-yellow); }
#qw .svc-acc   { position:absolute; left:0; top:0; bottom:0; width:5px; }
#qw .svc-ico   { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; line-height: 1;}
#qw .svc-body  { flex:1; }
#qw .svc-title { font-size:14px; font-weight:800; color:var(--fgq-black); margin-bottom:3px; }
#qw .svc-desc  { font-size:11px; color:var(--fgq-gray); line-height:1.5; }
#qw .svc-arr   { font-size:20px; color:var(--fgq-gray-l); align-self:center; flex-shrink:0; }
#qw .svc.hl    { border-color:var(--fgq-blue); }
#qw .hlb { position:absolute; top:9px; right:9px; background:var(--fgq-yellow); color:var(--fgq-black); font-size:8px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; display:none; }

/* Disclaimer */
#qw .disc { background:var(--fgq-bg2); border-radius:10px; padding:14px 16px; font-size:11px; color:var(--fgq-gray); line-height:1.65; font-style:italic; margin-bottom:20px; }

/* CTA */
#qw .cta { display:block; background:var(--fgq-blue); color:var(--fgq-white); font-family:var(--fgq-font); font-size:15px; font-weight:900; letter-spacing:2px; text-transform:uppercase; text-align:center; padding:19px 20px; border:none; border-radius:var(--fgq-r); cursor:pointer; text-decoration:none; transition:all .2s; margin-bottom:9px; }
#qw .cta:hover { background:var(--fgq-blue-l); color: var(--fgq-white); }
#qw .cta-url { text-align:center; font-size:11px; color:var(--fgq-blue); opacity:.5; letter-spacing:.5px; margin-bottom:26px; }
#qw .restart-btn { width:100%; background:transparent; border:2px solid var(--fgq-gray-l); border-radius:var(--fgq-r); padding:13px; font-family:var(--fgq-font); font-size:13px; font-weight:600; color:var(--fgq-gray); cursor:pointer; margin-bottom:24px; transition:border-color .2s; }
#qw .restart-btn:hover { border-color:var(--fgq-blue); color:var(--fgq-blue); }
#qw .foot { text-align:center; font-size:10px; color:#aaa; line-height:1.9; padding-top:16px; border-top:1px solid var(--fgq-gray-l); }

/* Responsive adjustments */
@media(max-width:360px){ #qw .cv-h1{font-size:34px} #qw .pillars{gap:7px} }
@media(min-width:480px){ #qw{ border-radius:20px; box-shadow:0 20px 60px rgba(15,61,195,.18); min-height:auto; } }
```