:root{--ink:#17324b;--ink2:#244e6b;--bg:#f5f7f8;--paper:#fff;--muted:#657786;--line:#dce4e9;--gold:#10b981;--goldsoft:#ecfdf5;--soft:#eef3f6;--mint:#edf6ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#182630;font:16px/1.58 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.top{background:var(--ink);color:#fff;padding:14px clamp(16px,4vw,50px);display:flex;justify-content:space-between;align-items:center;gap:14px}.brand b{display:block;letter-spacing:.11em}.brand small{color:#cbd8e1}
.topActions{display:flex;gap:8px}.topBtn{border:0;border-radius:10px;padding:9px 12px;background:#ffffff18;color:#fff;font-weight:850}.selectBadge{background:var(--gold);color:#fff;text-shadow:0 1px 1px #064e3b55}
main{width:calc(100% - clamp(24px,6vw,96px));max-width:1480px;margin:auto;padding:28px 0 70px}.hero{background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;border-radius:26px;padding:clamp(27px,5vw,50px)}.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.06;margin:8px 0 12px}.hero p{color:#dce6ed;max-width:880px;font-size:18px}.kicker{font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:#10b981}
.toolbar{background:#fff;border-radius:19px;padding:16px;margin:17px 0;box-shadow:0 7px 24px #17324b0d}.search{position:relative}.search input{width:100%;padding:14px 44px 14px 15px;border:1px solid #ccd8df;border-radius:12px;font-size:17px}.search span{position:absolute;right:15px;top:13px;color:#587082;font-size:20px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.filters select{padding:9px 10px;border:1px solid #d1dce3;border-radius:10px;background:#f8fafb;color:#263d4e}.count{margin-left:auto;align-self:center;color:#607382;font-size:13px;font-weight:750}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{background:#fff;border-radius:21px;padding:21px;box-shadow:0 7px 24px #17324b0d;display:flex;flex-direction:column;border:2px solid transparent}.card.selected{border-color:var(--gold)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:11px;font-weight:850;padding:5px 9px;border-radius:999px;background:#edf2f5;color:#38566b}.chip.app{background:var(--ink);color:#fff}.chip.gold{background:#d1fae5;color:#705700}.card h2{font-size:23px;line-height:1.2;margin:11px 0}.card .claim{font-size:17px;color:#526878;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.more{border:0;background:transparent;color:var(--ink);font-weight:850;padding:4px 0;text-align:left}.fullText{display:none;color:#526878;margin:7px 0}.fullText.show{display:block}.cardActions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto;padding-top:15px}.btn{border:0;border-radius:11px;padding:11px 13px;font-weight:900;background:#e7edf1;color:var(--ink)}.btn.dark{background:var(--ink);color:#fff}.btn.add{min-width:132px}.btn.add.active{background:var(--gold);color:#403300}
.empty{background:#fff;border-radius:16px;padding:24px;text-align:center;color:#657786}
.panelShade{position:fixed;inset:0;background:#10253680;z-index:60;display:none}.panelShade.open{display:block}.selectionPanel{position:fixed;right:0;top:0;bottom:0;width:min(430px,92vw);background:#fff;z-index:70;transform:translateX(105%);transition:.2s;box-shadow:-12px 0 34px #1025362d;display:flex;flex-direction:column}.selectionPanel.open{transform:translateX(0)}.selHead{padding:20px;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center}.selHead h2{margin:0}.close{border:0;background:#ffffff18;color:#fff;border-radius:9px;padding:8px 11px;font-weight:900}.selBody{padding:16px;overflow:auto;flex:1}.selItem{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:9px}.selItem h3{font-size:16px;margin:5px 0}.selActions{display:flex;gap:6px}.selFoot{padding:14px;border-top:1px solid var(--line);color:#697b88;font-size:12px}
.view{display:none}.view.active{display:block}.caseTop{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.caseTop .btn{margin:0}.progress{display:flex;gap:6px;overflow:auto;margin:13px 0;padding:8px;background:#f4f7f8;border-radius:12px}.progress button{white-space:nowrap;border:0;border-radius:9px;padding:8px 10px;background:#e7edf1;color:var(--ink);font-size:12px;font-weight:850;transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}.progress button:focus-visible{outline:3px solid #10b981;outline-offset:2px;background:#0f766e;color:#fff}.progress button:active{background:#115e59;color:#fff;transform:translateY(1px)}@media(hover:hover) and (pointer:fine){.progress button:hover{background:#0f766e;color:#fff;box-shadow:0 4px 11px #0f766e2b}}.block{background:#fff;border-radius:20px;padding:clamp(20px,3vw,28px);margin:13px 0;box-shadow:0 7px 25px #17324b0d}.block h2{margin:4px 0 10px}.context{display:grid;grid-template-columns:1.3fr .7fr;gap:13px}.goal{background:var(--soft);border-radius:15px;padding:16px}.goal b{display:block}.callout{background:var(--goldsoft);border-left:5px solid var(--gold);padding:15px;border-radius:12px}
.materialOpts{display:flex;gap:9px;flex-wrap:wrap}.materialOpts div{flex:1 1 260px;background:#f8fafb;border:1px solid var(--line);border-radius:13px;padding:13px}
details{margin-top:10px}summary{cursor:pointer;list-style:none}.accordion{display:flex;align-items:center;gap:12px;background:#f4f8fa;border:1px solid var(--line);border-radius:15px;padding:14px 16px;font-weight:900}.accordion .ico{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:#fff;border-radius:10px}.accordion .txt{flex:1}.accordion small{display:block;color:#687b89;font-weight:600}.accordion:after{content:"+";font-size:24px}details[open]>.accordion:after{content:"–"}.detail{padding:12px 0}.materialbox{background:#f8fafb;border:1px solid var(--line);border-radius:14px;padding:15px;color:#101820}.materialbox pre{white-space:pre-wrap;font:inherit;margin:0;color:#101820;overflow-wrap:anywhere}.urlrow{display:grid;grid-template-columns:1fr auto;gap:8px}.urlrow input{width:100%;padding:11px;border:1px solid #ccd8df;border-radius:10px;background:#fff}.guideList{display:grid;gap:8px}.guideStep{display:grid;grid-template-columns:auto 1fr;gap:12px;background:#f8fafb;border:1px solid var(--line);border-radius:14px;padding:13px}.stepNo{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:white;border-radius:10px;font-weight:950}.guideStep h3{margin:0 0 4px;font-size:17px}.guideText{color:#435969;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.guideText.expanded{display:block}.moreSmall{border:0;background:transparent;color:var(--ink);font-weight:850;padding:5px 0}.reflect{background:linear-gradient(145deg,#18364f,#244e6b);color:#fff}.reflect h2{color:#fff}.reflectGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rq{background:#ffffff12;border:1px solid #ffffff20;border-radius:15px;padding:15px}.rq b{display:block;color:#ffd86c;font-size:12px;text-transform:uppercase}.rq p{margin:5px 0}.mode{margin-top:12px;background:#ffffff10;border-radius:12px;padding:12px}.gate{margin-top:15px;border-top:1px solid #ffffff25;padding-top:14px}.gate input{position:absolute;opacity:0}.gate label{display:inline-block;background:var(--gold);color:#403300;border-radius:10px;padding:10px 13px;font-weight:900;cursor:pointer}.solution{display:none;background:#fff;color:#1b2a34;border-radius:14px;padding:17px;margin-top:12px}.gate input:checked~.solution{display:block}.plenum{background:var(--mint)}.plenumGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pCard{background:#fff;border:1px solid #d5e3d7;border-radius:12px;padding:13px}.pCard b{display:block;color:#45654c}.endNav{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}.endNav .btn{flex:1 1 220px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:100;background:#17324b;color:white;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){.cards{grid-template-columns:1fr}.context,.reflectGrid,.plenumGrid{grid-template-columns:1fr}.count{width:100%;margin-left:0}.cardActions{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.top{flex-direction:column;align-items:flex-start}.topActions{width:100%}.topBtn{flex:1}.cardActions{grid-template-columns:1fr}.urlrow{grid-template-columns:1fr}.guideStep{grid-template-columns:auto minmax(0,1fr)}}

/* v16 · intelligente progressive Offenlegung */
.smartClamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.smartClamp.lines-3{-webkit-line-clamp:3}
.smartClamp.lines-5{-webkit-line-clamp:5}
.smartClamp.lines-6{-webkit-line-clamp:6}
.smartClamp.lines-7{-webkit-line-clamp:7}
.smartClamp.lines-12{-webkit-line-clamp:12}
.smartClamp.expanded{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset !important;
}
.scenarioTextBlock.smartClamp.expanded,
.taskTextBlock.smartClamp.expanded{
  display:grid;
}
.smartMore{
  border:0;
  background:transparent;
  color:var(--ink);
  font-weight:850;
  padding:5px 0 0;
  text-align:left;
  cursor:pointer;
  display:none;
}
.smartMore.visible{display:inline-block}
.smartMore:hover,.smartMore:focus-visible{text-decoration:underline;text-underline-offset:3px}
.caseScenarioWrap{margin-top:2px}
.scenarioTextBlock{
  display:grid;
  gap:12px;
  width:100%;
  max-width:none;
}
.scenarioTextBlock p{
  margin:0;
  line-height:1.62;
}

.toolStage{border:1px solid var(--line);border-radius:17px;padding:16px;margin:14px 0;background:#fbfcfd}
.toolStageHead{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;margin-bottom:12px}
.toolStageNo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;font-weight:950;font-size:18px}
.toolStageHead h3{margin:1px 0 2px;font-size:21px}.toolStageHead p{margin:0;color:var(--muted)}
.toolTaskReason{
  margin-top:8px!important;
  padding:10px 12px;
  border-left:4px solid #10b981;
  border-radius:10px;
  background:#ecfdf5;
  color:#23483d!important;
  line-height:1.48;
  font-size:14px;
}
.handoverBox{margin:14px 0;padding:16px;border-radius:15px;background:var(--goldsoft);border:1px solid #6ee7b7}
.handoverBox h3{margin:3px 0 5px}.handoverBox p{margin:0}
.kiOrientationBox{
  margin:10px 0 16px;
  padding:15px 16px;
  border-radius:15px;
  background:var(--mint);
  border:1px solid #6ee7b7;
  color:var(--ink);
  line-height:1.55;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

/* v18 · dynamische Fall-Schnellnavigation */
.caseQuickNav{margin:12px 0 18px;width:100%}
.caseQuickInner{min-height:54px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:nowrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 5px 18px #17324b0a;overflow:hidden}
.caseQuickLabel{font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:5px;white-space:nowrap}
.caseQuickBtn{border:1px solid #d5e0e6;background:#f5f8fa;color:var(--ink);border-radius:10px;padding:8px 10px;font-size:12px;font-weight:900;white-space:nowrap;min-width:58px}
.caseQuickBtn:hover,.caseQuickBtn:focus-visible{border-color:var(--ink);background:#eef4f7;outline:none}
.caseQuickBtn.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 2px #10b98155}
.caseEllipsis{font-weight:950;color:#607382;padding:0 2px;white-space:nowrap}
.caseQuickDetail{margin-top:0;margin-bottom:12px}
.card{scroll-margin-top:18px}
@media(max-width:720px){.caseQuickLabel{display:none}.caseQuickInner{gap:5px;padding:8px}.caseQuickBtn{min-width:50px;padding:7px 8px;font-size:11px}}

/* FINAL states */
.caseQuickNav{margin:12px 0 18px;width:100%}
.caseQuickInner{min-height:54px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:nowrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 5px 18px #17324b0a;overflow:hidden}
.caseQuickBtn{position:relative;border:1px solid #d5e0e6;background:#f5f8fa;color:var(--ink);border-radius:10px;padding:8px 11px;font-size:12px;font-weight:900;white-space:nowrap;min-width:62px;transition:.15s ease}
.caseQuickBtn:hover,.caseQuickBtn:focus-visible{border-color:var(--ink);background:#eef4f7;outline:none}
.caseQuickBtn.focused{background:#e9f0f4;border-color:#17324b;box-shadow:0 0 0 2px #17324b18}
.caseQuickBtn.current{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 2px #10b98155}
.caseQuickBtn.selected{border-color:#059669;background:#d1fae5;color:#493b00}
.caseQuickBtn.selected::after{content:"✓";position:absolute;right:-4px;top:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#10b981;color:#fff;font-size:11px}
.caseQuickBtn.current.selected{background:var(--ink);color:#fff}
.caseEllipsis{font-weight:950;color:#607382;padding:0 2px;white-space:nowrap}
.card{scroll-margin-top:18px}
.card.selected{border-color:var(--gold)!important;box-shadow:0 0 0 3px #10b98130,0 10px 28px #17324b14!important;background:#fffdf5}
.card.focused{border-color:#17324b!important;box-shadow:0 0 0 3px #17324b1c,0 10px 28px #17324b14!important}
.card.selected.focused{border-color:var(--gold)!important;box-shadow:0 0 0 3px #10b98150,0 12px 30px #17324b18!important}
.selectionClear{width:100%;margin-top:10px;background:#f6f8f9;border:1px solid var(--line);color:var(--ink)}
.selectionClear:disabled{opacity:.45;cursor:not-allowed}
.selFoot{display:grid;gap:8px}
.caseNumberHeading{font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#6c7d89;margin-bottom:4px}
.hero .caseNumberHeading{color:#6ee7b7}
#caseView>.hero{padding:clamp(25px,4vw,39px);border-radius:24px}#caseView>.hero h1{font-size:clamp(31px,4vw,46px);line-height:1.12;max-width:1050px;margin-top:12px;overflow-wrap:anywhere}#caseView>.hero>.chips{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}#caseView>.hero>.chips .stageBadge{margin-left:auto}#caseView>.hero>.chips .modeChip{order:3;flex:1 0 100%;margin-top:5px;color:#dce6ed;font-size:13px}#caseView>.hero .caseNumberHeading{margin-top:9px}
.cardMetaHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.cardMetaHead .chips{min-width:0}.stageBadge{flex:0 0 auto;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:950;letter-spacing:.045em;text-transform:uppercase;line-height:1.1;border:1px solid transparent}.stage-orientation{background:#0f766e;color:#fff;border-color:#115e59}.stage-depth{background:#f4b942;color:#302300;border-color:#d99a19}.stage-transfer{background:#6d28d9;color:#fff;border-color:#5b21b6}.stage-default{background:#526878;color:#fff}.workMode,.modeChip{margin-top:7px;color:#526878;font-size:12px;font-weight:850}.hero .workMode{color:#dce6ed}.hero .cardMetaHead{margin-bottom:2px}.hero .stageBadge{box-shadow:0 0 0 1px #ffffff26}.hero .chip.app{background:#fff;color:var(--ink)}.hero>.chips{align-items:flex-start}.hero>.chips .stageBadge{margin-left:auto}.hero>.chips .modeChip{flex-basis:100%;margin-top:2px;color:#dce6ed}
@media(max-width:560px){.cardMetaHead{align-items:flex-start;flex-wrap:wrap}.stageBadge{order:2}.cardMetaHead .chips{flex:1 1 auto}.workMode{margin-top:8px}#caseView>.hero{padding:23px 20px;border-radius:20px}#caseView>.hero h1{font-size:clamp(28px,9vw,36px);line-height:1.15}#caseView>.hero>.chips .stageBadge{margin-left:0}#caseView>.hero>.chips .modeChip{font-size:12px}.progress{padding:6px}}
@media(max-width:720px){.caseQuickInner{gap:5px;padding:8px}.caseQuickBtn{min-width:52px;padding:7px 8px;font-size:11px}}

/* Structured reference/solution text: preserve workflow line breaks for visual readability. */
.solution p { white-space: pre-line; line-height: 1.65; }
.goalList{margin:8px 0 0;padding-left:20px;display:grid;gap:8px}.goalList li{font-weight:850;line-height:1.45}

.goalStatements{display:grid;gap:12px;margin-top:10px}
.goalStatement{margin:0;font-weight:700;line-height:1.45}

/* FINAL UI fixes – gezielt, ohne globale Redesign-Regeln */
.btn.copySuccess{background:#0f766e!important;color:#fff!important}
.gate label{color:#fff!important;text-shadow:0 1px 1px #064e3b55}
.reflect .solution h2{color:var(--ink)!important;margin:4px 0 10px!important}
.solution .kicker{display:inline-block;margin-bottom:2px}
.solution p{margin:0;white-space:pre-line;line-height:1.65}
.solution .smartMore{margin-top:6px}
@media(max-width:560px){.gate label{display:block;width:100%;text-align:center}}


/* FINAL UI PATCH 2026-08-14: eindeutige Zustände der Fortschrittsnavigation */
.progress button:hover{background:#0f766e !important;color:#fff !important;}
.progress button:focus-visible{background:#0f766e !important;color:#fff !important;}
.progress button:active{background:#115e59 !important;color:#fff !important;}


/* FINAL v4 · Fallnavigation 01–26: vollständig erreichbar, horizontal verschiebbar */
.caseQuickShell{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
  width:100%;
}
.caseQuickViewport{
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.caseQuickViewport .caseQuickInner{
  width:max-content;
  min-width:100%;
  justify-content:flex-start;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:3px 1px 6px;
  overflow:visible;
}
.caseQuickArrow{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #d5e0e6;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:22px;
  font-weight:950;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.caseQuickArrow:hover,.caseQuickArrow:focus-visible{
  background:#eef4f7;
  border-color:var(--ink);
  outline:none;
}
.caseQuickArrow:disabled{
  opacity:.28;
  cursor:default;
  background:#f7f9fa;
  border-color:#e2e8ec;
}
@media(max-width:720px){
  .caseQuickShell{grid-template-columns:38px minmax(0,1fr) 38px;gap:5px}
  .caseQuickArrow{width:38px;height:38px;font-size:20px}
}


/* FINAL v5 · Arbeitsmaterial: Kopierinput klar von Hinweisen trennen */
.materialCopyBlock{
  padding:16px 0;
  border-bottom:1px solid #dfe7eb;
}
.materialCopyBlock:first-child{padding-top:0}
.materialCopyBlock:last-child{border-bottom:0;padding-bottom:0}
.materialBlockTitle{
  margin:0 0 10px;
  font-size:16px;
  color:var(--ink);
}
.materialCopyBtn{
  margin-top:16px !important;
}
.materialNote{
  margin:16px 0 0 !important;
  padding:11px 13px;
  border-radius:10px;
  background:#eef4f7;
  color:#435969;
  font-size:14px;
  line-height:1.45;
}


/* FINAL v9 · Beteiligte Apps im Fallkopf */
.hero .chips{align-items:center;min-width:0}
.caseToolStrip{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:min(72vw,760px);
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
  padding:1px 2px 4px 0;
  -webkit-overflow-scrolling:touch;
}
.caseToolChip{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  border:1px solid #d8e3e9;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.caseToolArrow{
  flex:0 0 auto;
  color:#9ab0bd;
  font-size:15px;
  font-weight:900;
}
@media(max-width:720px){
  .caseToolStrip{max-width:62vw}
  .caseToolChip{font-size:11px;padding:7px 10px}
}


/* FINAL v10 · Fallkopf: Werkzeuge und Metadaten getrennt */
.heroToolRow{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  margin-bottom:12px;
}
.heroToolRow .caseToolStrip{
  max-width:100%;
}
.heroMetaRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 16px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}
.heroMetaRow .stage{
  position:static;
  inset:auto;
  display:inline-flex;
  align-items:center;
}
.heroMetaDot{
  opacity:.6;
}
.heroMetaText{
  color:inherit;
}
.heroTagStrip{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:-7px 0 13px;
}
.heroTag{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:#e8f4f8;
  font-size:11px;
  font-weight:850;
  line-height:1.15;
}
@media(max-width:720px){
  .heroToolRow .caseToolStrip{max-width:100%}
  .heroMetaRow{gap:6px;font-size:12px}
  .heroTagStrip{margin:-4px 0 10px}
}


/* FINAL v11 · Fallidentifikation ohne Doppelung */
.cardMetaHead{
  align-items:flex-start;
}
.cardMetaHead .chips{
  min-width:0;
  flex:1 1 auto;
}
.cardMetaHead .caseToolStrip{
  max-width:100%;
}
.card .caseNumberHeading,
.selItem .caseNumberHeading{
  margin-top:13px;
  color:#49677b;
  font-size:14px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.card .workMode{
  margin-top:10px;
}
.card .stage{
  flex:0 0 auto;
}

/* Toolchips in Karten kompakter, bei langen Workflows horizontal scrollbar */
.card .caseToolStrip{
  max-width:min(100%,620px);
}
.card .caseToolChip{
  padding:6px 10px;
  font-size:11px;
}
.card .caseToolArrow{
  font-size:13px;
}
@media(max-width:720px){
  .cardMetaHead{gap:8px}
  .card .caseNumberHeading{font-size:12px}
}


/* FINAL v12 · Portfolio-Karten nach Informationspriorität */
.cardV12{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.cardV12 .cardStageRow{
  min-height:34px;
  display:flex;
  align-items:flex-start;
  margin-bottom:10px;
}
.cardV12 .stage{
  position:static;
  inset:auto;
  margin:0;
}
.cardV12 .cardTools{
  width:100%;
  max-width:100%;
  margin:0 0 14px;
  padding-bottom:3px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.cardV12 .cardTools .caseToolChip{
  background:#fff;
  border:1px solid #d7e0e7;
  color:#173650;
  box-shadow:none;
  font-size:12px;
  padding:6px 10px;
}
.cardV12 .cardTools .caseToolArrow{
  color:#536c7f;
}
.cardV12 .caseNumberHeading{
  margin:0 0 7px;
  color:#49677b;
  font-size:13px;
  font-weight:950;
  letter-spacing:.10em;
}
.cardV12 h2{
  margin-top:0;
}
.cardV12 .claim{
  margin-bottom:2px;
}
.cardV12 .smartMore{
  margin-bottom:12px;
}
.cardTopics{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
  padding-top:4px;
}
.cardTopic{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef4f5;
  color:#254d5d;
  font-size:12px;
  font-weight:800;
  line-height:1.15;
}
.cardDivider{
  width:100%;
  height:1px;
  background:#d8e1e7;
  margin:14px 0 12px;
}
.cardActionsV12{
  display:grid;
  grid-template-columns:auto minmax(150px,1fr);
  gap:10px;
  align-items:center;
}
.cardActionsV12 .pinChoice{
  white-space:nowrap;
  padding-left:13px;
  padding-right:13px;
}
.cardActionsV12 .openCaseBtn{
  width:100%;
}
@media(max-width:560px){
  .cardActionsV12{grid-template-columns:1fr}
  .cardActionsV12 .pinChoice,
  .cardActionsV12 .openCaseBtn{width:100%}
}


/* FINAL v13 · Navigation: kein irreführender Karten-Fokuszustand */
.card.focused{
  border-color:transparent !important;
  box-shadow:0 7px 24px #17324b0d !important;
}
.card.selected.focused{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px #10b98130,0 10px 28px #17324b14 !important;
}


/* FINAL v14 · Detailansicht: klare Hierarchie ohne neue Farbwelt */

/* Abschnittskennungen 01–06 deutlicher lesbar */
.block > .kicker,
.context .kicker,
.goal > .kicker{
  font-size:13px !important;
  line-height:1.2;
  letter-spacing:.10em;
  font-weight:950;
}
@media(min-width:900px){
  .block > .kicker,
  .context .kicker,
  .goal > .kicker{
    font-size:14px !important;
  }
}

/* Akkordeons: Material und Handlungspfad als wichtige Funktionsbereiche erkennbar */
#case-material details,
.toolStage details{
  border:1px solid #cbd9e1;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
#case-material summary.accordion,
.toolStage summary.accordion{
  min-height:70px;
  padding:14px 16px;
  background:#f2f6f8;
  border-left:5px solid #173650;
  border-radius:12px;
}
#case-material summary.accordion:hover,
#case-material summary.accordion:focus-visible,
.toolStage summary.accordion:hover,
.toolStage summary.accordion:focus-visible{
  background:#eaf1f4;
}
#case-material summary.accordion .txt,
.toolStage summary.accordion .txt{
  font-size:17px;
  font-weight:950;
  color:#102e46;
}
#case-material summary.accordion .txt small,
.toolStage summary.accordion .txt small{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:650;
  color:#617789;
}
#case-material summary.accordion .ico,
.toolStage summary.accordion .ico{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border-radius:10px;
  background:#173650;
  color:#fff;
}

/* Geöffneter Bereich visuell an das Akkordeon anbinden */
#case-material details[open] > .detail,
.toolStage details[open] > .detail{
  border-top:1px solid #dbe5ea;
  background:#fbfcfd;
}

/* Materialblöcke sprachlich und visuell als Arbeitsmaterial behandeln */
.materialBlockTitle{
  font-size:16px !important;
  font-weight:900;
  color:#173650;
}

/* Mehr/Weniger bleibt deutlich, aber nicht dominant */
.smartMore{
  margin-top:8px;
}

/* FINAL v16 · Trainingsziel kompakt mit progressiver Offenlegung */
.context{align-items:start}
.goal{align-self:start;padding:14px 15px}
.goal h3{font-size:clamp(18px,1.55vw,22px);line-height:1.25;margin:8px 0 7px}
.goalListCompact{gap:6px;margin-top:6px}
.goalListCompact li{font-size:clamp(14px,1.15vw,16px);line-height:1.38;font-weight:800}
.goalListCompact .goalExtra{display:none}
.goal.goalExpanded .goalExtra{display:list-item}
.goalMore{display:inline-flex;align-items:center;border:0;background:transparent;color:var(--ink);font-weight:900;padding:8px 0 2px;margin-top:3px;text-align:left}
.goalMore:hover{text-decoration:underline}
.goalMore:focus-visible{outline:3px solid #10b981;outline-offset:3px;border-radius:4px}
@media(max-width:820px){.goal{width:100%}}

/* v19 · Zufalls-Challenge */
.randomChallenge{margin:0 0 22px;padding:22px;border:1px solid #0f766e;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));overflow:hidden}
.randomChallengeHead{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.randomChallengeHead h2{margin:.28rem 0 .35rem;font-size:clamp(1.25rem,2vw,1.7rem)}
.randomChallengeHead p{margin:0;max-width:760px;opacity:.76;line-height:1.5}
.poolBadge{white-space:nowrap;border:1px solid currentColor;border-radius:999px;padding:7px 11px;font-size:.84rem;opacity:.82}
.stagePicker{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}
.stageWithHelp{display:inline-flex;align-items:center;gap:5px}
.stagePick{min-height:44px;padding:9px 14px;border-radius:999px;border:1px solid var(--line,#444);background:transparent;color:inherit;font:inherit;cursor:pointer}
.stagePick.surprise{border-style:dashed}
.stagePick.active{background:rgba(15,118,110,.08);color:inherit;border-color:#0f766e;box-shadow:0 0 0 2px rgba(15,118,110,.18);font-weight:700}
.stageInfoBtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #0f766e;border-radius:999px;color:#0f766e;background:rgba(15,118,110,.08);font:800 14px/1 inherit;cursor:pointer}
.stageInfoBtn.active,.stageInfoBtn:focus-visible{background:#0f766e;color:#fff;outline:none}
.stageInfoBox{margin:-8px 0 14px;padding:11px 13px;border:1px solid #0f766e;border-radius:12px;background:rgba(15,118,110,.07);color:inherit;font-size:.9rem;line-height:1.45}
.stagePick:focus-visible,.drawControls button:focus-visible,.groupDraw button:focus-visible,.groupDraw input:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.randomClear{min-height:44px;border-color:#0f766e;color:#0f766e}
.randomClear:hover{background:rgba(15,118,110,.08)}
.randomChallengeBody{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,.9fr);gap:18px;align-items:stretch}
.drawMachine{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:205px;padding:20px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.09);text-align:center}
.drawLabel{text-transform:uppercase;letter-spacing:.12em;font-size:.73rem;opacity:.62}
.drawNumber{font-size:clamp(3.4rem,8vw,6.3rem);font-weight:850;line-height:1;margin:.18em 0;font-variant-numeric:tabular-nums}
.drawNumber.spinning{animation:numberPulse .12s linear infinite alternate}
@keyframes numberPulse{from{transform:translateY(-2px);opacity:.72}to{transform:translateY(2px);opacity:1}}
@media (prefers-reduced-motion:reduce){.drawNumber.spinning{animation:none}}
.drawTitle{max-width:520px;font-size:.98rem;line-height:1.35;opacity:.84}
.drawControls{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 18px}
.drawPrimary{min-width:130px}
.groupDraw{padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.groupDraw>label{display:block;margin-bottom:8px;font-weight:650}
.groupModeRow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.groupModeRow select{min-height:40px;min-width:190px;border-radius:10px;border:1px solid var(--line,#aaa);background:transparent;color:inherit;padding:7px 10px;font:inherit;font-size:.9rem}
.groupDrawRow{display:flex;gap:8px;align-items:center}
.groupDraw input{width:76px;min-height:44px;border-radius:10px;border:1px solid var(--line,#444);background:transparent;color:inherit;padding:8px 10px;font:inherit}
.groupHint{margin-top:8px;font-size:.78rem;opacity:.7}
.groupResults{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:12px}
.groupResult{padding:10px 12px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.035)}
.groupResult b{display:block;font-size:.78rem;opacity:.63;margin-bottom:3px}
.groupResult span{font-size:1.05rem;font-weight:750}
.groupResult small{display:block;margin-top:4px;font-size:.72rem;opacity:.68}
@media(max-width:720px){
 .randomChallenge{padding:17px}
 .randomChallengeHead{display:block}.poolBadge{display:inline-block;margin-top:12px}
 .randomChallengeBody{grid-template-columns:1fr}
 .drawMachine{min-height:170px}
}

.phaseBadge{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;border:1px solid rgba(127,127,127,.28);font-size:.74rem;line-height:1.1}
.randomPhaseRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-2px 0 18px}
.randomPhaseRow label{font-weight:700;font-size:.9rem}.randomPhaseRow label span{font-weight:400;opacity:.62}
.randomPhaseRow select{min-height:44px;min-width:230px;max-width:100%;border-radius:12px;border:1px solid var(--line,#aaa);background:transparent;color:inherit;padding:8px 12px;font:inherit}
@media(max-width:720px){.randomPhaseRow{display:grid}.randomPhaseRow select{width:100%}}

.transferQuestions{margin-top:22px;padding-top:20px;border-top:1px solid var(--line,#444)}
.transferQuestions h3{margin:.25rem 0 12px}

/* v29 compact portfolio and scientifically structured case display */
.portfolioHero{padding:clamp(25px,4vw,39px);border-radius:24px;margin-bottom:12px}
.portfolioHero h1{font-size:clamp(31px,4vw,46px);line-height:1.12;max-width:1200px;margin:12px 0 0;overflow-wrap:anywhere}
.portfolioHero .caseNumberHeading{margin-top:9px;color:#6ee7b7}
.compactDisclosure{padding:0!important;background:#fff!important;border:1.5px solid #0f766e!important;border-radius:16px!important;margin:0 0 12px!important;box-shadow:0 0 0 3px rgba(15,118,110,.08)}
.compactDisclosure>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;cursor:pointer;font-size:15px;color:var(--ink);border-radius:14px}
.compactDisclosure>summary:hover,.compactDisclosure>summary:focus-visible{box-shadow:inset 0 0 0 1px rgba(15,118,110,.35);outline:none}
.compactDisclosure>summary::-webkit-details-marker{display:none}.compactDisclosure>summary span:first-child{display:flex;align-items:baseline;gap:12px;min-width:0}.compactDisclosure>summary small{font-weight:500;color:#607382}.compactDisclosure[open] .disclosureMark{transform:rotate(45deg)}.disclosureMark{font-size:21px;transition:.15s}
.randomChallengeInner{padding:4px 16px 16px}.randomChallengeHead p{font-size:14px}.randomChallengeHead h2{font-size:1.28rem}.stagePicker{margin-top:12px!important}.randomPhaseRow{margin:10px 0!important}.drawMachine{min-height:130px!important}.drawNumber{font-size:45px!important}
.compactToolbar{padding:10px 12px;margin:10px 0 12px}.searchLine{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}.compactToolbar .search input{padding:11px 42px 11px 13px;font-size:16px}.filterToggle{white-space:nowrap}.compactToolbar .count{margin:0;min-width:70px;text-align:right}.compactToolbar .filters{margin-top:9px;padding-top:9px;border-top:1px solid #edf1f3}.compactToolbar .filters.collapsed{display:none}.compactToolbar .filters.open{display:flex}.searchHint{font-size:12px;color:#607382;margin-top:5px;min-height:0}.searchHint:empty{display:none}
.promptTechnique{display:inline-block;margin:2px 0 10px;padding:6px 9px;border-radius:9px;background:#eef6f7;color:#17485c;font-weight:800;font-size:12px;line-height:1.35}.heroPromptTechnique{background:#ffffff18;color:#d7fff3;border:1px solid #ffffff26;margin:0 0 10px}.qualityCriteria{margin-top:14px;padding:14px 16px;border:1px solid #d8e2e8;border-radius:14px;background:#f7fafb}.qualityCriteria h3{margin:0 0 8px;font-size:15px}.qualityCriteria ul{margin:0;padding-left:19px;display:grid;gap:5px}.qualityCriteria li{font-size:14px;line-height:1.45;color:#334c5c}
@media(max-width:700px){.portfolioHero{padding:18px}.compactDisclosure>summary span:first-child{display:block}.compactDisclosure>summary small{display:block;margin-top:3px}.searchLine{grid-template-columns:minmax(0,1fr) auto}.compactToolbar .count{grid-column:1/-1;text-align:left;font-size:12px}.compactToolbar .filters.open{display:grid;grid-template-columns:1fr}.randomChallengeBody{grid-template-columns:1fr!important}}

/* v30 compact permanent filters */
.filterBar{display:grid;grid-template-columns:minmax(145px,.85fr) minmax(135px,.8fr) minmax(190px,1.25fr) minmax(165px,1fr) minmax(180px,1.05fr) auto auto;gap:8px;align-items:center}
.compactSearch{min-width:0}.compactSearch input{width:100%;padding:10px 38px 10px 12px!important;font-size:15px!important}.compactSearch span{right:12px;top:9px}
.filterBar select{width:100%;min-width:0;padding:10px 9px;border:1px solid #d1dce3;border-radius:10px;background:#f8fafb;color:#263d4e;font-size:15px}
.compactReset{padding:10px 12px;white-space:nowrap}.filterBar .count{margin:0;min-width:62px;text-align:right;white-space:nowrap}
@media(max-width:1050px){.filterBar{grid-template-columns:1fr 1fr 1fr}.compactSearch{grid-column:span 1}.filterBar .count{text-align:left}}
@media(max-width:700px){.filterBar{grid-template-columns:1fr 1fr}.compactSearch{grid-column:1/-1}.compactReset{width:100%}.filterBar .count{text-align:right}}

/* v33 – robuste Titelsuche und harmonische Filterdarstellung */
.compactToolbar{padding:12px 14px;margin:10px 0 12px}
.filterBar{display:block!important}
.filterSearchRow{display:grid;grid-template-columns:minmax(230px,420px) auto;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.compactSearch{min-width:0}
.compactSearch input{width:100%;min-height:46px;padding:10px 40px 10px 14px!important;font-size:15px!important}
.compactSearch span{right:13px;top:11px}
.resultCountBadge{display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:74px;margin:0!important;padding:7px 11px;border-radius:999px;background:#eef3f6;color:#506777;font-size:13px;font-weight:800;text-align:center!important;white-space:nowrap}
.filterControls{display:grid;grid-template-columns:minmax(145px,.85fr) minmax(180px,1.3fr) minmax(170px,1fr) minmax(180px,1.05fr) auto;gap:9px;align-items:center}
.filterControls select{width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #d1dce3;border-radius:10px;background:#f8fafb;color:#263d4e;font-size:15px}
.compactReset{min-height:44px;padding:9px 14px;white-space:nowrap}
@media(max-width:980px){.filterSearchRow{grid-template-columns:minmax(210px,360px) auto}.filterControls{grid-template-columns:1fr 1.35fr 1fr}.filterControls .compactReset{width:100%}}
@media(max-width:700px){.filterSearchRow{grid-template-columns:minmax(0,1fr) auto}.filterControls{grid-template-columns:1fr 1fr}.compactReset{width:100%}}
@media(max-width:470px){.filterSearchRow{grid-template-columns:1fr}.resultCountBadge{justify-self:start}.filterControls{grid-template-columns:1fr}}

.materialImage{display:block;max-width:100%;height:auto;margin:14px 0;border:1px solid #d9d9d9;border-radius:12px;background:#fff}

/* v38: logische Materialkopie und getrennte methodische Referenz */
.materialCopyAll{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line,#d9dde3);border-radius:12px;background:rgba(127,127,127,.06)}
.materialCopyAllHint{margin:0 0 10px;max-width:72ch}
.materialCopyAllBtn{font-weight:700}
.materialCopyAllPreview{display:none!important}
.methodReference{margin:14px 0 22px;padding:16px;border:1px solid var(--line,#d9dde3);border-radius:14px;background:rgba(127,127,127,.06)}
.methodReference pre{white-space:pre-wrap;word-break:break-word;margin:12px 0}
.materialProvenance{margin:10px 0 0;font-size:.92rem;opacity:.82;max-width:78ch}

/* v44 · globale Responsive-Sicherung für Inhaltsfelder */
.block,
.context,
.goal,
.callout,
.taskCallout,
.scenarioTextBlock,
.taskTextBlock,
.kiOrientationBox,
.toolStage,
.toolStageHead,
.handoverBox,
.qualityCriteria,
.methodReference,
.materialbox,
.urlrow,
.guideStep{
  min-width:0;
}
.scenarioTextBlock,
.taskTextBlock,
.kiOrientationBox,
.toolTaskReason,
.toolStageHead p,
.handoverBox p,
.qualityCriteria li,
.methodReference,
.materialbox,
.urlrow input{
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(max-width:760px){
  main{
    width:calc(100% - 24px);
    padding-top:16px;
  }
  .block{
    border-radius:16px;
    padding:18px 16px;
  }
  .context,
  .toolStageHead,
  .urlrow{
    grid-template-columns:1fr!important;
  }
  .toolStageNo{
    width:36px;
    height:36px;
  }
  .kiOrientationBox,
  .handoverBox,
  .taskCallout{
    padding:13px 14px;
  }
  .urlrow .btn{
    width:100%;
  }
}
@media(max-width:420px){
  main{
    width:calc(100% - 18px);
  }
  .block{
    padding:16px 13px;
  }
  .kiOrientationBox,
  .handoverBox,
  .taskCallout{
    padding:12px;
  }
}

/* v45 · Mint-Hover für zentrale Fallabschnitte */
#case-start,
#case-task,
#case-material,
#case-ki,
#case-reflect{
  border:1px solid transparent;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media(hover:hover) and (pointer:fine){
  #case-start:hover,
  #case-task:hover,
  #case-material:hover,
  #case-ki:hover,
  #case-reflect:hover{
    border-color:#10b981;
    box-shadow:0 10px 30px rgba(16,185,129,.14);
    transform:translateY(-1px);
  }
}

/* v46 · Lesbarkeit der Prüfkriterien appweit verbessern */
.qualityCriteria{
  background:#f8fbfc;
  border-color:#cfdde5;
}
.qualityCriteria h3{
  color:var(--ink);
}
.qualityCriteria li{
  color:#102536;
  line-height:1.55;
}
.qualityCriteria li::marker{
  color:#0f766e;
}

/* v43 · Trainingsaufgaben besser lesbar */
.taskCallout{
  font-weight:700;
  width:100%;
  box-sizing:border-box;
}
.taskTextBlock{
  display:grid;
  gap:10px;
  max-width:none;
}
.taskTextBlock p{
  margin:0;
  line-height:1.58;
}
.taskTextBlock p+p{
  padding-top:9px;
  border-top:1px solid rgba(132,104,0,.14);
}
.taskCallout button{
  margin-top:10px;
}
@media(max-width:900px){
  .taskTextBlock.smartClamp:not(.expanded){
    display:block;
    max-height:18rem;
    overflow:hidden;
    -webkit-line-clamp:unset;
    position:relative;
  }
  .taskTextBlock.smartClamp:not(.expanded)::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3.5rem;
    background:linear-gradient(to bottom,rgba(236,253,245,0),var(--goldsoft));
    pointer-events:none;
  }
  .taskTextBlock.smartClamp.expanded{
    max-height:none;
  }
  .taskCallout .smartMore{
    display:inline-block;
  }
}
@media(max-width:560px){
  .taskTextBlock.smartClamp:not(.expanded){
    max-height:15rem;
  }
}

/* v39 · Zufalls-Challenge visuell klarer und responsiver */
.compactDisclosure[open]{background:#fff!important}
.randomChallengeInner{padding:6px clamp(14px,2vw,24px) 22px!important}
.randomChallengeHead{padding:4px 0 8px;border-bottom:1px solid #edf3f5}
.randomChallengeHead h2{margin:.32rem 0 .42rem!important;line-height:1.15}
.randomChallengeHead p{max-width:820px;color:#38566b;opacity:1}
.poolBadge{background:#f7fbfc;border-color:#b9ccd5;color:#263d4e;font-weight:700}
.stagePicker{padding:14px;margin:14px 0 10px!important;border:1px solid #e1ebef;border-radius:18px;background:#fbfdfd}
.stagePick{background:#fff;border-color:#d4e1e7;color:var(--ink)}
.stagePick.active{background:#e8f7f4;border-color:#0f766e;box-shadow:0 0 0 2px rgba(15,118,110,.18),inset 0 0 0 1px rgba(255,255,255,.7)}
.randomPhaseRow{padding:0 2px 14px;border-bottom:1px solid #edf3f5}
.randomPhaseRow select,.groupModeRow select,.groupDraw input{background:#fff;border-color:#d2e0e7;color:var(--ink)}
.randomChallengeBody{grid-template-columns:minmax(320px,1.35fr) minmax(290px,.9fr)!important;gap:16px!important;align-items:stretch;margin-top:14px}
.drawMachine{min-height:158px!important;background:linear-gradient(145deg,#f2f7f8,#e8eef1)!important;border:1px solid #d6e2e8!important;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.drawLabel{color:#607382;opacity:1}
.drawNumber{color:var(--ink)}
.drawTitle{color:#263d4e;opacity:1}
.drawControls{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin:0!important;align-content:stretch}
.drawControls .btn{min-height:64px;border-radius:14px;font-size:16px}
.drawControls .drawPrimary{grid-column:1/-1;min-width:0}
.groupDraw{grid-column:1/-1;margin-top:4px;padding:16px!important;border:1px solid #d8e8e5!important;border-radius:18px;background:linear-gradient(145deg,#fbfdfd,#f2f8f7)}
.groupDraw>label{margin-bottom:10px;color:var(--ink);font-weight:900}
.groupModeRow{gap:10px!important}
.groupDrawRow{gap:10px!important}
.groupHint{color:#38566b;opacity:1}
.groupResult{background:#fff;border-color:#d8e8e5;color:var(--ink)}
@media(max-width:900px){
  .randomChallengeBody{grid-template-columns:1fr!important}
  .drawControls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .drawControls .drawPrimary{grid-column:auto}
}
@media(max-width:620px){
  .randomChallengeInner{padding:4px 12px 16px!important}
  .stagePicker{padding:12px}
  .stagePick{width:100%;justify-content:center}
  .stageWithHelp{width:100%}
  .stageWithHelp .stagePick{flex:1}
  .randomPhaseRow{display:grid;grid-template-columns:1fr!important}
  .drawControls{grid-template-columns:1fr}
  .groupModeRow,.groupDrawRow{display:grid;grid-template-columns:1fr}
  .groupDraw input{width:100%}
}

/* v40 · Zufalls-Challenge verdichtet: weniger Leerraum, bessere Platzierung */
.stagePicker{
  display:inline-flex!important;
  width:auto;
  max-width:100%;
  padding:10px 12px!important;
  align-items:center;
}
.stagePick{min-height:40px;padding:8px 13px}
.stageInfoBtn{width:27px;height:27px}
.randomPhaseRow{
  display:flex!important;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:10px;
  margin:8px 0 14px!important;
  padding:0 0 14px!important;
}
.randomPhaseRow select{min-width:260px}
.randomClear{min-height:42px}
.randomChallengeBody{
  grid-template-columns:minmax(360px,.95fr) minmax(360px,.8fr)!important;
  align-items:center;
}
.drawMachine{
  width:min(100%,760px);
  justify-self:start;
  min-height:142px!important;
  padding:18px!important;
}
.drawNumber{font-size:42px!important;margin:.12em 0}
.drawControls{align-self:stretch}
.drawControls .btn{min-height:58px}
.groupDraw{
  width:min(100%,620px);
  justify-self:start;
  padding:14px!important;
}
.groupModeRow select{min-width:0;width:min(100%,270px)}
.groupDrawRow{margin-top:2px}
@media(min-width:1180px){
  .randomChallengeHead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .stagePicker{max-width:980px}
}
@media(max-width:900px){
  .stagePicker{display:flex!important;width:100%}
  .randomPhaseRow{width:100%}
  .randomChallengeBody{grid-template-columns:1fr!important}
  .drawMachine{width:100%}
  .groupDraw{width:100%}
}
@media(max-width:620px){
  .randomPhaseRow{display:grid!important;width:100%}
}

/* v41 · Challenge-Filter als eine kompakte Steuerleiste */
.challengeControls{
  display:grid;
  grid-template-columns:minmax(0,auto) auto;
  gap:10px 14px;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:14px 0 14px;
  padding:12px;
  border:1px solid #e1ebef;
  border-radius:18px;
  background:#fbfdfd;
}
.challengeControls .stagePicker{
  display:flex!important;
  width:auto;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0;
  background:transparent!important;
}
.challengeControls .randomPhaseRow{
  display:flex!important;
  width:auto;
  max-width:100%;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.challengeControls .randomPhaseRow label{
  display:none;
}
.challengeControls .randomPhaseRow select{
  min-width:230px;
  min-height:40px;
}
.challengeControls .randomClear{
  min-height:40px;
}
.challengeControls .stageInfoBox{
  grid-column:1/-1;
  margin:0;
}
@media(max-width:1180px){
  .challengeControls{
    width:100%;
    grid-template-columns:1fr;
  }
  .challengeControls .stagePicker{
    width:100%;
  }
  .challengeControls .randomPhaseRow{
    width:100%;
  }
}
@media(max-width:620px){
  .challengeControls{
    padding:10px;
  }
  .challengeControls .stagePicker,
  .challengeControls .randomPhaseRow{
    display:grid!important;
    grid-template-columns:1fr;
  }
  .challengeControls .stageWithHelp{
    width:100%;
  }
  .challengeControls .randomPhaseRow select{
    min-width:0;
    width:100%;
  }
}

/* v42 · Gruppenverteilung kompakt links, mobil untereinander */
.groupDraw{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto auto;
  gap:10px 12px;
  align-items:center;
  width:max-content!important;
  max-width:100%;
}
.groupDraw>label{
  grid-column:1/-1;
}
.groupModeRow{
  display:contents;
}
.groupModeRow select{
  width:260px!important;
  max-width:100%;
}
.groupDrawRow{
  display:contents!important;
}
.groupDraw input{
  width:74px!important;
}
.groupDrawRow .btn{
  min-height:44px;
}
.groupHint{
  grid-column:1/-1;
  margin-top:0;
}
.groupResults{
  grid-column:1/-1;
}
@media(max-width:980px){
  .groupDraw{
    width:100%!important;
    grid-template-columns:1fr 1fr;
  }
  .groupDraw input{
    width:100%!important;
  }
  .groupDrawRow .btn{
    width:100%;
  }
}
@media(max-width:620px){
  .groupDraw{
    grid-template-columns:1fr;
  }
  .groupModeRow select{
    width:100%!important;
  }
}