/* Start custom CSS for html, class: .elementor-element-fe64200 *//* GTS24 Küchenrückwand-Messhilfe v2 */
.krw-assist{
--krw-ink:#102233;
--krw-ink-soft:#334c60;
--krw-muted:#647789;
--krw-line:#d7e2ea;
--krw-panel:#ffffff;
--krw-bg:#f4f8fb;
--krw-blue:#0878e5;
--krw-teal:#087c88;
--krw-cyan:#18bfd0;
--krw-cyan-soft:#e8f9fb;
--krw-yellow:#ffd400;
--krw-green:#15814c;
--krw-orange:#a66b00;
--krw-red:#c43831;
color:var(--krw-ink);
font-family:Arial,Helvetica,sans-serif;
line-height:1.5;
isolation:isolate;
}
.krw-assist *,.krw-assist *::before,.krw-assist *::after{box-sizing:border-box}
.krw-assist [hidden]{display:none!important}
.krw-assist button,.krw-assist input,.krw-assist select{font:inherit}
.krw-assist img{display:block;max-width:100%}
.krw-assist__shell{max-width:1180px;margin:0 auto;border:1px solid #cfdde6;border-radius:18px;background:var(--krw-panel);box-shadow:0 24px 70px rgba(16,34,51,.14);overflow:hidden}
.krw-assist__header{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding:24px 28px;color:#fff;background:linear-gradient(120deg,#102233,#123f5a 54%,#087c88)}
.krw-assist__header h2{margin:0;color:#fff!important;font-size:clamp(1.45rem,2.2vw,2.05rem);line-height:1.1;letter-spacing:0}
.krw-assist__header p{margin:8px 0 0;color:#dcecf3!important}
.krw-assist__eyebrow,.krw-assist__step-label{margin:0 0 6px;color:var(--krw-cyan);font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.krw-assist__progress{padding:14px 22px 12px;background:linear-gradient(180deg,#f2f8fb,#eaf3f7);border-bottom:1px solid var(--krw-line)}
.krw-assist__progress-copy{display:flex;justify-content:space-between;gap:14px;font-size:.82rem}
.krw-assist__progress-track{height:7px;margin:9px 0 12px;border-radius:8px;background:#d6e4ec;overflow:hidden}
.krw-assist__progress-track span{display:block;width:12.5%;height:100%;background:linear-gradient(90deg,var(--krw-blue),var(--krw-cyan));transition:width .18s ease}
.krw-assist__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.krw-assist__steps li{margin:0;padding:0;list-style:none}
.krw-assist__steps li::marker{content:""}
.krw-assist__steps button{display:flex;align-items:center;gap:7px;width:100%;min-height:40px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--krw-muted);text-align:left;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,color .15s ease}
.krw-assist__steps span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1px solid #bed1dc;border-radius:50%;background:#fff;font-size:.75rem;font-weight:900}
.krw-assist__steps b{font-size:.72rem}
.krw-assist__steps li.is-active button{background:#fff;color:var(--krw-ink);box-shadow:0 8px 22px rgba(16,34,51,.10)}
.krw-assist__steps li.is-active span{color:#fff;background:var(--krw-blue);border-color:var(--krw-blue)}
.krw-assist__steps li.is-done span{color:#fff;background:var(--krw-green);border-color:var(--krw-green)}
.krw-assist__main{padding:27px;background:linear-gradient(180deg,#fff 0,#fff 42%,#f7fbfd 100%)}
.krw-assist__panel{animation:krwFade .18s ease}
@keyframes krwFade{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.krw-assist__media-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:26px;align-items:center;margin-bottom:20px}
.krw-assist__media-grid img{width:100%;height:auto;max-height:248px;object-fit:cover;border:1px solid #d2e0e8;border-radius:8px;background:#eef5f8;box-shadow:0 10px 28px rgba(16,34,51,.08)}
.krw-assist__measure-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.krw-assist__measure-images img{height:100%;min-height:170px;object-fit:cover}
.krw-assist h3{margin:0 0 7px;color:var(--krw-ink)!important;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.16;letter-spacing:0}
.krw-assist h4{margin:0;color:var(--krw-ink)!important;letter-spacing:0}
.krw-assist p{color:#41586a}
.krw-assist__title{max-width:760px;margin-bottom:18px}
.krw-assist__title--situations{margin-top:22px}
.krw-assist__notice{margin:16px 0;padding:14px 16px;border-radius:8px;box-shadow:0 6px 18px rgba(16,34,51,.045)}
.krw-assist__notice p{margin:4px 0 0}
.krw-assist__notice--warning{border:1px solid #ecd064;background:#fff8d9;color:#604900}
.krw-assist__notice--warning p{color:#6d5600}
.krw-assist__notice--info{border-left:5px solid var(--krw-teal);background:var(--krw-cyan-soft);color:#07545c}
.krw-assist__step-brief{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:14px 0;padding:12px 14px;border:1px solid #cfe0e8;border-radius:8px;background:#f8fbfd;box-shadow:0 8px 22px rgba(16,34,51,.045)}
.krw-assist__step-brief strong{color:var(--krw-ink);white-space:nowrap}
.krw-assist__step-brief ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.krw-assist__step-brief li{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#fff;border:1px solid var(--krw-line);color:var(--krw-ink-soft);font-size:.84rem;font-weight:800}
.krw-assist__step-brief li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--krw-green);flex:0 0 7px}
.krw-assist__reassurance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.krw-assist__reassurance article{display:grid;gap:4px;padding:13px 14px;border:1px solid var(--krw-line);border-radius:8px;background:#f8fbfd}
.krw-assist__reassurance b{color:var(--krw-ink)}
.krw-assist__reassurance span{color:var(--krw-muted);font-size:.88rem}
.krw-assist__coach-note{margin:12px 0;padding:13px 15px;border:1px solid #cce4ea;border-left:5px solid var(--krw-cyan);border-radius:8px;background:#f2fbfd;color:#18495c;box-shadow:0 7px 18px rgba(16,34,51,.04)}
.krw-assist__coach-note b{color:#0f3d4c}
.krw-assist__microcopy{margin:0 0 12px;color:var(--krw-muted);font-size:.88rem}
.krw-assist__prep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.krw-assist__prep-grid article{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid var(--krw-line);border-radius:8px;background:#fff}
.krw-assist__prep-grid article>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--krw-cyan-soft);color:var(--krw-teal);font-weight:900}
.krw-assist__prep-grid div{display:grid;gap:3px}
.krw-assist__prep-grid small{color:var(--krw-muted)}
.krw-assist__situation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.krw-assist__choice{position:relative;overflow:hidden;border:2px solid var(--krw-line);border-radius:8px;background:#fff;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.krw-assist__choice:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,34,51,.08)}
.krw-assist__choice input{position:absolute;right:12px;top:12px;z-index:2;width:20px;height:20px;accent-color:var(--krw-blue)}
.krw-assist__choice img{width:100%;aspect-ratio:14/9;object-fit:cover;background:#eef5f8}
.krw-assist__choice span{display:grid;gap:4px;padding:13px 15px}
.krw-assist__choice small{color:var(--krw-muted)}
.krw-assist__choice.is-selected,.krw-assist__choice:has(input:checked){border-color:var(--krw-blue);box-shadow:0 0 0 3px rgba(8,120,229,.12)}
.krw-assist__choice.is-selected::after,.krw-assist__choice:has(input:checked)::after{content:"Ausgewählt";position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:var(--krw-blue);color:#fff;font-size:.72rem;font-weight:900}
.krw-assist__selection{display:flex;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 16px;border-radius:8px;background:#eef7fa}
.krw-assist__selection span{color:var(--krw-muted)}
.krw-assist__side-choice{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0;padding:0;border:0}
.krw-assist__side-choice legend{width:100%;color:var(--krw-muted);font-size:.78rem;font-weight:800}
.krw-assist__side-choice label{display:flex;gap:7px;align-items:center;font-weight:900;cursor:pointer}
.krw-assist__side-choice input{width:18px;height:18px;accent-color:var(--krw-blue)}
.krw-assist__toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:14px 0;padding:12px 14px;border:1px solid #d6e5ec;border-radius:8px;background:linear-gradient(180deg,#f3f9fc,#eaf4f8);color:var(--krw-muted)}
.krw-assist__cards,.krw-assist__audit{display:grid;gap:16px}
.krw-assist__card,.krw-assist__order-card,.krw-assist__socket-card,.krw-assist__summary-card{padding:18px;border:1px solid #d4e0e8;border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(16,34,51,.055)}
.krw-assist__card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:-2px 0 14px;padding-bottom:12px;border-bottom:1px solid #edf3f6}
.krw-assist__card-head p{margin:4px 0 0;color:var(--krw-muted);font-size:.82rem}
.krw-assist__remove{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#eef3f6;color:var(--krw-ink);font-size:1.25rem;cursor:pointer}
.krw-assist__input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.krw-assist__input-grid label,.krw-assist__socket-fields label{display:grid;gap:7px;font-weight:800}
.krw-assist__input-grid label>span,.krw-assist__socket-fields label>span{display:flex;align-items:center;border:1px solid #b9ccd7;border-radius:8px;background:#fff;overflow:hidden}
.krw-assist__measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.krw-assist__measure-column{display:grid;gap:9px;align-content:start;padding:14px;border:1px solid #e1ebf1;border-radius:8px;background:#f8fbfd}
.krw-assist__measure-column h5{margin:0;color:var(--krw-teal);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.krw-assist__measure-column p{margin:0;color:var(--krw-muted);font-size:.86rem}
.krw-assist__measure-column label{display:grid;gap:6px;font-weight:800}
.krw-assist__measure-column label small{color:var(--krw-muted);font-size:.78rem;font-weight:700}
.krw-assist__measure-column label>span{display:flex;align-items:center;border:1px solid #b9ccd7;border-radius:8px;background:#fff;overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,34,51,.03)}
.krw-assist input[type=number]{min-width:0;width:100%;min-height:50px;padding:12px;border:0;outline:0;background:transparent;color:var(--krw-ink);font-weight:900;font-size:1rem}
.krw-assist input:focus,.krw-assist select:focus{outline:3px solid rgba(8,120,229,.18);outline-offset:1px}
.krw-assist label i{padding-right:11px;color:var(--krw-muted);font-size:.82rem;font-style:normal}
.krw-assist select{width:100%;padding:12px;border:1px solid #b9ccd7;border-radius:8px;background:#fff;color:var(--krw-ink)}
.krw-assist__live{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:12px;padding:13px 15px;border-radius:8px;color:#fff;background:linear-gradient(120deg,var(--krw-ink),var(--krw-teal))}
.krw-assist__hint{margin-top:10px;padding:10px 12px;border-radius:8px;background:#fff4df;color:#6c4800}
.krw-assist__order-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}
.krw-assist__order-card p{margin:4px 0 0;color:var(--krw-muted)}
.krw-assist__order-visual{display:grid;gap:14px;margin:0 0 16px;padding:18px;border:1px solid #d4e0e8;border-radius:8px;background:#fbfdfe;box-shadow:0 10px 26px rgba(16,34,51,.055)}
.krw-assist__visual-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.krw-assist__visual-head p{margin:4px 0 0;color:var(--krw-muted)}
.krw-assist__visual-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);gap:16px;align-items:start}
.krw-assist__visual-stack{display:grid;gap:12px}
.krw-assist__visual-stage{border:1px solid var(--krw-line);border-radius:8px;background:#fff;overflow:hidden}
.krw-assist__visual-stage svg{display:block;width:100%;height:auto}
.krw-assist__visual-stage svg text{font-size:14px;font-weight:900}
.krw-assist__order-segments{display:grid;gap:14px}
.krw-assist__order-segment{padding:14px;border:1px solid var(--krw-line);border-radius:8px;background:#fff}
.krw-assist__segment-visual{border:1px solid #dce8ee;border-radius:8px;background:linear-gradient(180deg,#f8fbfd,#f2f8fb);overflow:hidden}
.krw-assist__segment-visual svg{display:block;width:100%;height:auto}
.krw-assist__joint-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.krw-assist__joint-grid label{display:grid;gap:6px;font-weight:800}
.krw-assist__joint-grid label>span{display:flex;align-items:center;border:1px solid #b9ccd7;border-radius:8px;background:#fff;overflow:hidden}
.krw-assist__joint-grid input{min-width:0;width:100%;padding:10px;border:0;background:transparent;font-weight:900}
.krw-assist__visual-data{display:grid;gap:10px}
.krw-assist__visual-data article{padding:12px;border:1px solid var(--krw-line);border-radius:8px;background:#fff}
.krw-assist__visual-data h5{margin:0 0 4px;color:var(--krw-ink);font-size:.95rem}
.krw-assist__visual-data p{margin:0 0 8px;color:var(--krw-muted);font-size:.82rem}
.krw-assist__visual-data dl{display:grid;gap:0}
.krw-assist__visual-data dl div{padding:6px 0}
.krw-assist__visual-data .is-result{color:var(--krw-blue)}
.krw-assist__visual-legend{display:flex;flex-wrap:wrap;gap:8px;max-width:360px}
.krw-assist__visual-legend span{display:inline-flex;gap:7px;align-items:center;padding:6px 8px;border:1px solid var(--krw-line);border-radius:999px;background:#fff;color:var(--krw-muted);font-size:.78rem;font-weight:800}
.krw-assist__visual-legend i{width:14px;height:9px;border-radius:2px}
.krw-assist__visual-legend .is-measured{border:1px dashed #7890a0;background:#fff}
.krw-assist__visual-legend .is-glass{border:1px solid var(--krw-cyan);background:rgba(170,235,242,.42)}
.krw-assist__visual-legend .is-kitchen{border:1px solid #b7c4cc;background:#e5edf2}
.krw-assist-svg-room{fill:#f7fafc}
.krw-assist-svg-worktop{fill:#d7e0e7}
.krw-assist-svg-cabinet{fill:#e8eef2;stroke:#c5d2dc;stroke-width:1}
.krw-assist-svg-base{fill:#f7fafc;stroke:#9fb1bd;stroke-width:1.2}
.krw-assist-svg-kitchen-line{stroke:#758b99;stroke-width:1.2}
.krw-assist-svg-hob{fill:#24394a}
.krw-assist-svg-raw{fill:#fff;stroke:#7890a0;stroke-width:1.4;stroke-dasharray:6 5}
.krw-assist-svg-order{fill:rgba(170,235,242,.44);stroke:var(--krw-cyan);stroke-width:2}
.krw-assist-svg-technical{fill:rgba(255,212,0,.3);stroke:var(--krw-orange);stroke-width:1.5;stroke-dasharray:5 4}
.krw-assist-svg-dim{stroke:var(--krw-blue);stroke-width:1.5}
.krw-assist-svg-corner{fill:none;stroke:#445d70;stroke-width:2;stroke-dasharray:7 5}
.krw-assist-svg-joint{stroke:#a66b00;stroke-width:2;stroke-dasharray:4 4}
.krw-assist-svg-label-line{stroke:#6a7f8f;stroke-width:1.2;stroke-dasharray:3 3}
.krw-assist-svg-segment-title{font-size:12px!important;font-weight:900!important;text-transform:uppercase}
.krw-assist-svg-title{font-size:11px!important;font-weight:850!important}
.krw-assist-svg-center-label{font-size:11px!important;font-weight:850!important}
.krw-assist-svg-joint-label,.krw-assist-svg-note{font-size:10px!important}
.krw-assist dl{margin:0}
.krw-assist__order-card dl,.krw-assist__summary-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.krw-assist dl div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #d9e3e9}
.krw-assist dt{color:var(--krw-muted)}
.krw-assist dd{margin:0;font-weight:900}
.krw-assist__order-card .is-result{color:var(--krw-blue)}
.krw-assist__confirm{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:14px;border:1px solid var(--krw-line);border-radius:8px;background:#fff;cursor:pointer}
.krw-assist__confirm input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--krw-blue)}
.krw-assist__socket-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(330px,1.2fr);gap:18px;align-items:start}
.krw-assist__socket-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;align-content:start}
.krw-assist__socket-field--full{grid-column:1/-1}
.krw-assist__socket-fields label{gap:3px}
.krw-assist__socket-fields label small{display:block;margin-top:-2px;color:var(--krw-muted);font-size:.72rem;font-weight:800}
.krw-assist__socket-fields select{height:40px;padding:0 10px}
.krw-assist__socket-fields label>span{min-height:40px}
.krw-assist__socket-fields input{min-height:40px!important;padding:8px 10px!important;font-size:.92rem!important}
.krw-assist__preview{border:1px solid #d4e0e8;border-radius:8px;background:linear-gradient(145deg,#fff,#f2fafb);overflow:hidden;box-shadow:0 8px 24px rgba(16,34,51,.055)}
.krw-assist__preview-head{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--krw-line);background:#eef5f8}
.krw-assist__preview-head small{color:var(--krw-muted)}
.krw-assist__preview svg{display:block;width:100%;height:auto}
.krw-assist-svg-glass{fill:rgba(170,235,242,.35);stroke:var(--krw-cyan);stroke-width:2}
.krw-assist-svg-edge{stroke:#9cb4c1;stroke-width:1.2;stroke-dasharray:4 4}
.krw-assist-svg-a{stroke:var(--krw-blue);stroke-width:2}
.krw-assist-svg-b{stroke:var(--krw-cyan);stroke-width:2}
.krw-assist svg text{font-size:11px;font-weight:800;fill:var(--krw-ink)}
.krw-assist__visual-stage svg text{font-size:14px;font-weight:900}
.krw-assist-svg-socket{fill:#eef3f6;stroke:var(--krw-ink);stroke-width:1.5}
.krw-assist-svg-socket-measure{stroke:var(--krw-blue);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:4 3}
.krw-assist__socket-status{display:grid;gap:4px;margin:0 12px 12px;padding:11px 12px;border-radius:8px}
.krw-assist__socket-status span{font-size:.82rem}
.krw-assist__socket-status.is-ok{background:#e7f7ee;color:#0e6339}
.krw-assist__socket-status.is-error{background:#ffe9e7;color:#8b211c}
.krw-assist__socket-calc{display:grid;gap:0;margin:0 12px 12px!important;padding:10px 12px;border:1px solid var(--krw-line);border-radius:8px;background:#fff}
.krw-assist__socket-calc div{padding:6px 0!important}
.krw-assist__socket-calc .is-result{color:var(--krw-blue)}
.krw-assist__empty{display:grid;gap:3px;padding:18px;border:1px dashed #b9ccd7;border-radius:8px;text-align:center;background:#f8fafb}
.krw-assist__empty span{color:var(--krw-muted)}
.krw-assist__audit-item{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px;border:1px solid var(--krw-line);border-radius:8px;background:#fff}
.krw-assist__audit-item>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-weight:900}
.krw-assist__audit-item p{margin:3px 0 0}
.krw-assist__audit-item.is-ok>span{background:var(--krw-green)}
.krw-assist__audit-item.is-warning>span{background:var(--krw-orange)}
.krw-assist__audit-item.is-error>span{background:var(--krw-red)}
.krw-assist__summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.krw-assist__summary-card h4{margin-bottom:10px;color:var(--krw-teal)!important}
.krw-assist__summary-card--wide{grid-column:1/-1;background:linear-gradient(180deg,#fff,#f9fcfd)}
.krw-assist__summary-card--intro{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 17px!important;background:#f7fbfd!important}
.krw-assist__summary-card--intro h4{margin:0!important}
.krw-assist__summary-card--intro p{margin:0;color:var(--krw-ink);font-weight:900}
.krw-assist__checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0;padding:0;list-style:none}
.krw-assist__checklist li{position:relative;padding-left:22px;color:#41586a;list-style:none}
.krw-assist__checklist li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--krw-green)}
.krw-assist__result-next{display:grid;gap:14px;margin-top:18px}
.krw-assist__configurator-card,.krw-assist__pdf-card{display:grid;gap:18px;padding:18px;border:1px solid #d4e0e8;border-radius:8px;background:#fff;box-shadow:0 10px 26px rgba(16,34,51,.055)}
.krw-assist__configurator-card{grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);align-items:center;background:linear-gradient(145deg,#fff,#f2fbfd)}
.krw-assist__configurator-card img{width:100%;border:1px solid var(--krw-line);border-radius:8px;background:#eef5f8}
.krw-assist__configurator-card h4,.krw-assist__pdf-card h4{font-size:1.2rem}
.krw-assist__pdf-card{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.krw-assist__pdf-card p,.krw-assist__configurator-card p{margin:6px 0 0}
.krw-assist__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
.krw-assist__socket-actions{justify-content:flex-end}
.krw-assist__nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--krw-line)}
.krw-assist__btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid transparent;border-radius:8px;text-decoration:none!important;font-weight:900;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.krw-assist__btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.krw-assist__btn--primary{color:#161616!important;background:var(--krw-yellow)!important;box-shadow:0 10px 24px rgba(255,212,0,.32)}
.krw-assist__btn--secondary{color:#fff!important;background:var(--krw-blue)!important;box-shadow:0 8px 18px rgba(8,120,229,.18)}
.krw-assist__btn--ghost{color:var(--krw-ink)!important;border-color:#b9ccd7!important;background:#fff!important}
.krw-assist__btn--quiet{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:rgba(255,255,255,.08)!important}
.krw-assist__btn:disabled{opacity:.45;cursor:not-allowed}
.krw-assist__error{margin-top:12px;padding:11px 13px;border:1px solid #eeaaa5;border-radius:8px;background:#ffe9e7;color:#8b211c;font-weight:900}
.krw-assist__toast{position:fixed;right:20px;bottom:20px;z-index:99999;max-width:340px;padding:12px 15px;border-radius:8px;background:var(--krw-ink);color:#fff;box-shadow:0 14px 40px rgba(16,34,51,.24)}
@media(max-width:900px){
.krw-assist__steps b{display:none}
.krw-assist__steps button{justify-content:center}
.krw-assist__situation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.krw-assist__socket-layout,.krw-assist__visual-layout{grid-template-columns:1fr}
.krw-assist__visual-head{flex-direction:column}
}
@media(max-width:700px){
.krw-assist__shell{border-radius:12px}
.krw-assist__header{padding:18px 16px;flex-direction:column}
.krw-assist__progress{padding:12px 14px}
.krw-assist__main{padding:20px 15px}
.krw-assist__media-grid{grid-template-columns:1fr}
.krw-assist__media-grid img{max-height:none}
.krw-assist__step-brief{grid-template-columns:1fr}
.krw-assist__step-brief strong{white-space:normal}
.krw-assist__step-brief ul{display:grid;grid-template-columns:1fr}
.krw-assist__prep-grid,.krw-assist__reassurance,.krw-assist__situation-grid,.krw-assist__input-grid,.krw-assist__measure-grid,.krw-assist__measure-images,.krw-assist__joint-grid,.krw-assist__summary,.krw-assist__checklist,.krw-assist__configurator-card,.krw-assist__pdf-card{grid-template-columns:1fr}
.krw-assist__order-card{grid-template-columns:1fr}
.krw-assist__order-card dl,.krw-assist__summary-card dl{grid-template-columns:1fr}
.krw-assist__socket-fields{grid-template-columns:1fr}
.krw-assist__toolbar,.krw-assist__selection,.krw-assist__preview-head{align-items:flex-start;flex-direction:column}
.krw-assist__order-visual{padding:14px}
.krw-assist__nav{position:sticky;bottom:0;z-index:5;margin-left:-15px;margin-right:-15px;padding:12px 15px;background:rgba(255,255,255,.97);box-shadow:0 -8px 20px rgba(16,34,51,.08)}
.krw-assist__actions .krw-assist__btn{width:100%}
}
@media print{
.krw-assist__header,.krw-assist__progress,.krw-assist__nav,.krw-assist__actions,.krw-assist__panel:not([data-krw-panel="4"]){display:none!important}
.krw-assist__main{padding:0}
.krw-assist__panel[data-krw-panel="4"]{display:block!important}
}
/* Messhilfe v2: eingebetteter Konfigurator */
.krw-v2-assist-wrap[hidden],.krw-v2-configurator[hidden]{display:none!important}
.krw-v2-configurator{margin:28px auto 0}
#kr-v6-root.krv6,
#kr-v6-root.krv6 * {
box-sizing: border-box;
}
#kr-v6-root.krv6 {
--krv6-surface: #ffffff;
--krv6-surface-soft: #f8fbfc;
--krv6-text: #18363d;
--krv6-muted: #667b81;
--krv6-line: #d9e5e8;
--krv6-primary: #0f6a7a;
--krv6-primary-dark: #0c5562;
--krv6-accent: #ffd800;
--krv6-success: #16794f;
--krv6-danger: #c93b32;
--krv6-shadow: 0 14px 32px rgba(17, 40, 48, 0.08);
max-width: 1540px;
margin: 28px auto;
color: var(--krv6-text);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.45;
}
#kr-v6-root .krv6-shell {
display: grid;
gap: 20px;
}
#kr-v6-root .krv6-topbar,
#kr-v6-root .krv6-stage-card,
#kr-v6-root .krv6-panel {
background: var(--krv6-surface);
border: 1px solid var(--krv6-line);
border-radius: 22px;
box-shadow: var(--krv6-shadow);
}
#kr-v6-root .krv6-topbar {
display: grid;
grid-template-columns: 180px 1fr 180px;
gap: 16px;
align-items: center;
padding: 16px 18px;
}
#kr-v6-root .krv6-topbar__center {
text-align: center;
}
#kr-v6-root .krv6-topbar__step {
color: var(--krv6-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
#kr-v6-root .krv6-topbar__title {
margin: 0;
font-size: 28px;
line-height: 1.12;
}
#kr-v6-root .krv6-topbar__right {
text-align: right;
}
#kr-v6-root .krv6-topbar__price-label {
color: var(--krv6-muted);
font-size: 12px;
margin-bottom: 4px;
}
#kr-v6-root .krv6-topbar__price {
color: var(--krv6-primary);
font-size: 24px;
font-weight: 700;
}
#kr-v6-root .krv6-main {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(390px, 500px);
gap: 20px;
align-items: start;
}
#kr-v6-root .krv6-stage-card {
padding: 22px;
}
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 16px;
}
#kr-v6-root .krv6-eyebrow {
margin: 0 0 6px;
color: var(--krv6-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#kr-v6-root .krv6-stage-card__title,
#kr-v6-root .krv6-panel__title {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.2;
}
#kr-v6-root .krv6-stage-card__text,
#kr-v6-root .krv6-panel__text,
#kr-v6-root .krv6-safe-note,
#kr-v6-root .krv6-price-note {
margin: 0;
color: var(--krv6-muted);
font-size: 14px;
}
#kr-v6-root .krv6-stage-flow {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
margin-top: 16px;
padding: 14px 16px;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 18px;
background: linear-gradient(180deg, rgba(15,106,122,0.04) 0%, rgba(255,216,0,0.06) 100%);
}
#kr-v6-root .krv6-stage-flow__item {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
#kr-v6-root .krv6-stage-flow__item strong {
font-size: 14px;
line-height: 1.3;
}
#kr-v6-root .krv6-stage-flow__label {
color: var(--krv6-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#kr-v6-root .krv6-stage-flow__divider {
width: 24px;
height: 2px;
border-radius: 999px;
background: rgba(15, 106, 122, 0.22);
}
#kr-v6-root .krv6-footer-guide {
padding: 12px 14px;
border: 1px solid rgba(15, 106, 122, 0.10);
border-radius: 16px;
background: linear-gradient(180deg, rgba(15,106,122,0.03) 0%, rgba(255,216,0,0.05) 100%);
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-stage {
position: relative;
border: 1px solid var(--krv6-line);
border-radius: 22px;
overflow: hidden;
background: linear-gradient(180deg, #f7fafc 0%, #eef4f6 100%);
min-height: 640px;
}
#kr-v6-root .krv6-stage__canvas {
display: block;
width: 100%;
height: auto;
touch-action: auto;
cursor: default;
}
#kr-v6-root .krv6-stage-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
#kr-v6-root .krv6-stage-meta__item {
padding: 14px 16px;
border: 1px solid var(--krv6-line);
border-radius: 16px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-stage-meta__item span {
display: block;
color: var(--krv6-muted);
font-size: 12px;
margin-bottom: 5px;
}
#kr-v6-root .krv6-stage-meta__item strong {
font-size: 16px;
}
#kr-v6-root .krv6-side {
display: grid;
gap: 16px;
position: sticky;
top: 16px;
}
#kr-v6-root .krv6-step {
display: grid;
gap: 16px;
}
#kr-v6-root .krv6-panel {
padding: 18px;
}
#kr-v6-root .krv6-panel__head {
margin-bottom: 14px;
}
#kr-v6-root .krv6-inline-state {
min-height: 20px;
font-size: 13px;
color: var(--krv6-muted);
}
#kr-v6-root .krv6-inline-state.is-success {
color: var(--krv6-success);
font-weight: 700;
}
#kr-v6-root .krv6-inline-state.is-error {
color: var(--krv6-danger);
font-weight: 700;
}
#kr-v6-root .krv6-layout-grid,
#kr-v6-root .krv6-source-switch,
#kr-v6-root .krv6-toggle-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#kr-v6-root .krv6-source-switch,
#kr-v6-root .krv6-toggle-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#kr-v6-root .krv6-layout-card,
#kr-v6-root .krv6-source-btn,
#kr-v6-root .krv6-toggle-btn,
#kr-v6-root .krv6-btn,
#kr-v6-root .krv6-category-btn,
#kr-v6-root .krv6-gallery-card,
#kr-v6-root .krv6-glass-card,
#kr-v6-root .krv6-hole-card__delete {
appearance: none;
font: inherit;
}
#kr-v6-root .krv6-layout-card,
#kr-v6-root .krv6-source-btn,
#kr-v6-root .krv6-toggle-btn {
min-height: 50px;
border-radius: 14px;
border: 1px solid var(--krv6-line);
background: #fff;
color: var(--krv6-text);
cursor: pointer;
transition: 0.2s ease;
}
#kr-v6-root .krv6-layout-card {
text-align: left;
min-height: 132px;
padding: 14px;
border-width: 2px;
}
#kr-v6-root .krv6-layout-card strong {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
#kr-v6-root .krv6-layout-card small {
display: block;
color: var(--krv6-muted);
font-size: 12px;
}
#kr-v6-root .krv6-layout-card.is-selected,
#kr-v6-root .krv6-source-btn.is-active,
#kr-v6-root .krv6-toggle-btn.is-active {
border-color: var(--krv6-primary);
background: #f1fafb;
color: var(--krv6-primary);
box-shadow: 0 0 0 4px rgba(15, 106, 122, 0.08);
}
#kr-v6-root .krv6-layout-card__mini {
display: block;
height: 50px;
border-radius: 12px;
margin-bottom: 12px;
background: linear-gradient(180deg, #edf2f6 0%, #dce5ea 100%);
position: relative;
}
#kr-v6-root .krv6-layout-card__mini::before {
content: "";
position: absolute;
inset: 9px;
border-radius: 8px;
border: 2px solid #afbec6;
background: rgba(255,255,255,0.92);
}
#kr-v6-root .krv6-layout-card__mini--2::after {
content: "";
position: absolute;
top: 9px;
bottom: 9px;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: #afbec6;
}
#kr-v6-root .krv6-layout-card__mini--3::after {
content: "";
position: absolute;
top: 9px;
bottom: 9px;
left: 33.333%;
width: 2px;
background: #afbec6;
box-shadow: 72px 0 0 #afbec6;
}
#kr-v6-root .krv6-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#kr-v6-root .krv6-form-grid--single {
grid-template-columns: 1fr;
}
#kr-v6-root .krv6-field {
display: flex;
flex-direction: column;
gap: 8px;
}
#kr-v6-root .krv6-field--full {
grid-column: 1 / -1;
}
#kr-v6-root .krv6-field__label {
font-size: 14px;
font-weight: 700;
}
#kr-v6-root .krv6-input-wrap {
position: relative;
}
#kr-v6-root .krv6-field input,
#kr-v6-root .krv6-field textarea,
#kr-v6-root .krv6-mini-field input,
#kr-v6-root .krv6-mini-field select {
width: 100%;
min-height: 50px;
border: 1px solid #cbd8de;
border-radius: 14px;
background: #fff;
font: inherit;
color: var(--krv6-text);
padding: 12px 14px;
}
#kr-v6-root .krv6-field textarea {
min-height: 110px;
resize: vertical;
}
#kr-v6-root .krv6-field input:focus,
#kr-v6-root .krv6-field textarea:focus,
#kr-v6-root .krv6-mini-field input:focus,
#kr-v6-root .krv6-mini-field select:focus {
outline: none;
border-color: var(--krv6-primary);
box-shadow: 0 0 0 4px rgba(15, 106, 122, 0.1);
}
#kr-v6-root .krv6-unit {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-field__hint,
#kr-v6-root .krv6-field__error {
font-size: 12px;
}
#kr-v6-root .krv6-field__hint {
color: var(--krv6-muted);
}
#kr-v6-root .krv6-field__error {
color: var(--krv6-danger);
min-height: 16px;
}
#kr-v6-root .krv6-result-band {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
#kr-v6-root .krv6-result-band__item,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-help-card,
#kr-v6-root .krv6-utility-item,
#kr-v6-root .krv6-summary-card,
#kr-v6-root .krv6-trust-item,
#kr-v6-root .krv6-mini-read {
border: 1px solid var(--krv6-line);
background: var(--krv6-surface-soft);
border-radius: 16px;
padding: 14px;
}
#kr-v6-root .krv6-help-box ul {
margin: 0;
padding-left: 18px;
}
#kr-v6-root .krv6-help-box li {
margin-bottom: 6px;
}
#kr-v6-root .krv6-result-band__item span,
#kr-v6-root .krv6-mini-field span,
#kr-v6-root .krv6-mini-read span {
display: block;
color: var(--krv6-muted);
font-size: 12px;
margin-bottom: 4px;
}
#kr-v6-root .krv6-result-band__item strong,
#kr-v6-root .krv6-mini-read strong {
font-size: 16px;
}
#kr-v6-root .krv6-segments,
#kr-v6-root .krv6-hole-list,
#kr-v6-root .krv6-help-grid,
#kr-v6-root .krv6-summary-grid,
#kr-v6-root .krv6-trust-list,
#kr-v6-root .krv6-utility-grid,
#kr-v6-root .krv6-glass-grid {
display: grid;
gap: 10px;
}
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card__grid {
display: grid;
grid-template-columns: 1fr 130px;
gap: 10px;
align-items: center;
}
#kr-v6-root .krv6-segment-row {
padding: 12px 14px;
border: 1px solid var(--krv6-line);
border-radius: 16px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-segment-row__label strong {
display: block;
font-size: 14px;
}
#kr-v6-root .krv6-segment-row__label small {
color: var(--krv6-muted);
font-size: 12px;
}
#kr-v6-root .krv6-categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
#kr-v6-root .krv6-category-btn {
border: 1px solid var(--krv6-line);
background: #fff;
color: var(--krv6-text);
padding: 10px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}
#kr-v6-root .krv6-category-btn.is-active,
#kr-v6-root .krv6-category-btn:hover {
border-color: var(--krv6-primary);
background: #f1fafb;
color: var(--krv6-primary);
}
#kr-v6-root .krv6-gallery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#kr-v6-root .krv6-gallery-card,
#kr-v6-root .krv6-glass-card {
border: 2px solid var(--krv6-line);
background: #fff;
border-radius: 18px;
padding: 10px;
text-align: left;
cursor: pointer;
transition: 0.2s ease;
}
#kr-v6-root .krv6-gallery-card.is-selected,
#kr-v6-root .krv6-glass-card.is-selected {
border-color: var(--krv6-primary);
background: #f1fafb;
box-shadow: 0 0 0 4px rgba(15, 106, 122, 0.08);
}
#kr-v6-root .krv6-gallery-card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
margin-bottom: 10px;
}
#kr-v6-root .krv6-gallery-card__name {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
#kr-v6-root .krv6-gallery-card__cat {
display: block;
font-size: 12px;
color: var(--krv6-muted);
}
#kr-v6-root .krv6-upload-box {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
border: 2px dashed #b8c9cf;
border-radius: 18px;
background: var(--krv6-surface-soft);
cursor: pointer;
}
#kr-v6-root .krv6-upload-box__title {
font-weight: 700;
font-size: 15px;
}
#kr-v6-root .krv6-upload-box__text {
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-upload-preview__card {
display: flex;
gap: 12px;
align-items: center;
padding: 14px;
border: 1px solid var(--krv6-line);
border-radius: 16px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-upload-preview__card img {
width: 92px;
height: 72px;
object-fit: cover;
border-radius: 10px;
}
#kr-v6-root .krv6-glass-card__top strong {
display: block;
font-size: 18px;
margin-bottom: 6px;
}
#kr-v6-root .krv6-glass-card__badge {
display: inline-flex;
margin-bottom: 10px;
padding: 6px 10px;
border-radius: 999px;
background: #f3f6f8;
color: var(--krv6-text);
font-size: 12px;
font-weight: 700;
}
#kr-v6-root .krv6-glass-card__bullets {
margin: 0 0 14px;
padding-left: 18px;
}
#kr-v6-root .krv6-glass-card__bullets li {
margin: 0 0 6px;
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-glass-card__price {
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--krv6-line);
}
#kr-v6-root .krv6-glass-card__price span {
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-glass-card__price strong {
color: var(--krv6-primary);
font-size: 18px;
}
#kr-v6-root .krv6-tool-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#kr-v6-root .krv6-btn {
border-radius: 14px;
min-height: 50px;
padding: 12px 18px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}
#kr-v6-root .krv6-btn--ghost {
border: 1px solid var(--krv6-line);
background: #fff;
color: var(--krv6-text);
}
#kr-v6-root .krv6-btn--ghost:hover {
border-color: var(--krv6-primary);
color: var(--krv6-primary);
}
#kr-v6-root .krv6-btn--primary {
flex: 1;
border: 1px solid var(--krv6-primary);
background: var(--krv6-primary);
color: #fff;
}
#kr-v6-root .krv6-btn--primary:hover {
background: var(--krv6-primary-dark);
border-color: var(--krv6-primary-dark);
}
#kr-v6-root .krv6-btn--primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
#kr-v6-root .krv6-btn--tool {
border: 1px solid var(--krv6-line);
background: var(--krv6-surface-soft);
color: var(--krv6-text);
}
#kr-v6-root .krv6-btn--tool:hover {
border-color: var(--krv6-primary);
color: var(--krv6-primary);
}
#kr-v6-root .krv6-hole-card {
border: 1px solid var(--krv6-line);
border-radius: 18px;
background: var(--krv6-surface-soft);
padding: 14px;
}
#kr-v6-root .krv6-hole-card__head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
#kr-v6-root .krv6-hole-card__delete {
border: 0;
background: transparent;
color: var(--krv6-danger);
cursor: pointer;
font-weight: 700;
}
#kr-v6-root .krv6-mini-field,
#kr-v6-root .krv6-mini-read {
display: flex;
flex-direction: column;
gap: 6px;
}
#kr-v6-root .krv6-mini-read {
justify-content: center;
}
#kr-v6-root .krv6-empty {
padding: 14px 16px;
border: 1px dashed var(--krv6-line);
border-radius: 16px;
color: var(--krv6-muted);
background: var(--krv6-surface-soft);
font-size: 13px;
}
#kr-v6-root .krv6-price-list {
display: grid;
gap: 10px;
margin: 0;
}
#kr-v6-root .krv6-price-list > div,
#kr-v6-root .krv6-summary-card li {
display: flex;
justify-content: space-between;
gap: 12px;
}
#kr-v6-root .krv6-price-list dt,
#kr-v6-root .krv6-summary-card li span {
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-price-list dd,
#kr-v6-root .krv6-summary-card li b {
margin: 0;
font-size: 13px;
font-weight: 700;
text-align: right;
}
#kr-v6-root .krv6-summary-card ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
#kr-v6-root .krv6-summary-card strong,
#kr-v6-root .krv6-trust-item strong,
#kr-v6-root .krv6-utility-item strong,
#kr-v6-root .krv6-help-card strong {
display: block;
font-size: 14px;
margin-bottom: 3px;
}
#kr-v6-root .krv6-trust-item small,
#kr-v6-root .krv6-utility-item small,
#kr-v6-root .krv6-help-card small {
display: block;
color: var(--krv6-muted);
font-size: 12px;
}
#kr-v6-root .krv6-price-total {
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--krv6-line);
}
#kr-v6-root .krv6-price-total span {
font-size: 15px;
font-weight: 700;
}
#kr-v6-root .krv6-price-total strong {
color: var(--krv6-primary);
font-size: 28px;
line-height: 1;
}
#kr-v6-root .krv6-check {
display: flex;
gap: 10px;
align-items: start;
font-size: 13px;
color: var(--krv6-text);
}
#kr-v6-root .krv6-submit-row,
#kr-v6-root .krv6-footer-actions {
display: flex;
gap: 10px;
}
#kr-v6-root .krv6-footer-actions {
justify-content: space-between;
}
#kr-v6-root .krv6-panel--utility {
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
#kr-v6-root .krv6-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
#kr-v6-root .krv6-utility-item {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: start;
min-height: 86px;
padding: 14px 16px;
}
#kr-v6-root .krv6-utility-item__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: #e9f4f6;
color: var(--krv6-primary);
font-weight: 700;
}
#kr-v6-root .krv6-panel--guided {
padding: 0;
overflow: hidden;
}
#kr-v6-root .krv6-panel__toggle {
width: 100%;
border: 0;
background: transparent;
color: var(--krv6-text);
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 18px;
text-align: left;
cursor: pointer;
}
#kr-v6-root .krv6-panel__toggle:hover {
background: rgba(15, 106, 122, 0.03);
}
#kr-v6-root .krv6-panel__toggle-text {
min-width: 0;
display: flex;
flex-direction: column;
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
margin-bottom: 6px;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
margin: 0;
}
#kr-v6-root .krv6-panel__status {
font-size: 12px;
font-weight: 700;
color: var(--krv6-muted);
white-space: nowrap;
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__status {
color: var(--krv6-muted);
}
#kr-v6-root .krv6-panel--guided.is-available .krv6-panel__status {
color: var(--krv6-primary);
}
#kr-v6-root .krv6-panel--guided.is-done .krv6-panel__status {
color: var(--krv6-success);
}
#kr-v6-root .krv6-panel__chevron {
width: 12px;
height: 12px;
flex: 0 0 12px;
border-right: 2px solid var(--krv6-primary);
border-bottom: 2px solid var(--krv6-primary);
transform: rotate(45deg);
transition: transform 0.22s ease;
margin-right: 4px;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__chevron {
transform: rotate(225deg);
}
#kr-v6-root .krv6-panel__body {
padding: 0 18px 18px;
}
#kr-v6-root .krv6-panel--guided:not(.is-open) .krv6-panel__body {
display: none;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__toggle {
border-bottom: 1px solid var(--krv6-line);
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__toggle {
opacity: 0.72;
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__toggle:hover {
background: transparent;
}
#kr-v6-root .krv6-stage-focus {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
#kr-v6-root .krv6-stage-focus__item {
padding: 12px 14px;
border: 1px solid rgba(15, 106, 122, 0.10);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,251,252,0.98) 100%);
}
#kr-v6-root .krv6-stage-focus__label {
display: block;
color: var(--krv6-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 5px;
}
#kr-v6-root .krv6-stage-focus__item strong {
display: block;
font-size: 14px;
line-height: 1.35;
}
#kr-v6-root .krv6-step[data-density="compact"] {
gap: 12px;
}
#kr-v6-root .krv6-step[data-density="editor"] {
gap: 12px;
}
#kr-v6-root .krv6-step[data-density="review"] {
gap: 18px;
}
#kr-v6-root .krv6-step[data-density="compact"] .krv6-panel,
#kr-v6-root .krv6-step[data-density="editor"] .krv6-panel {
padding-top: 16px;
padding-bottom: 16px;
}
#kr-v6-root .krv6-step[data-density="compact"] .krv6-panel__head,
#kr-v6-root .krv6-step[data-density="editor"] .krv6-panel__head {
margin-bottom: 10px;
}
#kr-v6-root .krv6-step[data-density="review"] .krv6-panel {
padding-top: 20px;
padding-bottom: 20px;
}
#kr-v6-root .krv6-step[data-density="review"] .krv6-summary-grid,
#kr-v6-root .krv6-step[data-density="review"] .krv6-trust-list {
gap: 12px;
}
#kr-v6-root .krv6-density-note {
margin-top: 12px;
color: var(--krv6-muted);
font-size: 12px;
line-height: 1.45;
}
#kr-v6-root .krv6-density-note--review {
margin: 0 0 12px;
}
#kr-v6-root .krv6-step[data-density="technical"] .krv6-help-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#kr-v6-root .krv6-step[data-density="curated"] .krv6-gallery-grid {
gap: 10px;
}
#kr-v6-root .krv6-step[data-density="editor"] .krv6-tool-grid--editor .krv6-btn--tool {
min-height: 46px;
}
#kr-v6-root .krv6-step[data-density="review"] .krv6-panel--guided.is-open {
box-shadow: 0 16px 34px rgba(17, 40, 48, 0.07);
}
#kr-v6-root .krv6-step5-tool-panels {
display: grid;
gap: 16px;
}
@media (max-width: 1180px) {
#kr-v6-root .krv6-main {
grid-template-columns: 1fr;
}
#kr-v6-root .krv6-side {
position: static;
}
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root.krv6 {
margin: 14px auto;
}
#kr-v6-root .krv6-topbar {
grid-template-columns: 1fr;
text-align: center;
}
#kr-v6-root .krv6-topbar__right,
#kr-v6-root .krv6-topbar__center {
text-align: center;
}
#kr-v6-root .krv6-stage {
min-height: 360px;
}
#kr-v6-root .krv6-stage-flow {
grid-template-columns: 1fr;
gap: 10px;
}
#kr-v6-root .krv6-stage-flow__divider {
width: 100%;
}
#kr-v6-root .krv6-stage-meta,
#kr-v6-root .krv6-stage-focus,
#kr-v6-root .krv6-layout-grid,
#kr-v6-root .krv6-gallery-grid,
#kr-v6-root .krv6-source-switch,
#kr-v6-root .krv6-toggle-row,
#kr-v6-root .krv6-form-grid,
#kr-v6-root .krv6-result-band,
#kr-v6-root .krv6-tool-grid,
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card__grid,
#kr-v6-root .krv6-utility-grid {
grid-template-columns: 1fr;
}
#kr-v6-root .krv6-footer-actions,
#kr-v6-root .krv6-submit-row {
flex-direction: column;
}
#kr-v6-root .krv6-topbar__title {
font-size: 24px;
}
#kr-v6-root .krv6-price-total strong {
font-size: 24px;
}
#kr-v6-root .krv6-panel__toggle {
grid-template-columns: 1fr auto auto;
padding: 16px;
}
#kr-v6-root .krv6-panel__body {
padding: 0 16px 16px;
}
#kr-v6-root .krv6-panel__status {
font-size: 11px;
}
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__toggle { cursor: default; }
#kr-v6-root .krv6-panel__status { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f3f6f8; color:var(--krv6-muted); font-size:11px; font-weight:700; white-space:nowrap; }
#kr-v6-root .krv6-panel--guided.is-available .krv6-panel__status { background:#eaf4f6; color:var(--krv6-primary); }
#kr-v6-root .krv6-panel--guided.is-done .krv6-panel__status { background:#eef8f3; color:var(--krv6-success); }
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__status { background:#f3f6f8; color:var(--krv6-muted); }
/* Runde 3 – ruhigere Status- und Führungskommunikation */
#kr-v6-root .krv6-panel__toggle {
align-items: start;
}
#kr-v6-root .krv6-panel__status {
margin-top: 2px;
letter-spacing: 0.01em;
}
#kr-v6-root .krv6-inline-state {
line-height: 1.5;
}
#kr-v6-root .krv6-inline-state.is-success {
color: var(--krv6-primary);
font-weight: 700;
}
#kr-v6-root .krv6-inline-state.is-error {
color: #9f6b00;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__toggle {
background: linear-gradient(180deg, rgba(15,106,122,0.02) 0%, rgba(15,106,122,0.00) 100%);
}
/* Runde 4 – visuelle Gewichtung der Guided-Accordion-Führung */
#kr-v6-root .krv6-side {
gap: 14px;
}
#kr-v6-root .krv6-panel--guided {
border-color: #e3ebee;
box-shadow: 0 8px 18px rgba(17, 40, 48, 0.05);
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}
#kr-v6-root .krv6-panel--guided:not(.is-open):not(.is-locked) {
background: #fcfeff;
box-shadow: 0 4px 10px rgba(17, 40, 48, 0.035);
}
#kr-v6-root .krv6-panel--guided.is-open {
border-color: rgba(15, 106, 122, 0.24);
box-shadow: 0 16px 34px rgba(15, 106, 122, 0.10);
transform: translateY(-1px);
position: relative;
}
#kr-v6-root .krv6-panel--guided.is-open::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--krv6-primary) 0%, #2d98ab 100%);
}
#kr-v6-root .krv6-panel--guided.is-done:not(.is-open) {
border-color: rgba(22, 121, 79, 0.14);
}
#kr-v6-root .krv6-panel--guided.is-locked {
background: #fbfcfd;
box-shadow: none;
}
#kr-v6-root .krv6-panel__toggle {
gap: 14px;
padding: 17px 18px;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__toggle {
background: linear-gradient(180deg, rgba(15,106,122,0.05) 0%, rgba(15,106,122,0.015) 100%);
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
opacity: 0.9;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
font-size: 20px;
line-height: 1.18;
transition: color 0.22s ease;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__toggle .krv6-panel__title {
color: var(--krv6-primary-dark);
}
#kr-v6-root .krv6-panel--guided:not(.is-open):not(.is-locked) .krv6-panel__toggle .krv6-panel__title {
color: #24434a;
}
#kr-v6-root .krv6-panel__status {
min-width: 84px;
justify-content: center;
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
#kr-v6-root .krv6-panel--guided.is-available .krv6-panel__status {
background: rgba(15, 106, 122, 0.08);
border-color: rgba(15, 106, 122, 0.12);
color: var(--krv6-primary-dark);
}
#kr-v6-root .krv6-panel--guided.is-done .krv6-panel__status {
background: rgba(22, 121, 79, 0.08);
border-color: rgba(22, 121, 79, 0.12);
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__status {
background: #f4f7f8;
border-color: #e4ecef;
}
#kr-v6-root .krv6-panel__chevron {
opacity: 0.9;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__chevron {
opacity: 1;
}
#kr-v6-root .krv6-panel__body {
padding-top: 14px;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__body {
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(248,251,252,0.7) 100%);
}
#kr-v6-root .krv6-inline-state {
margin-top: 12px;
}
#kr-v6-root .krv6-panel--utility {
opacity: 0.94;
}
#kr-v6-root .krv6-panel--utility .krv6-utility-item {
background: #fbfcfd;
}
#kr-v6-root .krv6-footer-actions {
position: relative;
padding-top: 2px;
}
#kr-v6-root .krv6-footer-actions::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -2px;
height: 1px;
background: linear-gradient(90deg, rgba(217,229,232,0) 0%, rgba(217,229,232,1) 12%, rgba(217,229,232,1) 88%, rgba(217,229,232,0) 100%);
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-panel--guided.is-open {
transform: none;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
font-size: 18px;
}
#kr-v6-root .krv6-panel__status {
min-width: 72px;
padding: 5px 8px;
}
}
#kr-v6-root .krv6-stage-transition {
margin-top: 14px;
padding: 14px 16px;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 16px;
background: linear-gradient(180deg, rgba(15, 106, 122, 0.04) 0%, rgba(255, 216, 0, 0.08) 100%);
}
#kr-v6-root .krv6-stage-transition__kicker {
display: inline-block;
margin-bottom: 6px;
color: var(--krv6-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#kr-v6-root .krv6-stage-transition__text {
display: block;
font-size: 14px;
line-height: 1.5;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage-transition {
padding: 12px 14px;
}
#kr-v6-root .krv6-stage-transition__text {
font-size: 13px;
}
}
#kr-v6-root .krv6-topbar__mode-row {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
#kr-v6-root .krv6-topbar__mode {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(15, 106, 122, 0.08);
color: var(--krv6-primary);
font-size: 12px;
font-weight: 700;
}
#kr-v6-root .krv6-topbar__next {
color: var(--krv6-muted);
font-size: 12px;
font-weight: 700;
}
#kr-v6-root .krv6-footer-guide {
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid var(--krv6-line);
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
}
#kr-v6-root .krv6-footer-guide__kicker {
color: var(--krv6-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#kr-v6-root .krv6-footer-guide__title {
font-size: 15px;
}
#kr-v6-root .krv6-footer-guide__text {
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-footer-actions[data-cta-style="decision"] .krv6-btn--primary {
box-shadow: 0 10px 24px rgba(15, 106, 122, 0.14);
}
#kr-v6-root .krv6-footer-actions[data-cta-style="technical"] .krv6-btn--primary {
background: #0c5d6a;
border-color: #0c5d6a;
}
#kr-v6-root .krv6-footer-actions[data-cta-style="editor"] .krv6-btn--primary {
background: #0d6371;
border-color: #0d6371;
}
#kr-v6-root .krv6-footer-actions[data-cta-style="review"] .krv6-btn--primary {
background: #0b6a5a;
border-color: #0b6a5a;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-topbar__mode-row {
flex-direction: column;
gap: 6px;
}
#kr-v6-root .krv6-topbar__next {
text-align: center;
}
}
/* Runde 10 – Step-Modi für die Bühne */
#kr-v6-root .krv6-stage-mode {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid rgba(15, 106, 122, 0.12);
background: rgba(15, 106, 122, 0.05);
color: var(--krv6-primary);
margin: 0 0 14px;
}
#kr-v6-root[data-step-mode="planning"] .krv6-stage-card {
border-color: rgba(15, 106, 122, 0.22);
}
#kr-v6-root[data-step-mode="planning"] .krv6-stage {
background: linear-gradient(180deg, #f7fbfc 0%, #eef6f7 100%);
}
#kr-v6-root[data-step-mode="planning"] .krv6-stage-mode {
background: rgba(15, 106, 122, 0.06);
color: #0f6a7a;
}
#kr-v6-root[data-step-mode="creative"] .krv6-stage-card {
border-color: rgba(125, 101, 0, 0.20);
}
#kr-v6-root[data-step-mode="creative"] .krv6-stage {
background: linear-gradient(180deg, #fffdfa 0%, #f7f0df 100%);
}
#kr-v6-root[data-step-mode="creative"] .krv6-stage-mode {
background: rgba(255, 216, 0, 0.16);
color: #7d6500;
border-color: rgba(125, 101, 0, 0.16);
}
#kr-v6-root[data-step-mode="material"] .krv6-stage-card {
border-color: rgba(82, 101, 112, 0.22);
}
#kr-v6-root[data-step-mode="material"] .krv6-stage {
background: linear-gradient(180deg, #fafbfd 0%, #edf2f5 100%);
}
#kr-v6-root[data-step-mode="material"] .krv6-stage-mode {
background: rgba(82, 101, 112, 0.08);
color: #4e5f69;
border-color: rgba(82, 101, 112, 0.18);
}
#kr-v6-root[data-step-mode="technical"] .krv6-stage-card {
border-color: rgba(15, 106, 122, 0.26);
}
#kr-v6-root[data-step-mode="technical"] .krv6-stage {
background: linear-gradient(180deg, #f6fafb 0%, #e9f2f4 100%);
}
#kr-v6-root[data-step-mode="technical"] .krv6-stage-mode {
background: rgba(15, 106, 122, 0.09);
color: #0c5562;
}
#kr-v6-root[data-step-mode="editor"] .krv6-stage-card {
border-color: rgba(90, 65, 130, 0.22);
}
#kr-v6-root[data-step-mode="editor"] .krv6-stage {
background: linear-gradient(180deg, #f8f7fc 0%, #eeecf7 100%);
}
#kr-v6-root[data-step-mode="editor"] .krv6-stage-mode {
background: rgba(90, 65, 130, 0.10);
color: #5a4182;
border-color: rgba(90, 65, 130, 0.18);
}
#kr-v6-root[data-step-mode="review"] .krv6-stage-card {
border-color: rgba(32, 120, 73, 0.22);
}
#kr-v6-root[data-step-mode="review"] .krv6-stage {
background: linear-gradient(180deg, #f7fcf8 0%, #edf7f0 100%);
}
#kr-v6-root[data-step-mode="review"] .krv6-stage-mode {
background: rgba(32, 120, 73, 0.10);
color: #207849;
border-color: rgba(32, 120, 73, 0.18);
}
#kr-v6-root[data-step-mode="creative"] .krv6-stage-flow__item,
#kr-v6-root[data-step-mode="editor"] .krv6-stage-focus__item {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
#kr-v6-root[data-step-mode="review"] .krv6-stage-transition {
background: linear-gradient(180deg, rgba(32,120,73,0.08) 0%, rgba(32,120,73,0.04) 100%);
border-color: rgba(32,120,73,0.14);
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage-mode {
margin-bottom: 12px;
font-size: 11px;
padding: 6px 10px;
}
}
#kr-v6-root .krv6-glass-grid {
position: relative;
z-index: 2;
}
#kr-v6-root .krv6-glass-card {
position: relative;
z-index: 2;
pointer-events: auto;
}
/* Runde 14 – Guided Accordion glätten */
#kr-v6-root .krv6-panel--guided.is-done:not(.is-open) {
border-color: rgba(15,106,122,0.10);
box-shadow: none;
}
#kr-v6-root .krv6-panel--guided.is-available:not(.is-open) {
border-color: rgba(15,106,122,0.16);
}
#kr-v6-root .krv6-panel__status {
letter-spacing: 0.01em;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__status {
color: var(--krv6-primary);
}
/* Runde 15 – Bühne entschlackt */
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 10px;
}
#kr-v6-root .krv6-stage-card__title--minimal {
margin: 0;
font-size: 20px;
line-height: 1.2;
}
#kr-v6-root .krv6-stage {
min-height: 720px;
background: #f8fbfd;
}
#kr-v6-root .krv6-stage-card[data-stage-mode] .krv6-stage,
#kr-v6-root[data-step-mode] .krv6-stage {
background: #f8fbfd !important;
}
#kr-v6-root .krv6-eyebrow[data-role="stage-eyebrow"],
#kr-v6-root .krv6-stage-card__text[data-role="stage-text"],
#kr-v6-root .krv6-stage-mode,
#kr-v6-root .krv6-stage-flow,
#kr-v6-root .krv6-stage-focus,
#kr-v6-root .krv6-stage-transition {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage {
min-height: 420px;
}
#kr-v6-root .krv6-stage-card__title--minimal {
font-size: 18px;
}
}
#kr-v6-root .krv6-panel--utility {
margin-top: 4px;
}
#kr-v6-root .krv6-utility-item strong {
display: block;
margin-bottom: 3px;
font-size: 14px;
line-height: 1.25;
}
#kr-v6-root .krv6-utility-item small {
display: block;
color: var(--krv6-muted);
font-size: 12px;
line-height: 1.35;
}
@media (max-width: 1180px) and (min-width: 821px) {
#kr-v6-root .krv6-utility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-panel--utility {
margin-top: 0;
}
#kr-v6-root .krv6-utility-grid {
grid-template-columns: 1fr;
gap: 10px;
}
#kr-v6-root .krv6-utility-item {
min-height: 72px;
padding: 12px 14px;
}
}
/* =========================================================
Runde 15 – visuelle Konsistenzrunde
========================================================= */
#kr-v6-root.krv6 {
--krv6-panel-radius: 20px;
--krv6-soft-shadow: 0 10px 24px rgba(17, 40, 48, 0.06);
--krv6-open-shadow: 0 16px 34px rgba(17, 40, 48, 0.09);
}
#kr-v6-root .krv6-topbar,
#kr-v6-root .krv6-stage-card,
#kr-v6-root .krv6-panel,
#kr-v6-root .krv6-stage-meta__item,
#kr-v6-root .krv6-summary-card,
#kr-v6-root .krv6-trust-item,
#kr-v6-root .krv6-utility-item,
#kr-v6-root .krv6-result-band__item,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-help-card,
#kr-v6-root .krv6-mini-read,
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card {
border-radius: var(--krv6-panel-radius);
}
#kr-v6-root .krv6-topbar,
#kr-v6-root .krv6-stage-card,
#kr-v6-root .krv6-panel {
box-shadow: var(--krv6-soft-shadow);
}
#kr-v6-root .krv6-stage-card {
padding: 20px;
}
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 12px;
}
#kr-v6-root .krv6-stage-card__title,
#kr-v6-root .krv6-panel__title {
line-height: 1.18;
}
#kr-v6-root .krv6-stage-meta {
gap: 10px;
margin-top: 14px;
}
#kr-v6-root .krv6-stage-meta__item {
padding: 13px 15px;
background: linear-gradient(180deg, #fbfdfe 0%, #f4f8fa 100%);
}
#kr-v6-root .krv6-side {
gap: 14px;
}
#kr-v6-root .krv6-step {
gap: 14px;
}
#kr-v6-root .krv6-step[data-density="compact"],
#kr-v6-root .krv6-step[data-density="editor"] {
gap: 12px;
}
#kr-v6-root .krv6-step[data-density="technical"],
#kr-v6-root .krv6-step[data-density="structured"] {
gap: 14px;
}
#kr-v6-root .krv6-step[data-density="review"] {
gap: 16px;
}
#kr-v6-root .krv6-panel {
padding: 16px;
}
#kr-v6-root .krv6-panel--guided {
border: 1px solid #dfe8eb;
background: #fcfeff;
box-shadow: none;
transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
#kr-v6-root .krv6-panel--guided.is-open {
border-color: rgba(15, 106, 122, 0.22);
background: #ffffff;
box-shadow: var(--krv6-open-shadow);
}
#kr-v6-root .krv6-panel--guided:not(.is-open) {
background: #fbfdfe;
}
#kr-v6-root .krv6-panel--guided.is-done:not(.is-open),
#kr-v6-root .krv6-panel--guided.is-available:not(.is-open) {
background: #f9fcfd;
}
#kr-v6-root .krv6-panel--guided.is-locked:not(.is-open) {
background: #fafcfd;
}
#kr-v6-root .krv6-panel__toggle {
padding: 16px;
min-height: 74px;
}
#kr-v6-root .krv6-panel__toggle:hover {
background: rgba(15, 106, 122, 0.025);
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
margin-bottom: 5px;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
font-size: 20px;
}
#kr-v6-root .krv6-panel__status {
min-width: 76px;
padding: 6px 10px;
border-radius: 999px;
text-align: center;
background: #eff5f7;
border: 1px solid transparent;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#kr-v6-root .krv6-panel--guided.is-available .krv6-panel__status {
background: rgba(15, 106, 122, 0.08);
color: var(--krv6-primary);
border-color: rgba(15, 106, 122, 0.10);
}
#kr-v6-root .krv6-panel--guided.is-done .krv6-panel__status {
background: rgba(22, 121, 79, 0.08);
color: var(--krv6-success);
border-color: rgba(22, 121, 79, 0.12);
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__status {
background: #f2f5f7;
color: #7c8c91;
border-color: #e2e8eb;
}
#kr-v6-root .krv6-panel__body {
padding: 0 16px 16px;
}
#kr-v6-root .krv6-panel--guided.is-open .krv6-panel__toggle {
border-bottom: 1px solid #e5edef;
}
#kr-v6-root .krv6-inline-state {
min-height: 18px;
}
#kr-v6-root .krv6-result-band,
#kr-v6-root .krv6-tool-grid,
#kr-v6-root .krv6-summary-grid,
#kr-v6-root .krv6-help-grid,
#kr-v6-root .krv6-utility-grid,
#kr-v6-root .krv6-glass-grid {
gap: 12px;
}
#kr-v6-root .krv6-summary-card,
#kr-v6-root .krv6-trust-item,
#kr-v6-root .krv6-help-card,
#kr-v6-root .krv6-utility-item,
#kr-v6-root .krv6-result-band__item,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-mini-read,
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card {
background: linear-gradient(180deg, #fbfdfe 0%, #f6fafb 100%);
}
#kr-v6-root .krv6-footer-guide {
padding: 13px 14px;
border-radius: 18px;
border-color: rgba(15, 106, 122, 0.12);
background: linear-gradient(180deg, rgba(15,106,122,0.035) 0%, rgba(255,216,0,0.04) 100%);
}
#kr-v6-root .krv6-footer-actions {
gap: 12px;
align-items: stretch;
}
#kr-v6-root .krv6-footer-actions .krv6-btn {
min-height: 54px;
}
#kr-v6-root .krv6-panel--utility {
margin-top: 2px;
}
#kr-v6-root .krv6-utility-grid {
align-items: stretch;
}
#kr-v6-root .krv6-utility-item {
border-color: #dfe8eb;
}
#kr-v6-root .krv6-price-total {
padding-top: 16px;
margin-top: 16px;
}
#kr-v6-root .krv6-price-total strong {
letter-spacing: -0.02em;
}
@media (max-width: 1180px) {
#kr-v6-root .krv6-side,
#kr-v6-root .krv6-step {
gap: 12px;
}
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage-card {
padding: 16px;
}
#kr-v6-root .krv6-stage-meta {
gap: 10px;
}
#kr-v6-root .krv6-panel {
padding: 14px;
}
#kr-v6-root .krv6-panel__toggle {
padding: 14px;
min-height: 68px;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
font-size: 18px;
}
#kr-v6-root .krv6-panel__body {
padding: 0 14px 14px;
}
#kr-v6-root .krv6-panel__status {
min-width: 68px;
padding: 5px 8px;
}
#kr-v6-root .krv6-footer-actions {
gap: 10px;
}
}
/* Step-1 Korrekturrunde – Startbild, Nummern, weichere Guided-Karten */
#kr-v6-root .krv6-stage {
position: relative;
}
#kr-v6-root .krv6-stage__intro {
position: absolute;
inset: 0;
display: none;
z-index: 3;
background: #f8fbfd;
}
#kr-v6-root .krv6-stage__intro.is-visible {
display: block;
}
#kr-v6-root .krv6-stage__intro img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#kr-v6-root .krv6-stage__canvas {
transition: opacity 0.2s ease;
}
#kr-v6-root .krv6-panel--guided.is-locked,
#kr-v6-root .krv6-panel--guided.is-locked:not(.is-open) {
opacity: 1;
box-shadow: none;
background: #fbfdfe;
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__toggle,
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__toggle:hover {
cursor: pointer;
opacity: 1;
background: transparent;
}
#kr-v6-root .krv6-panel--guided.is-locked .krv6-panel__status {
background: #f4f7f8;
color: #6f858b;
border-color: #e0e8eb;
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
min-width: 22px;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage__intro img {
object-fit: cover;
}
}
/* Step-1 Nachkorrektur – mm-Label sauber neben Number-Spinnern */
#kr-v6-root .krv6-field input[type="number"] {
padding-right: 54px;
}
#kr-v6-root .krv6-unit {
right: 38px;
pointer-events: none;
}
/* Step-1 Nachkorrektur – 3-teilig Mini-Grafik */
#kr-v6-root .krv6-layout-card__mini--3::after {
left: calc(33.333% + 1px);
box-shadow: calc(33.333% + 1px) 0 0 #afbec6;
}
/* Step-1 Erweiterung – Segmentlinien und Mini-Grafik */
#kr-v6-root .krv6-layout-card__mini--3::after {
left: 33.333%;
top: 9px;
bottom: 9px;
width: 2px;
background: #afbec6;
box-shadow: none;
}
#kr-v6-root .krv6-layout-card__mini--3::before {
content: "";
position: absolute;
inset: 9px;
border-radius: 8px;
border: 2px solid #afbec6;
background: rgba(255,255,255,0.92);
}
#kr-v6-root .krv6-layout-card__mini--3 {
overflow: hidden;
}
#kr-v6-root .krv6-layout-card__mini--3 i,
#kr-v6-root .krv6-layout-card__mini--2 i,
#kr-v6-root .krv6-layout-card__mini--1 i {
display: none;
}
#kr-v6-root .krv6-layout-card__mini--3::marker {
display: none;
}
#kr-v6-root .krv6-layout-card__mini-line--3b {
position: absolute;
top: 9px;
bottom: 9px;
left: 66.666%;
width: 2px;
background: #afbec6;
display: block !important;
transform: translateX(-1px);
}
/* Step-1 Erweiterung – Maßeingabe kontrolliert bestätigen */
#kr-v6-root .krv6-field input[type="number"] {
padding-right: 68px;
}
#kr-v6-root .krv6-unit {
right: 46px;
}
#kr-v6-root .krv6-confirm-row {
margin-top: 16px;
display: flex;
justify-content: flex-start;
}
#kr-v6-root .krv6-btn--confirm {
min-width: 240px;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-confirm-row {
display: block;
}
#kr-v6-root .krv6-btn--confirm {
width: 100%;
min-width: 0;
}
}
/* Schritt 1 – Segmente als echte Küchenabschnitte */
#kr-v6-root .krv6-segment-row--dual {
grid-template-columns: 1fr;
gap: 12px;
}
#kr-v6-root .krv6-segment-row__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#kr-v6-root .krv6-segment-row__fields .krv6-input-wrap input {
padding-right: 58px;
}
#kr-v6-root .krv6-segment-row__fields .krv6-unit {
right: 16px;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-segment-row__fields {
grid-template-columns: 1fr;
}
}
/* Step-1 Reduktion – nur zwei echte Arbeitsschritte */
#kr-v6-root .krv6-step[data-step="1"] {
gap: 14px;
}
/* Step-1 Korrektur – mehrere Segmentmaßblöcke */
#kr-v6-root .krv6-segment-dimension-list {
display: grid;
gap: 14px;
}
#kr-v6-root .krv6-segment-dimension-card {
padding: 14px;
border: 1px solid var(--krv6-line);
border-radius: 18px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-segment-dimension-card__head {
margin-bottom: 10px;
}
#kr-v6-root .krv6-segment-dimension-card__head strong {
display: block;
font-size: 15px;
margin-bottom: 2px;
}
#kr-v6-root .krv6-segment-dimension-card__head small {
color: var(--krv6-muted);
font-size: 12px;
}
/* Step 4 Reduktion – Builder statt Verwaltung */
#kr-v6-root .krv6-hole-builder-list {
display: grid;
gap: 12px;
margin-top: 14px;
}
#kr-v6-root .krv6-hole-builder-card {
padding: 14px;
border: 1px solid var(--krv6-line);
border-radius: 18px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-hole-builder-card__sub {
margin: -4px 0 12px;
color: var(--krv6-muted);
font-size: 12px;
}
#kr-v6-root .krv6-hole-builder-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-hole-builder-actions {
grid-template-columns: 1fr;
}
}
/* Step 4 Update – schlankere Gruppenkarten + aktive Messhilfe */
#kr-v6-root .krv6-hole-builder-card {
position: relative;
}
#kr-v6-root .krv6-hole-builder-card.is-active {
border-color: rgba(15, 106, 122, 0.28);
box-shadow: 0 10px 24px rgba(15, 106, 122, 0.10);
}
#kr-v6-root .krv6-hole-builder-derived {
display: grid;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--krv6-line);
}
#kr-v6-root .krv6-hole-builder-derived__title {
color: var(--krv6-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#kr-v6-root .krv6-hole-builder-derived div {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
}
#kr-v6-root .krv6-hole-builder-derived span {
color: var(--krv6-muted);
}
#kr-v6-root .krv6-hole-builder-derived strong {
font-size: 12px;
}
/* Step 4 Bulletproof overlay cleanup */
#kr-v6-root .krv6-hole-builder-card.is-active {
border-color: rgba(15,106,122,0.30);
box-shadow: 0 8px 18px rgba(15,106,122,0.08);
}
/* Step 4 stronger local measurement aid */
#kr-v6-root .krv6-hole-builder-card input[type="number"],
#kr-v6-root .krv6-hole-builder-card select {
pointer-events: auto;
}
/* V7.1 – Ausbau Step 2 */
#kr-v6-root .krv6-step2-mode {
margin-top: 16px;
padding: 16px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 16px;
background: linear-gradient(180deg, rgba(15,106,122,0.03) 0%, rgba(255,216,0,0.05) 100%);
}
#kr-v6-root .krv6-step2-mode__label {
margin-bottom: 12px;
color: var(--krv6-muted);
font-size: 13px;
}
#kr-v6-root .krv6-step2-mode__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#kr-v6-root .krv6-mode-card {
appearance: none;
width: 100%;
padding: 14px;
border: 2px solid var(--krv6-line);
border-radius: 16px;
background: #fff;
text-align: left;
cursor: pointer;
transition: 0.2s ease;
color: var(--krv6-text);
font: inherit;
}
#kr-v6-root .krv6-mode-card strong {
display: block;
margin-bottom: 6px;
font-size: 15px;
}
#kr-v6-root .krv6-mode-card small {
display: block;
color: var(--krv6-muted);
font-size: 12px;
line-height: 1.4;
}
#kr-v6-root .krv6-mode-card.is-active {
border-color: var(--krv6-primary);
background: #f1fafb;
box-shadow: 0 0 0 4px rgba(15, 106, 122, 0.08);
}
#kr-v6-root .krv6-gallery-grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#kr-v6-root [data-role="segment-2-panel"][hidden],
#kr-v6-root [data-role="segment-3-panel"][hidden] {
display: none !important;
}
@media (max-width: 860px) {
#kr-v6-root .krv6-step2-mode__grid {
grid-template-columns: 1fr;
}
#kr-v6-root .krv6-gallery-grid--compact,
#kr-v6-root .krv6-gallery-grid {
grid-template-columns: 1fr;
}
}
#kr-v6-root .krv6-step[data-step="5"] .krv6-tool-grid--editor {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#kr-v6-root .krv6-step[data-step="5"] .krv6-tool-grid--editor .krv6-btn--tool {
min-height: 48px;
}
@media (min-width: 821px) {
#kr-v6-root .krv6-step[data-step="5"] .krv6-tool-grid--editor {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* V9 – Liveansicht */
#kr-v6-root .krv6-main {
align-items: start;
}
#kr-v6-root .krv6-stage-card {
position: sticky;
top: 16px;
align-self: start;
}
#kr-v6-root .krv6-stage {
background: #f8fbfd;
}
@media (max-width: 1180px) {
#kr-v6-root .krv6-stage-card {
position: static;
top: auto;
}
}
/* V9.1 – Introbild bis zur ersten Planung + stärkere Sticky-Liveansicht */
#kr-v6-root .krv6-shell,
#kr-v6-root .krv6-main {
overflow: visible;
}
#kr-v6-root .krv6-stage {
position: relative;
}
#kr-v6-root .krv6-stage__intro {
position: absolute;
inset: 0;
display: none;
z-index: 3;
background: #f8fbfd;
}
#kr-v6-root .krv6-stage__intro.is-visible {
display: block;
}
#kr-v6-root .krv6-stage__intro img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#kr-v6-root .krv6-stage-card {
position: sticky !important;
top: 16px !important;
align-self: start;
z-index: 4;
}
@media (max-width: 1180px) {
#kr-v6-root .krv6-stage-card {
position: static !important;
top: auto !important;
}
}
/* V9.2 – gesamte linke Liveansicht sticky mit fit-in-height auf Desktop */
@media (min-width: 1181px) {
#kr-v6-root .krv6-main {
align-items: start !important;
overflow: visible !important;
}
#kr-v6-root .krv6-stage-card {
position: sticky !important;
top: 16px !important;
align-self: start !important;
height: fit-content;
max-height: calc(100vh - 32px);
overflow: visible !important;
}
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 12px;
}
#kr-v6-root .krv6-stage {
min-height: clamp(320px, 56vh, 640px) !important;
max-height: calc(100vh - 230px);
}
#kr-v6-root .krv6-stage-meta {
margin-top: 12px;
}
}
/* V9.3 – lokaler Sticky-Fallback fuer die komplette linke Liveansicht */
@media (min-width: 1181px) {
#kr-v6-root .krv6-main {
align-items: start !important;
}
#kr-v6-root .krv6-stage-card {
position: relative !important;
top: auto !important;
align-self: start !important;
transform: translateY(0);
transition: transform 0.08s linear;
}
}
@media (max-width: 1180px) {
#kr-v6-root .krv6-stage-card {
transform: none !important;
}
}
/* V9.4 – Hinterleuchtungs-Visualisierung */
#kr-v6-root .krv6-backlight-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 14px 0 8px;
padding: 12px 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 16px;
background: linear-gradient(180deg, rgba(15,106,122,0.04) 0%, rgba(255,216,0,0.06) 100%);
}
#kr-v6-root .krv6-backlight-control.is-disabled {
opacity: 0.7;
}
#kr-v6-root .krv6-backlight-toggle {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-weight: 700;
min-width: 0;
}
#kr-v6-root .krv6-backlight-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#kr-v6-root .krv6-backlight-toggle__track {
position: relative;
width: 50px;
height: 30px;
border-radius: 999px;
background: #c9d8de;
box-shadow: inset 0 0 0 1px rgba(15,106,122,0.08);
transition: background 0.2s ease;
flex: 0 0 50px;
}
#kr-v6-root .krv6-backlight-toggle__track::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 22px;
height: 22px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(17, 40, 48, 0.16);
transition: transform 0.2s ease;
}
#kr-v6-root .krv6-backlight-toggle input:checked + .krv6-backlight-toggle__track {
background: #0f6a7a;
}
#kr-v6-root .krv6-backlight-toggle input:checked + .krv6-backlight-toggle__track::after {
transform: translateX(20px);
}
#kr-v6-root .krv6-backlight-toggle input:disabled + .krv6-backlight-toggle__track {
background: #dce7eb;
}
#kr-v6-root .krv6-backlight-toggle__label {
min-width: 0;
line-height: 1.3;
}
#kr-v6-root .krv6-backlight-control__hint {
display: block;
color: var(--krv6-muted);
font-size: 12px;
line-height: 1.35;
text-align: right;
max-width: 280px;
}
#kr-v6-root .krv6-backlight-note::before {
content: "✦";
color: #ffe07a;
}
#kr-v6-root .krv6-backlight-banner {
margin-top: 14px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 28px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-backlight-banner[hidden] {
display: none !important;
}
#kr-v6-root .krv6-backlight-banner img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-backlight-control {
flex-direction: column;
align-items: stretch;
}
#kr-v6-root .krv6-backlight-control__hint {
max-width: none;
text-align: left;
}
}
#kr-v6-root .krv6-panel--guided.is-current-input {
border-color: rgba(210, 178, 34, 0.46);
background: linear-gradient(180deg, rgba(255, 252, 243, 0.98) 0%, rgba(252, 247, 232, 0.98) 100%);
box-shadow: 0 16px 34px rgba(17, 40, 48, 0.08), 0 0 0 1px rgba(210, 178, 34, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
#kr-v6-root .krv6-panel--guided.is-current-input::before {
background: linear-gradient(180deg, rgba(212, 175, 55, 0.88) 0%, rgba(255, 216, 0, 0.38) 100%);
opacity: 0.72;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__toggle {
background: linear-gradient(180deg, rgba(255, 253, 247, 0.96) 0%, rgba(250, 245, 230, 0.98) 100%);
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__title {
color: #17373d;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__text,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-inline-state,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-field__hint {
color: #4a5660;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-eyebrow,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__status {
color: #8a6a0f;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__status {
background: rgba(212, 175, 55, 0.10);
border: 1px solid rgba(212, 175, 55, 0.24);
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__chevron {
border-right-color: #a17b18;
border-bottom-color: #a17b18;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-btn--tool,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-source-btn,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-toggle-btn,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-layout-card,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-glass-card,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-gallery-card,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-upload-box,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-segment-row,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-hole-card,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-result-band__item {
border-color: rgba(212, 175, 55, 0.20);
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-field input,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-field textarea,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-mini-field input,
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-mini-field select {
border-color: rgba(212, 175, 55, 0.24);
background: rgba(255, 255, 255, 0.94);
}
#kr-v6-root .krv6-panel__body[data-current-input-hint]:not([data-current-input-hint=""])::before {
content: attr(data-current-input-hint);
display: inline-flex;
align-items: center;
margin: 0 0 12px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(212, 175, 55, 0.08);
color: #7a6113;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
}
#kr-v6-root .krv6-panel--guided.is-done .krv6-panel__status {
letter-spacing: 0.01em;
}
#kr-v6-root .krv6-panel--guided.is-current-input .krv6-panel__status {
background: rgba(212, 175, 55, 0.12);
border: 1px solid rgba(212, 175, 55, 0.20);
color: #7f6312;
}
#kr-v6-root .krv6-trust-guide {
padding: 14px 16px;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,252,0.98) 100%);
box-shadow: 0 10px 26px rgba(17, 40, 48, 0.05);
}
#kr-v6-root .krv6-trust-guide__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
#kr-v6-root .krv6-trust-guide__kicker { color: var(--krv6-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#kr-v6-root .krv6-trust-guide__title { font-size: 15px; line-height: 1.35; }
#kr-v6-root .krv6-trust-guide__grid { display: grid; gap: 10px; }
#kr-v6-root .krv6-trust-guide__item { padding: 12px 13px; border: 1px solid rgba(15, 106, 122, 0.10); border-radius: 14px; background: rgba(255,255,255,0.82); }
#kr-v6-root .krv6-trust-guide__item strong { display: block; font-size: 13px; margin-bottom: 4px; }
#kr-v6-root .krv6-trust-guide__item small { display: block; color: var(--krv6-muted); font-size: 12px; line-height: 1.45; }
#kr-v6-root .krv6-closing-intro,
#kr-v6-root .krv6-closing-note {
border: 1px solid rgba(15, 106, 122, 0.12);
background: linear-gradient(180deg, rgba(15,106,122,0.035) 0%, rgba(255,216,0,0.06) 100%);
border-radius: 18px;
padding: 14px 16px;
margin-bottom: 14px;
}
#kr-v6-root .krv6-closing-intro strong,
#kr-v6-root .krv6-closing-note strong {
display: block;
font-size: 14px;
margin-bottom: 4px;
}
#kr-v6-root .krv6-closing-intro span,
#kr-v6-root .krv6-closing-note span {
display: block;
color: var(--krv6-muted);
font-size: 13px;
line-height: 1.45;
}
#kr-v6-root .krv6-summary-grid--closing {
gap: 12px;
}
#kr-v6-root .krv6-closing-note--price {
margin-top: 14px;
margin-bottom: 0;
}
#kr-v6-root .krv6-check {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 16px;
background: var(--krv6-surface-soft);
}
#kr-v6-root .krv6-submit-row {
margin-top: 14px;
}
#kr-v6-root .krv6-step[data-step="6"] .krv6-btn--primary {
min-height: 54px;
font-size: 15px;
}
/* V10.4 – Mobile Overlay-Umbau auf Basis V10.3 */
#kr-v6-root .krv6-mobile-preview-tab,
#kr-v6-root .krv6-mobile-preview-close,
#kr-v6-root .krv6-mobile-preview-close-icon,
#kr-v6-root .krv6-mobile-preview-backdrop {
display: none;
}
@media (max-width: 820px) {
#kr-v6-root.krv6 {
--krv6-mobile-topbar-height: 92px;
--krv6-mobile-bottom-height: 78px;
margin: 0 auto;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 16px);
}
#kr-v6-root .krv6-shell {
gap: 0;
}
#kr-v6-root .krv6-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px;
border-radius: 0 0 18px 18px;
box-shadow: 0 10px 26px rgba(17, 40, 48, 0.12);
}
#kr-v6-root .krv6-topbar > .krv6-btn[data-action="prev-step"] {
display: none;
}
#kr-v6-root .krv6-topbar__center {
text-align: left;
min-width: 0;
}
#kr-v6-root .krv6-topbar__step {
font-size: 11px;
margin-bottom: 2px;
}
#kr-v6-root .krv6-topbar__title {
font-size: 18px;
margin-bottom: 0;
}
#kr-v6-root .krv6-topbar__mode-row {
display: none;
}
#kr-v6-root .krv6-topbar__right {
text-align: right;
align-self: start;
}
#kr-v6-root .krv6-topbar__price-label {
font-size: 11px;
margin-bottom: 2px;
}
#kr-v6-root .krv6-topbar__price {
font-size: 20px;
white-space: nowrap;
}
#kr-v6-root .krv6-main {
display: block;
padding: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) + 12px) 12px calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 14px);
}
#kr-v6-root .krv6-side {
position: static;
gap: 14px;
}
#kr-v6-root .krv6-stage-card {
position: fixed !important;
top: 50% !important;
left: 12px;
right: 12px;
bottom: auto;
z-index: 120;
display: flex;
flex-direction: column;
width: auto;
max-width: none;
max-height: min(70dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 132px));
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
overflow: auto;
overscroll-behavior: contain;
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: translate3d(0, -54%, 0) scale(0.985);
transform-origin: center center;
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
box-shadow: 0 24px 56px rgba(17, 40, 48, 0.24);
border-radius: 24px;
border: 1px solid rgba(15, 106, 122, 0.10);
background: rgba(255, 255, 255, 0.98);
}
#kr-v6-root.is-mobile-preview-open .krv6-stage-card {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate3d(0, -54%, 0) scale(1);
}
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 10px;
padding-right: 42px;
}
#kr-v6-root .krv6-stage-card__head > div {
min-width: 0;
}
#kr-v6-root .krv6-stage-card__title {
font-size: 14px;
line-height: 1.2;
margin-bottom: 4px;
}
#kr-v6-root .krv6-stage-card__text {
font-size: 12px;
}
#kr-v6-root .krv6-eyebrow {
font-size: 10px;
margin-bottom: 4px;
}
#kr-v6-root .krv6-mobile-preview-close {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-height: 44px;
margin-top: 12px;
padding: 10px 14px;
border: 1px solid rgba(15, 106, 122, 0.16);
border-radius: 14px;
background: #f4fafb;
color: var(--krv6-primary);
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
position: sticky;
bottom: 0;
z-index: 2;
}
#kr-v6-root .krv6-mobile-preview-close-icon {
position: absolute;
top: calc(10px + env(safe-area-inset-top, 0px));
right: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(15, 106, 122, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--krv6-primary);
font: inherit;
font-size: 18px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 20px rgba(17, 40, 48, 0.10);
}
#kr-v6-root .krv6-stage {
min-height: 240px !important;
max-height: none;
}
#kr-v6-root[data-mobile-preview-step="5"] .krv6-stage {
min-height: 320px !important;
}
#kr-v6-root .krv6-stage-meta {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 8px;
}
#kr-v6-root .krv6-stage-meta__item {
padding: 8px 8px;
border-radius: 12px;
min-height: 0;
}
#kr-v6-root .krv6-stage-meta__item span {
font-size: 10px;
margin-bottom: 3px;
line-height: 1.15;
}
#kr-v6-root .krv6-stage-meta__item strong {
font-size: 12px;
line-height: 1.15;
word-break: break-word;
}
#kr-v6-root .krv6-backlight-control {
margin-top: 8px;
padding: 10px 12px;
border-radius: 14px;
}
#kr-v6-root .krv6-backlight-toggle {
gap: 8px;
}
#kr-v6-root .krv6-backlight-toggle__label {
font-size: 11px;
line-height: 1.35;
}
#kr-v6-root .krv6-backlight-control__hint {
display: none;
}
#kr-v6-root .krv6-backlight-toggle__track {
transform: scale(0.9);
transform-origin: left center;
}
#kr-v6-root .krv6-stage-flow,
#kr-v6-root .krv6-stage-focus,
#kr-v6-root .krv6-stage-transition {
margin-top: 8px;
}
#kr-v6-root .krv6-footer-guide {
margin: 0 12px 12px;
}
#kr-v6-root .krv6-footer-actions {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid rgba(15, 106, 122, 0.10);
backdrop-filter: blur(10px);
box-shadow: 0 -10px 26px rgba(17, 40, 48, 0.08);
}
#kr-v6-root .krv6-footer-actions .krv6-btn {
min-height: 44px;
padding: 0 14px;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
#kr-v6-root .krv6-footer-actions .krv6-btn--ghost {
flex: 0 0 34%;
}
#kr-v6-root .krv6-footer-actions .krv6-btn--primary {
flex: 1 1 auto;
}
#kr-v6-root .krv6-mobile-preview-tab {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 96;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 12px 10px;
border: 1px solid rgba(15, 106, 122, 0.14);
border-right: 0;
border-radius: 18px 0 0 18px;
background: rgba(255, 255, 255, 0.96);
color: var(--krv6-primary);
box-shadow: 0 10px 24px rgba(17, 40, 48, 0.10);
font: inherit;
font-weight: 700;
writing-mode: vertical-rl;
text-orientation: mixed;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
#kr-v6-root.is-mobile-preview-open .krv6-mobile-preview-tab {
opacity: 0;
pointer-events: none;
}
#kr-v6-root.is-mobile-preview-open .krv6-topbar,
#kr-v6-root.is-mobile-preview-open .krv6-footer-actions {
pointer-events: none;
}
#kr-v6-root .krv6-mobile-preview-tab__icon {
font-size: 13px;
transform: rotate(90deg);
}
#kr-v6-root .krv6-mobile-preview-backdrop {
position: fixed;
inset: 0;
z-index: 110;
border: 0;
background: rgba(9, 19, 24, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease;
}
#kr-v6-root.is-mobile-preview-open .krv6-mobile-preview-backdrop {
display: block;
opacity: 1;
pointer-events: auto;
}
#kr-v6-root .krv6-main > .krv6-stage-card,
#kr-v6-root.krv6-sticky-fallback-active .krv6-stage-card {
position: fixed !important;
top: 50% !important;
bottom: auto !important;
transform: translate3d(0, -54%, 0) scale(0.985) !important;
}
#kr-v6-root.is-mobile-preview-open .krv6-main > .krv6-stage-card,
#kr-v6-root.is-mobile-preview-open.krv6-sticky-fallback-active .krv6-stage-card {
transform: translate3d(0, -50%, 0) scale(1) !important;
}
#kr-v6-root .krv6-stage-card:not(.is-mobile-inline) {
margin: 0;
}
#kr-v6-root:not(.is-mobile-preview-open) .krv6-stage-card {
pointer-events: none;
}
#kr-v6-root .krv6-panel,
#kr-v6-root .krv6-topbar,
#kr-v6-root .krv6-footer-guide {
border-radius: 18px;
}
#kr-v6-root .krv6-panel__toggle {
padding: 16px;
}
#kr-v6-root .krv6-panel__body {
padding: 0 16px 16px;
}
#kr-v6-root .krv6-panel--utility {
padding: 0 12px calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 18px);
}
#kr-v6-root .krv6-utility-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
#kr-v6-root .krv6-stage-card__text,
#kr-v6-root .krv6-stage-mode,
#kr-v6-root .krv6-stage-flow,
#kr-v6-root .krv6-stage-focus,
#kr-v6-root .krv6-stage-transition,
#kr-v6-root .krv6-backlight-banner {
display: none !important;
}
}
/* V10.4.9 – Reiner Verdichtungs- und Feinschliff-Patch auf Basis V10.4.8 */
@media (max-width: 820px) {
#kr-v6-root.krv6 {
--krv6-mobile-bottom-height: 68px;
}
#kr-v6-root .krv6-main {
padding-top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) + 10px);
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
#kr-v6-root .krv6-step {
gap: 10px;
}
#kr-v6-root .krv6-panel,
#kr-v6-root .krv6-footer-guide {
border-radius: 16px;
}
#kr-v6-root .krv6-panel__toggle {
padding: 12px 13px;
gap: 10px;
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
font-size: 10px;
margin-bottom: 3px;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title,
#kr-v6-root .krv6-panel__title {
font-size: 17px;
line-height: 1.18;
}
#kr-v6-root .krv6-panel__status {
padding: 5px 8px;
font-size: 10px;
}
#kr-v6-root .krv6-panel__body {
padding: 0 13px 13px;
}
#kr-v6-root .krv6-panel__text,
#kr-v6-root .krv6-inline-state,
#kr-v6-root .krv6-field__hint,
#kr-v6-root .krv6-safe-note,
#kr-v6-root .krv6-density-note,
#kr-v6-root .krv6-empty,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-help-card small,
#kr-v6-root .krv6-trust-item small,
#kr-v6-root .krv6-utility-item small,
#kr-v6-root .krv6-summary-card li span,
#kr-v6-root .krv6-price-list dt,
#kr-v6-root .krv6-price-list dd,
#kr-v6-root .krv6-closing-intro span,
#kr-v6-root .krv6-closing-note span,
#kr-v6-root .krv6-check {
font-size: 12px;
line-height: 1.35;
}
#kr-v6-root .krv6-field {
gap: 6px;
}
#kr-v6-root .krv6-field__label,
#kr-v6-root .krv6-mini-field span,
#kr-v6-root .krv6-mini-read span,
#kr-v6-root .krv6-result-band__item span {
font-size: 12px;
}
#kr-v6-root .krv6-field input,
#kr-v6-root .krv6-field textarea,
#kr-v6-root .krv6-mini-field input,
#kr-v6-root .krv6-mini-field select {
min-height: 44px;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
}
#kr-v6-root .krv6-field textarea {
min-height: 88px;
}
#kr-v6-root .krv6-unit {
right: 12px;
font-size: 12px;
}
#kr-v6-root .krv6-field__error {
font-size: 11px;
min-height: 14px;
}
#kr-v6-root .krv6-layout-grid,
#kr-v6-root .krv6-source-switch,
#kr-v6-root .krv6-toggle-row,
#kr-v6-root .krv6-gallery-grid,
#kr-v6-root .krv6-glass-grid,
#kr-v6-root .krv6-help-grid,
#kr-v6-root .krv6-summary-grid,
#kr-v6-root .krv6-trust-list,
#kr-v6-root .krv6-utility-grid,
#kr-v6-root .krv6-result-band,
#kr-v6-root .krv6-stage-meta,
#kr-v6-root .krv6-segments,
#kr-v6-root .krv6-hole-list,
#kr-v6-root .krv6-step5-tool-panels {
gap: 8px;
}
#kr-v6-root .krv6-layout-card,
#kr-v6-root .krv6-source-btn,
#kr-v6-root .krv6-toggle-btn,
#kr-v6-root .krv6-gallery-card,
#kr-v6-root .krv6-glass-card,
#kr-v6-root .krv6-help-card,
#kr-v6-root .krv6-summary-card,
#kr-v6-root .krv6-trust-item,
#kr-v6-root .krv6-utility-item,
#kr-v6-root .krv6-result-band__item,
#kr-v6-root .krv6-hole-card,
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-mini-read,
#kr-v6-root .krv6-upload-box,
#kr-v6-root .krv6-upload-preview__card,
#kr-v6-root .krv6-empty,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-check,
#kr-v6-root .krv6-closing-intro,
#kr-v6-root .krv6-closing-note {
padding: 10px 11px;
border-radius: 12px;
}
#kr-v6-root .krv6-layout-card {
min-height: 108px;
padding: 11px;
}
#kr-v6-root .krv6-layout-card strong,
#kr-v6-root .krv6-glass-card__top strong,
#kr-v6-root .krv6-summary-card strong,
#kr-v6-root .krv6-trust-item strong,
#kr-v6-root .krv6-utility-item strong,
#kr-v6-root .krv6-help-card strong {
font-size: 13px;
}
#kr-v6-root .krv6-layout-card small,
#kr-v6-root .krv6-gallery-card__cat,
#kr-v6-root .krv6-glass-card__bullets li,
#kr-v6-root .krv6-layout-card__mini,
#kr-v6-root .krv6-upload-box__text {
font-size: 11px;
}
#kr-v6-root .krv6-layout-card__mini {
height: 40px;
margin-bottom: 9px;
}
#kr-v6-root .krv6-source-btn,
#kr-v6-root .krv6-toggle-btn,
#kr-v6-root .krv6-btn,
#kr-v6-root .krv6-category-btn,
#kr-v6-root .krv6-glass-card,
#kr-v6-root .krv6-gallery-card {
min-height: 42px;
}
#kr-v6-root .krv6-source-btn,
#kr-v6-root .krv6-toggle-btn,
#kr-v6-root .krv6-btn,
#kr-v6-root .krv6-category-btn {
font-size: 12px;
border-radius: 12px;
padding: 9px 11px;
}
#kr-v6-root .krv6-btn {
min-height: 44px;
padding: 10px 12px;
}
#kr-v6-root .krv6-tool-grid {
gap: 8px;
}
#kr-v6-root .krv6-gallery-card {
padding: 8px;
border-radius: 14px;
}
#kr-v6-root .krv6-gallery-card img {
border-radius: 10px;
margin-bottom: 8px;
}
#kr-v6-root .krv6-gallery-card__name {
font-size: 13px;
margin-bottom: 2px;
}
#kr-v6-root .krv6-glass-card {
padding: 10px;
border-radius: 14px;
}
#kr-v6-root .krv6-glass-card__badge {
margin-bottom: 8px;
padding: 5px 8px;
font-size: 11px;
}
#kr-v6-root .krv6-glass-card__bullets {
margin-bottom: 10px;
padding-left: 16px;
}
#kr-v6-root .krv6-glass-card__price {
padding-top: 10px;
}
#kr-v6-root .krv6-glass-card__price span,
#kr-v6-root .krv6-glass-card__price strong,
#kr-v6-root .krv6-result-band__item strong,
#kr-v6-root .krv6-mini-read strong {
font-size: 13px;
}
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card__grid {
gap: 8px;
}
#kr-v6-root .krv6-segment-row__label strong {
font-size: 13px;
}
#kr-v6-root .krv6-segment-row__label small {
font-size: 11px;
}
#kr-v6-root .krv6-upload-box__title {
font-size: 13px;
}
#kr-v6-root .krv6-upload-preview__card img {
width: 74px;
height: 58px;
}
#kr-v6-root .krv6-footer-guide {
margin: 0 12px 10px;
padding: 10px 11px;
font-size: 12px;
}
#kr-v6-root .krv6-footer-guide__kicker {
font-size: 10px;
}
#kr-v6-root .krv6-footer-guide__title {
font-size: 13px;
line-height: 1.2;
}
#kr-v6-root .krv6-footer-guide__text {
font-size: 11px;
line-height: 1.3;
}
#kr-v6-root .krv6-footer-actions {
gap: 8px;
padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
}
#kr-v6-root .krv6-footer-actions .krv6-btn {
min-height: 40px;
font-size: 11px;
border-radius: 12px;
padding: 0 10px;
}
#kr-v6-root .krv6-footer-actions .krv6-btn--ghost {
flex: 0 0 33%;
}
#kr-v6-root .krv6-footer-actions .krv6-btn--primary {
flex: 1 1 auto;
}
#kr-v6-root .krv6-price-total {
margin-top: 12px;
padding-top: 10px;
}
#kr-v6-root .krv6-price-total span {
font-size: 13px;
}
#kr-v6-root .krv6-price-total strong {
font-size: 24px;
}
#kr-v6-root .krv6-step[data-step="6"] .krv6-btn--primary {
min-height: 46px;
font-size: 13px;
}
#kr-v6-root .krv6-mobile-preview-tab {
min-height: 42px;
padding: 10px 8px;
font-size: 11px;
border-radius: 16px 0 0 16px;
}
}
/* V10.5 MOBILE USP-SLIDER-PATCH */
@media (max-width: 820px) {
#kr-v6-root .krv6-panel--utility {
margin-top: 10px;
padding: 0 0 2px;
overflow: hidden;
}
#kr-v6-root .krv6-utility-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(168px, 74vw);
grid-template-columns: none;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 14px 8px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#kr-v6-root .krv6-utility-grid::-webkit-scrollbar {
display: none;
}
#kr-v6-root .krv6-utility-item {
min-height: auto;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
scroll-snap-align: start;
box-shadow: 0 8px 18px rgba(17, 40, 48, 0.06);
}
#kr-v6-root .krv6-utility-item__icon {
width: 28px;
height: 28px;
font-size: 12px;
}
#kr-v6-root .krv6-utility-item strong {
font-size: 12px;
line-height: 1.25;
margin-bottom: 2px;
}
#kr-v6-root .krv6-utility-item small {
font-size: 10px;
line-height: 1.3;
}
}
/* V10.5.2 mobile bottom bar hard row fix */
@media (max-width: 820px) {
#kr-v6-root .krv6-footer-actions {
display: grid !important;
grid-template-columns: minmax(84px, 0.72fr) minmax(0, 1.28fr) !important;
align-items: center !important;
column-gap: 8px !important;
row-gap: 0 !important;
flex-wrap: nowrap !important;
}
#kr-v6-root .krv6-footer-actions .krv6-btn {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
/*display: inline-flex !important;*/
align-items: center !important;
justify-content: center !important;
}
#kr-v6-root .krv6-footer-actions .krv6-btn--ghost,
#kr-v6-root .krv6-footer-actions .krv6-btn--primary {
grid-column: auto !important;
flex: 0 0 auto !important;
}
}
/* V10.5.3 – Mobile cleanup for external sticky widgets */
@media (max-width: 820px) {
.tvbottom-to-top,
.tvbottom-to-top-icon,
.id-accessibility-widget,
#accessibility-toggle {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#kr-v6-root .krv6-footer-actions {
z-index: 9999 !important;
}
}
/* V10.5.4 – Mobile cleanup for external WhatsApp sticky widget */
@media (max-width: 820px) {
.ets_wa_whatsapp_block,
.ets_wa_whatsapp_block.left_bottom,
.ets_wa_whatsapp_block.left_center,
.ets_wa_whatsapp_block.right_bottom,
.ets_wa_whatsapp_block.right_center {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* V10.5.5 – Mobile Fix gegen Badge-/Titel-Überlappung in Guided-Karten */
@media (max-width: 820px) {
#kr-v6-root .krv6-panel__toggle {
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: start !important;
gap: 10px !important;
padding: 12px 12px 11px !important;
}
#kr-v6-root .krv6-panel__toggle-text {
min-width: 0 !important;
padding-right: 2px;
}
#kr-v6-root .krv6-panel__toggle .krv6-eyebrow {
margin-bottom: 4px !important;
font-size: 9px !important;
line-height: 1.1 !important;
}
#kr-v6-root .krv6-panel__toggle .krv6-panel__title {
font-size: 15px !important;
line-height: 1.12 !important;
max-width: 100%;
word-break: break-word;
}
#kr-v6-root .krv6-panel__status {
min-width: 0 !important;
max-width: 78px !important;
padding: 4px 7px !important;
font-size: 8px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
align-self: start;
margin-top: 0 !important;
}
#kr-v6-root .krv6-panel__chevron {
width: 10px !important;
height: 10px !important;
margin-top: 3px;
margin-right: 0 !important;
}
#kr-v6-root .krv6-panel__body {
padding: 0 12px 12px !important;
}
}
/* V10.5.6 – Step-1 Abstandsreduktion oben und unten auf Mobil */
@media (max-width: 820px) {
#kr-v6-root.krv6 {
--krv6-mobile-bottom-height: 58px;
}
#kr-v6-root .krv6-main {
padding-top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) + 2px);
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 4px);
gap: 8px;
}
#kr-v6-root .krv6-side,
#kr-v6-root .krv6-step {
gap: 8px;
}
#kr-v6-root .krv6-step[data-step="1"] {
gap: 8px;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel:first-child,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided:first-child {
margin-top: 0 !important;
}
#kr-v6-root .krv6-footer-guide {
margin-top: 0;
padding-top: 10px;
padding-bottom: 10px;
}
#kr-v6-root .krv6-panel--utility {
padding: 0 10px calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 8px);
margin-top: 4px;
}
#kr-v6-root .krv6-utility-grid {
gap: 6px;
}
}
/* V10.5.7 – Aggressiver Mobile-Abstands-Patch für kompakteres Step-Stacking */
@media (max-width: 820px) {
#kr-v6-root.krv6 {
--krv6-mobile-bottom-height: 56px;
}
#kr-v6-root .krv6-main {
padding-top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) - 8px) !important;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) - 2px) !important;
gap: 4px !important;
}
#kr-v6-root .krv6-side,
#kr-v6-root .krv6-step,
#kr-v6-root .krv6-step[data-step="1"] {
gap: 5px !important;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#kr-v6-root .krv6-panel,
#kr-v6-root .krv6-panel--guided {
margin-block: 0 !important;
}
#kr-v6-root .krv6-footer-guide {
margin: 2px 10px 6px !important;
padding: 8px 10px !important;
}
#kr-v6-root .krv6-panel--utility {
margin-top: 0 !important;
padding: 0 10px calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 2px) !important;
}
#kr-v6-root .krv6-utility-grid {
padding-top: 0 !important;
padding-bottom: 4px !important;
gap: 6px !important;
}
#kr-v6-root .krv6-mobile-preview-tab {
top: calc(50% - 10px) !important;
}
}
/* V10.5.8 – Äußere Leerzonen in Step 1 mobil komplett entfernen */
@media (max-width: 820px) {
#kr-v6-root .krv6-main {
padding-top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) - 14px) !important;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) - 10px) !important;
gap: 0 !important;
}
#kr-v6-root .krv6-side,
#kr-v6-root .krv6-step,
#kr-v6-root .krv6-step[data-step="1"] {
gap: 0 !important;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel:first-child,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided:first-child {
margin-top: 0 !important;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel:last-child,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided:last-child {
margin-bottom: 0 !important;
}
#kr-v6-root .krv6-footer-guide {
margin: 0 10px 4px !important;
padding: 8px 10px !important;
}
#kr-v6-root .krv6-panel--utility {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px)) !important;
}
#kr-v6-root .krv6-utility-grid {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* V10.5.9 – Mobile Eingabefelder und Eingabekarten systematisch verdichten */
@media (max-width: 820px) {
#kr-v6-root .krv6-panel__body {
padding: 0 11px 11px !important;
}
#kr-v6-root .krv6-panel__text,
#kr-v6-root .krv6-inline-state,
#kr-v6-root .krv6-field__hint,
#kr-v6-root .krv6-safe-note,
#kr-v6-root .krv6-density-note,
#kr-v6-root .krv6-empty,
#kr-v6-root .krv6-help-box,
#kr-v6-root .krv6-help-card small,
#kr-v6-root .krv6-trust-item small,
#kr-v6-root .krv6-utility-item small,
#kr-v6-root .krv6-summary-card li span,
#kr-v6-root .krv6-price-list dt,
#kr-v6-root .krv6-price-list dd,
#kr-v6-root .krv6-closing-intro span,
#kr-v6-root .krv6-closing-note span,
#kr-v6-root .krv6-check {
font-size: 11px !important;
line-height: 1.28 !important;
}
#kr-v6-root .krv6-field,
#kr-v6-root .krv6-mini-field {
gap: 4px !important;
}
#kr-v6-root .krv6-field__label,
#kr-v6-root .krv6-mini-field span,
#kr-v6-root .krv6-mini-read span,
#kr-v6-root .krv6-result-band__item span {
font-size: 11px !important;
line-height: 1.2 !important;
margin-bottom: 2px !important;
}
#kr-v6-root .krv6-field input,
#kr-v6-root .krv6-field textarea,
#kr-v6-root .krv6-mini-field input,
#kr-v6-root .krv6-mini-field select {
min-height: 38px !important;
padding: 8px 10px !important;
border-radius: 10px !important;
font-size: 12px !important;
}
#kr-v6-root .krv6-field textarea {
min-height: 76px !important;
}
#kr-v6-root .krv6-field__error {
font-size: 10px !important;
min-height: 12px !important;
line-height: 1.2 !important;
}
#kr-v6-root .krv6-unit {
right: 10px !important;
font-size: 11px !important;
}
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-hole-card {
padding: 10px !important;
border-radius: 14px !important;
gap: 8px !important;
}
#kr-v6-root .krv6-segment-row__label strong,
#kr-v6-root .krv6-hole-card__head strong,
#kr-v6-root .krv6-mini-read strong,
#kr-v6-root .krv6-result-band__item strong {
font-size: 13px !important;
line-height: 1.2 !important;
}
#kr-v6-root .krv6-segment-row__label small {
font-size: 10px !important;
line-height: 1.2 !important;
}
#kr-v6-root .krv6-segment-row--dual {
gap: 8px !important;
}
#kr-v6-root .krv6-segment-row__fields {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#kr-v6-root .krv6-segment-row__fields .krv6-input-wrap input {
padding-right: 34px !important;
}
#kr-v6-root .krv6-segment-row__fields .krv6-unit {
right: 8px !important;
}
#kr-v6-root .krv6-hole-card__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
align-items: start !important;
}
#kr-v6-root .krv6-hole-card__head {
margin-bottom: 8px !important;
}
#kr-v6-root .krv6-input-wrap {
position: relative;
}
#kr-v6-root .krv6-form-grid {
gap: 8px !important;
}
#kr-v6-root .krv6-panel__body .krv6-safe-note,
#kr-v6-root .krv6-panel__body .krv6-density-note,
#kr-v6-root .krv6-panel__body .krv6-inline-state {
margin-top: 4px !important;
}
}
/* V10.5.10 – Äußerer Leerraum bleibt weg, aber Zwischenräume zwischen Karten kommen mobil zurück */
@media (max-width: 820px) {
#kr-v6-root .krv6-main {
padding-top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) - 14px) !important;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) - 10px) !important;
gap: 0 !important;
}
#kr-v6-root .krv6-side {
gap: 0 !important;
}
#kr-v6-root .krv6-step,
#kr-v6-root .krv6-step[data-step="1"] {
gap: 8px !important;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel:first-child,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided:first-child {
margin-top: 0 !important;
}
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel:last-child,
#kr-v6-root .krv6-step[data-step="1"] > .krv6-panel--guided:last-child {
margin-bottom: 0 !important;
}
#kr-v6-root .krv6-panel,
#kr-v6-root .krv6-panel--guided {
margin-block: 0 !important;
}
#kr-v6-root .krv6-footer-guide {
margin: 0 10px 4px !important;
}
}
/* V10.5.12 – Mobile Liveansicht: 3 Metaboxen ohne Scrollen sichtbar */
@media (max-width: 820px) {
#kr-v6-root .krv6-stage-card {
max-height: min(66dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 122px));
padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
}
#kr-v6-root .krv6-stage-card__head {
margin-bottom: 8px;
padding-right: 38px;
}
#kr-v6-root .krv6-stage-card__title {
font-size: 13px;
line-height: 1.15;
margin-bottom: 2px;
}
#kr-v6-root .krv6-backlight-control {
margin-top: 6px;
padding: 8px 10px;
}
#kr-v6-root .krv6-stage {
min-height: 180px !important;
}
#kr-v6-root[data-mobile-preview-step="5"] .krv6-stage {
min-height: 280px !important;
}
#kr-v6-root .krv6-stage-meta {
gap: 5px;
margin-top: 6px;
}
#kr-v6-root .krv6-stage-meta__item {
padding: 6px 6px;
border-radius: 10px;
}
#kr-v6-root .krv6-stage-meta__item span {
font-size: 9px;
margin-bottom: 2px;
}
#kr-v6-root .krv6-stage-meta__item strong {
font-size: 10px;
line-height: 1.1;
}
}
/* V10.5.13 – Mobile rhythm fix for the small footer-guide box
Only mobile: restore a small, clean gap above the footer-guide box,
while keeping the outer bottom area compact.
Desktop remains unchanged. */
@media (max-width: 820px) {
/* The small info box below the step cards must not stick to the last card */
#kr-v6-root .krv6-side {
gap: 8px !important;
}
/* Keep the step stack compact, but do not let the last card touch the footer-guide */
#kr-v6-root .krv6-step {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#kr-v6-root .krv6-footer-guide {
margin-top: 8px !important;
margin-bottom: 0 !important;
align-self: stretch;
}
/* Safety: if a step contains special last-child spacing overrides, neutralize them */
#kr-v6-root .krv6-step > .krv6-panel:last-child,
#kr-v6-root .krv6-step > .krv6-panel--guided:last-child {
margin-bottom: 0 !important;
}
/* Bottom actions remain close to the footer-guide but with a clean visual rhythm */
#kr-v6-root .krv6-footer-actions {
margin-top: 0 !important;
}
}
/* V10.5.14 – Mobile gallery tile refinement for Step 2
Only mobile: make gallery tiles calmer, denser and better proportioned.
Desktop remains unchanged. */
@media (max-width: 820px) {
/* Step 2 should feel like a compact motif picker, not a bulky card wall */
#kr-v6-root .krv6-step[data-step="2"] {
gap: 8px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-panel__body {
padding-top: 0 !important;
}
/* Categories: slimmer and horizontally scrollable if needed */
#kr-v6-root .krv6-step[data-step="2"] .krv6-categories {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
margin-bottom: 10px !important;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-categories::-webkit-scrollbar {
display: none;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-category-btn {
flex: 0 0 auto;
padding: 7px 10px !important;
border-radius: 999px !important;
font-size: 11px !important;
line-height: 1.1;
}
/* Gallery tiles */
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-grid,
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-card {
padding: 7px !important;
border-radius: 14px !important;
border-width: 1px !important;
min-width: 0;
box-shadow: none !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-card.is-selected {
border-width: 1.5px !important;
box-shadow: 0 0 0 2px rgba(15, 106, 122, 0.08) !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-card img {
aspect-ratio: 1 / 1 !important;
border-radius: 10px !important;
margin-bottom: 7px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-card__name {
font-size: 12px !important;
line-height: 1.2 !important;
margin-bottom: 2px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4em;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-gallery-card__cat {
font-size: 10px !important;
line-height: 1.2 !important;
}
/* Upload card in the same step should match the denser rhythm */
#kr-v6-root .krv6-step[data-step="2"] .krv6-upload-box {
padding: 12px !important;
border-radius: 14px !important;
gap: 6px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-upload-box__title {
font-size: 13px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-upload-box__text,
#kr-v6-root .krv6-step[data-step="2"] .krv6-inline-state {
font-size: 11px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-upload-preview__card {
padding: 10px !important;
border-radius: 14px !important;
gap: 10px !important;
}
#kr-v6-root .krv6-step[data-step="2"] .krv6-upload-preview__card img {
width: 76px !important;
height: 60px !important;
border-radius: 8px !important;
}
}
/* V10.5.15 – Step 4 Bohrungsarten mobil nebeneinander */
@media (max-width: 820px) {
#kr-v6-root .krv6-step[data-step="4"] .krv6-tool-grid,
#kr-v6-root .krv6-step[data-step="4"] .krv6-hole-builder-actions {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#kr-v6-root .krv6-step[data-step="4"] .krv6-tool-grid .krv6-btn,
#kr-v6-root .krv6-step[data-step="4"] .krv6-hole-builder-actions .krv6-btn {
min-height: 40px;
padding: 8px 6px;
font-size: 11px;
line-height: 1.2;
justify-content: center;
text-align: center;
white-space: nowrap;
}
}
/* V10.5.16 – Step 5 Mobile Editor-Modus */
@media (max-width: 820px) {
#kr-v6-root.is-mobile-step5-editor .krv6-mobile-preview-tab,
#kr-v6-root.is-mobile-step5-editor .krv6-mobile-preview-backdrop,
#kr-v6-root.is-mobile-step5-editor .krv6-mobile-preview-close,
#kr-v6-root.is-mobile-step5-editor .krv6-mobile-preview-close-icon,
#kr-v6-root.is-mobile-inline-preview .krv6-mobile-preview-tab,
#kr-v6-root.is-mobile-inline-preview .krv6-mobile-preview-backdrop,
#kr-v6-root.is-mobile-inline-preview .krv6-mobile-preview-close,
#kr-v6-root.is-mobile-inline-preview .krv6-mobile-preview-close-icon {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-main,
#kr-v6-root.is-mobile-inline-preview .krv6-main {
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card {
position: sticky !important;
top: calc(var(--krv6-mobile-topbar-height) + env(safe-area-inset-top, 0px) + 8px) !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 80 !important;
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
transform: none !important;
max-height: calc(100dvh - var(--krv6-mobile-topbar-height) - var(--krv6-mobile-bottom-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 26px);
overflow: hidden;
margin-bottom: 10px;
padding: 10px 10px 8px;
box-shadow: 0 16px 34px rgba(17, 40, 48, 0.14);
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card__head,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card__head {
margin-bottom: 8px;
padding-right: 0;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card__title,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card__title {
font-size: 13px;
margin-bottom: 3px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-backlight-control,
#kr-v6-root.is-mobile-inline-preview .krv6-backlight-control {
margin: 6px 0 0;
padding: 8px 10px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage,
#kr-v6-root.is-mobile-inline-preview .krv6-stage {
min-height: 218px !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-meta,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta {
margin-top: 6px;
gap: 6px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-meta__item,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta__item {
padding: 7px 7px;
}
#kr-v6-root .krv6-step5-mobile-editorbar {
display: grid;
gap: 8px;
margin-bottom: 8px;
padding: 10px 11px;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 14px;
background: linear-gradient(180deg, rgba(15,106,122,0.035) 0%, rgba(255,255,255,0.98) 100%);
box-shadow: 0 8px 18px rgba(17, 40, 48, 0.05);
}
#kr-v6-root .krv6-step5-mobile-editorbar__segments {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
#kr-v6-root .krv6-step5-mobile-editorbar__segments::-webkit-scrollbar { display: none; }
#kr-v6-root .krv6-step5-mobile-chip {
flex: 0 0 auto;
min-height: 36px;
padding: 8px 12px;
border: 1px solid var(--krv6-line);
border-radius: 999px;
background: #fff;
color: var(--krv6-text);
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
#kr-v6-root .krv6-step5-mobile-chip.is-active {
border-color: var(--krv6-primary);
background: #eaf6f8;
color: var(--krv6-primary);
box-shadow: 0 0 0 3px rgba(15, 106, 122, 0.08);
}
#kr-v6-root .krv6-step5-mobile-editorbar__hint {
color: var(--krv6-muted);
font-size: 11px;
line-height: 1.3;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-footer-guide,
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-substep="step5-help"] {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-step5-tool-panels {
gap: 0;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel] {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active {
display: block !important;
border-radius: 16px;
overflow: hidden;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__toggle {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__body {
display: block !important;
padding: 12px 12px 12px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__text {
margin-bottom: 10px;
font-size: 12px;
color: var(--krv6-muted);
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-tool-grid--editor {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-tool-grid--editor .krv6-btn--tool {
min-height: 42px;
padding: 8px 6px;
font-size: 11px;
border-radius: 12px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-tool-grid--editor .krv6-btn--tool.is-step5-icon-tool {
font-size: 15px;
font-weight: 800;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-action="mirror"],
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-action="reset-transform"] {
grid-column: span 2;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-role="editor-warning-state"] {
margin-top: 10px;
padding: 9px 10px;
border-radius: 12px;
background: #f7fbfc;
border: 1px solid rgba(15, 106, 122, 0.08);
font-size: 11px;
line-height: 1.35;
}
#kr-v6-root.is-mobile-step5-editor .krv6-footer-guide {
display: none !important;
}
}
/* V10.5.17 – Step 5 Mobile: Topbar + integrierte Kompaktvorschau */
@media (max-width: 820px) {
#kr-v6-root.is-mobile-step5-editor.krv6 {
--krv6-step5-topbar-core: 76px;
--krv6-step5-preview-height: 170px;
--krv6-step5-segmentbar-height: 50px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-topbar {
z-index: 92;
padding-bottom: 8px;
border-radius: 0;
box-shadow: 0 8px 18px rgba(17, 40, 48, 0.10);
}
#kr-v6-root.is-mobile-step5-editor .krv6-main {
padding-top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-core) + var(--krv6-step5-preview-height) + var(--krv6-step5-segmentbar-height) + 18px);
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card {
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-core)) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
z-index: 89 !important;
width: auto;
max-height: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 8px 12px 10px;
border-top: 0;
border-radius: 0 0 18px 18px;
box-shadow: 0 14px 28px rgba(17, 40, 48, 0.12);
background: rgba(255,255,255,0.985);
overflow: hidden;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card__head,
#kr-v6-root.is-mobile-step5-editor .krv6-backlight-control,
#kr-v6-root.is-mobile-step5-editor .krv6-backlight-banner,
#kr-v6-root.is-mobile-step5-editor .krv6-stage-meta,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage,
#kr-v6-root.is-mobile-inline-preview .krv6-stage {
min-height: var(--krv6-step5-preview-height) !important;
height: var(--krv6-step5-preview-height) !important;
border-radius: 14px;
background: #f7fafc !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage__canvas,
#kr-v6-root.is-mobile-step5-editor .krv6-stage__intro {
height: 100%;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage__intro img {
object-fit: contain;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-core) + var(--krv6-step5-preview-height));
left: 0;
right: 0;
z-index: 88;
display: flex;
align-items: center;
gap: 8px;
min-height: var(--krv6-step5-segmentbar-height);
margin: 0;
padding: 8px 12px;
border: 0;
border-top: 1px solid rgba(15, 106, 122, 0.08);
border-bottom: 1px solid rgba(15, 106, 122, 0.08);
border-radius: 0;
background: rgba(255,255,255,0.985);
box-shadow: 0 8px 18px rgba(17, 40, 48, 0.06);
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar__segments {
display: flex;
gap: 8px;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar__hint {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-chip {
min-height: 34px;
padding: 7px 12px;
font-size: 12px;
border-radius: 999px;
white-space: nowrap;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] {
gap: 10px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-step5-tool-panels {
gap: 10px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active {
border-radius: 16px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__body {
padding: 12px 12px 12px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__text {
margin-bottom: 8px;
font-size: 12px;
}
}
/* V10.5.19 – Step 5 mobil: Segmentbar in den festen Topbar-Kopf integrieren */
@media (max-width: 820px) {
#kr-v6-root.is-mobile-step5-editor.krv6 {
--krv6-step5-topbar-core: 66px;
--krv6-step5-preview-height: 108px;
--krv6-step5-segmentbar-height: 30px;
--krv6-step5-topbar-shell-height: calc(var(--krv6-step5-topbar-core) + var(--krv6-step5-preview-height) + var(--krv6-step5-segmentbar-height) + 16px);
}
#kr-v6-root.is-mobile-step5-editor .krv6-topbar {
z-index: 94;
align-items: start;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
padding-right: 14px;
padding-bottom: calc(var(--krv6-step5-preview-height) + var(--krv6-step5-segmentbar-height) + 14px);
padding-left: 14px;
border-radius: 0 0 22px 22px;
box-shadow: 0 14px 28px rgba(17, 40, 48, 0.14);
overflow: visible;
}
#kr-v6-root.is-mobile-step5-editor .krv6-topbar__step {
margin-bottom: 1px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-topbar__title {
font-size: 17px;
line-height: 1.08;
}
#kr-v6-root.is-mobile-step5-editor .krv6-topbar__price {
font-size: 18px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-main {
padding-top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-shell-height) + 12px);
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card {
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-core)) !important;
left: 14px !important;
right: 14px !important;
bottom: auto !important;
z-index: 95 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
max-height: none !important;
min-height: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage-card__head,
#kr-v6-root.is-mobile-step5-editor .krv6-backlight-control,
#kr-v6-root.is-mobile-step5-editor .krv6-backlight-banner,
#kr-v6-root.is-mobile-step5-editor .krv6-stage-meta,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage,
#kr-v6-root.is-mobile-inline-preview .krv6-stage {
min-height: var(--krv6-step5-preview-height) !important;
height: var(--krv6-step5-preview-height) !important;
border-radius: 14px;
border: 1px solid rgba(15, 106, 122, 0.12);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
background: #f7fafc !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage__canvas,
#kr-v6-root.is-mobile-step5-editor .krv6-stage__intro {
height: 100%;
}
#kr-v6-root.is-mobile-step5-editor .krv6-stage__intro img {
object-fit: cover;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + var(--krv6-step5-topbar-core) + var(--krv6-step5-preview-height) + 8px);
left: 14px;
right: 14px;
z-index: 96;
display: flex;
align-items: center;
gap: 0;
min-height: var(--krv6-step5-segmentbar-height);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar__segments {
display: flex;
gap: 6px;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar__segments::-webkit-scrollbar {
display: none;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-editorbar__hint {
display: none !important;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step5-mobile-chip {
min-height: 24px;
padding: 3px 9px;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
white-space: nowrap;
box-shadow: none;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] {
gap: 10px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] .krv6-step5-tool-panels {
gap: 10px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active {
border-radius: 16px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__body {
padding: 12px 12px 12px;
}
#kr-v6-root.is-mobile-step5-editor .krv6-step[data-step="5"] [data-step5-panel].is-mobile-active .krv6-panel__text {
margin-bottom: 8px;
font-size: 12px;
}
}
#kr-v6-root .krv6-stage__canvas {
-webkit-user-select: none;
user-select: none;
}
#kr-v6-root .krv6-dev-downloads {
margin-top: 14px;
padding: 16px;
border: 1px dashed rgba(15, 106, 122, 0.35);
border-radius: 16px;
background: linear-gradient(180deg, rgba(15,106,122,0.03) 0%, rgba(255,216,0,0.04) 100%);
display: none;
}
#kr-v6-root .krv6-dev-downloads__head {
display: grid;
gap: 4px;
margin-bottom: 12px;
}
#kr-v6-root .krv6-dev-downloads__head strong {
font-size: 14px;
}
#kr-v6-root .krv6-dev-downloads__head span {
color: var(--krv6-muted);
font-size: 12px;
}
#kr-v6-root .krv6-dev-downloads__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 10px;
}
#kr-v6-root .krv6-dev-downloads .krv6-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 640px) {
#kr-v6-root .krv6-dev-downloads__grid {
grid-template-columns: 1fr;
}
}
/* V12 – CSV-Galerie Navigation */
#kr-v6-root .krv6-gallery-nav {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-top: 12px;
}
#kr-v6-root .krv6-gallery-nav__meta {
min-width: 96px;
text-align: center;
color: var(--krv6-muted);
font-size: 12px;
font-weight: 700;
}
#kr-v6-root .krv6-gallery-nav .krv6-btn {
min-height: 44px;
padding: 10px 12px;
}
#kr-v6-root .krv6-gallery-nav .krv6-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
#kr-v6-root .krv6-gallery-nav--compact {
margin-top: 10px;
}
#kr-v6-root .krv6-gallery-nav--compact .krv6-btn {
min-height: 40px;
padding: 8px 10px;
font-size: 12px;
}
@media (max-width: 820px) {
#kr-v6-root .krv6-gallery-nav,
#kr-v6-root .krv6-gallery-nav--compact {
grid-template-columns: 1fr 1fr;
}
#kr-v6-root .krv6-gallery-nav__meta {
grid-column: 1 / -1;
order: -1;
}
}
/* V12 – Mobile Step 1–4: Kompaktvorschau wie in Step 5 in den Topbar-Kopf integrieren */
@media (max-width: 820px) {
#kr-v6-root.is-mobile-inline-preview.krv6 {
--krv6-inline-topbar-core: 66px;
--krv6-inline-preview-height: 108px;
--krv6-inline-topbar-shell-height: calc(var(--krv6-inline-topbar-core) + var(--krv6-inline-preview-height) + 16px);
}
#kr-v6-root.is-mobile-inline-preview .krv6-topbar {
z-index: 94;
align-items: start;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
padding-right: 14px;
padding-bottom: calc(var(--krv6-inline-preview-height) + 14px);
padding-left: 14px;
border-radius: 0 0 22px 22px;
box-shadow: 0 14px 28px rgba(17, 40, 48, 0.14);
overflow: visible;
}
#kr-v6-root.is-mobile-inline-preview .krv6-topbar__step {
margin-bottom: 1px;
}
#kr-v6-root.is-mobile-inline-preview .krv6-topbar__title {
font-size: 17px;
line-height: 1.08;
}
#kr-v6-root.is-mobile-inline-preview .krv6-topbar__price {
font-size: 18px;
}
#kr-v6-root.is-mobile-inline-preview .krv6-main {
padding-top: calc(env(safe-area-inset-top, 0px) + var(--krv6-inline-topbar-shell-height) + 12px) !important;
padding-bottom: calc(var(--krv6-mobile-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card {
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + var(--krv6-inline-topbar-core)) !important;
left: 14px !important;
right: 14px !important;
bottom: auto !important;
z-index: 95 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
max-height: none !important;
min-height: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card__head,
#kr-v6-root.is-mobile-inline-preview .krv6-backlight-control,
#kr-v6-root.is-mobile-inline-preview .krv6-backlight-banner,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta {
display: none !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage {
min-height: var(--krv6-inline-preview-height) !important;
height: var(--krv6-inline-preview-height) !important;
border-radius: 14px;
background: #f7fafc !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage__canvas,
#kr-v6-root.is-mobile-inline-preview .krv6-stage__intro {
height: 100%;
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage__intro img {
object-fit: contain;
}
#kr-v6-root.is-mobile-inline-preview .krv6-stage-flow,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-focus,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-transition,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-mode {
display: none !important;
}
}
/* STEP 1 – Mobile Maßeingabe kompakter */
@media (max-width: 767px) {
/* Segmentblock kompakter */
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-segment-dimension-card,
#kr-v6-root .krv6-segment-dimension-list > * {
width: 100%;
}
/* Falls Breite/Höhe aktuell untereinander laufen:
auf 2 Spalten umstellen */
#kr-v6-root .krv6-segment-row,
#kr-v6-root .krv6-segment-dimension-card .krv6-form-grid,
#kr-v6-root [data-role="segment-dimension-list"] .krv6-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Label/Feld enger machen */
#kr-v6-root .krv6-field,
#kr-v6-root .krv6-mini-field {
min-width: 0;
}
/* Eingabefelder schmaler und kompakter */
#kr-v6-root .krv6-field input,
#kr-v6-root .krv6-mini-field input,
#kr-v6-root .krv6-mini-field select {
min-height: 44px;
padding: 10px 34px 10px 12px;
font-size: 14px;
}
/* Einheit "mm" etwas kompakter */
#kr-v6-root .krv6-unit {
right: 10px;
font-size: 12px;
}
/* Spinner bei number inputs ausblenden */
#kr-v6-root input[type="number"]::-webkit-outer-spin-button,
#kr-v6-root input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#kr-v6-root input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Hilfstexte etwas kompakter */
#kr-v6-root .krv6-field__hint,
#kr-v6-root .krv6-field__error {
font-size: 11px;
line-height: 1.3;
}
}
/* Mobile: künstliche Lücke unter der integrierten Live-Vorschau entfernen */
@media (max-width: 767px) {
/* Nur Step 1–5 mit integrierter Mobile-Preview */
#kr-v6-root.is-mobile-inline-preview .krv6-main {
padding-top: 0 !important;
margin-top: 0 !important;
gap: 0 !important;
align-items: start !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-side {
padding-top: 0 !important;
margin-top: 60px !important;
top: 0 !important;
gap: 10px !important;
align-self: start !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-step,
#kr-v6-root.is-mobile-inline-preview .krv6-step.is-active {
padding-top: 0 !important;
margin-top: 0 !important;
}
#kr-v6-root.is-mobile-inline-preview .krv6-step > .krv6-panel:first-child,
#kr-v6-root.is-mobile-inline-preview .krv6-step > section:first-child {
margin-top: 0 !important;
}
/* Häufige Ursache: erste offene Karte hat eigenen Abstand */
#kr-v6-root.is-mobile-inline-preview .krv6-step.is-active .krv6-panel.is-open:first-child,
#kr-v6-root.is-mobile-inline-preview .krv6-step.is-active .krv6-panel--guided.is-open:first-child {
margin-top: 0 !important;
}
/* Falls der Stage-Bereich im normalen Layout noch Platz reserviert */
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card {
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-width: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Falls innerhalb der Stage selbst noch Abstand steht */
#kr-v6-root.is-mobile-inline-preview .krv6-stage-card__head,
#kr-v6-root.is-mobile-inline-preview .krv6-stage,
#kr-v6-root.is-mobile-inline-preview .krv6-stage__intro,
#kr-v6-root.is-mobile-inline-preview .krv6-stage-meta {
margin: 0 !important;
}
}
#kr-v6-root .krv6-inquiry-success[hidden],
#kr-v6-root .krv6-modal[hidden] {
display: none !important;
}
#kr-v6-root .krv6-inquiry-success {
border: 1px solid rgba(22, 121, 79, 0.20);
background: linear-gradient(180deg, rgba(22,121,79,0.06) 0%, rgba(255,255,255,0.98) 100%);
border-radius: 18px;
padding: 18px 16px;
text-align: center;
}
#kr-v6-root .krv6-inquiry-success__icon {
width: 54px;
height: 54px;
border-radius: 999px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(22, 121, 79, 0.12);
color: #16794f;
font-weight: 800;
font-size: 22px;
}
#kr-v6-root .krv6-inquiry-success__title {
margin: 0 0 8px;
font-size: 18px;
}
#kr-v6-root .krv6-inquiry-success__text {
margin: 0 0 14px;
color: var(--krv6-muted);
font-size: 13px;
line-height: 1.45;
}
#kr-v6-root .krv6-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: block;
}
#kr-v6-root .krv6-modal__backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(9, 19, 24, 0.42);
}
#kr-v6-root .krv6-modal__dialog {
position: absolute;
left: 50%;
top: 50%;
width: min(520px, calc(100vw - 24px));
transform: translate(-50%, -50%);
background: #ffffff;
border: 1px solid rgba(15, 106, 122, 0.12);
border-radius: 18px;
box-shadow: 0 24px 56px rgba(17, 40, 48, 0.24);
padding: 18px 16px;
text-align: center;
}
#kr-v6-root .krv6-modal__icon {
width: 54px;
height: 54px;
border-radius: 999px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(22, 121, 79, 0.12);
color: #16794f;
font-weight: 800;
font-size: 22px;
}
#kr-v6-root .krv6-modal__title {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
}
#kr-v6-root .krv6-modal__text {
color: var(--krv6-muted);
font-size: 13px;
line-height: 1.45;
margin-bottom: 14px;
}
#kr-v6-root .krv6-modal__actions {
display: flex;
gap: 10px;
justify-content: center;
}
@media (max-width: 520px) {
#kr-v6-root .krv6-modal__actions {
flex-direction: column;
}
}/* End custom CSS */