/* R81: mobile structure. Desktop styling and all calculation rules stay intact. */
.r81-mobile-copy,.r81-k2-zoom-button{display:none}
#demo2 .r81-k2-presets{display:contents}
#demo2 .r81-k2-presets>summary{display:none}
.r81-k2-zoom{border:1px solid #b4c4bd;border-radius:16px;padding:0;width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 32px);background:#fffdf8;color:#1c3e43;box-shadow:0 22px 70px #132b3450}
.r81-k2-zoom::backdrop{background:#102a36b3}
.r81-k2-zoom header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #d1ddd7}
.r81-k2-zoom h2{font:700 20px/1.25 'IBM Plex Sans',sans-serif;margin:0}
.r81-k2-zoom button{min-height:44px;padding:8px 14px;border:1px solid #a9bcb4;border-radius:8px;background:#f4f6f0;color:#1c3e43;font:600 16px/1.2 'IBM Plex Sans',sans-serif;cursor:pointer}
.r81-k2-zoom p{font:400 15px/1.5 'IBM Plex Sans',sans-serif;margin:12px 16px}
.r81-k2-zoom .r81-zoom-scroll{overflow:auto;max-height:65dvh;padding:8px;touch-action:pan-x pan-y}
.r81-k2-zoom svg{display:block;width:100%;min-width:640px;height:auto}
body.r81-chart-open{overflow:hidden!important}
@media(max-width:820px){
  .hero.cf-home .cf-home-scope,
  #konfiguratortypen .cf-r81-config-summary,
  #konfiguratortypen .r74-task-map,
  #konfiguratortypen .r74-planning-detail{display:none!important}
  #konfiguratortypen,#cf-configurator-examples{scroll-margin-top:88px}
  #konfiguratortypen.cf-home{padding-top:26px!important}
  #konfiguratortypen .cf-home-demo-intro{margin-bottom:22px!important;padding-left:14px!important}
  #demo2 .r81-desktop-copy{display:none!important}
  #demo2 .r81-mobile-copy{display:inline}
  #demo2 .section-head{margin-bottom:18px!important}
  #demo2 .section-head h2{font-size:clamp(28px,7.5vw,36px)!important;line-height:1.13!important;max-width:none!important}
  #demo2 .section-head>p:not(.section-kicker):not(.section-example){font-size:16px!important;line-height:1.45!important}
  #demo2 .wizard-body{padding:18px 14px 16px!important}
  #demo2 .wizard-step-title{font-size:21px!important;line-height:1.25!important}
  #demo2 .wizard-step-sub{font-size:15px!important;line-height:1.45!important;margin-bottom:16px!important}
  #demo2 .choice-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  #demo2 .choice-card{display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;gap:3px 12px!important;align-items:center!important;min-height:98px!important;padding:10px!important;color:#1c3e43!important;text-align:left!important}
  #demo2 .choice-card .c-thumb{grid-column:1!important;grid-row:1/3!important;width:78px!important;height:76px!important;margin:0!important;aspect-ratio:auto!important;object-fit:cover!important}
  #demo2 .choice-card h4{grid-column:2!important;font-size:17px!important;line-height:1.28!important;color:#1c3e43!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none;margin:0!important}
  #demo2 .choice-card p{grid-column:2!important;font-size:14px!important;line-height:1.4!important;margin:0!important;color:#52666a!important;overflow-wrap:normal!important;word-break:normal!important}
  #demo2 .choice-card:focus-visible{outline:3px solid #906127;outline-offset:2px}
  #demo2 .k2-duty-layout{display:flex!important;flex-direction:column!important;gap:16px!important}
  #demo2 .k2-duty-inputs{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;order:0!important}
  #demo2 .k2-duty-control{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(132px,.9fr)!important;gap:5px 10px!important;padding:12px!important;min-width:0}
  #demo2 .k2-duty-control .opt-title{grid-column:1;margin:0!important;min-height:0!important;align-self:center;font-size:16px!important;line-height:1.3!important}
  #demo2 .k2-duty-control .opt-title>.k{display:none!important}
  #demo2 .k2-duty-entry{grid-column:2;display:flex!important;gap:6px!important;margin:0!important;min-width:0}
  #demo2 .k2-duty-entry input{width:100%!important;min-width:0!important;min-height:46px!important;padding:6px 9px!important;font-size:18px!important}
  #demo2 .k2-duty-entry span{font-size:14px!important;white-space:nowrap}
  #demo2 .k2-duty-control>input[type=range]{grid-column:1/-1;min-height:32px!important;width:100%;margin:2px 0!important}
  #demo2 .k2-field-help{grid-column:1/-1;font-size:13px!important;line-height:1.4!important;margin:0!important}
  #demo2 .k2-field-error{grid-column:1/-1;font-size:14px!important;margin:0!important}
  #demo2 .r81-k2-presets{display:block;grid-column:1/-1;min-width:0}
  #demo2 .r81-k2-presets>summary{display:list-item;min-height:44px;padding:10px 0 6px;color:#355750;cursor:pointer;font:600 14px/1.4 'IBM Plex Sans',sans-serif}
  #demo2 .r81-k2-presets .k2-presets{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:4px!important}
  #demo2 .k2-presets .opt-btn{min-height:44px!important;min-width:46px!important;width:auto!important;padding:7px 12px!important;font-size:15px!important;flex:0 0 auto}
  #demo2 #k2-duty-preview{font:400 15px/1.45 'IBM Plex Sans',sans-serif!important;margin:0!important;padding:12px!important}
  #demo2 .k2-live-curve-stage{order:1!important;width:100%;padding:12px!important;box-sizing:border-box}
  #demo2 .cf-d9-k2-eval-head{display:flex!important;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
  #demo2 .cf-d9-k2-eval-kicker{display:block!important;font:600 12px/1.5 'IBM Plex Sans',sans-serif!important;color:#52666a}
  #demo2 #cf-d9-k2-eval-title{display:block!important;font:700 18px/1.35 'IBM Plex Sans',sans-serif!important}
  #demo2 .cf-d9-k2-eval-badge{font:600 11px/1.4 'IBM Plex Sans',sans-serif!important;padding:5px 7px;border-radius:6px;background:#eaf0e5;color:#285344}
  #demo2 .r81-k2-zoom-button{display:block;margin:10px 0 0 auto;min-height:44px;border:1px solid #9bb4aa;border-radius:8px;padding:8px 12px;color:#214b46;background:#f5f7f0;font:600 15px/1.3 'IBM Plex Sans',sans-serif;cursor:pointer}
  #demo2 .k2-drag-hint{font:400 13px/1.45 'IBM Plex Sans',sans-serif!important;margin:8px 0!important}
  #demo2 .k2-live-facts{gap:7px!important}
  #demo2 .k2-live-facts>div{padding:9px!important;min-width:0}
  #demo2 .k2-live-facts span{font:400 13px/1.3 'IBM Plex Sans',sans-serif!important}
  #demo2 .k2-live-facts strong{display:block;font:700 15px/1.4 'IBM Plex Sans',sans-serif!important}
  #demo2 .cf-d9-k2-eval p:not(.k2-drag-hint){font-size:14px!important;line-height:1.5!important}
  #demo2 .wizard-nav{position:static!important;bottom:auto!important;margin:16px 0 0!important;padding:12px 0 calc(8px + env(safe-area-inset-bottom))!important;box-shadow:none!important;backdrop-filter:none!important;background:transparent!important}
  #demo2 .wizard-nav .btn{min-height:48px!important;font-size:15px!important}
  #demo2 :is(input,button,summary){scroll-margin-block:96px}
}

@media(max-width:820px){
 #demo4{padding-top:16px!important}
 #demo4 .section-head{display:none!important}
 #demo4 .section-head>p{display:none!important}
 #demo4 .section-head h2{font-size:27px!important;line-height:1.2!important;margin:0!important}
 #demo4 .r31-demo-navigation{margin-bottom:16px!important}
}