:root {
  --bg:#eef1f4;
  --panel:#ffffff;
  --ink:#13202b;
  --muted:#6b7784;
  --line:#e5e9ee;
  --soft:#f7f8fa;
  --accent:#142f3d;
  --accent2:#244f62;
  --danger:#b42318;
  --success:#117a4b;
  --radius:18px;
  --shadow:0 18px 52px rgba(19,32,43,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
body{overflow:hidden}
button,input,select,textarea{font:inherit}
button{color:inherit}
.app-shell{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:12px;padding:12px}
.viewer{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,#e8edf1 0%,#f4f5f4 61%,#d8ddda 100%);box-shadow:var(--shadow);min-width:0}
#scene{display:block;width:100%;height:100%;touch-action:none}
.brand{position:absolute;top:18px;left:18px;z-index:4;display:flex;align-items:center;gap:11px;pointer-events:none}
.brandmark{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:rgba(20,47,61,.94);color:#fff;font-weight:900;box-shadow:0 10px 28px rgba(20,47,61,.22)}
.brand b{display:block;font-size:12px;letter-spacing:.10em}.brand span{display:block;margin-top:2px;font-size:11px;color:#59656f}
.viewer-actions{position:absolute;top:18px;right:18px;z-index:5;display:flex;gap:8px}
.glass-button{border:1px solid rgba(255,255,255,.84);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-radius:11px;min-height:38px;padding:0 13px;cursor:pointer;box-shadow:0 8px 24px rgba(19,32,43,.08)}
.viewer-stats{position:absolute;left:18px;bottom:18px;z-index:4;display:flex;gap:7px;flex-wrap:wrap;max-width:calc(100% - 390px);transition:bottom .18s ease,max-width .18s ease}
.stat-chip{background:rgba(20,47,61,.91);color:#fff;padding:8px 10px;border-radius:10px;font-size:10px;box-shadow:0 8px 20px rgba(20,47,61,.16)}.stat-chip b{display:block;font-size:14px;margin-top:1px}
.viewer-hint{position:absolute;bottom:19px;right:18px;left:auto;transform:none;z-index:4;background:rgba(255,255,255,.80);backdrop-filter:blur(12px);padding:8px 12px;border-radius:999px;font-size:11px;color:#59656f;white-space:nowrap;pointer-events:none}
.config-panel{min-height:0;background:var(--panel);border-radius:26px;box-shadow:var(--shadow);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
.panel-header{padding:20px 22px 13px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;color:#78909b}.panel-header h1{font-size:24px;letter-spacing:-.025em;margin:3px 0 6px}.panel-header p{font-size:12px;line-height:1.45;color:var(--muted);margin:0}.progress-line{height:4px;margin-top:14px;background:#edf0f2;border-radius:999px;overflow:hidden}.progress-line span{display:block;height:100%;width:9.09%;background:var(--accent);transition:width .25s ease}
.step-dots{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 12px;overflow:visible;scrollbar-width:none}.step-dots::-webkit-scrollbar{display:none}.step-dot{border:0;background:#eef1f3;color:#65727c;border-radius:999px;min-width:27px;height:27px;padding:0 9px;font-size:10px;font-weight:750;cursor:pointer;white-space:nowrap}.step-dot.active{background:var(--accent);color:#fff}.step-dot.done{background:#dce7ec;color:#173d4c}
.step-content{min-height:0;overflow:auto;border-top:1px solid var(--line);padding:18px 22px 24px;scrollbar-width:thin}
.step-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:15px}.step-title h2{font-size:17px;margin:0 0 4px}.step-title p{font-size:11px;color:var(--muted);margin:0;line-height:1.4}.step-badge{font-size:10px;background:#eef3f5;border-radius:999px;padding:5px 8px;color:#48616d;white-space:nowrap}
.section-block{padding:15px 0;border-top:1px solid var(--line)}.section-block:first-child{border-top:0;padding-top:0}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;gap:10px}.section-head b{font-size:12px}.section-head span{font-size:10px;color:var(--muted)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.choice-card{border:1px solid var(--line);background:#fff;border-radius:13px;min-height:50px;padding:10px;cursor:pointer;text-align:left;transition:.15s ease}.choice-card:hover{border-color:#aeb8bf}.choice-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#f6fafb}.choice-card strong{display:block;font-size:11px}.choice-card small{display:block;color:var(--muted);font-size:9px;margin-top:3px;line-height:1.3}
.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0}.toggle-copy b{display:block;font-size:12px}.toggle-copy span{font-size:10px;color:var(--muted);line-height:1.35;display:block;margin-top:2px}.switch{position:relative;width:44px;height:25px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#cfd5da;cursor:pointer;transition:.2s}.switch span:before{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:before{transform:translateX(19px)}
.field{margin-top:12px}.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.field label{font-size:11px;font-weight:700}.num-wrap{display:flex;align-items:center;gap:5px}.number-input,.select-input,.text-input,.textarea{border:1px solid var(--line);background:#fff;border-radius:10px;min-height:36px;padding:0 9px;color:var(--ink)}.number-input{width:105px;text-align:right}.select-input{width:100%;height:38px}.text-input{width:100%;height:38px}.textarea{width:100%;min-height:82px;padding:9px;resize:vertical}.unit{font-size:10px;color:var(--muted);min-width:22px}.range{width:100%;accent-color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mini-note{font-size:9px;color:var(--muted);line-height:1.45;margin-top:8px;padding:8px 9px;background:var(--soft);border-radius:9px}.warning-note{font-size:10px;line-height:1.4;color:#764d12;background:#fff7e8;border:1px solid #f0dfbd;border-radius:10px;padding:9px 10px;margin-top:10px}
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.color-tile{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;padding:0}.color-tile .swatch-block{height:38px;display:block}.color-tile .color-name{font-size:9px;padding:6px 4px;display:block;text-align:center}.color-tile.active{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.field-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.field-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:10px;cursor:pointer;white-space:nowrap}.field-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.side-preview-svg{display:block;width:100%;height:78px;margin-bottom:7px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(160deg,#f7f9fa,#fff);padding:5px}.side-preview-svg path{fill:none;stroke:#3b4348;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.side-preview-svg path.glass{fill:rgba(182,213,225,.34);stroke-width:1.5}.side-preview-svg path.panel{fill:rgba(38,46,50,.86);stroke-width:1.5}.choice-card.active .side-preview-svg{background:#edf5f8;border-color:#b8cbd4}
.led-planner{border:1px solid var(--line);border-radius:13px;padding:13px;overflow-x:auto}.led-rafters{display:flex;align-items:stretch;min-width:max-content;height:96px;border-top:5px solid var(--accent);border-bottom:5px solid var(--accent);padding:0 8px}.led-rafter{appearance:none;position:relative;width:52px;height:86px;padding:0;border:0;background:transparent;cursor:pointer;flex:0 0 52px}.led-rafter:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);background:var(--accent);border-radius:2px}.led-rafter.disabled{opacity:.34;cursor:not-allowed}.led-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--accent);font-size:10px;font-weight:850;z-index:2;box-shadow:0 0 0 4px rgba(255,255,255,.86)}.led-rafter:not(.disabled):hover .led-count{transform:translate(-50%,-50%) scale(1.08)}.led-rafter.disabled .led-count{border-color:#9da8ae;color:#9da8ae}
.screen-map{display:flex;justify-content:center;align-items:flex-end;gap:7px;border:1px solid var(--line);background:var(--soft);border-radius:13px;padding:18px 10px}.screen-zone{border:1px solid #ccd3d8;background:#d9dde0;min-width:49px;height:68px;border-radius:5px 5px 0 0;cursor:pointer;position:relative}.screen-zone.side{height:78px}.screen-zone.side-left{transform:skewY(6deg)}.screen-zone.side-right{transform:skewY(-6deg)}.screen-zone span{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font-size:9px;font-weight:800;background:#fff;border:1px solid #cbd2d7;border-radius:999px;padding:2px 5px}.screen-zone.active{background:#183746;border-color:#183746}.screen-zone.active span{background:#183746;color:#fff;border-color:#183746}.screen-card{border:1px solid var(--line);border-radius:12px;padding:11px;margin-top:9px}.screen-card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.screen-card-title b{font-size:11px}.screen-card-title button{border:0;background:#f0f2f4;border-radius:8px;font-size:9px;padding:5px 7px;cursor:pointer}
.post-list{display:grid;gap:7px}.post-row{display:grid;grid-template-columns:70px 1fr auto;gap:7px;align-items:center;background:var(--soft);border-radius:10px;padding:7px 8px}.post-row b{font-size:10px}.post-row .number-input{width:90px}.post-lock{font-size:9px;color:var(--muted)}
.summary-box{background:#f4f7f8;border:1px solid #e1e8eb;border-radius:13px;padding:12px}.summary-box pre{margin:0;white-space:pre-wrap;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#30424b}
.panel-footer{border-top:1px solid var(--line);padding:12px 18px;display:grid;grid-template-columns:1fr 1.5fr;gap:8px}.primary-btn,.secondary-btn{border-radius:12px;min-height:44px;font-weight:750;cursor:pointer}.primary-btn{border:0;background:var(--accent);color:#fff;box-shadow:0 9px 18px rgba(20,47,61,.15)}.secondary-btn{border:1px solid var(--line);background:#fff}.primary-btn:disabled,.secondary-btn:disabled{opacity:.4;cursor:not-allowed}
.toast{position:absolute;z-index:20;left:50%;top:18px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;background:#1e2932;color:#fff;border-radius:12px;padding:10px 13px;font-size:11px;box-shadow:0 12px 28px rgba(0,0,0,.18);transition:.22s ease;max-width:80%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#7a271a}.toast.success{background:#17613e}
.load-error{display:none;position:absolute;inset:0;z-index:30;background:#eef1f4;align-items:center;justify-content:center;text-align:center;padding:35px}.load-error.show{display:flex}.load-error div{max-width:500px}.load-error h2{font-size:20px}.load-error p{color:var(--muted);font-size:12px;line-height:1.5}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-grid .full{grid-column:1/-1}.label-block{display:block;font-size:10px;font-weight:700;margin-bottom:5px}
.icon-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.icon-action{border:1px solid var(--line);background:#fff;border-radius:11px;min-height:40px;font-size:10px;font-weight:700;cursor:pointer}
.special-status{margin-top:12px;padding:12px 13px;border:1px solid #e7c98f;background:#fff6e6;border-radius:12px;display:grid;gap:4px}.special-status b{font-size:11px;color:#70460d}.special-status span{font-size:9px;line-height:1.45;color:#7e633c}.special-status.ready{border-color:#cfe5d8;background:#f1faf5}.special-status.ready b{color:#17613e}.special-status.ready span{color:#4d6d5c}
.zone-builder{display:grid;gap:8px}.zone-row{display:grid;grid-template-columns:42px 1fr 32px;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd}.zone-order{display:grid;grid-template-columns:1fr 1fr;gap:3px;align-items:center}.zone-order b{grid-column:1/-1;text-align:center;font-size:11px}.zone-order button,.zone-remove,.zone-add-row button{border:1px solid var(--line);background:#fff;border-radius:7px;min-height:27px;cursor:pointer;font-size:10px}.zone-order button:disabled{opacity:.25;cursor:not-allowed}.zone-main{min-width:0}.zone-controls{display:flex;align-items:center;gap:5px;margin-top:6px}.zone-controls .number-input{width:82px}.zone-select{height:34px}.zone-finish{width:78px;height:34px}.zone-remove{font-size:17px;line-height:1;color:#8b2d2d}.zone-add-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:4px}.zone-add-row span{font-size:9px;color:var(--muted);margin-right:2px}.zone-add-row button{padding:0 8px}.zone-add-row button:hover{border-color:var(--accent)}
@media(max-width:1050px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh;grid-template-columns:1fr;grid-template-rows:58dvh auto;padding:7px;gap:7px}.viewer{min-height:420px;border-radius:18px}.config-panel{border-radius:18px;min-height:650px}.step-content{overflow:visible}.viewer-hint{display:none}}
@media(max-width:620px){.app-shell{grid-template-rows:50dvh auto}.viewer{min-height:360px}.brand span{display:none}.viewer-stats .stat-chip:nth-child(n+4){display:none}.panel-header{padding:17px 16px 12px}.step-dots{padding:0 16px 10px}.step-content{padding:16px}.choice-grid.three{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}.contact-grid .full{grid-column:auto}.viewer-actions{top:12px;right:12px}.brand{top:12px;left:12px}.viewer-stats{left:12px;bottom:12px}.panel-footer{position:sticky;bottom:0;background:#fff;z-index:8}}

/* FINAL: Sonderformen sind Anfrageangaben, keine vorgetäuschte 3D-Funktion. */
.special-viewer-badge{display:none;position:absolute;left:18px;top:72px;z-index:8;max-width:min(430px,70%);padding:9px 11px;border-radius:11px;background:rgba(93,58,8,.90);color:#fff;box-shadow:0 7px 22px rgba(0,0,0,.16);backdrop-filter:blur(8px)}
.special-viewer-badge.show{display:grid;gap:2px}.special-viewer-badge b{font-size:10px}.special-viewer-badge span{font-size:9px;line-height:1.35;color:rgba(255,255,255,.88)}
.special-explainer{display:grid;gap:3px;margin:0 0 12px;padding:11px 12px;border-radius:12px;border:1px solid #e4c17d;background:#fff4dd;color:#6c430a}.special-explainer.ready{border-color:#bddcca;background:#eef8f2;color:#15573a}.special-explainer b{font-size:11px}.special-explainer span{font-size:9px;line-height:1.45}

/* V2.3 usability refinements */
.step-dots{gap:6px;align-items:center;flex-wrap:wrap}.step-dot{display:inline-flex;align-items:center;gap:5px;min-width:auto;height:31px;padding:0 10px}.step-num{display:inline-grid;place-items:center;min-width:16px;font-weight:850}.step-name{display:inline-block;font-size:9px;font-weight:750}.step-dot.active .step-name{color:#fff}.step-dot.done .step-name{color:#173d4c}
.post-list{gap:10px}.post-row-slider{background:var(--soft);border-radius:11px;padding:9px 10px}.post-row-slider .field-row{margin-bottom:6px}.post-row-slider .range{width:100%}
.zone-range{width:100%;margin-top:6px}.mini-note.compact{margin-top:6px}
.special-reference img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#f3f5f6}.special-reference{overflow:hidden}
@media(max-width:620px){.step-name{display:inline-block}.step-dot{padding:0 8px}.step-dots{padding-bottom:9px}}
.disabled-choice{opacity:.45;cursor:not-allowed!important}.disabled-choice:hover{transform:none!important}


.special-shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.special-shape-card{padding:0;overflow:hidden;text-align:left}
.special-shape-card strong,.special-shape-card small{display:block;padding:0 14px}
.special-shape-card strong{padding-top:10px}
.special-shape-card small{padding-bottom:14px}
.special-thumb{display:block;height:118px;background-color:#edf2f5;background-image:url("assets/sonderformen-referenz.png");background-repeat:no-repeat;background-size:200% 300%;border-bottom:1px solid #d9e3e8}
.special-thumb-none{background-image:linear-gradient(135deg,#eef3f6,#dde6eb);display:grid;place-items:center;position:relative}
.special-thumb-none::after{content:"Standard";font-size:18px;font-weight:800;color:#32505f;letter-spacing:.02em}
.special-thumb-offsetGutter{background-position:0% 0%}
.special-thumb-offsetWall{background-position:100% 0%}
.special-thumb-bay{background-position:0% 50%}
.special-thumb-steppedGutter{background-position:100% 50%}
.special-thumb-innerL{background-position:0% 100%}
.special-thumb-outerL{background-position:100% 100%}
@media(max-width:620px){.special-shape-grid{grid-template-columns:1fr}.special-thumb{height:132px}}


/* Kundenversion – Anfrageabschluss */
.request-intro{display:grid;gap:4px;margin-bottom:13px;padding:13px 14px;border-radius:13px;background:#edf5f7;border:1px solid #d7e6eb}.request-intro b{font-size:12px}.request-intro span{font-size:10px;line-height:1.5;color:#536771}
.request-submit{width:100%;margin-top:12px;min-height:50px;font-size:12px}
.preview-mail-note{display:flex;gap:10px;align-items:center;margin-top:11px;padding:10px 11px;border:1px solid #dce5e8;background:#fff;border-radius:11px}.preview-mail-note>span{font-size:20px}.preview-mail-note b{display:block;font-size:10px}.preview-mail-note small{display:block;margin-top:2px;font-size:9px;line-height:1.4;color:var(--muted)}
.privacy-check{display:flex;gap:9px;align-items:flex-start;margin:13px 0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:9px;line-height:1.5;color:#53616b}.privacy-check input{margin-top:2px}.privacy-check a{color:var(--accent);font-weight:750}
.lead-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.lead-success-card{display:grid;justify-items:center;text-align:center;gap:10px;padding:28px 18px;border:1px solid #cfe5d8;background:#f1faf5;border-radius:16px}.lead-success-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#17613e;color:#fff;font-size:25px;font-weight:900}.lead-success-card h3{margin:3px 0 0;font-size:18px}.lead-success-card p{max-width:340px;margin:0;color:#52685c;font-size:10px;line-height:1.6}.lead-reference{margin:3px 0 4px;padding:8px 11px;border-radius:10px;background:#fff;border:1px solid #d5e6dc;font-size:10px;color:#4e6257}
.request-summary .summary-box{max-height:190px;overflow:auto}


/* Kundenversion 1.2 – Mobile-first Bedienung ohne Änderung der Desktop-Geometrie */
.brand{text-decoration:none;color:inherit}
@media(max-width:720px){
  html,body{min-height:100%;background:#eef1f3}
  body{overflow:visible;overscroll-behavior-y:none}
  .app-shell{display:block;height:auto;min-height:100svh;padding:0;background:#eef1f3}
  .viewer{height:38svh;min-height:285px;max-height:370px;border-radius:0 0 20px 20px;position:sticky;top:0;z-index:20;box-shadow:0 10px 30px rgba(16,31,40,.16)}
  .config-panel{min-height:0;margin:6px 6px 0;border-radius:20px 20px 0 0;overflow:visible;box-shadow:0 -6px 28px rgba(16,31,40,.08);display:block}
  .panel-header{padding:16px 14px 11px}
  .panel-header h1{font-size:20px;line-height:1.08}
  .panel-header p{font-size:11px;line-height:1.45}
  .step-dots{padding:0 12px 10px;gap:5px;display:flex;flex-wrap:wrap;overflow:visible}
  .step-dot{height:29px;padding:0 8px;gap:4px}
  .step-num{min-width:14px;font-size:9px}
  .step-name{font-size:8px}
  .step-content{padding:14px;overflow:visible}
  .step-title{margin-bottom:12px}
  .step-title h2{font-size:16px}
  .choice-card{min-height:58px;padding:11px;touch-action:manipulation}
  .choice-card strong{font-size:12px}
  .choice-card small{font-size:10px}
  .number-input,.select-input,.text-input,.textarea{font-size:16px;min-height:44px}
  .select-input,.text-input{height:44px}
  .number-input{width:112px}
  .range{min-height:28px}
  .field{margin-top:14px}
  .field label{font-size:12px}
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .full{grid-column:auto}
  .viewer-actions{top:10px;right:10px;gap:5px}
  .glass-button{min-height:34px;padding:0 9px;font-size:9px}
  .brand{top:10px;left:10px;max-width:145px}
  .brandmark{width:31px;height:31px;font-size:14px}
  .brand b{font-size:8px}.brand span{display:none}
  .viewer-stats{left:10px;bottom:10px;max-width:92%;gap:5px}
  .viewer-stats .stat-chip:nth-child(n+4){display:none}
  .stat-chip{font-size:8px;padding:6px 8px}
  .stat-chip b{font-size:9px}
  .viewer-hint{display:none}
  .panel-footer{position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:0;box-shadow:0 -8px 24px rgba(19,39,50,.10)}
  .primary-btn,.secondary-btn{min-height:48px;font-size:14px;touch-action:manipulation}
  .request-submit{min-height:52px;font-size:15px}
  .special-shape-grid{grid-template-columns:1fr 1fr}
  .special-thumb{height:100px}
}
@media(max-width:430px){
  .viewer{height:35svh;min-height:255px;max-height:320px}
  .config-panel{margin-left:4px;margin-right:4px}
  .step-dots{padding-left:10px;padding-right:10px}
  .step-dot{padding:0 7px}
  .step-name{font-size:7.5px}
  .choice-grid,.choice-grid.three{grid-template-columns:1fr 1fr}
  .side-preview-svg{height:70px}
  .zone-row{grid-template-columns:36px 1fr 30px;padding:7px;gap:6px}
  .special-shape-grid{grid-template-columns:1fr}
  .special-thumb{height:118px}
  .field-row{gap:7px}
  .num-wrap{gap:3px}
}
@media(max-width:350px){
  .choice-grid,.choice-grid.three{grid-template-columns:1fr}
  .viewer-actions .glass-button:first-child{display:none}
}


/* Kundenversion 1.3 – conversionstarker, transparenter Preisabschluss */
.price-reveal-card{position:relative;overflow:hidden;margin-bottom:13px;padding:16px;border-radius:15px;background:linear-gradient(135deg,#171b1d,#2b3134);color:#fff;box-shadow:0 14px 32px rgba(18,28,33,.15)}
.price-reveal-card:after{content:"";position:absolute;right:-40px;top:-55px;width:150px;height:150px;border-radius:50%;background:rgba(203,164,77,.15);filter:blur(3px);pointer-events:none}
.price-reveal-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}.price-reveal-top span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#d9bc78;font-weight:850}.price-reveal-top b{font-size:10px;color:#fff}
.price-blur-wrap{display:flex;align-items:center;gap:10px;margin:12px 0 9px;position:relative;z-index:1}.price-blur{font-size:30px;line-height:1;font-weight:900;letter-spacing:-.04em;color:#e2bd63;filter:blur(3.4px);user-select:none;opacity:.92}.price-lock{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.10);font-size:12px}
.price-reveal-card p{position:relative;z-index:1;margin:0;font-size:10px;line-height:1.55;color:rgba(255,255,255,.78)}
.price-benefits{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;position:relative;z-index:1}.price-benefits span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:8.5px;font-weight:750;color:#f4f6f7}
.contact-grid-required{margin-bottom:10px;padding:13px;border:1px solid #dce5e8;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(22,40,49,.05)}
.optional-contact-details{margin:10px 0 13px;border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}.optional-contact-details summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 13px;cursor:pointer;font-size:10px;font-weight:800;list-style:none}.optional-contact-details summary::-webkit-details-marker{display:none}.optional-contact-details summary:after{content:"+";font-size:16px;line-height:1;color:var(--accent)}.optional-contact-details[open] summary:after{content:"–"}.optional-contact-details summary span{margin-left:auto;font-size:8px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.optional-contact-grid{padding:0 13px 13px}
.submit-trust-line{text-align:center;margin-top:7px;font-size:9px;font-weight:750;color:#52636c}
.request-submit{background:linear-gradient(135deg,#d2b46c,#b89445)!important;color:#15191b!important;box-shadow:0 12px 24px rgba(184,148,69,.22)}
@media(max-width:720px){.price-reveal-card{padding:15px}.price-blur{font-size:32px}.price-reveal-card p{font-size:11px}.price-benefits span{font-size:9px}.contact-grid-required{padding:12px}.optional-contact-details summary{min-height:46px;font-size:11px}.submit-trust-line{font-size:10px}.request-submit{min-height:56px;font-size:15px}}


/* Kundenversion 1.4 – Frontfelder direkt im Front-Schritt teilen */
.front-field-manager{background:linear-gradient(180deg,#fbfcfc,#f5f8f9);border:1px solid #dbe5e9}
.front-field-tabs{align-items:stretch}
.front-add-field{border:1px dashed #9eb1ba!important;background:#fff!important;color:#244451!important;min-width:132px;gap:6px}
.front-add-field span{font-size:17px;line-height:1;color:var(--accent);font-weight:800}
.front-add-field:hover{border-color:var(--accent)!important;background:#f1f7f9!important}
@media(max-width:720px){
  .front-field-manager{padding:12px}
  .front-field-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .front-field-tabs .field-tab{width:100%;min-height:44px;justify-content:center;text-align:center}
  .front-add-field{grid-column:1/-1;min-height:48px;font-size:11px}
}
@media(max-width:380px){.front-field-tabs{grid-template-columns:1fr 1fr}.front-add-field{grid-column:1/-1}}


/* Glasbreiten-Planer */
.pane-width-box{margin-top:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#f8fafb}
.pane-width-box.invalid{border-color:#d89b88;background:#fff7f3}
.pane-plan{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted)}
.pane-plan b{color:#26353c;font-size:12px}.pane-width-box.invalid .pane-plan b{color:#a3442c}.pane-width-box.invalid .pane-plan span{color:#854331}
@media(max-width:620px){.pane-width-box{padding:12px}.pane-width-box .number-input{min-height:44px;font-size:16px}.pane-width-box .range{margin-top:8px}.pane-plan{font-size:12px;line-height:1.45}}


/* Kundenversion 1.6 – finaler Preisabschluss + direkte Frontpfosten */
.price-unlock-button{border:0;width:100%;padding:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:12px;transition:background .18s ease,transform .18s ease}
.price-unlock-button:hover{background:rgba(255,255,255,.05);transform:translateY(-1px)}
.price-unlock-button:focus-visible{outline:2px solid #d2b46c;outline-offset:4px}
.price-blur{filter:blur(6.8px)!important;opacity:.80!important;text-shadow:0 0 6px rgba(226,189,99,.34);transform:translateZ(0)}
.price-lock{width:34px!important;height:34px!important;font-size:15px!important;border:1px solid rgba(255,255,255,.17);box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .18s ease,background .18s ease}
.price-unlock-button:hover .price-lock{transform:scale(1.08);background:rgba(255,255,255,.16)}
.price-unlock-copy{margin-left:auto;font-size:10px;font-weight:850;letter-spacing:.01em;color:#f3d78f;padding-right:4px;white-space:nowrap}
.optional-benefit{margin:0 0 12px;padding:10px 11px;border-radius:10px;background:#f5f1e8;color:#5e5749;font-size:10px;line-height:1.5}
.front-post-direct{background:#fffdf8;border:1px solid rgba(184,148,69,.24)}
.front-post-direct .mini-note{margin-bottom:0}

@media(max-width:720px){
  .price-blur{filter:blur(7.2px)!important;opacity:.78!important}
  .price-unlock-copy{font-size:9px}
  .front-post-direct .post-row-slider{padding:10px}
  .front-post-direct .number-input{min-height:44px}
  .front-post-direct .range{height:30px}
}


/* Kundenversion 1.7 – Rückgängig + Frontfeld löschen */
.undo-button:disabled{opacity:.42;cursor:not-allowed}
.front-remove-field{border-color:rgba(126,74,63,.22)!important;background:#fff8f6!important;color:#71483f!important}
.front-remove-field:hover{border-color:rgba(126,74,63,.40)!important}
@media(max-width:350px){#restartBtn{display:none}.viewer-actions #undoBtn{display:inline-flex}}


/* Kundenversion 1.8 – optionale Szenen / Dark Mode, reine Darstellung */
html,body,.app-shell,.config-panel,.choice-card,.number-input,.select-input,.text-input,.textarea,.field-tab,.mini-note,.summary-box,.section-block,.panel-footer{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.scene-switcher{position:relative;display:flex}.scene-button{min-width:76px}.scene-menu{position:absolute;right:0;top:46px;width:194px;padding:7px;border-radius:15px;background:rgba(255,255,255,.96);border:1px solid rgba(19,32,43,.10);box-shadow:0 18px 44px rgba(14,27,35,.20);backdrop-filter:blur(18px);z-index:20}.scene-menu[hidden]{display:none}.scene-menu button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;width:100%;border:0;background:transparent;border-radius:10px;padding:9px 10px;text-align:left;cursor:pointer;color:#24323a}.scene-menu button:hover,.scene-menu button.active{background:#edf2f3}.scene-menu button>span{grid-row:1/3;font-size:18px;align-self:center}.scene-menu b{font-size:11px}.scene-menu small{font-size:9px;color:#70808a;margin-top:1px}

body[data-scene="garden"]{--bg:#e7ebe7;--panel:#fbfaf6;--ink:#17241f;--muted:#6e786f;--line:#e1e4de;--soft:#f3f3ed;--accent:#29443c;--accent2:#3d6155;--shadow:0 18px 52px rgba(26,44,36,.12)}
body[data-scene="garden"] .viewer{background:linear-gradient(180deg,#dce5df 0%,#e7ebe4 58%,#899982 100%)}
body[data-scene="garden"] .glass-button{background:rgba(250,249,244,.84);border-color:rgba(255,255,255,.72)}
body[data-scene="garden"] .panel-footer{background:rgba(251,250,246,.96)}
body[data-scene="garden"] .choice-card.active{background:#f1f6f2}
body[data-scene="garden"] .scene-menu button.active{background:#e9f0ea}

body[data-scene="evening"]{--bg:#10171b;--panel:#172127;--ink:#eef2f3;--muted:#a5b1b7;--line:rgba(255,255,255,.10);--soft:#202c32;--accent:#c6a257;--accent2:#d8bd7e;--shadow:0 22px 58px rgba(0,0,0,.34);color-scheme:dark}
body[data-scene="evening"] .viewer{background:linear-gradient(180deg,#19252d 0%,#202c33 60%,#2e3937 100%)}
body[data-scene="evening"] .brand b{color:#fff}body[data-scene="evening"] .brand span{color:#c2ccd1}
body[data-scene="evening"] .brandmark{background:rgba(11,21,26,.88);box-shadow:0 10px 30px rgba(0,0,0,.28)}
body[data-scene="evening"] .glass-button{background:rgba(18,29,35,.78);border-color:rgba(255,255,255,.13);color:#f1f4f4;box-shadow:0 8px 24px rgba(0,0,0,.20)}
body[data-scene="evening"] .viewer-hint{background:rgba(18,29,35,.72);color:#d6dfe2}
body[data-scene="evening"] .config-panel{border:1px solid rgba(255,255,255,.05)}
body[data-scene="evening"] .eyebrow{color:#c6a257}
body[data-scene="evening"] .progress-line{background:#27343a}
body[data-scene="evening"] .step-dot{background:#243138;color:#aebbc1}body[data-scene="evening"] .step-dot.done{background:#2d3d43;color:#d8e0e2}body[data-scene="evening"] .step-dot.active{background:var(--accent);color:#15191b}
body[data-scene="evening"] .choice-card,body[data-scene="evening"] .color-tile,body[data-scene="evening"] .field-tab,body[data-scene="evening"] .screen-card,body[data-scene="evening"] .contact-grid-required,body[data-scene="evening"] .optional-contact-details,body[data-scene="evening"] .front-post-direct{background:#1c282e;color:var(--ink);border-color:var(--line)}
body[data-scene="evening"] .choice-card.active{background:#26343a;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body[data-scene="evening"] .number-input,body[data-scene="evening"] .select-input,body[data-scene="evening"] .text-input,body[data-scene="evening"] .textarea{background:#111b20;color:#f2f4f4;border-color:#344249}
body[data-scene="evening"] .number-input:focus,body[data-scene="evening"] .select-input:focus,body[data-scene="evening"] .text-input:focus,body[data-scene="evening"] .textarea:focus{outline:1px solid var(--accent);border-color:var(--accent)}
body[data-scene="evening"] .mini-note,body[data-scene="evening"] .summary-box,body[data-scene="evening"] .post-row,body[data-scene="evening"] .screen-map,body[data-scene="evening"] .pane-width-box,body[data-scene="evening"] .front-field-manager{background:#202c32;color:#aeb9be;border-color:var(--line)}
body[data-scene="evening"] .warning-note{background:#32291b;color:#efd59a;border-color:#5a4729}
body[data-scene="evening"] .side-preview-svg{background:linear-gradient(160deg,#202c32,#182329);border-color:var(--line)}
body[data-scene="evening"] .choice-card.active .side-preview-svg{background:#27363c;border-color:#5a6a70}
body[data-scene="evening"] .led-count{background:#172127;box-shadow:0 0 0 4px rgba(23,33,39,.88)}
body[data-scene="evening"] .screen-zone span{background:#172127;color:#e8edee;border-color:#425158}
body[data-scene="evening"] .optional-benefit{background:#2b291f;color:#d4c69e}
body[data-scene="evening"] .optional-contact-details summary{color:#edf1f2}
body[data-scene="evening"] .panel-footer{background:rgba(23,33,39,.96);border-top-color:var(--line)}
body[data-scene="evening"] .secondary-btn{background:#243138;color:#e9eeee;border-color:#37464d}
body[data-scene="evening"] .primary-btn{background:var(--accent);color:#15191b}
body[data-scene="evening"] .scene-menu{background:rgba(20,30,36,.97);border-color:rgba(255,255,255,.10);box-shadow:0 18px 44px rgba(0,0,0,.36)}
body[data-scene="evening"] .scene-menu button{color:#eff3f4}body[data-scene="evening"] .scene-menu button:hover,body[data-scene="evening"] .scene-menu button.active{background:#2a373d}body[data-scene="evening"] .scene-menu small{color:#a9b5ba}
body[data-scene="evening"] .front-add-field{background:#1c282e!important;color:#e4eaec!important;border-color:#65757c!important}body[data-scene="evening"] .front-remove-field{background:#302522!important;color:#e0b7ab!important;border-color:#714f46!important}
body[data-scene="evening"] .pane-plan{color:#c9d3d7}
body[data-scene="evening"] .pane-plan b{color:#f1f4f5}
body[data-scene="evening"] .pane-plan span{color:#c1ccd1}
body[data-scene="evening"] .pane-width-box.invalid .pane-plan b{color:#ffccb9}
body[data-scene="evening"] .pane-width-box.invalid .pane-plan span{color:#f1b8a5}
body[data-scene="evening"] .choice-card small,body[data-scene="evening"] .section-head span,body[data-scene="evening"] .toggle-copy span,body[data-scene="evening"] .preview-mail-note small,body[data-scene="evening"] .request-intro span{color:#b8c4c9}


@media(max-width:720px){
  .scene-menu{position:fixed;top:54px;right:10px;width:min(210px,calc(100vw - 20px))}
  .viewer-actions{flex-wrap:wrap;justify-content:flex-end;max-width:76%}
  .scene-button{min-width:68px}
  body[data-scene="evening"] html,body[data-scene="evening"] body,body[data-scene="evening"] .app-shell{background:#10171b}
  body[data-scene="garden"] html,body[data-scene="garden"] body,body[data-scene="garden"] .app-shell{background:#e7ebe7}
}

/* Kundenversion 1.9 – Mobile Feinpolitur Preisbox / Schloss */
.price-reveal-card{box-sizing:border-box;width:100%;min-width:0}
.price-unlock-button.price-blur-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.price-blur{
  display:inline-block;
  min-width:0;
  white-space:nowrap;
  transform:none!important;
}
.price-lock{
  display:grid!important;
  place-items:center;
  flex:0 0 auto;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  aspect-ratio:1/1;
  line-height:1;
  padding:0;
  border-radius:999px!important;
  box-sizing:border-box;
}
.price-unlock-copy{min-width:0}

@media(max-width:720px){
  .price-reveal-card{padding:15px 14px;border-radius:16px}
  .price-reveal-top{align-items:flex-start;gap:8px}
  .price-reveal-top span{max-width:58%;line-height:1.35}
  .price-reveal-top b{text-align:right;line-height:1.35}
  .price-unlock-button.price-blur-wrap{
    grid-template-columns:minmax(0,1fr) 38px;
    gap:8px 10px;
    margin:13px 0 10px;
    padding:2px 0;
  }
  .price-blur{
    font-size:clamp(27px,9vw,34px);
    line-height:1.05;
    filter:blur(5px)!important;
    opacity:.78!important;
    text-shadow:0 0 6px rgba(226,189,99,.34);
  }
  .price-lock{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    font-size:16px!important;
    justify-self:end;
  }
  .price-unlock-copy{
    grid-column:1/-1;
    margin:0;
    padding:0;
    white-space:normal;
    font-size:10px;
    line-height:1.35;
    justify-self:start;
  }
  .price-benefits{gap:5px}
  .price-benefits span{font-size:8.5px;padding:5px 7px}
}

@media(max-width:390px){
  .price-reveal-card{padding:14px 12px}
  .price-blur{font-size:28px}
  .price-lock{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
  .price-reveal-top span,.price-reveal-top b{font-size:9px}
}


/* Kundenversion 1.9 – Abendstart, Szenen-Popup und kompakte mobile Viewer-Steuerung */
.scene-intro{position:absolute;inset:0;z-index:35;display:grid;place-items:center;padding:18px;background:rgba(8,14,18,.28);backdrop-filter:blur(3px)}
.scene-intro[hidden]{display:none}
.scene-intro-card{width:min(420px,calc(100% - 24px));padding:22px;border-radius:20px;background:rgba(18,28,34,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.34);color:#f4f6f6;text-align:left;backdrop-filter:blur(18px)}
.scene-intro-kicker{display:block;margin-bottom:7px;color:#d7b76d;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.scene-intro-card h2{margin:0 0 8px;font-size:23px;line-height:1.06;letter-spacing:-.03em;color:#fff}
.scene-intro-card p{margin:0;color:#c7d0d4;font-size:12px;line-height:1.55}
.scene-intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.scene-intro-actions button{min-height:45px;border-radius:12px;padding:9px 11px;font:inherit;font-size:10px;font-weight:850;cursor:pointer}
.scene-intro-primary{border:0;background:#c6a257;color:#15191b;box-shadow:0 10px 24px rgba(198,162,87,.24)}
.scene-intro-secondary{border:1px solid rgba(255,255,255,.17);background:#26343a;color:#eef3f4}

@media(max-width:430px){
  .viewer-actions{top:9px;right:9px;max-width:none!important;display:flex!important;flex-wrap:nowrap!important;gap:4px!important}
  .viewer-actions .glass-button{width:33px;min-width:33px;max-width:33px;height:33px;min-height:33px;padding:0!important;border-radius:10px;font-size:0!important;display:inline-grid!important;place-items:center}
  .scene-switcher{display:flex!important}
  .scene-button{display:inline-grid!important}
  .scene-button::before{content:attr(data-icon);font-size:16px;line-height:1}
  #restartBtn::before{content:'↺';font-size:16px;line-height:1}
  #undoBtn::before{content:'↶';font-size:16px;line-height:1}
  #spinBtn{width:42px!important;min-width:42px!important;max-width:42px!important}
  #spinBtn::before{content:'360°';font-size:9px;line-height:1;font-weight:850}
  #resetViewBtn::before{content:'⌂';font-size:15px;line-height:1}
  .scene-menu{top:48px!important;right:8px!important;width:min(210px,calc(100vw - 16px))!important}
  .brand{max-width:105px}
  .brand b{font-size:7.5px}
  .scene-intro{padding:12px;align-items:center}
  .scene-intro-card{width:min(350px,calc(100% - 10px));padding:17px;border-radius:17px}
  .scene-intro-card h2{font-size:19px}
  .scene-intro-card p{font-size:11px}
  .scene-intro-actions{grid-template-columns:1fr;gap:7px}
  .scene-intro-actions button{min-height:44px;font-size:10px}
}

@media(max-width:350px){
  /* V8 blendete hier ausgerechnet die Szenenwahl aus. V9 hält sie bewusst sichtbar. */
  .viewer-actions .scene-button{display:inline-grid!important}
  .viewer-actions{gap:3px!important}
  .viewer-actions .glass-button{width:30px;min-width:30px;max-width:30px;height:30px;min-height:30px}
  #spinBtn{width:38px!important;min-width:38px!important;max-width:38px!important}
  .brand{max-width:66px}
  .brand div:last-child{display:none}
}


/* FINAL V9.3 – bessere Lesbarkeit erledigter Schritte + klar erkennbarer Euro-Preis */
.step-dot.done .step-name{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:currentColor;
  opacity:.92;
}
body[data-scene="evening"] .step-dot.done .step-name,
body[data-scene="evening"] .step-dot.done .step-num{
  color:#ffffff !important;
}
body[data-scene="evening"] .step-dot.done{
  background:#2d3d43;
  color:#ffffff !important;
}
.price-currency{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  min-width:22px;
  color:#f0cb73;
  font-size:24px;
  line-height:1;
  font-weight:950;
  text-shadow:0 2px 12px rgba(226,189,99,.22);
  transform:translateY(-1px);
}
@media(max-width:720px){
  .price-currency{
    min-width:20px;
    font-size:22px;
  }
}
@media(max-width:390px){
  .price-currency{
    min-width:18px;
    font-size:20px;
  }
}


/* FINAL V9.5 – technische Dachmarkisen-Aufteilung, bewusst kundenfreundlich */
.awning-plan-live{
  display:grid;
  gap:7px;
  padding:14px 15px;
  border:1px solid rgba(184,148,69,.24);
  border-radius:14px;
  background:rgba(184,148,69,.075);
}
.awning-plan-live b{font-size:14px;line-height:1.35;color:var(--ink)}
.awning-plan-live span{font-size:12px;line-height:1.5;color:var(--muted)}
body[data-scene="evening"] .awning-plan-live{
  border-color:rgba(226,189,99,.24);
  background:rgba(226,189,99,.07);
}
body[data-scene="evening"] .awning-plan-live b{color:#f5f6f4}
body[data-scene="evening"] .awning-plan-live span{color:#bac5c8}


/* FINAL V9.6 – frei platzierbare Dachmarkise */
.awning-area-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px 18px;
  margin-top:12px;
  padding:0 8px 0 4px;
  box-sizing:border-box;
}
.awning-area-grid .field{min-width:0;width:100%;margin-top:0}
.awning-area-grid .field-row{gap:6px;min-width:0}
.awning-area-grid .field label{min-width:0;max-width:78px;line-height:1.2}
.awning-area-grid .num-wrap{flex:0 0 auto;min-width:0;gap:4px}
.awning-area-grid .number-input{width:84px;padding-left:7px;padding-right:7px}
.awning-area-grid .unit{min-width:18px}
.awning-area-grid .range{
  display:block;
  width:calc(100% - 4px);
  max-width:100%;
  margin-left:2px;
  box-sizing:border-box;
}
.awning-rule-note b{color:var(--ink)}
body[data-scene="evening"] .awning-rule-note b{color:#f5f6f4}
@media(max-width:620px){
  .awning-area-grid{grid-template-columns:1fr;padding:0;gap:10px}
  .awning-area-grid .field label{max-width:none}
  .awning-area-grid .number-input{width:112px}
  .awning-area-grid .range{width:100%;margin-left:0}
}


/* V9.17 – Dachgefälle 4–12° */
.slope-status{
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:11px 12px;
  border:1px solid rgba(184,148,69,.22);
  border-radius:12px;
  background:rgba(184,148,69,.07);
}
.slope-status b{font-size:12px}
.slope-status span{font-size:11px;line-height:1.4;color:var(--muted)}
body[data-scene="evening"] .slope-status b{color:#f3d487}
body[data-scene="evening"] .slope-status span{color:rgba(255,255,255,.68)}


/* V9.19 – Konfiguration teilen */
.share-button{border-color:rgba(210,180,108,.42)!important;background:rgba(184,148,69,.12)!important}
.share-modal{position:absolute;z-index:95;inset:0;display:grid;place-items:center;padding:18px;background:rgba(8,13,16,.62);backdrop-filter:blur(8px)}
.share-modal[hidden]{display:none!important}
.share-card{position:relative;width:min(520px,100%);padding:27px;border:1px solid rgba(210,180,108,.30);border-radius:22px;background:linear-gradient(155deg,#253239,#182328);color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.42)}
.share-close{position:absolute;top:11px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:23px;cursor:pointer}
.share-kicker{display:block;color:#d2b46c;font-size:10px;font-weight:950;letter-spacing:.13em}
.share-card h2{margin:7px 38px 8px 0;color:#fff;font-size:25px;line-height:1.14}
.share-card>p{margin:0;color:rgba(255,255,255,.70);font-size:13px;line-height:1.5}
.share-state{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px;border-radius:13px;background:rgba(255,255,255,.055)}
.share-state[hidden]{display:none!important}
.share-spinner{width:19px;height:19px;border:3px solid rgba(255,255,255,.18);border-top-color:#d2b46c;border-radius:50%;animation:shareSpin .8s linear infinite;flex:0 0 auto}
@keyframes shareSpin{to{transform:rotate(360deg)}}
.share-ready{margin-top:18px}.share-ready[hidden],.share-error[hidden]{display:none!important}
.share-ready label{display:block;margin-bottom:6px;font-size:11px;font-weight:850;color:rgba(255,255,255,.72)}
.share-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.share-url-row input{min-width:0;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:0 11px;background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:12px}
.share-url-row button,.share-whatsapp{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;border-radius:11px;padding:0 15px;background:linear-gradient(135deg,#d2b46c,#b89445);color:#171b1d;font:inherit;font-weight:900;text-decoration:none;cursor:pointer}
.share-whatsapp{width:100%;margin-top:9px;background:#fff;color:#17231c}
.share-ready small{display:block;margin-top:10px;color:rgba(255,255,255,.48);font-size:10px;line-height:1.4}
.share-error{margin-top:16px;padding:12px;border:1px solid rgba(255,120,120,.25);border-radius:12px;background:rgba(180,55,55,.18);color:#ffe1e1;font-size:12px;line-height:1.4}
@media(max-width:720px){.share-button{font-size:0!important}.share-button::before{content:"🔗";font-size:17px}.share-modal{padding:10px}.share-card{padding:24px 17px 18px;border-radius:18px}.share-card h2{font-size:22px}.share-url-row{grid-template-columns:1fr}.share-url-row button{width:100%}}


/* FINAL V9.21 – echte Sonnenplanung */
.sun-stat-chip{border:1px solid rgba(210,180,108,.28);cursor:pointer;text-align:left;font:inherit;appearance:none;transition:.16s ease}
.sun-stat-chip:hover{transform:translateY(-1px);border-color:rgba(232,201,123,.65)}
.sun-stat-chip.active{background:linear-gradient(145deg,rgba(177,132,47,.96),rgba(122,88,31,.94));border-color:rgba(243,208,119,.72)}
.sun-panel{position:absolute;z-index:110;inset:0;display:grid;place-items:center;padding:18px;background:rgba(8,13,16,.58);backdrop-filter:blur(8px)}
.sun-panel[hidden]{display:none!important}
.sun-sheet{position:relative;width:min(720px,100%);max-height:calc(100% - 10px);overflow:auto;padding:26px;border:1px solid rgba(210,180,108,.28);border-radius:22px;background:linear-gradient(155deg,#fdfcf9,#f4f1e8);box-shadow:0 28px 90px rgba(0,0,0,.34);color:#172329}
.sun-sheet-handle{display:none}
.sun-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#e9eceb;color:#223039;font-size:22px;cursor:pointer}
.sun-kicker{display:block;color:#a37d2f;font-size:10px;font-weight:950;letter-spacing:.13em}
.sun-sheet h2{margin:5px 40px 6px 0;font-size:25px;line-height:1.08;letter-spacing:-.03em}
.sun-intro{margin:0 0 16px;color:#627078;font-size:12px;line-height:1.5}
.sun-active-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 13px;margin-bottom:10px;border-radius:14px;background:#1d3038;color:#fff;cursor:pointer}
.sun-active-row span b{display:block;font-size:12px}.sun-active-row span small{display:block;margin-top:2px;color:rgba(255,255,255,.65);font-size:9px;line-height:1.35}
.sun-active-row input{width:20px;height:20px;accent-color:#c5a04e}
.sun-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sun-section{margin-top:10px;padding:13px;border:1px solid #dfe4e4;border-radius:15px;background:rgba(255,255,255,.72)}
.sun-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}.sun-section-head b{font-size:12px}.sun-section-head span{font-size:10px;font-weight:850;color:#876923}
.sun-date-input,.sun-location-row input{width:100%;min-height:40px;border:1px solid #d7dedf;border-radius:10px;background:#fff;padding:0 10px;color:#172329}
.sun-presets,.sun-direction-presets{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.sun-presets button,.sun-direction-presets button{border:1px solid #d7dddc;background:#fff;border-radius:999px;padding:6px 8px;font-size:9px;font-weight:800;cursor:pointer}
.sun-presets button:hover,.sun-direction-presets button:hover{border-color:#b89445;background:#faf5e8}
.sun-time-range,.sun-orientation-controls input[type=range]{width:100%;accent-color:#b89445}
.sun-time-axis{display:flex;justify-content:space-between;color:#7a8589;font-size:8px;margin-top:2px}
.sun-play{width:100%;min-height:38px;margin-top:9px;border:0;border-radius:10px;background:#18333f;color:#fff;font-size:10px;font-weight:850;cursor:pointer}
.sun-help{margin:-3px 0 10px;color:#6b777c;font-size:9px;line-height:1.4}
.sun-compass-wrap{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px}
.sun-compass{position:relative;width:142px;height:142px;border:1px solid #cbd4d5;border-radius:50%;background:radial-gradient(circle at center,#fff 0 45%,#eef2f1 46% 47%,#fff 48% 100%);box-shadow:inset 0 0 0 7px #f5f7f6}
.sun-compass:after{content:"";position:absolute;inset:14px;border:1px dashed #d9dfdf;border-radius:50%}
.sun-compass>span{position:absolute;font-size:9px;font-weight:900;color:#405058;z-index:2}.sun-compass .north{top:7px;left:50%;transform:translateX(-50%);color:#9a6e22}.sun-compass .south{bottom:7px;left:50%;transform:translateX(-50%)}.sun-compass .east{right:8px;top:50%;transform:translateY(-50%)}.sun-compass .west{left:8px;top:50%;transform:translateY(-50%)}
.sun-compass-needle{position:absolute;inset:21px;z-index:3;transition:transform .08s linear}.sun-compass-needle:before{content:"";position:absolute;left:50%;top:7px;width:3px;height:48px;transform:translateX(-50%);background:linear-gradient(#b98a2f,#d1ad5a);border-radius:3px}.sun-compass-needle:after{content:"";position:absolute;left:50%;top:1px;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:0;border-top:13px solid #b98a2f}.sun-compass-needle i{position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);border-radius:50%;background:#1a313b;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.sun-orientation-controls{min-width:0}.sun-direction-presets{display:grid;grid-template-columns:repeat(4,1fr)}
.sun-location-row{display:grid;grid-template-columns:1fr auto;gap:7px}.sun-location-row button,.sun-location-auto{min-height:40px;border:0;border-radius:10px;background:#c39b46;color:#171b1d;padding:0 13px;font-size:10px;font-weight:900;cursor:pointer}.sun-location-auto{width:100%;margin-top:7px;background:#edf1f0;color:#26373d;border:1px solid #d8dfdf}.sun-location-note{display:block;margin-top:7px;color:#778287;font-size:8px;line-height:1.4}
.sun-result{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.sun-result>div{padding:10px;border-radius:12px;background:#1c3039;color:#fff}.sun-result span{display:block;color:rgba(255,255,255,.62);font-size:8px}.sun-result b{display:block;margin-top:2px;font-size:12px}
.sun-warning{margin-top:10px;padding:10px 11px;border-radius:11px;border:1px solid #ecd49e;background:#fff7e6;color:#6c501a;font-size:9px;line-height:1.45}
.sun-disclaimer{margin:10px 2px 0;color:#788287;font-size:8px;line-height:1.45}
@media(max-width:720px){
  .viewer-stats{max-width:calc(100% - 20px)!important}
  .viewer-stats .stat-chip:nth-child(n+5){display:none!important}
  .viewer-stats .sun-stat-chip{display:block!important}

  /* V9.27: Sonnen-/Ausrichtungseinstellungen sind auf Mobile ein eigener
     Vollbildmodus. Der Dialog hängt nicht mehr im nur 38svh hohen Viewer. */
  body.sun-settings-open{overflow:hidden!important;overscroll-behavior:none}
  body.sun-settings-open .config-panel{visibility:hidden;pointer-events:none}
  .sun-panel{
    position:fixed;
    inset:0;
    z-index:1000;
    display:block;
    padding:0;
    background:#f6f3eb;
    backdrop-filter:none;
    overflow:hidden;
  }
  .sun-panel[hidden]{display:none!important}
  .sun-sheet{
    position:relative;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border:0;
    border-radius:0;
    padding:calc(18px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  .sun-sheet-handle{display:none}
  .sun-close{
    position:fixed;
    z-index:1002;
    top:calc(10px + env(safe-area-inset-top));
    right:12px;
    width:38px;
    height:38px;
    background:#e9eceb;
    box-shadow:0 4px 14px rgba(20,32,38,.12);
  }
  .sun-kicker{padding-right:48px}
  .sun-sheet h2{font-size:21px;padding-right:44px}
  .sun-intro{font-size:11px;padding-right:8px}
  .sun-grid-two{grid-template-columns:1fr}
  .sun-section{padding:12px}
  .sun-compass-wrap{grid-template-columns:112px 1fr;gap:12px}
  .sun-compass{width:108px;height:108px}
  .sun-compass-needle{inset:18px}
  .sun-compass-needle:before{height:32px}
  .sun-result{grid-template-columns:1fr 1fr}
  .sun-location-row{grid-template-columns:1fr}
  .sun-location-row button{width:100%}
  .sun-direction-presets{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:430px){.stat-chip.sun-stat-chip{padding:6px 7px}.stat-chip.sun-stat-chip b{font-size:9px}}


/* V9.23 – Keil: einteilig oder geteilt */
.wedge-config-box{display:grid;gap:10px}
.wedge-config-box .wedge-subhead{margin-top:2px}
.wedge-choice-grid .choice-card{min-height:68px}
.wedge-choice-grid .choice-card:disabled{
  cursor:not-allowed;
  opacity:.42;
  transform:none!important;
}
body[data-scene="evening"] .wedge-config-box .mini-note{
  background:rgba(255,255,255,.055);
}


/* V9.24 – Live-Sonnensteuerung direkt im 3D-Bild */
.sun-live-bar{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:13;
  width:min(690px,calc(100% - 36px));
  padding:10px 12px 9px;
  border:1px solid rgba(224,191,108,.38);
  border-radius:15px;
  background:rgba(20,38,47,.94);
  color:#fff;
  box-shadow:0 14px 38px rgba(10,22,28,.26);
  backdrop-filter:blur(15px);
}
.sun-live-bar[hidden]{display:none!important}
.viewer.sun-live-open .viewer-stats{
  bottom:104px;
  max-width:calc(100% - 36px);
}
.viewer.sun-live-open .viewer-hint{display:none}

.sun-live-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sun-live-title{display:flex;align-items:center;gap:9px;min-width:0}
.sun-live-icon{
  width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:50%;background:rgba(221,183,90,.16);font-size:18px
}
.sun-live-title div{display:flex;align-items:baseline;gap:8px;min-width:0}
.sun-live-title small{font-size:9px;color:rgba(255,255,255,.58);font-weight:800;letter-spacing:.04em}
.sun-live-title b{font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
.sun-live-actions{display:flex;gap:5px;flex:0 0 auto}
.sun-live-icon-btn{
  width:32px;height:32px;border:1px solid rgba(255,255,255,.13);border-radius:9px;
  background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:13px;font-weight:900;
  cursor:pointer
}
.sun-live-icon-btn:hover{background:rgba(255,255,255,.13)}
.sun-live-icon-btn.playing{background:#c29a44;color:#172329;border-color:#dab866}
.sun-live-close{font-size:18px;font-weight:500}

.sun-live-range{
  display:block;width:100%;margin:8px 0 6px;accent-color:#d0ad5d;cursor:pointer
}
.sun-live-bottom{
  display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap
}
.sun-live-meta-btn{
  min-height:25px;border:1px solid rgba(255,255,255,.10);border-radius:999px;
  padding:3px 8px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.68);
  font:inherit;font-size:8px;cursor:pointer
}
.sun-live-meta-btn b{color:#fff;font-size:9px;margin-left:3px}
.sun-live-status{
  overflow:hidden;text-overflow:ellipsis;margin-left:auto;color:rgba(255,255,255,.64);
  font-size:8px;text-align:right
}
.sun-live-status.needs-setup{color:#f1ce7b;font-weight:800}

/* Sobald der Viewer selbst zu schmal wird, ist die alte Bedienhilfe weniger wichtig
   als die Planungswerte. So kann sie nie wieder Breite/Tiefe/Sonnenchips überdecken. */
@media(max-width:1350px){
  .viewer-hint{display:none}
  .viewer-stats{max-width:calc(100% - 36px)}
}
@media(max-width:720px){
  .sun-live-bar{
    left:10px;right:10px;bottom:9px;width:calc(100% - 20px);
    padding:8px 9px 7px;border-radius:13px
  }
  .viewer.sun-live-open .viewer-stats{bottom:91px;max-width:calc(100% - 20px)!important}
  .sun-live-title div{gap:6px}
  .sun-live-title small{display:none}
  .sun-live-title b{font-size:15px}
  .sun-live-icon{width:29px;height:29px;font-size:15px}
  .sun-live-icon-btn{width:29px;height:29px}
  .sun-live-bottom{gap:4px}
  .sun-live-meta-btn{padding:3px 6px}
  .sun-live-status{font-size:7px}
}
@media(max-width:430px){
  .sun-live-status{display:none}
  .sun-live-bottom{justify-content:space-between}
  .sun-live-meta-btn{flex:1;text-align:center}
}


/* V9.25 – Mobile Statusleiste + zusätzlicher Abstand zur Sonnenleiste */
.viewer.sun-live-open .viewer-stats{bottom:122px}
@media(max-width:720px){
  .viewer-stats{
    left:8px;right:8px;bottom:8px;
    max-width:none!important;width:calc(100% - 16px);
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:4px;padding:0 1px 2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .viewer-stats::-webkit-scrollbar{display:none}
  .viewer-stats .stat-chip,
  .viewer-stats .stat-chip:nth-child(n+4),
  .viewer-stats .stat-chip:nth-child(n+5),
  .viewer-stats .sun-stat-chip{
    display:flex!important;flex-direction:column;justify-content:center;
    flex:0 0 auto;min-width:48px;min-height:38px;
    padding:4px 6px;border-radius:9px;font-size:7px;line-height:1.05;
    scroll-snap-align:start;
  }
  .viewer-stats .stat-chip b{font-size:9px;margin-top:2px;white-space:nowrap}
  .viewer-stats .sun-stat-chip{min-width:66px;text-align:left}
  .viewer.sun-live-open .viewer-stats{bottom:111px;max-width:none!important}
}
@media(max-width:430px){
  .viewer-stats .stat-chip,
  .viewer-stats .sun-stat-chip{min-height:35px;padding:3px 5px;font-size:6.5px}
  .viewer-stats .stat-chip b{font-size:8px}
  .viewer-stats .sun-stat-chip{min-width:59px}
  .viewer.sun-live-open .viewer-stats{bottom:107px}
}


/* ==========================================================================\n   V9.31 – MOBILE FLOW / VIEWER FIRST (direkt auf V9.28)\n   ========================================================================== */
.mobile-help-button{display:inline-grid!important;place-items:center;font-weight:950}
.mobile-plan-summary,.smart-sun-mobile,.smart-sun-popover,.mobile-flow-head{display:none}
.motion-scale{display:flex;justify-content:space-between;margin:-4px 2px 0;color:var(--muted);font-size:8px;font-weight:800}
.shade-motion-control{border-radius:14px}
body[data-scene="evening"] .shade-motion-control{background:transparent!important;color:var(--text);border-color:var(--line)}
body[data-scene="evening"] .shade-motion-control .mini-note{background:rgba(255,255,255,.055)!important}
body[data-scene="evening"] .motion-scale{color:#9caaaf}
.desktop-expert-link{margin-top:9px;border:0;background:none;padding:0;color:#a47c2c;font:inherit;font-size:9px;font-weight:900;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(164,124,44,.32);text-underline-offset:3px}

.help-sheet,.reset-confirm,.expert-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:14px;background:rgba(7,13,16,.66);backdrop-filter:blur(10px)}
.help-sheet[hidden],.reset-confirm[hidden],.expert-modal[hidden]{display:none!important}
.help-sheet-card,.reset-confirm-card,.expert-card{width:min(560px,100%);max-height:calc(100dvh - 28px);overflow:auto;border:1px solid rgba(202,170,92,.30);border-radius:22px;background:#f8f6ef;color:#172329;box-shadow:0 28px 90px rgba(0,0,0,.36);padding:20px}
.help-sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.help-sheet-head span,.expert-kicker,.reset-confirm-card>span{font-size:8px;letter-spacing:.13em;font-weight:950;color:#9d782c}.help-sheet-head h2{margin:3px 0 0;font-size:21px}.help-sheet-head>button,.expert-close{border:0;width:34px;height:34px;border-radius:50%;background:#e7ebe9;color:#24353c;font-size:20px;cursor:pointer}.help-sheet-card>button{display:block;width:100%;padding:11px 12px;margin-top:7px;text-align:left;border:1px solid #dbe1df;border-radius:12px;background:#fff;color:#172329;cursor:pointer}.help-sheet-card>button b,.help-sheet-card>button small{display:block}.help-sheet-card>button b{font-size:11px}.help-sheet-card>button small{margin-top:2px;color:#718087;font-size:8px}.help-sheet-card>.help-danger{border-color:#e7cbc5;background:#fff8f6;color:#773b31}
.reset-confirm-card{width:min(430px,100%)}.reset-confirm-card h2{margin:5px 0 7px;font-size:22px}.reset-confirm-card p{font-size:10px;line-height:1.55;color:#68767c}.reset-confirm-card>div{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}.reset-confirm-card button{min-height:40px;padding:0 13px;border:1px solid #d8dedd;border-radius:10px;background:#fff;font-weight:850;cursor:pointer}.reset-confirm-card #resetConfirmYes{background:#713b32;color:#fff;border-color:#713b32}
.expert-card{position:relative}.expert-close{position:absolute;right:12px;top:12px}.expert-card h2{margin:5px 42px 7px 0;font-size:24px;letter-spacing:-.025em}.expert-card>p{margin:0 0 14px;color:#66747a;font-size:10px;line-height:1.55}.expert-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.expert-grid label{position:relative}.expert-grid span{display:block;margin-bottom:4px;font-size:8px;font-weight:850}.expert-grid input{width:100%;min-height:41px;padding:0 9px;border:1px solid #d7dedc;border-radius:10px;background:#fff;font:inherit}.expert-grid small{position:absolute;right:9px;bottom:13px;color:#819095;font-size:7px}.expert-privacy{display:flex;gap:7px;margin:12px 0;font-size:8px;line-height:1.45;color:#647277}.expert-privacy input{margin-top:2px;accent-color:#b69042}.expert-submit{width:100%;min-height:45px;border:0;border-radius:11px;background:#18333f;color:#fff;font-weight:950;cursor:pointer}.expert-status{margin-top:9px;padding:9px;border-radius:9px;font-size:9px}.expert-status.success{background:#e6f2e7;color:#275b34}.expert-status.error{background:#f7e7e2;color:#853c31}.expert-trust{display:block;margin-top:8px;text-align:center;color:#7d898d;font-size:7px}

.onboarding-welcome{position:absolute;z-index:70;left:50%;bottom:62px;transform:translateX(-50%);width:min(390px,calc(100% - 24px));pointer-events:none}.onboarding-welcome[hidden]{display:none!important}.onboarding-welcome-card{pointer-events:auto;padding:14px 15px;border:1px solid rgba(218,184,98,.34);border-radius:17px;background:rgba(18,35,43,.94);backdrop-filter:blur(16px);box-shadow:0 16px 46px rgba(0,0,0,.30);color:#fff}.onboarding-welcome-card>span{font-size:7px;color:#d6b45b;letter-spacing:.14em;font-weight:950}.onboarding-welcome-card h2{margin:3px 0 4px;font-size:18px}.onboarding-welcome-card p{margin:0;color:rgba(255,255,255,.68);font-size:9px;line-height:1.45}.onboarding-welcome-card>div{display:flex;gap:6px;margin-top:10px}.onboarding-welcome-card button{flex:1;min-height:36px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer}.onboarding-welcome-card #onboardingStart{background:#c9a34e;color:#172329;border-color:#c9a34e}
.tour-focus{position:fixed;z-index:1600;border:2px solid #dbb65c;border-radius:14px;box-shadow:0 0 0 9999px rgba(7,13,16,.63),0 0 28px rgba(219,182,92,.58);pointer-events:none;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}.tour-focus[hidden],.tour-card-v931[hidden],.micro-tip-v931[hidden]{display:none!important}.tour-card-v931,.micro-tip-v931{position:fixed;z-index:1610;left:12px;right:12px;bottom:calc(13px + env(safe-area-inset-bottom));padding:13px;border:1px solid rgba(217,179,85,.36);border-radius:15px;background:#152a33;color:#fff;box-shadow:0 18px 60px rgba(0,0,0,.42)}.tour-card-v931.tour-top{bottom:auto;top:calc(12px + env(safe-area-inset-top))}.tour-card-v931>span{color:#d5b158;font-size:7px;font-weight:950}.tour-card-v931 h3,.micro-tip-v931 h3{margin:3px 0 4px;font-size:14px}.tour-card-v931 p,.micro-tip-v931 p{margin:0;color:rgba(255,255,255,.72);font-size:9px;line-height:1.5}.tour-card-v931>div{display:flex;gap:5px;justify-content:flex-end;margin-top:9px}.tour-card-v931 button,.micro-tip-v931 button{min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:8px;font-weight:900}.tour-card-v931 #tourNext,.micro-tip-v931 button{background:#d0aa52;border-color:#d0aa52;color:#172329}.micro-tip-v931{z-index:1300}.micro-tip-v931 button{margin-top:9px}.micro-focus{outline:3px solid rgba(218,181,88,.70)!important;outline-offset:4px!important}

@media(max-width:720px){
  html,body{width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none}
  body .app-shell{height:100dvh!important;min-height:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,66fr) minmax(0,34fr)!important;gap:0!important;padding:0!important;overflow:hidden!important;background:#eef1f3}
  body .viewer{position:relative!important;top:auto!important;z-index:20!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;border-radius:0 0 18px 18px!important;box-shadow:0 8px 26px rgba(16,31,40,.14)!important;overflow:hidden!important}
  body .config-panel{min-height:0!important;height:auto!important;margin:0!important;border-radius:0!important;box-shadow:none!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important}
  body.mobile-guided .panel-header,body.mobile-guided .step-dots{display:none!important}
  body.mobile-guided .mobile-flow-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px 6px;border-bottom:1px solid var(--line);min-height:47px;background:var(--panel)}
  .mobile-flow-head>div{min-width:0}.mobile-flow-head span{display:block;font-size:6.5px;color:var(--accent);font-weight:950;letter-spacing:.06em}.mobile-flow-head b{display:block;font-size:12px;line-height:1.1}.mobile-flow-head small{display:block;margin-top:2px;color:var(--muted);font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-flow-head button{flex:0 0 auto;min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:7.5px;font-weight:900}
  body.mobile-guided .step-content{min-height:0!important;height:auto!important;overflow:auto!important;overscroll-behavior:contain;padding:7px 10px 8px!important;border-top:0!important}
  .mobile-hidden-step-title{display:none!important}.mobile-flow-page{display:none}.mobile-flow-page.active{display:block!important;animation:mobileFlowIn .16s ease both}@keyframes mobileFlowIn{from{opacity:.3;transform:translateX(6px)}to{opacity:1;transform:none}}
  body.mobile-guided .mobile-flow-page>.section-block,body.mobile-guided .mobile-flow-page.section-block{padding:4px 0!important;border-top:0!important}
  body.mobile-guided .section-head{margin-bottom:6px}.section-head b{font-size:10px}.section-head span{font-size:7px}
  body.mobile-guided .choice-grid{gap:5px!important}.choice-card{min-height:40px!important;padding:7px 8px!important;border-radius:10px!important}.choice-card strong{font-size:9px!important}.choice-card small{font-size:6.5px!important;margin-top:1px!important;line-height:1.2!important}.choice-preview,.side-preview-svg{max-height:31px!important}
  body.mobile-guided .field{margin-bottom:4px!important}.field-row{margin-bottom:3px!important}.field-row label{font-size:9px!important}.number-input{height:32px!important;font-size:11px!important}.range{margin:1px 0!important}
  body.mobile-guided .mini-note,body.mobile-guided .warning-note{padding:6px 7px!important;margin-top:5px!important;font-size:7px!important;line-height:1.35!important;border-radius:8px!important}.slope-status{padding:6px 7px!important;margin-top:5px!important}.slope-status b{font-size:8px!important}.slope-status span{font-size:6.5px!important;line-height:1.3!important}
  body.mobile-guided .panel-footer{position:relative!important;bottom:auto!important;z-index:25!important;display:grid!important;grid-template-columns:1fr 1.45fr!important;gap:6px!important;padding:6px 10px calc(6px + env(safe-area-inset-bottom))!important;background:var(--panel)!important;backdrop-filter:none!important;box-shadow:0 -5px 16px rgba(19,39,50,.06)!important}.panel-footer button{min-height:36px!important;font-size:9px!important;border-radius:10px!important}
  body.mobile-overview .app-shell{grid-template-rows:minmax(0,54fr) minmax(0,46fr)!important}.mobile-overview .config-panel{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}.mobile-overview .panel-header{padding:10px 12px 7px!important}.mobile-overview .panel-header h1{font-size:15px!important}.mobile-overview .panel-header p{display:none}.mobile-overview .step-dots{display:flex!important;padding:5px 10px 7px!important;overflow-x:auto!important}.mobile-overview .step-content{overflow:auto!important;padding:10px!important}.mobile-overview .panel-footer{position:relative!important}
  body[data-scene="evening"] .mobile-flow-head,body[data-scene="evening"] .panel-footer{background:#172127!important}

  .brand{top:9px!important;left:9px!important;padding:0!important;background:transparent!important;box-shadow:none!important}.brand>div:last-child{display:none!important}.brandmark{width:31px!important;height:31px!important;border-radius:10px!important;font-size:15px!important}
  .viewer-actions{top:8px!important;right:8px!important;gap:3px!important;max-width:none!important;flex-wrap:nowrap!important}.viewer-actions .glass-button{display:inline-grid!important;width:29px!important;min-width:29px!important;max-width:29px!important;height:29px!important;min-height:29px!important;padding:0!important;border-radius:9px!important;font-size:0!important;place-items:center!important}.viewer-actions #restartBtn,.viewer-actions #resetViewBtn{display:none!important}.viewer-actions #undoBtn{display:inline-grid!important}.viewer-actions #undoBtn::before{content:'↶';font-size:15px!important}.viewer-actions #spinBtn::before{content:'360°';font-size:7px!important;font-weight:950}.viewer-actions #shareBtn::before{content:'↗';font-size:14px!important}.viewer-actions .mobile-help-button::before{content:'?';font-size:14px!important;font-weight:950}.viewer-actions .scene-button::before{content:attr(data-icon);font-size:14px!important}.viewer-actions .scene-button{font-size:0!important}.scene-menu{right:0!important;min-width:180px!important}
  .viewer-stats,.sun-live-bar,.viewer-hint{display:none!important}
  .mobile-plan-summary{display:block;position:absolute;z-index:16;left:8px;right:8px;bottom:6px;height:21px;padding:0 8px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(18,35,43,.80);backdrop-filter:blur(10px);color:rgba(255,255,255,.80);font-size:6.8px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .smart-sun-mobile{display:flex;position:absolute;z-index:16;left:8px;right:8px;bottom:32px;height:45px;align-items:center;gap:6px;pointer-events:none}.smart-sun-mobile>*{pointer-events:auto}
  .smart-compass-mobile{width:43px;height:43px;flex:0 0 43px;border:1px solid rgba(222,185,94,.38);border-radius:13px;background:rgba(18,35,43,.86);backdrop-filter:blur(12px);color:#fff;padding:3px;box-shadow:0 7px 22px rgba(0,0,0,.20)}.smart-compass-dial{position:relative;display:block;width:27px;height:27px;margin:0 auto;border:1px solid rgba(255,255,255,.18);border-radius:50%}.smart-compass-dial b{position:absolute;top:1px;left:50%;transform:translateX(-50%);font-size:5px;color:#e0b85a}.smart-compass-dial i{position:absolute;left:50%;top:6px;width:2px;height:16px;transform-origin:50% 8px;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.smart-compass-dial i:before{content:'';position:absolute;left:-2.5px;top:-2px;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:7px solid #ddb455}.smart-compass-mobile strong{display:block;margin-top:1px;font-size:6.5px}
  .smart-sun-time{min-width:0;flex:1;height:43px;border:1px solid rgba(222,185,94,.28);border-radius:13px;background:rgba(18,35,43,.86);backdrop-filter:blur(12px);padding:4px 6px;color:#fff;box-shadow:0 7px 22px rgba(0,0,0,.18)}.smart-sun-row{display:flex;align-items:center;gap:4px;height:21px}.smart-sun-row>span{font-size:10px}.smart-sun-row>b{width:31px;flex:0 0 31px;font-size:9px;font-variant-numeric:tabular-nums}.smart-sun-row input{min-width:0;flex:1;height:12px;accent-color:#d1aa52}.smart-sun-row button{width:23px;height:23px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font-size:8px;font-weight:950}.smart-sun-row button.playing{background:#d0aa52;color:#172329}.smart-sun-meta{display:block;width:100%;border:0;background:none;color:rgba(255,255,255,.58);font-size:6.2px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
  .smart-sun-popover{display:block;position:absolute;z-index:90;left:8px;right:8px;bottom:84px;padding:10px;border:1px solid rgba(219,181,88,.30);border-radius:14px;background:rgba(18,35,43,.97);backdrop-filter:blur(14px);color:#fff;box-shadow:0 15px 50px rgba(0,0,0,.35)}.smart-sun-popover[hidden]{display:none!important}.smart-popover-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.smart-popover-head b{font-size:10px}.smart-popover-head button{width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:17px}.smart-sun-popover label{display:block;margin-top:5px;font-size:7px;color:rgba(255,255,255,.68)}.smart-sun-popover input{width:100%;min-height:34px;margin-top:3px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.07);color:#fff;padding:0 8px;font:inherit;font-size:9px}.smart-date-presets{display:flex;gap:4px;margin-top:5px}.smart-date-presets button,.smart-location-device,.smart-location-row button{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.07);color:#fff;min-height:31px;padding:0 8px;font-size:7px;font-weight:850}.smart-location-row{display:grid;grid-template-columns:1fr auto;gap:4px}.smart-location-device{width:100%;margin-top:6px}.smart-sun-popover small{display:block;margin-top:5px;color:rgba(255,255,255,.48);font-size:6.5px}
  .onboarding-welcome{bottom:83px;width:calc(100% - 18px)}.onboarding-welcome-card{padding:11px 12px}.onboarding-welcome-card h2{font-size:15px}.onboarding-welcome-card p{font-size:7.5px}.onboarding-welcome-card button{min-height:32px;font-size:7.5px}
  .desktop-expert-link{display:none!important}
  .expert-grid{grid-template-columns:1fr}.expert-card{padding:18px 13px 14px;max-height:calc(100dvh - 16px);border-radius:17px}.expert-card h2{font-size:20px}.help-sheet-card,.reset-confirm-card{padding:15px;border-radius:17px}
}
@media(max-width:350px){
  body .app-shell{grid-template-rows:minmax(0,68fr) minmax(0,32fr)!important}.smart-sun-mobile{bottom:30px}.mobile-plan-summary{bottom:5px}.smart-sun-time{padding-left:4px;padding-right:4px}.smart-sun-row>b{width:29px;flex-basis:29px;font-size:8px}.viewer-actions{gap:2px!important}.viewer-actions .glass-button{width:27px!important;min-width:27px!important;height:27px!important;min-height:27px!important}.brandmark{width:28px!important;height:28px!important}.mobile-flow-head{min-height:43px!important;padding-top:5px!important;padding-bottom:5px!important}.mobile-flow-head small{display:none!important}.panel-footer button{min-height:33px!important}}
@media(max-height:570px) and (max-width:720px){
  body .app-shell{grid-template-rows:minmax(0,69fr) minmax(0,31fr)!important}.smart-sun-mobile{height:40px;bottom:29px}.smart-compass-mobile{width:39px;height:39px;flex-basis:39px}.smart-sun-time{height:39px}.mobile-flow-head{min-height:39px!important}.mobile-flow-head small{display:none!important}.step-content{padding-top:5px!important}.panel-footer{padding-top:4px!important;padding-bottom:calc(4px + env(safe-area-inset-bottom))!important}.panel-footer button{min-height:31px!important}}

/* V9.31 – destruktiven Neustart auf Desktop klar vom sicheren Undo trennen */
@media(min-width:721px){.viewer-actions #restartBtn{order:90;margin-left:12px;border-color:rgba(163,78,65,.45);background:rgba(99,45,39,.20);color:#7d4037}.viewer-actions #undoBtn{border-color:rgba(56,91,105,.24);background:rgba(255,255,255,.86)}}
body[data-scene="evening"] .viewer-actions #restartBtn{color:#f1b8ac;background:rgba(113,51,43,.30);border-color:rgba(229,139,119,.34)}


/* ==========================================================================
   V9.32 – Mobile Flow Stabilisierung
   ========================================================================== */
@media(max-width:720px){
  /* Etwas mehr Bedienraum, ohne den Viewer zum Nebenprodukt zu machen. */
  body .app-shell{grid-template-rows:minmax(0,62fr) minmax(0,38fr)!important}

  /* Guided UI: kompakter, aber mit genügend nutzbarer Höhe. */
  body.mobile-guided .mobile-flow-head{min-height:40px!important;padding:5px 9px 4px!important}
  .mobile-flow-head b{font-size:11px!important}
  .mobile-flow-head small{font-size:6.5px!important;margin-top:1px!important}
  body.mobile-guided .step-content{padding:5px 9px 5px!important}
  body.mobile-guided .panel-footer{padding:4px 9px calc(4px + env(safe-area-inset-bottom))!important}
  body.mobile-guided .panel-footer button{min-height:32px!important}

  /* Auf dem Handy nie wieder die alte <=350px-Einspalten-Regel erzwingen.
     Zwei Entscheidungen gehören nebeneinander. Vier Optionen erscheinen 2x2. */
  body.mobile-guided .choice-grid,
  body.mobile-guided .choice-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.mobile-guided .choice-card{min-height:36px!important;padding:5px 7px!important}
  body.mobile-guided .choice-card strong{font-size:8.5px!important}
  body.mobile-guided .choice-card small{font-size:6px!important;line-height:1.15!important}
  body.mobile-guided .section-head{margin-bottom:4px!important}
  body.mobile-guided .section-head b{font-size:9px!important}
  body.mobile-guided .section-head span{font-size:6.5px!important}
  body.mobile-guided .field{margin-top:4px!important;margin-bottom:2px!important}
  body.mobile-guided .field-row{margin-bottom:1px!important}
  body.mobile-guided .number-input{height:28px!important;min-height:28px!important}
  body.mobile-guided .mini-note,
  body.mobile-guided .warning-note{margin-top:3px!important;padding:4px 6px!important;font-size:6.5px!important;line-height:1.25!important}
  body.mobile-guided .toggle-line{padding:3px 0!important}
  body.mobile-guided .toggle-copy b{font-size:9px!important}
  body.mobile-guided .toggle-copy span{font-size:6.3px!important;line-height:1.2!important}
  body.mobile-guided .switch{width:38px!important;height:22px!important}
  body.mobile-guided .switch span:before{width:16px!important;height:16px!important}
  body.mobile-guided .switch input:checked+span:before{transform:translateX(16px)!important}

  /* Seitenvarianten sind visuell wichtig: Icons größer als in V9.31, Texte dafür knapper. */
  body.mobile-guided .flow-feld-gestalten .choice-card{min-height:69px!important;padding:5px!important;text-align:center!important}
  body.mobile-guided .flow-feld-gestalten .side-preview-svg{height:43px!important;max-height:43px!important;margin-bottom:3px!important;padding:2px!important}
  body.mobile-guided .flow-feld-gestalten .choice-card strong{font-size:8px!important}
  body.mobile-guided .flow-feld-gestalten .choice-card small{display:none!important}
  body.mobile-guided .field-tabs{gap:4px!important;padding-bottom:1px!important}
  body.mobile-guided .field-tab{padding:5px 7px!important;font-size:8px!important}
  body.mobile-guided .field-tab small{font-size:6px!important}

  /* LED-Planer: weniger vertikale Fläche; weiterhin gut tippbar. */
  body.mobile-guided .led-planner{padding:6px!important}
  body.mobile-guided .led-rafters{height:67px!important;padding:0 4px!important}
  body.mobile-guided .led-rafter{width:38px!important;height:58px!important;flex-basis:38px!important}
  body.mobile-guided .led-count{width:23px!important;height:23px!important}

  /* Sonnenregler: große unsichtbare Touchfläche bei gleicher schlanker Optik. */
  .smart-sun-row{height:25px!important}
  #smartSunTime{
    position:relative!important;
    height:28px!important;
    margin:-8px 0!important;
    padding:8px 0!important;
    touch-action:none!important;
    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent;
  }
  #smartSunTime::-webkit-slider-thumb{width:22px;height:22px}
  .smart-sun-mobile,.smart-sun-mobile *{touch-action:manipulation}
  .smart-sun-mobile #smartSunTime{touch-action:none!important}

  /* Tutorial/Microtips sind jetzt Body-Overlays, deshalb niemals an der Viewer-Kante abgeschnitten. */
  .tour-card-v931{
    left:12px!important;right:12px!important;bottom:auto!important;
    max-height:calc(100dvh - 20px)!important;overflow:auto!important
  }
  .micro-tip-v931{
    left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    max-height:42dvh!important;overflow:auto!important
  }
  .micro-tip-v931.micro-tip-top{
    top:calc(10px + env(safe-area-inset-top))!important;bottom:auto!important
  }

  /* Im Seiten-Schritt ist eindeutig sichtbar, welche Dachseite gerade bearbeitet wird. */
  .mobile-side-focus{
    display:block;position:absolute;z-index:17;left:50%;top:47px;transform:translateX(-50%);
    max-width:70%;padding:4px 8px;border:1px solid rgba(222,185,94,.34);border-radius:999px;
    background:rgba(18,35,43,.84);backdrop-filter:blur(10px);color:#fff;
    font-size:7px;font-weight:900;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
    box-shadow:0 6px 18px rgba(0,0,0,.15)
  }
  .mobile-side-focus[hidden]{display:none!important}

  /* Status + Sonne bleiben getrennt und erhalten etwas mehr Luft. */
  .smart-sun-mobile{bottom:31px!important}
  .mobile-plan-summary{bottom:5px!important}
}

@media(max-width:350px){
  /* V9.31 machte auf schmalen Handys wieder alles einspaltig und nahm unten sogar Platz weg.
     V9.32 bleibt auch bei 273–350 px zweispaltig. */
  body .app-shell{grid-template-rows:minmax(0,60fr) minmax(0,40fr)!important}
  body.mobile-guided .choice-grid,
  body.mobile-guided .choice-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.mobile-guided .mobile-flow-head{min-height:38px!important}
  body.mobile-guided .panel-footer button{min-height:30px!important}
}

@media(max-height:570px) and (max-width:720px){
  body .app-shell{grid-template-rows:minmax(0,59fr) minmax(0,41fr)!important}
  body.mobile-guided .mobile-flow-head{min-height:36px!important;padding-top:3px!important;padding-bottom:3px!important}
  body.mobile-guided .panel-footer{padding-top:3px!important}
  body.mobile-guided .panel-footer button{min-height:29px!important}
}


/* ==========================================================================
   V9.33 – MOBILE FINISH
   ========================================================================== */
@media(max-width:720px){
  /* Nach V9.32 wieder minimal mehr Dach, ohne in die alte Scrollhölle zurückzufallen. */
  body .app-shell{grid-template-rows:minmax(0,64fr) minmax(0,36fr)!important}

  /* Reset ist wieder sichtbar, aber bewusst NICHT neben Undo:
     als letzte, rote Aktion ganz rechts in der Toolbar. */
  .viewer-actions #restartBtn{
    display:inline-grid!important;
    order:99!important;
    margin-left:4px!important;
    border-color:rgba(205,106,89,.40)!important;
    background:rgba(113,48,41,.28)!important;
    color:#ffd2c8!important
  }
  .viewer-actions #restartBtn::before{
    content:'↺'!important;
    font-size:14px!important;
    font-weight:900!important
  }
  .viewer-actions #undoBtn{order:3!important}
  .viewer-actions .mobile-help-button{order:8!important}

  /* Slider: sichtbare Form bleibt schlank, Touch-/Pointerfläche aber vollständig aktiv. */
  #smartSunTime{
    z-index:3!important;
    cursor:ew-resize!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }

  /* Abschluss: weniger Scrollen, 4 Pflichtfelder als kompaktes 2x2 Raster. */
  body.mobile-guided .mobile-flow-contact .price-reveal-card{
    padding:7px 8px!important;
    margin-bottom:5px!important;
    border-radius:11px!important
  }
  body.mobile-guided .mobile-flow-contact .price-reveal-card>p{display:none!important}
  body.mobile-guided .mobile-flow-contact .price-reveal-top{margin-bottom:3px!important}
  body.mobile-guided .mobile-flow-contact .price-reveal-top span{font-size:6.5px!important}
  body.mobile-guided .mobile-flow-contact .price-reveal-top b{font-size:9px!important}
  body.mobile-guided .mobile-flow-contact .price-blur-wrap{
    min-height:39px!important;
    margin:3px 0!important;
    border-radius:9px!important
  }
  body.mobile-guided .mobile-flow-contact .price-benefits{gap:3px!important;margin-top:4px!important}
  body.mobile-guided .mobile-flow-contact .price-benefits span{font-size:6px!important}
  body.mobile-guided .mobile-flow-contact .request-intro{
    padding:5px 7px!important;margin:3px 0!important;border-radius:8px!important
  }
  body.mobile-guided .mobile-flow-contact .request-intro b{font-size:8px!important}
  body.mobile-guided .mobile-flow-contact .request-intro span{display:none!important}
  body.mobile-guided .mobile-flow-contact .contact-grid-required{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important
  }
  body.mobile-guided .mobile-flow-contact .label-block{font-size:7px!important;margin-bottom:2px!important}
  body.mobile-guided .mobile-flow-contact .text-input{
    min-height:30px!important;height:30px!important;padding:0 7px!important;font-size:9px!important
  }
  body.mobile-guided .mobile-flow-contact .section-block{padding:6px!important;margin-bottom:4px!important}

  body.mobile-guided .mobile-flow-send .optional-contact-details{margin-bottom:5px!important}
  body.mobile-guided .mobile-flow-send .optional-contact-details summary{font-size:7.5px!important;padding:6px!important}
  body.mobile-guided .mobile-flow-send .privacy-check{font-size:6.5px!important;line-height:1.25!important;margin:5px 0!important}
  body.mobile-guided .mobile-flow-send .request-summary{padding:6px!important}
  body.mobile-guided .mobile-flow-send .summary-box{max-height:68px!important;overflow:auto!important}
  body.mobile-guided .mobile-flow-send .preview-mail-note{padding:5px!important;margin:4px 0!important}
  body.mobile-guided .mobile-flow-send .request-submit{min-height:34px!important}

  /* Seiten-/Beschattungs-Views: Badge bleibt klein und störungsfrei. */
  .mobile-side-focus{top:43px!important}
}

@media(max-width:350px){
  body .app-shell{grid-template-rows:minmax(0,62fr) minmax(0,38fr)!important}
  .viewer-actions{gap:2px!important}
  .viewer-actions .glass-button{
    width:26px!important;min-width:26px!important;max-width:26px!important;
    height:26px!important;min-height:26px!important
  }
  .viewer-actions #restartBtn{margin-left:2px!important}
  body.mobile-guided .mobile-flow-contact .contact-grid-required{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}

@media(max-height:570px) and (max-width:720px){
  body .app-shell{grid-template-rows:minmax(0,61fr) minmax(0,39fr)!important}
}


/* V9.34 FINAL FLOW FIX */
.smart-sun-touch-track{position:relative;min-width:0;flex:1;height:24px;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.smart-sun-touch-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:999px;background:rgba(255,255,255,.19);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.smart-sun-touch-fill{position:absolute;left:0;top:50%;height:4px;width:0;transform:translateY(-50%);border-radius:999px;background:#d2ad55;pointer-events:none}
.smart-sun-touch-thumb{position:absolute;left:0;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:50%;background:#f2d27b;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none}
.smart-sun-touch-track:focus-visible{filter:drop-shadow(0 0 5px rgba(222,185,94,.7))}
.special-viewer-badge{transition:opacity .22s ease,transform .22s ease}.special-viewer-badge.show{animation:specialBadgeIn .24s ease both}@keyframes specialBadgeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

@media(min-width:721px){
  .tour-card-v931{left:auto;right:auto;bottom:auto;width:330px;max-width:calc(100vw - 24px);padding:15px 16px;border-radius:16px}
  .tour-card-v931 h3{font-size:15px}.tour-card-v931 p{font-size:10px;line-height:1.45}
}

@media(max-width:720px){
  body .app-shell{grid-template-rows:minmax(0,65fr) minmax(0,35fr)!important}
  .smart-sun-row .smart-sun-touch-track{height:27px}.smart-sun-touch-thumb{width:20px;height:20px}
  body.mobile-guided .mobile-flow-send{min-height:100%;padding-bottom:8px;overflow:visible}
  body.mobile-guided .mobile-flow-send .request-submit{display:block!important;visibility:visible!important;min-height:36px!important}
}
@media(max-width:350px){body .app-shell{grid-template-rows:minmax(0,63fr) minmax(0,37fr)!important}}

/* ========================================================================== 
   V9.35 – MOBILE TYPOGRAPHY / bessere Lesbarkeit
   ========================================================================== */
@media(max-width:720px){
  /* Mobile bewusst deutlich größer: vorher waren viele Texte nur 6–9 px. */
  body .app-shell{grid-template-rows:minmax(0,58fr) minmax(0,42fr)!important}

  .mobile-flow-head span{font-size:10px!important}
  .mobile-flow-head b{font-size:16px!important;line-height:1.15!important}
  .mobile-flow-head small{font-size:11px!important;line-height:1.25!important}
  .mobile-flow-head button{font-size:11px!important;min-height:34px!important}

  body.mobile-guided .section-head b{font-size:14px!important}
  body.mobile-guided .section-head span{font-size:11px!important;line-height:1.35!important}

  body.mobile-guided .choice-card{min-height:54px!important;padding:8px 9px!important}
  body.mobile-guided .choice-card strong{font-size:13px!important;line-height:1.2!important}
  body.mobile-guided .choice-card small{font-size:10px!important;line-height:1.3!important;margin-top:3px!important}
  body.mobile-guided .flow-feld-gestalten .choice-card strong{font-size:12px!important}
  body.mobile-guided .field-tab{font-size:12px!important;padding:7px 8px!important}
  body.mobile-guided .field-tab small{font-size:9px!important}

  body.mobile-guided .label-block,
  body.mobile-guided .field label{font-size:11px!important}
  body.mobile-guided .toggle-copy b{font-size:13px!important}
  body.mobile-guided .toggle-copy span{font-size:10px!important;line-height:1.3!important}
  body.mobile-guided .mini-note,
  body.mobile-guided .warning-note{font-size:10px!important;line-height:1.35!important;padding:6px 8px!important}
  body.mobile-guided .number-input,
  body.mobile-guided .text-input{font-size:13px!important;min-height:36px!important;height:36px!important}

  body.mobile-guided .panel-footer button{font-size:12px!important;min-height:40px!important}

  .mobile-plan-summary{height:27px!important;font-size:10px!important;line-height:25px!important}
  .smart-compass-dial b{font-size:8px!important}
  .smart-compass-mobile strong{font-size:9px!important}
  .smart-sun-row>span{font-size:13px!important}
  .smart-sun-row>b{font-size:12px!important;width:39px!important;flex-basis:39px!important}
  .smart-sun-row button{font-size:10px!important}
  .smart-sun-meta{font-size:9px!important}
  .smart-popover-head b{font-size:14px!important}
  .smart-sun-popover label{font-size:11px!important}
  .smart-sun-popover input{font-size:12px!important}
  .smart-date-presets button,.smart-location-device,.smart-location-row button{font-size:10px!important}
  .smart-sun-popover small{font-size:9px!important}

  .onboarding-welcome-card>span{font-size:10px!important}
  .onboarding-welcome-card h2{font-size:19px!important}
  .onboarding-welcome-card p{font-size:12px!important;line-height:1.45!important}
  .onboarding-welcome-card button{font-size:11px!important;min-height:38px!important}

  .tour-card-v931>span{font-size:10px!important}
  .tour-card-v931 h3,.micro-tip-v931 h3{font-size:18px!important}
  .tour-card-v931 p,.micro-tip-v931 p{font-size:12px!important;line-height:1.45!important}
  .tour-card-v931 button,.micro-tip-v931 button{font-size:11px!important;min-height:36px!important}

  body.mobile-guided .mobile-flow-contact .price-reveal-top span{font-size:10px!important}
  body.mobile-guided .mobile-flow-contact .price-reveal-top b{font-size:13px!important}
  body.mobile-guided .mobile-flow-contact .price-benefits span{font-size:9.5px!important}
  body.mobile-guided .mobile-flow-contact .request-intro b{font-size:12px!important}
  body.mobile-guided .mobile-flow-contact .label-block{font-size:10.5px!important}
  body.mobile-guided .mobile-flow-contact .text-input{font-size:12px!important;min-height:36px!important;height:36px!important}
  body.mobile-guided .mobile-flow-send .optional-contact-details summary{font-size:11px!important}
  body.mobile-guided .mobile-flow-send .privacy-check{font-size:10px!important;line-height:1.35!important}

  .help-sheet-head span,.expert-kicker,.reset-confirm-card>span{font-size:10px!important}
  .help-sheet-card>button b{font-size:13px!important}
  .help-sheet-card>button small{font-size:10px!important;line-height:1.3!important}
  .reset-confirm-card p,.expert-card>p{font-size:12px!important}
  .expert-grid span,.expert-privacy{font-size:10px!important}
  .expert-grid small,.expert-trust{font-size:9px!important}
  .expert-status{font-size:11px!important}

  .viewer-stats .stat-chip,
  .viewer-stats .sun-stat-chip{font-size:9.5px!important}
  .viewer-stats .stat-chip b{font-size:11px!important}
}

@media(max-width:350px){
  body .app-shell{grid-template-rows:minmax(0,56fr) minmax(0,44fr)!important}
  .mobile-flow-head small{display:block!important}
}


/* V9.84 – temporäres Kamera-Entwickler-HUD */
.camera-dev-hud{
  position:absolute;left:18px;top:76px;z-index:30;
  width:min(330px,calc(100% - 36px));box-sizing:border-box;
  padding:9px 10px 8px;border-radius:11px;
  background:rgba(12,18,22,.82);color:#f3f6f7;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);font-family:Consolas,"SFMono-Regular",monospace;
}
.camera-dev-title{font:800 10px/1.2 Arial,sans-serif;letter-spacing:.09em;color:#bfcbd0;margin-bottom:5px}
.camera-dev-values{white-space:pre;font-size:10px;line-height:1.45;font-variant-numeric:tabular-nums}
.camera-dev-copy{margin-top:6px;height:25px;padding:0 9px;border:1px solid rgba(255,255,255,.20);border-radius:7px;background:rgba(255,255,255,.10);color:#fff;font:700 10px/1 Arial,sans-serif;cursor:pointer}
.camera-dev-copy:hover{background:rgba(255,255,255,.17)}
@media(max-width:720px){
  .camera-dev-hud{left:8px;top:47px;width:min(300px,calc(100% - 16px));padding:7px 8px}
  .camera-dev-values{font-size:8.5px}.camera-dev-copy{height:23px;font-size:9px}
}


/* V9.91 – Abendmodus: Undo und Freier Aufbau konsequent dunkel */
body[data-scene="evening"] .viewer-actions #undoBtn{
  background:rgba(18,29,35,.78)!important;
  color:#f1f4f4!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
}
body[data-scene="evening"] .viewer-actions #undoBtn:hover:not(:disabled){
  background:rgba(32,47,55,.92)!important;
  border-color:rgba(255,255,255,.22)!important;
}
body[data-scene="evening"] .zone-row{
  background:#1c282e!important;
  color:var(--ink)!important;
  border-color:var(--line)!important;
}
body[data-scene="evening"] .zone-order button,
body[data-scene="evening"] .zone-remove,
body[data-scene="evening"] .zone-add-row button{
  background:#111b20!important;
  color:#e9eeee!important;
  border-color:#344249!important;
}
body[data-scene="evening"] .zone-order button:hover:not(:disabled),
body[data-scene="evening"] .zone-add-row button:hover:not(:disabled){
  background:#26343a!important;
  border-color:var(--accent)!important;
}
body[data-scene="evening"] .zone-remove{
  color:#e6a99d!important;
}
body[data-scene="evening"] .zone-remove:hover{
  background:#302522!important;
  border-color:#714f46!important;
}
body[data-scene="evening"] .zone-order button:disabled,
body[data-scene="evening"] .zone-add-row button:disabled{
  background:#182329!important;
  color:#66757b!important;
  border-color:#29363c!important;
  opacity:.58;
}
body[data-scene="evening"] .zone-controls .unit,
body[data-scene="evening"] .zone-add-row span{
  color:#aebbc1!important;
}


.variant-desktop{display:inline-flex;align-items:center;gap:6px}
.variant-mobile{display:none;position:relative}
.variant-menu{right:0;left:auto;min-width:220px;max-width:min(88vw,320px)}
.variant-menu button{justify-content:flex-start;text-align:left}
.variant-menu .variant-menu-section{padding:8px 12px 4px;font:800 11px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#8b7650;text-transform:uppercase}
.variant-menu .variant-menu-meta{display:block;font-size:11px;line-height:1.3;color:#76838a;font-weight:600;margin-top:2px}
.variant-menu .variant-menu-empty{padding:10px 12px 12px;font-size:12px;line-height:1.4;color:#657279}
.variant-menu button.active-variant{border-color:rgba(210,180,108,.48);background:rgba(210,180,108,.18)}
.variant-menu button.danger{border-color:rgba(163,78,65,.30);background:rgba(120,50,40,.08);color:#7d4037}
@media(max-width:720px){
  .variant-desktop{display:none!important}
  .variant-mobile{display:block}
  .viewer-actions #variantMobileBtn{display:inline-grid!important;width:29px!important;min-width:29px!important;max-width:29px!important;height:29px!important;min-height:29px!important;padding:0!important;border-radius:9px!important;font-size:0!important;place-items:center!important}
  .viewer-actions #variantMobileBtn::before{content:'V';font-size:12px!important;font-weight:950}
  .variant-menu{right:0!important;min-width:210px!important}
}
@media(min-width:721px){
  .variant-mobile{display:none!important}
}

/* V10.16: Abschluss des Tutorials als klare, aber freiwillige Beratungs-CTA. */
.tour-card-v931.tour-expert-final{border-color:rgba(218,181,88,.68);box-shadow:0 18px 64px rgba(0,0,0,.48),0 0 34px rgba(218,181,88,.18)}
.tour-card-v931.tour-expert-final h3{color:#f0cf76}
.tour-card-v931.tour-expert-final #tourNext{padding-left:15px;padding-right:15px}

/* V10.17 – Desktop-Tutorial besser lesbar, Mobile unverändert */
@media(min-width:721px){
  .tour-card-v931{
    width:360px;
    padding:17px 18px;
  }
  .tour-card-v931>span{
    font-size:11px;
    line-height:1.25;
    letter-spacing:.02em;
  }
  .tour-card-v931 p{
    font-size:13px;
    line-height:1.52;
  }
  .tour-card-v931>div{
    gap:7px;
    margin-top:12px;
  }
  .tour-card-v931 button{
    min-height:37px;
    padding:0 13px;
    font-size:11px;
  }
}


/* V10.18 – geführte Feldnavigation + sauberes Varianten-Menü auf Mobile/Tablet */
.field-tab.flow-field-flash{
  animation:sengFieldGuideFlash 1.0s ease both;
}
@keyframes sengFieldGuideFlash{
  0%{box-shadow:0 0 0 0 rgba(218,181,88,0);border-color:var(--line)}
  25%{box-shadow:0 0 0 4px rgba(218,181,88,.28),0 0 22px rgba(218,181,88,.38);border-color:#daba63;background:#fff8e8;color:#23323a}
  70%{box-shadow:0 0 0 3px rgba(218,181,88,.18),0 0 14px rgba(218,181,88,.24);border-color:#daba63;background:#fffaf0;color:#23323a}
  100%{box-shadow:none}
}
@media(max-width:720px){
  /* Viewer-Toolbar über Sonne/Maßleiste halten, damit Dropdowns nie dahinter liegen. */
  .viewer-actions{z-index:90!important}
  .variant-mobile{z-index:95!important}
  .variant-menu{
    position:fixed!important;
    z-index:9999!important;
    top:43px!important;
    right:8px!important;
    left:auto!important;
    width:min(270px,calc(100vw - 16px))!important;
    min-width:0!important;
    max-width:none!important;
    max-height:min(62vh,430px)!important;
    overflow-y:auto!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  .variant-menu button{
    display:block!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    width:100%!important;
    padding:10px 11px!important;
    text-align:left!important;
    border-radius:9px!important;
  }
  .variant-menu button b{display:block!important;font-size:11px!important;line-height:1.25!important}
  .variant-menu button small{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.35!important}
  .variant-menu .variant-menu-section{padding:7px 10px 4px!important;font-size:9px!important}
  .variant-menu .variant-menu-empty{padding:9px 10px 11px!important;font-size:10px!important;line-height:1.4!important}
  /* Maß-/Pfosten-/Sparren-Leiste ca. 2 px tiefer. */
  .mobile-plan-summary{bottom:3px!important}
}


/* V10.19 – einzelne gespeicherte Variante gezielt löschen */
@media(min-width:721px){
  .variant-desktop .variant-delete-button{
    border-color:rgba(163,78,65,.35);
    background:rgba(99,45,39,.10);
    color:#87483e;
  }
  .variant-desktop .variant-delete-button:hover:not(:disabled){
    border-color:rgba(163,78,65,.58);
    background:rgba(99,45,39,.17);
  }
  .variant-desktop .variant-delete-button:disabled{opacity:.42;color:inherit}
}

/* V10.19 – Sonnenleiste bei schmaleren Desktopansichten mit sauberem Abstand. */
@media(min-width:721px) and (max-width:1180px){
  .sun-live-bar{left:14px!important;right:auto!important;bottom:14px!important;width:min(620px,calc(100% - 28px))!important}
  .viewer.sun-live-open .viewer-stats{bottom:128px!important}
}

/* V10.19 UPDATE – mobiles Sonne/Standort-Popup bleibt immer im sichtbaren Viewport. */
@media(max-width:720px){
  .smart-sun-popover{
    position:fixed!important;
    z-index:10050!important;
    top:calc(8px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:12px!important;
    border-radius:15px!important;
  }
  .smart-popover-head{position:sticky;top:-12px;z-index:2;margin:-12px -12px 7px;padding:10px 10px 7px;background:rgba(18,35,43,.985);border-radius:15px 15px 0 0}
  .smart-popover-head button{flex:0 0 auto;width:32px!important;height:32px!important}
}

/* V10.19 COMPLETE PATCH: Desktop-Erstbesucherkarte zentral im 3D-Viewer platzieren. */
@media(min-width:721px){
  .onboarding-welcome{
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }
}


/* V10.19 UPDATE – dynamische Desktop-Toolbar mit geschütztem Markenbereich.
   Die JS-Logik misst den real verfügbaren Platz zwischen Logo und Bedienleiste.
   Keine festen Split-Screen-Breakpoints mehr. */
@media(min-width:721px){
  .viewer .brand{
    z-index:97!important;
    flex:none!important;
  }
  .viewer .viewer-actions{
    z-index:95!important;
    white-space:nowrap;
  }

  /* Erste Verdichtungsstufe: Variantenverwaltung wird zu EINEM V-Dropdown.
     Alle übrigen Desktop-Beschriftungen dürfen zunächst erhalten bleiben. */
  .viewer.toolbar-compact .variant-desktop{display:none!important}
  .viewer.toolbar-compact .variant-mobile{display:block!important;position:relative!important;z-index:96!important}
  .viewer.toolbar-compact .viewer-actions{
    left:auto!important;
    right:8px!important;
    top:8px!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .viewer.toolbar-compact .viewer-actions .glass-button{
    min-height:34px;
    height:34px;
    padding:0 8px;
    font-size:9px;
    white-space:nowrap!important;
    margin-left:0!important;
  }
  .viewer.toolbar-compact .viewer-actions #restartBtn{margin-left:4px!important}
  .viewer.toolbar-compact .variant-menu{
    position:fixed!important;
    z-index:10001!important;
    top:50px!important;
    right:8px!important;
    left:auto!important;
    width:min(285px,calc(100vw - 16px))!important;
    min-width:0!important;
    max-width:none!important;
    max-height:min(70vh,520px)!important;
    overflow-y:auto!important;
  }

  /* Zweite Verdichtungsstufe: nur wenn selbst die kompakte Textleiste den
     geschützten Markenblock berühren würde. Dann werden alle Aktionen Icons. */
  .viewer.toolbar-tight .variant-desktop{display:none!important}
  .viewer.toolbar-tight .variant-mobile{display:block!important;position:relative!important;z-index:96!important}
  .viewer.toolbar-tight .viewer-actions{
    left:auto!important;
    right:8px!important;
    top:8px!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:3px!important;
    overflow:visible!important;
  }
  .viewer.toolbar-tight .viewer-actions .glass-button,
  .viewer.toolbar-tight .viewer-actions .scene-button,
  .viewer.toolbar-tight .viewer-actions #variantMobileBtn{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
    margin-left:0!important;
    border-radius:9px!important;
    font-size:0!important;
    white-space:nowrap!important;
  }
  .viewer.toolbar-tight .scene-switcher{flex:0 0 32px!important}
  .viewer.toolbar-tight .viewer-actions .scene-button::before{content:attr(data-icon);font-size:14px!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #shareBtn::before{content:'↗';font-size:15px!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #undoBtn::before{content:'↶';font-size:15px!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #spinBtn::before{content:'360°';font-size:7px!important;font-weight:950!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #variantMobileBtn::before{content:'V';font-size:12px!important;font-weight:950!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #resetViewBtn::before{content:'⌂';font-size:15px!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions .mobile-help-button::before{content:'?';font-size:15px!important;font-weight:950!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #restartBtn::before{content:'↺';font-size:15px!important;font-weight:900!important;line-height:1}
  .viewer.toolbar-tight .viewer-actions #restartBtn{order:90!important;margin-left:0!important}
  .viewer.toolbar-tight .scene-menu{z-index:10000!important}
  .viewer.toolbar-tight .variant-menu{z-index:10001!important}
}


/* V10.19 PATCH – Variantenmenü immer sauber direkt unter dem Varianten-/V-Button. */
.variant-menu{
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}
.variant-menu button{
  display:block!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-align:left!important;
}
.variant-menu button b,
.variant-menu button small{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.variant-menu button small{margin-top:3px!important}

@media(min-width:721px){
  /* Position/Größe werden beim Öffnen aus der echten Buttonposition berechnet. */
  .viewer.toolbar-compact .variant-menu,
  .viewer.toolbar-tight .variant-menu{
    right:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  .viewer.toolbar-compact .variant-menu button,
  .viewer.toolbar-tight .variant-menu button{
    padding:10px 11px!important;
    border-radius:9px!important;
  }
  .viewer.toolbar-compact .variant-menu button b,
  .viewer.toolbar-tight .variant-menu button b{font-size:11px!important;line-height:1.25!important}
  .viewer.toolbar-compact .variant-menu button small,
  .viewer.toolbar-tight .variant-menu button small{font-size:9px!important;line-height:1.35!important}
  .viewer.toolbar-compact .variant-menu .variant-menu-section,
  .viewer.toolbar-tight .variant-menu .variant-menu-section{padding:7px 10px 4px!important;font-size:9px!important}
  .viewer.toolbar-compact .variant-menu .variant-menu-empty,
  .viewer.toolbar-tight .variant-menu .variant-menu-empty{padding:9px 10px 11px!important;font-size:10px!important;line-height:1.4!important;white-space:normal!important}
}

/* V10.19 PATCH – Tablet / schmaler Desktop: 3D-Viewer bleibt fest sichtbar.
   Nur der untere Konfigurationsbereich scrollt. Die bisherige <=1050px-Regel
   setzte body auf overflow:auto und das Panel auf min-height:650px; dadurch
   wanderte der komplette Viewer beim Bearbeiten nach oben aus dem Viewport. */
@media (min-width:721px) and (max-width:1050px){
  html,body{
    height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .app-shell{
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:clamp(340px,58dvh,680px) minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px!important;
  }
  .viewer{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .config-panel{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  .step-content{
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .panel-footer{
    position:relative!important;
    bottom:auto!important;
    flex:none!important;
  }
}


/* V10.19 PATCH – FINALER STACKED-LAYOUT-SCROLLFIX
   Sobald die Desktop-Navigation unter den Viewer springt (721–1050 px),
   bleibt der gesamte App-Rahmen exakt im Viewport. Nur der Inhalt der
   Konfigurationsspalte darf scrollen. position:fixed verhindert auch
   programmatisches/Browser-Rubberband-Scrollen des Dokuments. */
@media (min-width:721px) and (max-width:1050px){
  html{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body .app-shell{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:clamp(340px,58dvh,680px) minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px!important;
  }
  body .viewer{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body .config-panel{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  body .step-content{
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
  body .panel-footer{
    position:relative!important;
    inset:auto!important;
    flex:none!important;
  }
}


/* V10.19 UX-PATCH – einmaliger Scroll-Hinweis im gestapelten Tablet/Split-Screen-Layout */
.config-panel.scroll-discovery-active{position:relative!important}
.config-panel.scroll-discovery-active .step-content.scroll-discovery-target{
  outline:3px solid rgba(218,181,88,.82)!important;
  outline-offset:-3px!important;
  box-shadow:inset 0 0 0 1px rgba(218,181,88,.40),inset 0 -42px 36px -34px rgba(218,181,88,.62)!important;
  animation:configScrollDiscoveryGlow 1.15s ease-in-out 2;
}
@keyframes configScrollDiscoveryGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(218,181,88,.35),inset 0 -42px 36px -34px rgba(218,181,88,.45)}
  50%{box-shadow:inset 0 0 0 3px rgba(218,181,88,.76),inset 0 -48px 42px -32px rgba(218,181,88,.76)}
}
.config-scroll-cue{
  position:absolute;
  z-index:85;
  left:50%;
  bottom:66px;
  transform:translateX(-50%);
  padding:7px 13px;
  border:1px solid rgba(218,181,88,.72);
  border-radius:999px;
  background:rgba(21,42,51,.94);
  color:#f0ca6c;
  box-shadow:0 8px 28px rgba(0,0,0,.24),0 0 20px rgba(218,181,88,.20);
  font-size:11px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.config-scroll-cue[hidden]{display:none!important}
@media(max-width:720px){.config-scroll-cue{display:none!important}}