:root{
    --papier:#F5F2EA; --papier-rand:#E4DFD2; --tinte:#221C18; --tinte2:#6E655B;
    --rot:#C8000A; --gold:#FFC53D; --gruen:#2E7D4F;
    /* Local/system-only stacks: slightly retro, but readable and corporate-network friendly. */
    --disp:"Arial Narrow","Trebuchet MS",Verdana,Arial,sans-serif;
    --body:Georgia,"Times New Roman",serif;
    --ui:"Trebuchet MS",Verdana,Arial,sans-serif;
    --sans:"Trebuchet MS",Verdana,Arial,sans-serif;
    --mono:"Courier New",Courier,ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:var(--ui);color:var(--tinte);overflow:hidden;background:#160c0e}

  #szene{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;z-index:0}
  .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(8,3,5,.6) 100%)}
  #effekte{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
  #blitz{position:fixed;inset:0;z-index:29;pointer-events:none;opacity:0;transition:opacity .25s}
  #blitz.gut{background:radial-gradient(ellipse at 50% 35%, rgba(120,255,170,.28), transparent 65%)}
  #blitz.boese{background:radial-gradient(ellipse at 50% 35%, rgba(255,40,40,.34), transparent 65%)}
  #blitz.an{opacity:1;transition:none}

  .buehne{position:relative;z-index:10;width:100%;max-width:430px;height:100%;max-height:900px;
    margin:0 auto;display:flex;flex-direction:column;padding:10px 14px}
  .buehne.beben{animation:beben .42s linear}
  @keyframes beben{0%,100%{transform:none}15%{transform:translate(-7px,3px) rotate(-.6deg)}
    35%{transform:translate(6px,-3px) rotate(.5deg)}55%{transform:translate(-4px,2px)}75%{transform:translate(3px,-2px)}}

  .dims{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 4px 2px}
  .dim{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
  .dim .punkt{position:absolute;top:-7px;width:7px;height:7px;border-radius:50%;background:#fff;
    box-shadow:0 0 6px rgba(255,255,255,.95);opacity:0;transition:opacity .12s,transform .12s;transform:scale(.4)}
  .dim .punkt.an{opacity:1;transform:scale(1)}
  .dim .punkt.gross{width:12px;height:12px;top:-10px}
  .dim .symbol{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:21px;
    background:rgba(10,6,8,.55);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(2px);transition:transform .2s}
  .dim.kritisch .symbol{border-color:#FFB3B3;animation:warnpuls 1.1s infinite}
  .dim.zucken .symbol{animation:zuck .45s ease}
  @keyframes warnpuls{0%,100%{box-shadow:0 0 6px rgba(255,90,90,.5)}50%{box-shadow:0 0 18px rgba(255,90,90,1)}}
  @keyframes zuck{30%{transform:scale(1.28)}60%{transform:scale(.92)}}
  .dim .pegel{width:44px;height:6px;border-radius:3px;background:rgba(0,0,0,.55);overflow:hidden;border:1px solid rgba(255,255,255,.22)}
  .dim .pegel i{display:block;height:100%;background:linear-gradient(90deg,#FFE9A8,#FFC53D);transition:width .5s ease}
  .dim .name{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 3px #000}
  .dim .pegel{display:none}
  .dim .lage{font-family:var(--mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.78);text-shadow:0 1px 3px #000;min-height:10px}
  .dim.kritisch .lage{color:#FFD0D0;font-weight:700}
  .lage-outcome{position:fixed;left:50%;top:104px;transform:translateX(-50%) translateY(-8px);z-index:28;width:min(88vw,390px);
    background:rgba(245,242,234,.96);color:var(--tinte);border:1px solid #D9D2C2;border-radius:10px;padding:10px 12px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:var(--body);font-size:12.5px;line-height:1.35;text-align:center;
    opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
  .lage-outcome.an{opacity:1;transform:translateX(-50%) translateY(0)}
  .confidence-row{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
  .confidence-row button{min-width:76px;border:2px solid var(--tinte);background:#fff;color:var(--tinte);font-family:var(--disp);font-weight:700;
    padding:10px 8px;border-radius:8px;cursor:pointer;box-shadow:0 3px 0 var(--tinte)}
  .confidence-row button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
  .study-note{font-family:var(--mono)!important;font-size:10px!important;color:var(--tinte2);border-top:1px solid var(--papier-rand);padding-top:10px;margin-top:10px}
  .seedbox{font-family:var(--mono);font-size:10px;color:var(--tinte2);background:#fff;border:1px solid var(--papier-rand);border-radius:6px;padding:7px 8px;margin:10px 0}
  .intake{margin:14px 0 12px;text-align:left;border-top:1px solid var(--papier-rand);padding-top:12px}
  .intake .intake-title{font-family:var(--disp);font-weight:700;font-size:13px;margin-bottom:8px;text-align:center}
  .intake label{display:block;font-size:11.5px;line-height:1.25;margin:8px 0 4px;color:var(--tinte2)}
  .intake select{width:100%;box-sizing:border-box;border:1px solid #BFB7A4;border-radius:7px;background:#fff;color:var(--tinte);padding:8px 9px;font-family:var(--body);font-size:12px}
  .intake .intake-hint{font-family:var(--mono);font-size:9px;line-height:1.35;color:var(--tinte2);margin-top:8px;text-align:center}
  .intake-error{font-family:var(--mono);font-size:10px;color:#9B1C1C;text-align:center;min-height:14px;margin:5px 0}

  .kalender{display:flex;justify-content:space-between;align-items:center;padding:8px 6px 4px;color:rgba(255,255,255,.92);text-shadow:0 1px 3px #000}
  .kalender .tag{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:14px;font-weight:700}
  .kalender .zeit{font-size:10.5px;color:rgba(255,255,255,.7)}
  #btn-ton{background:rgba(10,6,8,.55);border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;
    font-size:14px;width:32px;height:28px;cursor:pointer}

  .tisch{flex:1;position:relative;display:grid;place-items:center;perspective:1100px;min-height:0}
  .antwort{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:92%;text-align:center;z-index:5;
    color:#FFF;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;
    /* The option text crosses both the light card and the busy scene while
       dragging. A fine dark contour keeps it readable without turning it
       into another heavy UI panel. */
    -webkit-text-stroke:.55px rgba(0,0,0,.92);paint-order:stroke fill;
    text-shadow:0 1px 1px rgba(0,0,0,.95),0 3px 9px rgba(0,0,0,.92),0 0 3px rgba(0,0,0,.88);
    opacity:0;transition:opacity .1s;pointer-events:none}
  .stapel{position:absolute;width:min(76vw,292px);aspect-ratio:3/4.45;border-radius:14px;background:#E9E4D6;
    border:1px solid #CFC8B6;transform:rotate(2.4deg) translateY(7px);box-shadow:0 10px 24px rgba(0,0,0,.5)}
  .karte{
    width:min(76vw,292px);aspect-ratio:3/4.45;border-radius:14px;position:absolute;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(200,0,10,.06), transparent 55%),
      repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px),
      var(--papier);
    border:1px solid var(--papier-rand);
    box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 5px rgba(255,255,255,.55), inset 0 0 0 6px #D9D2C2;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:18px 17px 12px;cursor:grab;touch-action:none;user-select:none;z-index:3}
  .karte:active{cursor:grabbing}
  .karte.neu{animation:auflegen .34s ease-out}
  @keyframes auflegen{from{transform:translateY(30px) rotate(2deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
  .karte.weg{transition:transform .45s ease-in, opacity .4s;pointer-events:none}

  .portraet{width:100px;height:100px;border-radius:50%;display:grid;place-items:end center;overflow:hidden;
    border:3px solid var(--tinte);box-shadow:0 0 0 6px var(--p-ring,#E9C46A), 0 4px 10px rgba(0,0,0,.18);
    background:var(--p-bg,#FAE5B8);margin-bottom:9px}
  .portraet canvas{height:104%;width:auto;image-rendering:pixelated;display:block}
  .p-name{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em}
  .p-rolle{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte2);margin-bottom:9px}
  .trenner{width:46px;height:2px;background:var(--rot);margin:0 auto 9px;border-radius:1px}
  .spruch{font-family:var(--body);font-size:15px;line-height:1.42;font-style:italic;
    flex:1;display:grid;place-items:center;padding:0 2px}
  .karten-fuss{font-family:var(--mono);font-size:9.5px;color:var(--tinte2);letter-spacing:.08em;padding-top:7px}

  .hinweise{display:flex;justify-content:space-between;padding:7px 2px 6px;gap:10px}
  .hinweise button{flex:1;max-width:48%;background:rgba(10,6,8,.55);border:1px solid rgba(255,255,255,.3);
    border-radius:8px;color:rgba(255,255,255,.9);font-size:11px;line-height:1.25;padding:7px 9px;cursor:pointer;
    backdrop-filter:blur(2px);text-shadow:0 1px 2px #000}
  .hinweise button:active{background:rgba(200,0,10,.5)}
  .hinweise .pfeil{color:var(--gold);font-weight:700}

  .overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:40;padding:16px;
    background:radial-gradient(ellipse at 50% 30%, rgba(40,0,4,.5), rgba(12,0,2,.86))}
  .overlay.zart{background:radial-gradient(ellipse at 50% 78%, transparent 30%, rgba(12,0,2,.8) 100%)}
  .tafel{background:var(--papier);border-radius:14px;max-width:380px;width:100%;max-height:92%;overflow-y:auto;
    box-shadow:0 22px 50px rgba(0,0,0,.7), inset 0 0 0 5px rgba(255,255,255,.55), inset 0 0 0 6px #D9D2C2;
    padding:26px 24px;text-align:center}
  .tafel .ey{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--rot);font-weight:700}
  .tafel h1{font-family:var(--disp);font-size:34px;text-transform:uppercase;letter-spacing:.03em;line-height:1.02;margin:6px 0 2px}
  .tafel h2{font-family:var(--disp);font-size:24px;text-transform:uppercase;line-height:1.08;margin:6px 0}
  .tafel .unter{font-family:var(--body);font-style:italic;color:var(--tinte2);font-size:13.5px;margin-bottom:14px}
  .tafel p{font-family:var(--body);font-size:14px;line-height:1.5;margin-bottom:12px}
  .legende{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;text-align:left}
  .legende div{display:flex;align-items:center;gap:8px;font-size:12px}
  .legende i{font-style:normal;font-size:18px;width:30px;height:30px;display:grid;place-items:center;
    background:#fff;border-radius:50%;border:2px solid var(--tinte);flex:none}
  .knopf{display:inline-block;border:2px solid var(--tinte);background:var(--rot);color:#fff;
    font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;
    padding:11px 26px;border-radius:8px;cursor:pointer;box-shadow:0 4px 0 var(--tinte);margin-top:6px}
  .knopf:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinte)}
  .knopf.zweit{background:var(--papier);color:var(--tinte);font-size:12px;padding:8px 16px;box-shadow:0 3px 0 var(--tinte)}
  .knopf:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .ende-stempel{display:inline-block;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
    border:3px solid var(--rot);color:var(--rot);padding:4px 14px;border-radius:6px;transform:rotate(-4deg);
    font-size:13px;margin:4px 0 10px;animation:stempeln .4s ease-out}
  @keyframes stempeln{from{transform:rotate(-4deg) scale(2.4);opacity:0}to{transform:rotate(-4deg) scale(1);opacity:1}}
  .ende-stempel.gut{border-color:var(--gruen);color:var(--gruen)}
  .ueberlebt{font-family:var(--disp);font-size:40px;font-weight:700;line-height:1;margin:2px 0 0}
  .ueberlebt small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--tinte2);margin-top:3px}
  .statistik{font-family:var(--mono);font-size:11px;color:var(--tinte2);margin:10px 0 4px;letter-spacing:.04em}
  .galerie{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0;text-align:left}
  .g-eintrag{border:1.5px solid var(--papier-rand);border-radius:7px;padding:7px 9px;font-size:11px;background:#fff}
  .g-eintrag b{display:block;font-family:var(--disp);text-transform:uppercase;font-size:11.5px;letter-spacing:.04em}
  .g-eintrag.offen{border-color:var(--gold);background:#FFFBEE}
  .g-eintrag.gesperrt{color:#B6AF9F}
  .g-zaehler{font-family:var(--mono);font-size:11px;color:var(--tinte2)}



  .scenario-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 12px}
  .scenario-option{border:2px solid var(--tinte);background:#fff;color:var(--tinte);padding:12px 10px;text-align:left;font-family:var(--disp);cursor:pointer;box-shadow:0 3px 0 var(--tinte);min-height:112px}
  .scenario-option b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
  .scenario-option span{display:block;font-weight:800;font-size:15px;line-height:1.15;margin-bottom:6px}
  .scenario-option small{display:block;font-family:var(--text);font-size:11px;line-height:1.25;color:var(--tinte2)}
  .scenario-option.selected{background:#fff4cf;transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
  #btn-start:disabled{opacity:.45;cursor:not-allowed;transform:none}
  @media(max-width:560px){.scenario-picker{grid-template-columns:1fr}.scenario-option{min-height:auto}}
  .advisor-grid{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;text-align:left;margin:12px 0}
  .robot{width:68px;height:68px;border:3px solid var(--tinte);border-radius:14px;background:#DDEDEA;position:relative;box-shadow:0 4px 0 var(--tinte)}
  .robot:before{content:"";position:absolute;left:13px;right:13px;top:17px;height:26px;border:2px solid var(--tinte);border-radius:8px;background:#F5F2EA}
  .robot:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--rot);left:20px;top:26px;box-shadow:20px 0 0 #2C6E63}
  .robot-ant{position:absolute;left:31px;top:-12px;width:3px;height:14px;background:var(--tinte)}
  .robot-ant:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);left:-2.5px;top:-4px;border:1px solid var(--tinte)}
  .advisor-rec{font-family:var(--disp);font-size:17px;font-weight:700;line-height:1.2;margin:4px 0}
  .advisor-consensus{font-family:var(--mono);font-size:10px;color:var(--tinte2);line-height:1.35}
  .pilot-badge{display:inline-block;background:#FFF4C2;border:1px solid #B58B00;border-radius:999px;padding:2px 7px;font-family:var(--mono);font-size:9px;color:#6C5400;margin-bottom:4px}
  .review-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px}
  .review-choice{width:100%;border:2px solid var(--tinte);background:#fff;color:var(--tinte);font-family:var(--disp);font-weight:700;font-size:13px;line-height:1.2;padding:11px;border-radius:8px;cursor:pointer;box-shadow:0 3px 0 var(--tinte)}
  .review-choice.initial{outline:3px solid #F1C84B;outline-offset:1px}
  .review-choice:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media(max-height:660px){.portraet{width:80px;height:80px}.tafel h1{font-size:28px}}

/* v0.3 responsive start/scenario shell */
#ov-start{padding:clamp(8px,2vw,20px);overflow:auto;align-items:center}
#ov-start .start-tafel{width:min(760px,calc(100vw - 24px));max-width:760px;max-height:calc(var(--study-vh,100dvh) - 24px);padding:clamp(18px,3vw,28px);overflow:auto}
#ov-start .start-tafel h1{font-size:clamp(30px,5vw,44px)}
#ov-start .scenario-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#ov-start .scenario-option{min-height:126px}
#ov-start .legende{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#ov-start .legende div{align-items:flex-start;min-width:0}
#ov-start .legende span{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
  #ov-start .start-tafel{width:min(96vw,520px);max-height:calc(var(--study-vh,100dvh) - 16px);padding:18px 16px}
  #ov-start .scenario-picker{grid-template-columns:1fr 1fr;gap:8px}
  #ov-start .scenario-option{padding:10px 9px;min-height:108px}
  #ov-start .scenario-option span{font-size:14px}
  #ov-start .scenario-option small{font-size:10px}
  #ov-start .legende{grid-template-columns:repeat(2,1fr)}
  #ov-start .start-tafel p{font-size:13px;line-height:1.4}
}
@media(max-width:430px){
  .buehne{padding:6px 8px}
  .dims{gap:3px;padding-inline:0}
  .dim .symbol{width:38px;height:38px;font-size:18px}
  .dim .pegel{width:38px}
  .dim .name{font-size:8px;max-width:74px}
  #ov-start{padding:6px}
  #ov-start .start-tafel{width:calc(100vw - 12px);max-height:calc(var(--study-vh,100dvh) - 12px);border-radius:10px;padding:14px 12px}
  #ov-start .scenario-picker{grid-template-columns:1fr}
  #ov-start .scenario-option{min-height:auto}
  #ov-start .legende{grid-template-columns:1fr 1fr;gap:7px}
  #ov-start .legende i{width:27px;height:27px;font-size:16px}
  #ov-start .knopf{width:100%;padding-inline:12px}
}
@media(max-height:700px) and (min-width:600px){
  #ov-start .start-tafel{max-width:820px;padding:14px 20px}
  #ov-start .start-tafel h1{font-size:30px;margin-block:2px}
  #ov-start .start-tafel .unter{margin-bottom:7px}
  #ov-start .start-tafel>p{font-size:12px;line-height:1.35;margin-bottom:7px}
  #ov-start .scenario-picker{margin:8px 0;gap:8px}
  #ov-start .scenario-option{min-height:90px;padding:8px}
  #ov-start .legende{margin:8px 0}
  #ov-start #scenario-opening{margin-bottom:5px!important}
}

/* v0.4: responsive review/confidence overlays + advisor mascot + replay actions */
#ov-review,#ov-confidence,#ov-ende{
  padding:clamp(10px,3vw,22px);
  overflow:auto;
  align-items:center;
  justify-items:center;
  overscroll-behavior:contain;
}
.review-tafel,.confidence-tafel{
  width:min(92vw,430px);
  max-width:430px;
  max-height:calc(var(--study-vh,100dvh) - 24px);
  margin:auto;
  padding:clamp(18px,4vw,26px);
}
.confidence-tafel{max-width:390px}
.review-tafel h2,.confidence-tafel h2{font-size:clamp(20px,5vw,26px)}
.review-tafel p,.confidence-tafel p{font-size:clamp(13px,3.5vw,14px)}

.advisor-grid{grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;margin:12px 0 14px}
.advisor-mascot{width:108px;height:108px;position:relative;margin:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.12))}
.advisor-mascot svg{width:100%;height:100%;display:block}
.advisor-signal{position:absolute;right:-4px;bottom:5px;display:grid;place-items:center;min-width:31px;height:25px;padding:0 5px;border:2px solid var(--tinte);border-radius:7px;background:var(--rot);color:#fff;font-family:var(--mono);font-size:10px;font-weight:800;box-shadow:0 3px 0 var(--tinte);transform:rotate(-5deg)}
#review-advisor[style*="grid"] .advisor-signal{animation:advisorSignal 1.6s ease-in-out infinite}
@keyframes advisorSignal{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(-5deg) scale(1.07)}}
.advisor-rec{font-size:clamp(16px,4vw,19px)}
.advisor-consensus{font-size:10.5px}
.review-actions{gap:10px}
.review-choice{min-height:48px;font-size:clamp(12.5px,3.5vw,14px)}

.confidence-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;margin:16px auto 4px}
.confidence-row button{min-width:0;width:100%;min-height:48px}

.end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch;margin-top:10px}
.end-actions .knopf{margin-top:0;min-width:180px;flex:1 1 180px}
.replay-note{font-family:var(--mono)!important;font-size:10px!important;line-height:1.35!important;color:var(--tinte2);margin:12px auto 0!important;max-width:330px}

@media(max-width:520px){
  #ov-review,#ov-confidence,#ov-ende{padding:8px}
  .review-tafel,.confidence-tafel{width:calc(100vw - 16px);max-height:calc(var(--study-vh,100dvh) - 16px);border-radius:11px;padding:18px 14px}
  .advisor-grid{grid-template-columns:1fr;text-align:center;gap:7px;margin:8px 0 10px}
  .advisor-mascot{width:88px;height:88px}
  .advisor-signal{right:0;bottom:1px}
  .pilot-badge{margin-top:2px}
  .review-actions{margin-top:10px}
  .review-choice{padding:10px 9px}
  .confidence-row{gap:6px}
  .confidence-row button{padding:10px 4px;font-size:13px}
  .end-actions{display:grid;grid-template-columns:1fr;width:100%}
  .end-actions .knopf{width:100%;min-width:0}
}
@media(max-width:380px){
  .review-tafel,.confidence-tafel{padding:15px 11px}
  .advisor-mascot{width:78px;height:78px}
  .review-tafel .ey,.confidence-tafel .ey{font-size:9px}
  .confidence-row button{font-size:12px}
}
@media(max-height:620px) and (orientation:landscape){
  .review-tafel,.confidence-tafel{max-width:660px;width:min(94vw,660px);padding:13px 18px}
  .advisor-grid{grid-template-columns:86px minmax(0,1fr);gap:12px;margin:5px 0}
  .advisor-mascot{width:80px;height:80px}
  .review-actions{grid-template-columns:1fr 1fr;margin-top:7px}
  .confidence-row{max-width:390px;margin-top:9px}
}

/* v0.5: mobile-safe game stage and AI-only BCM-Clippy overlay */
html,body{height:100%;height:var(--study-vh,100dvh)}
.buehne{
  height:var(--study-vh,100dvh);
  max-height:none;
  min-height:0;
  padding-top:max(6px,env(safe-area-inset-top));
  padding-right:max(8px,env(safe-area-inset-right));
  padding-bottom:max(6px,env(safe-area-inset-bottom));
  padding-left:max(8px,env(safe-area-inset-left));
}
.tisch{min-height:0;overflow:visible}
/* Fit the physical decision card to the actual embedded/mobile viewport height,
   rather than assuming desktop-height space. */
.karte,.stapel{
  width:min(76vw,292px,calc((var(--study-vh,100dvh) - 190px) * .6742));
  min-width:210px;
}
.karte{padding:clamp(11px,2.2dvh,18px) clamp(11px,3vw,17px) clamp(9px,1.7dvh,12px)}
.portraet{width:clamp(72px,12dvh,100px);height:clamp(72px,12dvh,100px);margin-bottom:clamp(5px,1.1dvh,9px)}
.p-name{font-size:clamp(13px,2.25dvh,16px)}
.p-rolle{font-size:clamp(8.5px,1.45dvh,10.5px);margin-bottom:clamp(5px,1.1dvh,9px)}
.trenner{margin-bottom:clamp(5px,1.1dvh,9px)}
.spruch{font-size:clamp(12px,2.05dvh,15px);line-height:1.36;min-height:0}
.karten-fuss{font-size:clamp(7.5px,1.25dvh,9.5px);padding-top:clamp(4px,.8dvh,7px)}

/* Auto margins center short dialogs but gracefully anchor tall dialogs to the
   top of their scrollable overlay. This avoids the off-centre / clipped state
   seen in short mobile iframes. */
#ov-review,#ov-confidence,#ov-ende{
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overflow-x:hidden;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
#ov-review[style*="grid"],#ov-confidence[style*="grid"],#ov-ende[style*="grid"]{display:flex!important}
#ov-review .tafel,#ov-confidence .tafel,#ov-ende .tafel{
  margin:auto 0;
  max-height:none;
  flex:0 0 auto;
}
.review-tafel,.confidence-tafel{
  width:min(94vw,440px);
  padding:clamp(15px,3.3vw,24px);
}
#review-ey{color:var(--rot);font-weight:800}
.review-tafel h2{margin-top:4px}
.advisor-grid{
  border:1.5px solid #C9BDA8;
  border-radius:12px;
  background:linear-gradient(180deg,#FFFDF6,#F1EBDD);
  padding:12px;
}
.advisor-mascot{width:112px;height:112px}
.advisor-signal{background:var(--rot);min-width:34px}
.advisor-rec{color:#17252D}

@media(max-width:520px){
  .dims{padding-top:2px;padding-bottom:0}
  .kalender{padding-top:4px;padding-bottom:2px}
  .hinweise{padding-top:4px;padding-bottom:3px}
  .hinweise button{padding:6px 7px;font-size:10px}
  .review-tafel,.confidence-tafel{width:calc(100vw - 16px);padding:16px 13px}
  .review-tafel h2,.confidence-tafel h2{font-size:21px}
  .advisor-grid{grid-template-columns:1fr;gap:5px;text-align:center;padding:9px;margin:7px 0 9px}
  .advisor-mascot{width:84px;height:84px}
  .advisor-rec{font-size:16px}
  .review-tafel p,.confidence-tafel p{font-size:13px;line-height:1.38;margin-bottom:9px}
  .review-actions{gap:7px;margin-top:8px}
  .review-choice{min-height:44px;padding:8px;font-size:12px}
  .confidence-row{margin-top:11px}
}
@media(max-height:700px){
  .dims .symbol{width:36px;height:36px;font-size:17px}
  .dim .name{font-size:7.5px}
  .dim .lage{font-size:7.5px}
  .kalender .tag{font-size:12px}
  .karte,.stapel{width:min(70vw,260px,calc((var(--study-vh,100dvh) - 155px) * .6742));min-width:185px}
}
@media(max-height:570px){
  .dims{display:none}
  .karte,.stapel{width:min(68vw,235px,calc((var(--study-vh,100dvh) - 95px) * .6742));min-width:170px}
  .hinweise button{font-size:9px;padding:5px 6px}
  .advisor-mascot{width:68px;height:68px}
  .review-tafel,.confidence-tafel{padding:11px 10px}
  .review-tafel h2,.confidence-tafel h2{font-size:18px}
  .pilot-badge{font-size:8px}
}

/* v0.5: viewport-anchored modal states. Overlays are body-level siblings of the
   animated game stage so transforms on .buehne can never offset mobile dialogs. */
#ov-start,#ov-review,#ov-confidence,#ov-ende,#ov-galerie{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  z-index:80;
}
#ov-review,#ov-confidence,#ov-ende{
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  place-items:center;
}
.review-tafel,.confidence-tafel{
  width:min(430px,100%);
  max-width:100%;
  max-height:calc(100% - 2px);
  margin:0 auto;
  overflow:auto;
  overscroll-behavior:contain;
}
.confidence-tafel{width:min(390px,100%)}
body.modal-open .karte{opacity:0!important;pointer-events:none!important;transform:none!important;transition:none!important}
body.modal-open .antwort{opacity:0!important}
@media(max-width:520px){
  #ov-review,#ov-confidence,#ov-ende{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .review-tafel,.confidence-tafel{width:100%;max-width:100%;max-height:100%;margin:0;border-radius:11px;padding:16px 13px}
  .confidence-row{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .confidence-row button{min-width:0;max-width:none;width:100%}
}
@media(max-width:340px){
  .confidence-row{grid-template-columns:1fr;gap:7px}
  .confidence-row button{min-height:42px}
}

/* v0.5: viewport-anchored modal states. Overlays live outside the animated
   .buehne, preventing transformed ancestors from offsetting dialogs on mobile. */
#ov-start,#ov-review,#ov-confidence,#ov-ende,#ov-galerie{
  position:fixed;inset:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;z-index:80;
}
#ov-review,#ov-confidence,#ov-ende{
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  place-items:center;
}
.review-tafel,.confidence-tafel{width:min(430px,100%);max-width:100%;max-height:calc(100% - 2px);margin:0 auto;overflow:auto;overscroll-behavior:contain}
.confidence-tafel{width:min(390px,100%)}
body.modal-open .karte{opacity:0!important;pointer-events:none!important;transform:none!important;transition:none!important}
body.modal-open .antwort{opacity:0!important}
@media(max-width:520px){
  #ov-review,#ov-confidence,#ov-ende{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .review-tafel,.confidence-tafel{width:100%;max-width:100%;max-height:100%;margin:0;border-radius:11px;padding:16px 13px}
  .confidence-row{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .confidence-row button{min-width:0;max-width:none;width:100%}
}
@media(max-width:340px){.confidence-row{grid-template-columns:1fr;gap:7px}.confidence-row button{min-height:42px}}

/* v0.6: optional BCM-Clippy use + post-session measurement/debrief */
#ov-advisor-offer,#ov-survey,#ov-debrief{
  position:fixed;inset:0;width:100%;height:100%;z-index:82;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  overflow:auto;place-items:center;background:rgba(20,15,18,.72);
}
#ov-advisor-offer[style*="grid"],#ov-survey[style*="grid"],#ov-debrief[style*="grid"]{display:grid!important}
.advisor-offer-tafel,.survey-tafel,.debrief-tafel{width:min(680px,100%);max-width:100%;margin:auto;max-height:calc(100% - 2px);overflow:auto;overscroll-behavior:contain}
.advisor-offer-tafel{width:min(520px,100%)}
.advisor-offer-grid{display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;align-items:center;text-align:left}
.advisor-mascot-large{width:120px;height:120px}
.advisor-offer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.advisor-offer-actions .knopf{flex:1 1 190px;margin-top:0}
.survey-tafel{text-align:left}
.survey-tafel>h2,.survey-tafel>.ey,.survey-tafel>p{text-align:center}
.survey-tafel form{display:grid;gap:14px}
.survey-tafel fieldset{border:1.5px solid #C9BDA8;border-radius:10px;padding:12px;background:rgba(255,253,246,.7)}
.survey-tafel legend{font-family:var(--mono);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:0 6px}
.survey-tafel label{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1.25fr);gap:9px;align-items:center;font-family:var(--sans);font-size:12px;margin:8px 0}
.survey-tafel label select{grid-column:2/4;width:100%;min-height:38px;font-size:16px;padding:5px;background:#fffdf7;border:1.5px solid var(--tinte);border-radius:6px}
.survey-tafel input[type="range"]{width:100%;min-width:0;accent-color:var(--rot)}
.survey-tafel output{font-family:var(--mono);font-size:10px;min-width:28px;text-align:right}
.debrief-tafel{width:min(560px,100%)}
.debrief-tafel p{max-width:480px;margin:10px auto;font-size:14px;line-height:1.5}
@media(max-width:560px){
  #ov-advisor-offer,#ov-survey,#ov-debrief{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .advisor-offer-tafel,.survey-tafel,.debrief-tafel{width:100%;max-height:100%;border-radius:11px;padding:16px 13px}
  .advisor-offer-grid{grid-template-columns:1fr;text-align:center;gap:5px}
  .advisor-mascot-large{width:94px;height:94px}
  .advisor-offer-actions{display:grid;grid-template-columns:1fr;width:100%}
  .advisor-offer-actions .knopf{width:100%;min-width:0}
  .survey-tafel label{grid-template-columns:1fr auto;gap:5px 8px}
  .survey-tafel label input[type="range"],.survey-tafel label select{grid-column:1/3;width:100%}
  .survey-tafel fieldset{padding:9px}
}


/* v0.9 field-study protocol */
html{--study-vh:100dvh}
html,body{overscroll-behavior:none}
button,.knopf,.text-link,input,select{touch-action:manipulation}
.study-scenario-card{border:1px solid #c9bda8;border-radius:10px;background:#fffdf6;padding:11px 13px;margin:12px 0;text-align:left;display:grid;gap:3px}
.study-scenario-card b{font-size:15px}.study-scenario-card small{font-size:11px;color:var(--tinte2)}
.consent-box{border-top:1px solid #d8cebd;margin-top:12px;padding-top:12px;text-align:left}
.consent-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.4;cursor:pointer}.consent-check input{width:19px;height:19px;flex:0 0 auto;margin-top:0}
.text-link{border:0;background:none;color:#27567b;text-decoration:underline;padding:8px 0;font:inherit;font-size:11px;cursor:pointer}
.consent-info-tafel{width:min(620px,calc(100vw - 20px));max-height:calc(var(--study-vh,100dvh) - 20px);overflow:auto;text-align:left}
.consent-info-tafel p{font-size:12px;line-height:1.5}.consent-info-tafel .knopf{display:block;margin:16px auto 0}
.confidence-row button{display:flex;flex-direction:column;align-items:center;gap:2px}.confidence-row button small{font-size:8px;font-weight:500;opacity:.72}
.scale-note{font-size:10px!important;color:var(--tinte2);line-height:1.35!important}
#post-survey-form input[type="range"][data-answered="0"]{opacity:.58}
#post-survey-form input[type="range"].answered{opacity:1}
.survey-error{display:none;border:1px solid #b5483b;background:#fff1ef;color:#7a2019;border-radius:8px;padding:9px 10px;margin:8px 0;font-size:11px;line-height:1.35}
#ov-consent-info{position:fixed;inset:0;z-index:120;place-items:center;overflow:auto;padding:10px}

/* v0.10 field-study crossover / validation */
.confidence-row button{position:relative;gap:1px}
.confidence-arrow{font-family:Arial,sans-serif;font-size:27px;line-height:1;font-weight:900;margin-bottom:2px}
.confidence-row button b{font-size:15px}
.confidence-keyhint{text-align:center;font-size:9px!important;color:var(--tinte2);margin:7px 0 0!important}
.survey-missing{outline:2px solid rgba(181,72,59,.78);outline-offset:4px;border-radius:7px;background:rgba(255,241,239,.55)!important}
.survey-fieldset-missing{border-color:#b5483b!important;box-shadow:0 0 0 1px rgba(181,72,59,.22)}
.survey-missing select,.survey-missing input[type="range"]{accent-color:#b5483b}
.between-tafel{width:min(520px,calc(100vw - 24px))}
.final-debrief{margin:12px 0;padding:10px 12px;border:1px solid #d8cebd;border-radius:9px;background:#fffdf6;text-align:left}
.final-debrief p{font-size:10px;line-height:1.4;margin:5px 0}
.replay-panel{margin-top:12px;padding-top:10px;border-top:1px solid #d8cebd}
.replay-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.replay-actions .knopf{margin:0;min-width:145px}
@media(max-width:420px){.replay-actions{display:grid;grid-template-columns:1fr}.replay-actions .knopf{width:100%}}

/* v0.11: scenario identity + standardized scenario briefing */
body.scenario-bankrun{--scenario-accent:#C8000A;--scenario-glow:rgba(255,197,61,.28)}
body.scenario-cyber{--scenario-accent:#16798B;--scenario-glow:rgba(93,208,213,.28);background:#0d1820}
body.scenario-cyber .dim .symbol{background:rgba(6,28,35,.68);border-color:rgba(118,215,220,.42);box-shadow:0 0 14px rgba(48,148,160,.12)}
body.scenario-cyber #btn-ton,body.scenario-cyber .hinweise button{background:rgba(5,29,36,.70);border-color:rgba(118,215,220,.38)}
body.scenario-cyber .hinweise .pfeil{color:#76D7DC}
body.scenario-cyber .karte{background:radial-gradient(ellipse at 50% 0%,rgba(22,121,139,.09),transparent 55%),repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px),var(--papier)}
body.scenario-cyber .trenner{background:#16798B}
body.scenario-cyber .vignette{background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(3,13,18,.72) 100%)}
body.scenario-bankrun .vignette{background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(8,3,5,.6) 100%)}

#ov-scenario-briefing{position:fixed;inset:0;z-index:115;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto}
.scenario-briefing-overlay{background:radial-gradient(ellipse at 50% 35%,rgba(25,12,14,.58),rgba(7,5,7,.91))}
body.scenario-cyber .scenario-briefing-overlay{background:radial-gradient(ellipse at 50% 35%,rgba(17,74,84,.42),rgba(3,15,20,.94))}
.scenario-briefing-tafel{width:min(620px,100%);max-width:100%;max-height:calc(var(--study-vh,100dvh) - 20px);overflow:auto;text-align:left;border-top:6px solid var(--scenario-accent)}
.scenario-briefing-tafel h2{text-align:center;margin-bottom:4px}
.scenario-briefing-kicker{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--scenario-accent);font-weight:800}
.scenario-briefing-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:8px auto 14px;font-size:31px;background:color-mix(in srgb,var(--scenario-accent) 12%,white);border:2px solid var(--scenario-accent);box-shadow:0 0 0 7px var(--scenario-glow)}
.scenario-briefing-block{border:1px solid #d8cebd;border-radius:9px;background:#fffdf6;padding:10px 12px;margin:9px 0}
.scenario-briefing-block>b{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--scenario-accent);margin-bottom:4px}
.scenario-briefing-block p{margin:0;font-size:13px;line-height:1.45}
.scenario-briefing-note{font-size:11px!important;color:var(--tinte2);line-height:1.45!important;margin:12px 0!important;text-align:center}
.scenario-briefing-tafel .knopf{display:block;margin:12px auto 0}
body.scenario-cyber .scenario-briefing-block{border-color:#b9cbd0;background:#f5fbfb}
body.scenario-cyber .scenario-briefing-tafel{box-shadow:0 22px 50px rgba(0,0,0,.72),inset 0 0 0 5px rgba(255,255,255,.55),inset 0 0 0 6px #b9cbd0}

#btn-finish-study{margin-top:14px}
@media(max-width:520px){.scenario-briefing-tafel{width:100%;max-height:100%;padding:17px 14px}.scenario-briefing-icon{width:54px;height:54px;font-size:26px}.scenario-briefing-block{padding:9px 10px}.scenario-briefing-block p{font-size:12.5px}}

/* v0.11.2: participant-facing language and visual polish.
   Keep the actual decision cards and their interaction mechanics unchanged;
   soften only the study framing so it reads like a deliberately designed
   research experience rather than a technical configuration surface. */
.tafel h2{text-transform:none;letter-spacing:-.01em;line-height:1.15}
.tafel .ey{letter-spacing:.13em}
.knopf{text-transform:none;letter-spacing:.02em;border-radius:10px}
.knopf.zweit{text-transform:none;letter-spacing:.01em}
.study-scenario-card{background:rgba(255,253,246,.82);border-color:#d6ccba;padding:13px 15px}
.study-scenario-card b{font-family:var(--disp);font-size:17px;letter-spacing:.01em}
.study-scenario-card small{font-family:var(--ui);font-size:12px;line-height:1.4}
.consent-box{margin-top:15px;padding-top:14px}
.consent-check{font-family:var(--ui);font-size:12.5px;line-height:1.45}
.text-link{font-family:var(--ui);font-weight:650}
.consent-info-tafel h3{font-family:var(--disp);font-size:16px;margin:17px 0 5px;text-transform:none}
.consent-info-tafel p{font-family:var(--ui);font-size:13px;line-height:1.55;color:#332c27}
.scenario-briefing-block>b{text-transform:none;letter-spacing:.02em;font-size:12px}
.scenario-briefing-block p,.scenario-briefing-note{font-family:var(--ui)}
.survey-tafel legend{text-transform:none;letter-spacing:.03em;font-size:11px}
.survey-tafel .scale-note{font-family:var(--ui);font-size:11.5px;line-height:1.45;color:var(--tinte2)}
.advisor-offer-tafel p,.review-tafel p,.between-tafel p,.debrief-tafel p{font-family:var(--ui)}

/* v0.11.11: mobile-friendly survey scales */
.survey-scale{margin:14px 0;padding:10px;border:1px solid rgba(34,28,24,.14);border-radius:9px;background:rgba(255,255,255,.42)}
.survey-question{font-family:var(--sans);font-size:12.5px;line-height:1.35;margin-bottom:8px;font-weight:650}
.scale-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.scale-choice{display:block!important;margin:0!important;min-width:0!important}
.scale-choice input{position:absolute;opacity:0;pointer-events:none}
.scale-choice span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1.5px solid var(--tinte);border-radius:7px;background:#fffdf7;font-family:var(--mono);font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 rgba(34,28,24,.22)}
.scale-choice input:checked+span{background:var(--tinte);color:#fff;box-shadow:none;transform:translateY(1px)}
.scale-choice input:focus-visible+span{outline:3px solid rgba(39,86,123,.32);outline-offset:2px}
.scale-anchors{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:6px;font-size:9px;color:var(--tinte2);line-height:1.2}
.scale-anchors span:nth-child(2){text-align:center}.scale-anchors span:last-child{text-align:right}
.survey-scale.survey-missing{outline:2px solid rgba(181,72,59,.78);outline-offset:2px;background:rgba(255,241,239,.6)!important}
@media(max-width:420px){.survey-scale{padding:9px 7px}.scale-buttons{gap:5px}.scale-choice span{min-height:46px;font-size:13px}.scale-anchors{font-size:8.5px}}

/* v0.11.12: clickable crisis dimensions and inline Clippy recommendation */
.dim{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;min-width:0}
.dim:focus-visible .symbol{outline:3px solid #fff;outline-offset:3px}
.dim:hover .symbol{transform:translateY(-1px) scale(1.03)}
.top-actions{display:flex;align-items:center;gap:6px}
#btn-clippy-recap{background:rgba(55,41,7,.82);border:1px solid rgba(255,213,77,.9);border-radius:6px;color:#fff;font-size:15px;width:32px;height:28px;cursor:pointer;box-shadow:0 0 0 0 rgba(255,197,61,.5)}
#btn-clippy-recap.clippy-live{animation:clippyTopPulse 1.8s ease-in-out infinite}
@keyframes clippyTopPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,197,61,0)}50%{box-shadow:0 0 0 5px rgba(255,197,61,.22)}}
.hinweise button{position:relative;overflow:visible}
.hinweise button.clippy-recommended{border-color:#FFD54D!important;box-shadow:0 0 0 3px rgba(255,213,77,.75),0 0 18px rgba(255,197,61,.55)!important;animation:clippyChoicePulse 1.45s ease-in-out infinite}
@keyframes clippyChoicePulse{0%,100%{box-shadow:0 0 0 2px rgba(255,213,77,.62),0 0 10px rgba(255,197,61,.34)}50%{box-shadow:0 0 0 5px rgba(255,213,77,.88),0 0 22px rgba(255,197,61,.7)}}
.clippy-choice-badge{position:absolute;top:-27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#FFD54D;color:#21190b;border:2px solid #2c2418;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:800;line-height:1;white-space:nowrap;z-index:6;text-transform:none;letter-spacing:0}
.clippy-choice-badge .head{font-size:13px}
.advisor-rationale{margin-top:9px;padding:9px 10px;border-left:3px solid #FFC53D;background:#fff7d6;border-radius:4px;font-family:var(--body);font-size:12px;line-height:1.42;color:var(--tinte)}
.dimension-info-tafel{width:min(92vw,520px);max-height:min(88vh,720px);overflow:auto;text-align:left}
.dimension-info-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dimension-info-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:23px;background:#171215;color:#fff;border:1px solid #6d655d;flex:0 0 auto}
.dimension-current{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 10px;margin:8px 0 12px;background:#fff;border:1px solid var(--papier-rand);border-radius:8px;font-size:12px}
.dimension-current b{font-family:var(--disp);font-size:15px;text-transform:none}
.dimension-scale{position:relative;display:grid;grid-template-columns:25fr 25fr 22fr 16fr 12fr;height:42px;border:1px solid #4d453e;border-radius:8px;overflow:visible;margin:8px 0 24px;background:#fff}
.dimension-band{display:flex;align-items:flex-end;justify-content:center;padding:0 2px 5px;border-right:1px solid rgba(34,28,24,.22);font-size:8.5px;line-height:1;text-align:center;color:#211c18}
.dimension-band:last-of-type{border-right:0}
.band-low{background:#d9eadf}.band-raised{background:#efe8b9}.band-high{background:#f2d29b}.band-very-high{background:#efae8f}.band-critical{background:#e58f8f;font-weight:700}
.dimension-marker{position:absolute;top:-7px;bottom:-7px;width:0;border-left:3px solid #1f1a16;left:50%;transition:left .2s ease;pointer-events:none}
.dimension-marker i{position:absolute;left:-7px;top:-7px;width:12px;height:12px;border-radius:50%;background:#1f1a16;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.dimension-scale-note{font-size:10.5px;line-height:1.4;color:var(--tinte2);margin:-9px 0 13px}
.dimension-explain{padding:10px 0;border-top:1px solid var(--papier-rand)}
.dimension-explain h3{font-family:var(--disp);font-size:12px;margin-bottom:5px}
.dimension-explain p{font-family:var(--body);font-size:12px;line-height:1.48;color:var(--tinte)}
.dimension-disclaimer{margin-top:8px;background:#f1eee6;border:1px solid #d7d0c2;border-radius:7px;padding:8px 9px;font-size:10.5px;line-height:1.4;color:var(--tinte2)}
.dimension-source{margin:8px 0 14px;font-size:9.5px;line-height:1.4;color:var(--tinte2)}
@media(max-width:480px){
  .dimension-info-tafel{width:94vw;max-height:86vh}
  .dimension-band{font-size:7.5px}
  .clippy-choice-badge{top:-25px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.hinweise button.clippy-recommended,#btn-clippy-recap.clippy-live{animation:none}}

/* v0.11.12 completion: readable dimension scale and unobtrusive help cue */
.dim .symbol{position:relative;transition:transform .16s ease,box-shadow .16s ease}
.dim .symbol::after{content:'i';position:absolute;right:-4px;bottom:-3px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:rgba(18,14,16,.88);border:1px solid rgba(255,255,255,.72);color:#fff;font:700 9px/1 Arial,sans-serif;text-transform:none;letter-spacing:0}
.dimension-band.band-low{background:#dcebd8}
.dimension-band.band-raised{background:#eef0c8}
.dimension-band.band-high{background:#f5dda4}
.dimension-band.band-very-high{background:#efb47e}
.dimension-band.band-critical{background:#e99a94;font-weight:700}
.dimension-scale::before{content:'Belastung';position:absolute;left:0;top:-18px;font:700 9px/1 var(--ui);color:var(--tinte2)}
.dimension-scale::after{content:'kritischer';position:absolute;right:0;top:-18px;font:700 9px/1 var(--ui);color:var(--tinte2)}
#ov-review .review-tafel{width:min(92vw,560px)}
#btn-clippy-recap{place-items:center}

/* v0.11.13: compact survey, roomier dimension scale, initial Clippy window */
#ov-survey{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.survey-tafel{width:min(760px,96vw);max-height:calc(100% - 18px);padding:17px 18px}
.survey-tafel form{gap:9px}
.survey-tafel fieldset{padding:9px 10px}
.survey-tafel>p{margin:4px 0 9px}
.survey-tafel .scale-note{margin:3px 0 7px;font-size:10.5px}
.survey-scale{display:grid;grid-template-columns:minmax(205px,1.25fr) minmax(260px,1fr);grid-template-areas:"question buttons" "question anchors";column-gap:12px;row-gap:3px;align-items:center;margin:6px 0;padding:7px 8px}
.survey-question{grid-area:question;margin:0;font-size:11.5px;line-height:1.28}
.scale-buttons{grid-area:buttons;gap:5px}
.scale-choice span{min-height:34px;border-radius:6px;font-size:12px;box-shadow:0 1px 0 rgba(34,28,24,.2)}
.scale-anchors{grid-area:anchors;margin-top:2px;font-size:8px}
.dimension-current{margin:8px 0 25px}
.dimension-scale{height:32px;margin:18px 0 18px}
.dimension-band{padding-bottom:4px;font-size:7.5px}
.dimension-scale::before,.dimension-scale::after{top:-17px;font-size:8.5px}
.dimension-explain{padding:8px 0}
.dimension-explain p{font-size:11.5px;line-height:1.44}
.dimension-source{margin:7px 0 12px;font-size:9px}
.dimension-disclaimer,.dimension-scale-note{display:none!important}
@media(max-width:620px){
  .survey-tafel{width:100%;max-height:100%;padding:13px 10px}
  .survey-scale{grid-template-columns:1fr;grid-template-areas:"question" "buttons" "anchors";gap:4px;margin:6px 0;padding:7px}
  .survey-question{font-size:11px}
  .scale-choice span{min-height:38px}
  .dimension-current{margin-bottom:27px}
  .dimension-scale{height:30px;margin-top:20px}
}
.review-tafel{position:relative}
.modal-x{position:absolute;top:9px;right:10px;width:34px;height:34px;border:1px solid rgba(34,28,24,.35);border-radius:50%;background:rgba(255,253,247,.92);color:var(--tinte);font:700 22px/1 var(--sans);cursor:pointer;display:grid;place-items:center;z-index:4}
.modal-x:hover{background:#fff}
.modal-x:focus-visible{outline:3px solid rgba(39,86,123,.32);outline-offset:2px}

/* v0.11.14: distinct outcome feedback and visible direct dimension effects */
#blitz.neutral{background:radial-gradient(ellipse at 50% 35%,rgba(255,197,61,.20),transparent 66%)}
.dim.impact-better .symbol{border-color:#7CE8A4;box-shadow:0 0 18px rgba(124,232,164,.72)}
.dim.impact-worse .symbol{border-color:#FF7878;box-shadow:0 0 18px rgba(255,90,90,.72)}
.dim-impact{position:absolute;left:50%;top:calc(100% + 2px);transform:translate(-50%,-4px);z-index:12;white-space:nowrap;
  padding:2px 5px;border-radius:999px;font:700 7px/1.2 var(--ui);letter-spacing:.02em;text-transform:none;
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .18s ease;box-shadow:0 2px 7px rgba(0,0,0,.28)}
.dim-impact.better{background:#DDF5E5;color:#145C32;border:1px solid rgba(20,92,50,.45)}
.dim-impact.worse{background:#FFE2E2;color:#8A1616;border:1px solid rgba(138,22,22,.42)}
.dim-impact.an{opacity:1;transform:translate(-50%,2px)}
@media(max-width:420px){.dim-impact{font-size:6.5px;padding:2px 4px}}


/* v0.11.15: unmistakable per-dimension feedback and a non-empty swipe transition */
.dim.impact-better,.dim.impact-worse{border-radius:12px;isolation:isolate}
.dim.impact-better::before,.dim.impact-worse::before{
  content:'';position:absolute;inset:-5px -4px -7px;border-radius:12px;pointer-events:none;z-index:-1;
  animation:dimImpactHalo 2.35s ease-out both;
}
.dim.impact-better::before{background:rgba(66,220,122,.22);box-shadow:0 0 0 2px rgba(103,232,149,.82),0 0 25px rgba(65,230,125,.78)}
.dim.impact-worse::before{background:rgba(255,70,70,.24);box-shadow:0 0 0 2px rgba(255,86,86,.88),0 0 25px rgba(255,65,65,.82)}
.dim.impact-better .symbol{animation:dimGoodPulse 2.35s ease-out!important;border-color:#75F0A4!important;background:rgba(18,100,51,.72)!important}
.dim.impact-worse .symbol{animation:dimBadPulse 2.35s ease-out!important;border-color:#FF6A6A!important;background:rgba(122,20,24,.76)!important}
.dim.impact-better .name,.dim.impact-better .lage{color:#C8FFD9!important;text-shadow:0 0 8px rgba(67,245,128,.9),0 1px 3px #000}
.dim.impact-worse .name,.dim.impact-worse .lage{color:#FFD0D0!important;text-shadow:0 0 8px rgba(255,74,74,.95),0 1px 3px #000}
@keyframes dimImpactHalo{0%{opacity:0;transform:scale(.82)}18%{opacity:1;transform:scale(1.08)}42%{opacity:.95;transform:scale(.98)}68%{opacity:.9;transform:scale(1.04)}100%{opacity:0;transform:scale(1.12)}}
@keyframes dimGoodPulse{0%{transform:scale(.88)}22%{transform:scale(1.24);box-shadow:0 0 30px rgba(80,255,145,.95)}48%{transform:scale(.98)}72%{transform:scale(1.12);box-shadow:0 0 22px rgba(80,255,145,.75)}100%{transform:scale(1)}}
@keyframes dimBadPulse{0%{transform:scale(.88)}22%{transform:scale(1.24);box-shadow:0 0 30px rgba(255,72,72,.98)}48%{transform:scale(.98)}72%{transform:scale(1.12);box-shadow:0 0 22px rgba(255,72,72,.78)}100%{transform:scale(1)}}
.dim-impact-particle{
  position:absolute;left:50%;top:31px;width:6px;height:6px;border-radius:1px;pointer-events:none;z-index:18;opacity:0;
  transform:translate(-50%,-50%);animation:dimPixelBurst 1.75s cubic-bezier(.15,.7,.28,1) var(--delay,0ms) forwards;
  box-shadow:0 0 7px currentColor;
}
.dim-impact-particle.better{background:#68F096;color:#68F096}
.dim-impact-particle.worse{background:#FF5656;color:#FF5656}
@keyframes dimPixelBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  14%{opacity:1}
  72%{opacity:.95;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35)}
}

.card-transition-placeholder{
  position:absolute;z-index:2;width:min(70vw,268px);aspect-ratio:3/4.45;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background:linear-gradient(180deg,rgba(237,233,222,.96),rgba(218,212,197,.96));
  border:1px solid #CFC8B6;box-shadow:0 12px 30px rgba(0,0,0,.38),inset 0 0 0 5px rgba(255,255,255,.38);
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
}
.card-transition-placeholder.an{animation:transitionCardIn .32s ease-out forwards}
.transition-pixel-card{width:76px;height:62px;position:relative;border:3px solid #514942;background:#F7F3E9;image-rendering:pixelated;box-shadow:7px 7px 0 rgba(67,58,52,.15)}
.transition-pixel-card span{position:absolute;left:13px;height:5px;background:#736A60;animation:transitionScan .75s ease-in-out infinite alternate}
.transition-pixel-card span:nth-child(1){top:14px;width:46px}
.transition-pixel-card span:nth-child(2){top:27px;width:33px;animation-delay:.12s}
.transition-pixel-card span:nth-child(3){top:40px;width:42px;animation-delay:.24s}
.transition-pixel-card i{position:absolute;width:9px;height:9px;right:8px;top:25px;background:#C8000A;animation:transitionBlink .56s steps(2,end) infinite}
.transition-copy{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#665E56}
@keyframes transitionCardIn{0%{opacity:0;transform:translateY(14px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes transitionScan{from{opacity:.42;transform:translateX(-3px)}to{opacity:1;transform:translateX(3px)}}
@keyframes transitionBlink{0%,45%{opacity:.25}46%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .dim.impact-better::before,.dim.impact-worse::before,.dim.impact-better .symbol,.dim.impact-worse .symbol,.dim-impact-particle,
  .card-transition-placeholder.an,.transition-pixel-card span,.transition-pixel-card i{animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* v0.11.16: clearly visible red/green border on affected dimensions */
.dim.impact-better,
.dim.impact-worse{
  z-index:20;
  border-radius:12px;
  /* outline does not change the layout and therefore cannot move the four metrics */
  outline-style:solid;
  outline-width:4px;
  outline-offset:3px;
}
.dim.impact-better{
  outline-color:#67F09A;
  background:rgba(54,220,112,.16)!important;
  box-shadow:0 0 0 2px rgba(103,240,154,.30),0 0 24px rgba(70,238,132,.72),inset 0 0 18px rgba(70,238,132,.16)!important;
  animation:dimensionPanelGood 2.55s ease-out both;
}
.dim.impact-worse{
  outline-color:#FF6262;
  background:rgba(255,66,66,.17)!important;
  box-shadow:0 0 0 2px rgba(255,98,98,.34),0 0 24px rgba(255,67,67,.76),inset 0 0 18px rgba(255,67,67,.17)!important;
  animation:dimensionPanelBad 2.55s ease-out both;
}
.dim.impact-better .symbol,
.dim.impact-worse .symbol{
  border-width:3px!important;
}
.dim.impact-better .symbol{border-color:#67F09A!important;box-shadow:0 0 0 2px rgba(103,240,154,.25),0 0 22px rgba(70,238,132,.88)!important}
.dim.impact-worse .symbol{border-color:#FF6262!important;box-shadow:0 0 0 2px rgba(255,98,98,.25),0 0 22px rgba(255,67,67,.9)!important}
@keyframes dimensionPanelGood{
  0%{outline-color:rgba(103,240,154,0);background:rgba(54,220,112,0);filter:none}
  12%{outline-color:#67F09A;background:rgba(54,220,112,.28);filter:brightness(1.22)}
  30%{outline-color:#67F09A;background:rgba(54,220,112,.12);filter:brightness(1)}
  47%{outline-color:#A4FFC2;background:rgba(54,220,112,.25);filter:brightness(1.16)}
  66%{outline-color:#67F09A;background:rgba(54,220,112,.10);filter:brightness(1)}
  82%{outline-color:#8CFFB3;background:rgba(54,220,112,.20)}
  100%{outline-color:rgba(103,240,154,0);background:rgba(54,220,112,0);box-shadow:none;filter:none}
}
@keyframes dimensionPanelBad{
  0%{outline-color:rgba(255,98,98,0);background:rgba(255,66,66,0);filter:none}
  12%{outline-color:#FF6262;background:rgba(255,66,66,.30);filter:brightness(1.18)}
  30%{outline-color:#FF6262;background:rgba(255,66,66,.12);filter:brightness(1)}
  47%{outline-color:#FF9B9B;background:rgba(255,66,66,.27);filter:brightness(1.13)}
  66%{outline-color:#FF6262;background:rgba(255,66,66,.11);filter:brightness(1)}
  82%{outline-color:#FF8585;background:rgba(255,66,66,.22)}
  100%{outline-color:rgba(255,98,98,0);background:rgba(255,66,66,0);box-shadow:none;filter:none}
}
@media(max-width:420px){
  .dim.impact-better,.dim.impact-worse{outline-width:3px;outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){
  .dim.impact-better,.dim.impact-worse{animation:none!important;outline-width:3px;outline-style:solid}
}


/* v0.11.18: quieter dimension feedback. Keep particles and the inner icon ring,
   but remove the large panel outline/glow that dominated the status bar. */
.dim.impact-better,
.dim.impact-worse{
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
  filter:none!important;
}
.dim.impact-better::before,
.dim.impact-worse::before{display:none!important;animation:none!important;box-shadow:none!important;background:transparent!important}
.dim.impact-better .name,
.dim.impact-better .lage,
.dim.impact-worse .name,
.dim.impact-worse .lage{color:inherit!important;text-shadow:none!important}
.dim.impact-better .symbol{
  animation:dimInnerGood 1.22s ease-out both!important;
  border-color:#67F09A!important;
  background:rgba(18,72,41,.62)!important;
  box-shadow:0 0 0 2px rgba(103,240,154,.20),0 0 13px rgba(70,238,132,.65)!important;
}
.dim.impact-worse .symbol{
  animation:dimInnerBad 1.22s ease-out both!important;
  border-color:#FF6262!important;
  background:rgba(92,24,29,.66)!important;
  box-shadow:0 0 0 2px rgba(255,98,98,.20),0 0 13px rgba(255,67,67,.68)!important;
}
@keyframes dimInnerGood{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(103,240,154,0)}
  22%{transform:scale(1.08);box-shadow:0 0 0 3px rgba(103,240,154,.38),0 0 16px rgba(70,238,132,.78)}
  54%{transform:scale(1.02);box-shadow:0 0 0 1px rgba(103,240,154,.24),0 0 10px rgba(70,238,132,.52)}
  78%{transform:scale(1.06);box-shadow:0 0 0 2px rgba(103,240,154,.30),0 0 13px rgba(70,238,132,.62)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(103,240,154,0)}
}
@keyframes dimInnerBad{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,98,98,0)}
  22%{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,98,98,.40),0 0 16px rgba(255,67,67,.80)}
  54%{transform:scale(1.02);box-shadow:0 0 0 1px rgba(255,98,98,.24),0 0 10px rgba(255,67,67,.54)}
  78%{transform:scale(1.06);box-shadow:0 0 0 2px rgba(255,98,98,.31),0 0 13px rgba(255,67,67,.64)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,98,98,0)}
}
.dim-impact-particle{animation-duration:1.05s!important;box-shadow:0 0 4px currentColor}
@media(prefers-reduced-motion:reduce){
  .dim.impact-better .symbol,.dim.impact-worse .symbol{animation:none!important}
}


/* v0.11.20: feedback must stay readable on the dark status bar. Earlier
   compatibility rules used color:inherit, which could become the paper text
   color while a decision effect was active. Keep the normal light status text. */
.dim.impact-better .name,
.dim.impact-worse .name{
  color:rgba(255,255,255,.84)!important;
  text-shadow:0 1px 3px #000!important;
}
.dim.impact-better .lage,
.dim.impact-worse .lage{
  color:rgba(255,255,255,.80)!important;
  text-shadow:0 1px 3px #000!important;
}
.dim.kritisch.impact-better .lage,
.dim.kritisch.impact-worse .lage{
  color:#FFD0D0!important;
  font-weight:700;
}

/* v0.11.21: stable mobile viewport. The previous copy of this rule was
   accidentally stored with literal "\n" characters and therefore did not
   match #szene/.vignette/#effekte/#blitz. Keep all rendered background layers
   locked to the same stable viewport as the canvas drawing buffers. */
html{--study-vw:100vw;--study-vh:100dvh;overscroll-behavior:none}
html,body{width:var(--study-vw,100vw);height:var(--study-vh,100dvh);max-width:100%;overflow:hidden}
#szene,.vignette,#effekte,#blitz{
  inset:auto!important;
  top:0!important;left:0!important;right:auto!important;bottom:auto!important;
  width:var(--study-vw,100vw)!important;
  height:var(--study-vh,100dvh)!important;
}
/* v0.11.21: optional plain-language vocabulary help for mixed expert/rookie samples. */
.karten-fuss{min-height:19px;display:flex;align-items:flex-end;justify-content:center}
.glossary-trigger{border:0;background:transparent;color:var(--tinte2);font:700 9px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;margin:-2px 0 -4px;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;touch-action:manipulation}
.glossary-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:4px}
.glossary-tafel{width:min(430px,calc(100vw - 20px));text-align:left}
.glossary-tafel>.ey,.glossary-tafel>h2,.glossary-tafel>.glossary-note,.glossary-tafel>.knopf{text-align:center}
.glossary-list{display:grid;gap:8px;margin:14px 0 10px}
.glossary-item{background:#fff;border:1px solid var(--papier-rand);border-radius:8px;padding:9px 10px}
.glossary-item b{display:block;font:700 12px/1.25 var(--ui);margin-bottom:3px}
.glossary-item p{font-family:var(--body);font-size:12px;line-height:1.4;margin:0}
.glossary-note{font-family:var(--mono)!important;font-size:9.5px!important;color:var(--tinte2);margin-top:10px!important}



/* v0.11.23: compact three-level confidence restores the original arrow-key flow. */
.confidence-tafel{width:min(470px,100%);max-width:470px}
.confidence-row-three{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:440px!important}
.confidence-row-three button{min-height:76px!important;padding:10px 8px!important;gap:3px!important}
.confidence-row-three button b{font-size:13px!important;line-height:1.15}
.confidence-row-three button small{font-family:var(--sans);font-size:9.5px!important;line-height:1.28;opacity:.75;text-transform:none;font-weight:500}
.confidence-row-three .confidence-arrow{font:800 16px/1 var(--mono);margin-bottom:2px}
@media(max-width:360px){.confidence-row-three{gap:5px!important}.confidence-row-three button{padding:9px 4px!important}.confidence-row-three button small{font-size:8.8px!important}}

/* v0.11.23: non-blocking consequence banner. The icon row already communicates
   direction of change, so the banner only narrates what happened. */
.lage-outcome{top:96px;width:min(90vw,520px);padding:9px 12px 10px;text-align:left;border-left:4px solid #27567B;
  display:grid;gap:2px;max-height:min(28vh,155px);overflow:hidden;z-index:58}
.lage-outcome .outcome-banner-label{font:800 8.5px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#27567B}
.lage-outcome .outcome-banner-main{font-family:var(--body);font-size:12.5px;line-height:1.34}
.lage-outcome .outcome-banner-context{font-family:var(--sans);font-size:10.5px;line-height:1.3;color:var(--tinte2);margin-top:2px}
@media(max-width:520px){.lage-outcome{top:88px;width:min(94vw,460px);padding:8px 10px}.lage-outcome .outcome-banner-main{font-size:11.8px}.lage-outcome .outcome-banner-context{font-size:10px}}


/* v0.11.24: compact, dismissible consequence toast below the status/impact zone. */
.lage-outcome{
  top:var(--outcome-top,132px);width:min(calc(100vw - 34px),350px);padding:7px 30px 8px 10px;
  border-left:3px solid #27567B;border-radius:8px;display:grid;gap:1px;max-height:min(22vh,112px);
  overflow-y:auto;overflow-x:hidden;z-index:31;text-align:left;pointer-events:none;
  box-shadow:0 7px 20px rgba(0,0,0,.30);scrollbar-width:thin
}
.lage-outcome.an{pointer-events:auto}
.lage-outcome.held{box-shadow:0 9px 24px rgba(0,0,0,.38)}
.lage-outcome .outcome-banner-label{font:800 7.5px/1.15 var(--ui);letter-spacing:.075em;color:#27567B;padding-right:8px}
.lage-outcome .outcome-banner-main{font-family:var(--body);font-size:11.3px;line-height:1.27}
.lage-outcome .outcome-banner-context{font-family:var(--sans);font-size:9.4px;line-height:1.22;color:var(--tinte2);margin-top:2px}
.outcome-banner-close{
  position:absolute;top:3px;right:4px;width:23px;height:23px;border:0;border-radius:50%;background:transparent;
  color:var(--tinte2);font:700 18px/20px var(--sans);cursor:pointer;display:grid;place-items:center;padding:0
}
.outcome-banner-close:hover,.outcome-banner-close:focus-visible{background:rgba(34,28,24,.08);color:var(--tinte);outline:none}
@media(max-width:520px){
  .lage-outcome{top:var(--outcome-top,124px);width:min(calc(100vw - 22px),340px);padding:6px 28px 7px 9px;max-height:min(20vh,100px)}
  .lage-outcome .outcome-banner-main{font-size:10.8px;line-height:1.24}
  .lage-outcome .outcome-banner-context{font-size:9px;line-height:1.2}
}


/* v0.11.25: readability controls, clearer outcome toast and calm scenario entry. */
#szene,.vignette{transition:opacity .30s ease}
body.scene-swap #szene,body.scene-swap .vignette{opacity:0}

/* The welcome view must not preview one of the two experimental scenarios.
   A neutral, opaque study backdrop prevents a misleading scenario jump before
   the server has assigned the first crossover run. */
#ov-start{
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 30%,#3a2025 0,#201115 52%,#10080a 100%)!important;
  background-size:18px 18px,18px 18px,auto!important;
}
body.prestart #szene,body.prestart .vignette{opacity:0}

/* Compact top-right accessibility controls. They modify text only, not the
   canvas or game geometry. */
.font-size-controls{display:flex;align-items:center;gap:3px}
.font-size-btn{
  width:34px;height:28px;border:1px solid rgba(255,255,255,.34);border-radius:6px;
  background:rgba(10,6,8,.58);color:#fff;font:800 10px/1 var(--ui);cursor:pointer;
  text-shadow:0 1px 2px #000;letter-spacing:-.02em
}
.font-size-btn:hover,.font-size-btn:focus-visible{background:rgba(39,86,123,.76);outline:none;border-color:rgba(255,255,255,.65)}
.font-size-btn:disabled{opacity:.35;cursor:default}
@media(max-width:350px){.font-size-controls{gap:2px}.font-size-btn{width:30px;font-size:9px}.top-actions{gap:3px}}

/* Outcome toast: still compact, but the actual consequence and especially the
   lower context line are intentionally easier to read. */
.lage-outcome{
  width:min(calc(100vw - 30px),370px);padding:8px 31px 9px 11px;max-height:min(25vh,132px);
  background:rgba(248,245,237,.975);border-color:#cfc7b7
}
.lage-outcome .outcome-banner-label{font:800 8.5px/1.15 var(--ui);letter-spacing:.08em}
.lage-outcome .outcome-banner-main{font-family:var(--body);font-size:13px;line-height:1.32;color:#241e1a}
.lage-outcome .outcome-banner-context{
  font-family:var(--ui);font-size:11.5px;line-height:1.3;font-weight:700;color:#4a4038;
  margin-top:4px;padding-top:4px;border-top:1px solid rgba(34,28,24,.14)
}
@media(max-width:520px){
  .lage-outcome{width:min(calc(100vw - 20px),360px);padding:8px 29px 9px 10px;max-height:min(24vh,126px)}
  .lage-outcome .outcome-banner-main{font-size:12.5px;line-height:1.3}
  .lage-outcome .outcome-banner-context{font-size:11px;line-height:1.28}
}

/* Three practical reading sizes. We scale reading surfaces, not canvas/layout
   geometry, so the game remains stable on managed laptops and phones. */
body[data-text-size="small"] .spruch{font-size:13.8px!important}
body[data-text-size="small"] .p-name{font-size:15px!important}
body[data-text-size="small"] .p-rolle{font-size:9.8px!important}
body[data-text-size="small"] .karten-fuss{font-size:8.8px!important}
body[data-text-size="small"] .hinweise button{font-size:10px!important}
body[data-text-size="small"] .tafel p,body[data-text-size="small"] .scenario-briefing-block p{font-size:13px!important}
body[data-text-size="small"] .survey-question{font-size:11.8px!important}
body[data-text-size="small"] .glossary-item p,body[data-text-size="small"] .dimension-explain p{font-size:11.3px!important}
body[data-text-size="small"] .lage-outcome .outcome-banner-main{font-size:12px!important}
body[data-text-size="small"] .lage-outcome .outcome-banner-context{font-size:10.5px!important}

body[data-text-size="large"] .spruch{font-size:16.5px!important;line-height:1.44!important}
body[data-text-size="large"] .p-name{font-size:17.5px!important}
body[data-text-size="large"] .p-rolle{font-size:11.5px!important}
body[data-text-size="large"] .karten-fuss{font-size:10.3px!important}
body[data-text-size="large"] .hinweise button{font-size:12px!important;line-height:1.28!important}
body[data-text-size="large"] .tafel p,body[data-text-size="large"] .scenario-briefing-block p{font-size:15.5px!important;line-height:1.52!important}
body[data-text-size="large"] .tafel .unter{font-size:14.5px!important}
body[data-text-size="large"] .confidence-row-three button b{font-size:14px!important}
body[data-text-size="large"] .confidence-row-three button small{font-size:10.5px!important}
body[data-text-size="large"] .survey-question{font-size:14px!important;line-height:1.4!important}
body[data-text-size="large"] .scale-note{font-size:11px!important}
body[data-text-size="large"] .glossary-item p,body[data-text-size="large"] .dimension-explain p{font-size:13.3px!important;line-height:1.5!important}
body[data-text-size="large"] .lage-outcome .outcome-banner-main{font-size:14.2px!important;line-height:1.34!important}
body[data-text-size="large"] .lage-outcome .outcome-banner-context{font-size:12.4px!important;line-height:1.32!important}

@media(max-width:370px){
  body[data-text-size="large"] .spruch{font-size:15.4px!important}
  body[data-text-size="large"] .hinweise button{font-size:11px!important}
  body[data-text-size="large"] .tafel p,body[data-text-size="large"] .scenario-briefing-block p{font-size:14.5px!important}
}

/* v0.11.27: keep the choices prominent, but make the bottom controls feel
   lighter than two large black blocks. Both sides remain visually symmetric
   so the study does not privilege either swipe direction. */
.hinweise{gap:10px;padding:8px 2px 5px}
.hinweise button{
  min-height:54px;padding:6px 10px 7px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:3px;
  background:linear-gradient(180deg,rgba(31,25,28,.70),rgba(10,7,9,.74));
  border:1px solid rgba(255,255,255,.28);border-radius:11px;
  box-shadow:0 3px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  text-align:left;transition:background .14s ease,border-color .14s ease,transform .12s ease,box-shadow .14s ease
}
.hinweise #h-rechts{text-align:right}
.choice-direction{display:flex;align-items:center;gap:6px;font:800 8.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
#h-rechts .choice-direction{justify-content:flex-end}
.hinweise .choice-direction .pfeil{
  width:22px;height:18px;display:inline-grid;place-items:center;flex:none;border-radius:999px;
  border:1px solid rgba(255,197,61,.42);background:rgba(255,197,61,.09);
  font:900 15px/1 var(--sans);color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.8)
}
.choice-label{display:block;font-family:var(--ui);font-size:12.5px;line-height:1.18;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95);overflow-wrap:anywhere}
.hinweise button:hover,.hinweise button:focus-visible{
  background:linear-gradient(180deg,rgba(43,34,38,.83),rgba(14,10,12,.86));border-color:rgba(255,255,255,.52);
  box-shadow:0 4px 13px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12);outline:none
}
.hinweise button:active{transform:translateY(1px);box-shadow:0 2px 7px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)}

.swipe-onboarding{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;visibility:hidden}
.swipe-onboarding.an{visibility:visible;animation:swipeTutorialFade 2.7s ease both}
.swipe-onboarding-copy{
  position:absolute;left:50%;top:5%;transform:translateX(-50%);width:max-content;max-width:88%;padding:6px 10px;border-radius:999px;
  background:rgba(12,8,10,.82);border:1px solid rgba(255,255,255,.48);color:#fff;font:800 10px/1.2 var(--ui);letter-spacing:.035em;
  text-align:center;text-shadow:0 1px 3px #000;box-shadow:0 5px 16px rgba(0,0,0,.3)
}
.swipe-cue{position:absolute;top:48%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(12,8,10,.82);border:1.5px solid rgba(255,255,255,.62);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.swipe-cue b{font:900 28px/1 var(--sans);color:var(--gold);text-shadow:0 1px 4px #000}
.swipe-cue-left{left:3.5%;animation:swipeCueLeft .9s ease-in-out 2}
.swipe-cue-right{right:3.5%;animation:swipeCueRight .9s ease-in-out 2}
@keyframes swipeTutorialFade{0%{opacity:0}10%,78%{opacity:1}100%{opacity:0}}
@keyframes swipeCueLeft{0%,100%{transform:translateX(9px) scale(.94);opacity:.72}50%{transform:translateX(-6px) scale(1.08);opacity:1}}
@keyframes swipeCueRight{0%,100%{transform:translateX(-9px) scale(.94);opacity:.72}50%{transform:translateX(6px) scale(1.08);opacity:1}}
@media(max-width:520px){
  .hinweise{gap:8px;padding-top:6px}.hinweise button{min-height:50px;padding:5px 7px 6px;gap:3px;border-radius:10px}
  .choice-direction{font-size:7.8px}.hinweise .choice-direction .pfeil{width:20px;height:17px;font-size:14px}.choice-label{font-size:11.5px;line-height:1.18}
  .swipe-onboarding-copy{top:3%;font-size:9px;padding:5px 8px}.swipe-cue{width:36px;height:36px}.swipe-cue b{font-size:24px}
}
@media(max-width:360px){.choice-label{font-size:10.8px}.choice-direction{font-size:7.5px}.swipe-cue-left{left:1%}.swipe-cue-right{right:1%}}
@media(prefers-reduced-motion:reduce){.swipe-onboarding.an{animation:none;opacity:1}.swipe-cue-left,.swipe-cue-right{animation:none}}
body[data-text-size="small"] .hinweise .choice-label{font-size:11.5px!important}
body[data-text-size="large"] .hinweise .choice-label{font-size:14px!important;line-height:1.25!important}
body[data-text-size="small"] .hinweise .choice-direction{font-size:8px!important}
body[data-text-size="large"] .hinweise .choice-direction{font-size:9.5px!important}
@media(max-width:520px){body[data-text-size="large"] .hinweise .choice-label{font-size:12.5px!important}}