:root {
    --uk-blue   : #3d6b8e;
    --uk-dark   : #2a5070;
    --uk-light  : #ddeef7;
    --uk-border : #dde4ed;
    --uk-text   : #1e2d3d;
    --uk-muted  : #6b7f95;
    --uk-bg     : #f7f9fc;
    --uk-r      : 10px;
    --uk-white  : #ffffff;
}

#urp-kal-root {
    font-family : system-ui, sans-serif;
    color       : var(--uk-text);
    max-width   : 1100px;
    margin      : 0 auto;
}

/* ── Layout ── */
.uk-layout {
    display               : grid;
    grid-template-columns : 1fr 340px;
    gap                   : 24px;
    align-items           : start;
}

/* ── Progress bar ── */
.uk-progress-wrap { margin-bottom: 24px; }
.uk-progress-bar {
    height        : 4px;
    background    : var(--uk-border);
    border-radius : 4px;
    overflow      : hidden;
}
.uk-progress-fill {
    height     : 100%;
    background : var(--uk-blue);
    transition : width .4s ease;
}
.uk-progress-steps {
    display         : flex;
    justify-content : space-between;
    margin-top      : 8px;
    font-size       : 11px;
    color           : var(--uk-muted);
}
.uk-progress-steps span { font-weight: 600; color: var(--uk-blue); }

/* ── Step ── */
.uk-step { animation: ukIn .25s ease forwards; }
@keyframes ukIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.uk-step-title {
    font-size   : 20px;
    font-weight : 700;
    margin      : 0 0 20px;
    color       : var(--uk-text);
}
.uk-step-subtitle {
    font-size  : 14px;
    color      : var(--uk-muted);
    margin     : -12px 0 20px;
}

/* ── Form tabs ── */
.uk-tabs { display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--uk-border); border-radius:var(--uk-r); overflow:hidden; margin-bottom:20px; }
.uk-tab-btn { padding:11px; background:var(--uk-white); border:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--uk-muted); transition:all .2s; }
.uk-tab-btn.active { background:var(--uk-light); color:var(--uk-blue); font-weight:600; }

/* ── Fields ── */
.uk-field { margin-bottom: 12px; }
.uk-label {
    display       : block;
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--uk-blue);
    margin-bottom : 6px;
}
.uk-input {
    width         : 100%;
    padding       : 12px 14px;
    border        : 1.5px solid var(--uk-border);
    border-radius : var(--uk-r);
    font-size     : 14px;
    color         : var(--uk-text);
    background    : var(--uk-white);
    outline       : none;
    transition    : border-color .2s;
    box-sizing    : border-box;
}
.uk-input:focus { border-color: var(--uk-blue); }
.uk-input::placeholder { color: #aab4be; }
.uk-select {
    width         : 100%;
    padding       : 12px 14px;
    border        : 1.5px solid var(--uk-border);
    border-radius : var(--uk-r);
    font-size     : 14px;
    color         : var(--uk-text);
    background    : var(--uk-white);
    outline       : none;
    cursor        : pointer;
    box-sizing    : border-box;
}
.uk-select:focus { border-color: var(--uk-blue); }
.uk-textarea {
    width         : 100%;
    padding       : 12px 14px;
    border        : 1.5px solid var(--uk-border);
    border-radius : var(--uk-r);
    font-size     : 14px;
    color         : var(--uk-text);
    background    : var(--uk-white);
    outline       : none;
    resize        : vertical;
    min-height    : 80px;
    font-family   : inherit;
    box-sizing    : border-box;
}
.uk-textarea:focus { border-color: var(--uk-blue); }
.uk-textarea::placeholder { color: #aab4be; }

/* Grid 2 */
.uk-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.uk-grid3 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }

/* ── Choice buttons ── */
.uk-choices { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.uk-choice {
    padding       : 10px 16px;
    border        : 1.5px solid var(--uk-border);
    border-radius : var(--uk-r);
    background    : var(--uk-white);
    cursor        : pointer;
    font-size     : 14px;
    font-weight   : 500;
    color         : var(--uk-muted);
    transition    : all .2s;
    white-space   : nowrap;
}
.uk-choice.active {
    border-color : var(--uk-blue);
    color        : var(--uk-blue);
    background   : var(--uk-light);
    font-weight  : 600;
}

/* ── Checkbox services ── */
.uk-checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.uk-checkbox-item {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    padding       : 12px 14px;
    border        : 1.5px solid var(--uk-border);
    border-radius : var(--uk-r);
    cursor        : pointer;
    transition    : all .2s;
    font-size     : 14px;
    color         : var(--uk-muted);
    user-select   : none;
}
.uk-checkbox-item.checked {
    border-color : var(--uk-blue);
    color        : var(--uk-blue);
    background   : var(--uk-light);
}
.uk-checkbox-item input { width:16px; height:16px; accent-color:var(--uk-blue); }

/* ── Phone ── */
.uk-phone-wrap { display:flex; gap:8px; }
.uk-phone-code { display:flex;align-items:center;gap:6px;padding:12px 12px;border:1.5px solid var(--uk-border);border-radius:var(--uk-r);background:var(--uk-white);font-size:14px;white-space:nowrap; }
.uk-phone-wrap .uk-input { flex:1; }

/* ── DSGVO ── */
.uk-dsgvo { display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:13px;color:var(--uk-muted); }
.uk-dsgvo input { margin-top:2px;width:16px;height:16px;accent-color:var(--uk-blue);flex-shrink:0;cursor:pointer; }
.uk-dsgvo a { color:var(--uk-blue); }

/* ── Nav ── */
.uk-nav { display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px; }
.uk-btn-back { padding:11px 22px;border:1.5px solid var(--uk-border);border-radius:50px;background:var(--uk-white);font-size:14px;font-weight:600;color:var(--uk-muted);cursor:pointer;transition:all .2s; }
.uk-btn-back:hover { border-color:var(--uk-blue);color:var(--uk-blue); }
.uk-btn-next { padding:12px 28px;border:none;border-radius:50px;background:var(--uk-blue);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s;display:flex;align-items:center;gap:6px;margin-left:auto; }
.uk-btn-next:hover { background:var(--uk-dark);transform:translateY(-1px); }
.uk-btn-next:disabled { background:#aab4be;cursor:not-allowed;transform:none; }

/* ── Error ── */
.uk-error-msg { color:#c0392b;font-size:13px;padding:10px 14px;background:#fdf0f0;border-radius:var(--uk-r);border-left:3px solid #c0392b;margin-top:8px; }

/* ── Übersicht Panel ── */
.uk-panel {
    background    : var(--uk-blue);
    border-radius : 14px;
    padding       : 20px;
    color         : var(--uk-white);
    position      : sticky;
    top           : 24px;
}
.uk-panel-title {
    font-size     : 15px;
    font-weight   : 700;
    margin        : 0 0 16px;
    display       : flex;
    justify-content: space-between;
    align-items   : center;
}
.uk-panel-section {
    background    : rgba(255,255,255,.1);
    border-radius : 8px;
    padding       : 12px;
    margin-bottom : 10px;
    font-size     : 13px;
}
.uk-panel-section-title {
    font-size   : 11px;
    font-weight : 700;
    opacity     : .7;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    display     : flex;
    justify-content: space-between;
}
.uk-panel-section-title button {
    background : none;
    border     : none;
    color      : #fff;
    opacity    : .7;
    cursor     : pointer;
    font-size  : 11px;
    padding    : 0;
}
.uk-panel-section-title button:hover { opacity:1; }
.uk-panel-row { display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.1); }
.uk-panel-row:last-child { border:none; }
.uk-panel-key { opacity:.7; }
.uk-panel-val { font-weight:600;text-align:right; }

.uk-panel-step {
    display     : flex;
    align-items : center;
    justify-content: space-between;
    padding     : 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-size   : 13px;
    opacity     : .5;
    transition  : opacity .3s;
}
.uk-panel-step.done { opacity:1; }
.uk-panel-step.active { opacity:1;font-weight:700; }

/* ── Weiter button bottom ── */
.uk-panel .uk-btn-weiter {
    width         : 100%;
    padding       : 13px;
    border        : none;
    border-radius : 50px;
    background    : rgba(255,255,255,.15);
    color         : #fff;
    font-size     : 14px;
    font-weight   : 600;
    cursor        : not-allowed;
    margin-top    : 16px;
    opacity       : .6;
}
.uk-panel .uk-btn-weiter.enabled {
    background   : rgba(255,255,255,.25);
    cursor       : pointer;
    opacity      : 1;
}
.uk-panel .uk-btn-weiter.enabled:hover { background: rgba(255,255,255,.35); }

/* ── Success ── */
.uk-success { text-align:center;padding:60px 24px;animation:ukIn .4s ease forwards; }
.uk-success-icon { width:80px;height:80px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;margin:0 auto 20px; }
.uk-success h2 { font-size:26px;font-weight:700;margin:0 0 10px; }
.uk-success p  { font-size:15px;color:var(--uk-muted);margin:0; }

/* ── Mobile ── */
@media(max-width:768px){
    .uk-layout { grid-template-columns:1fr; }
    .uk-panel  { position:static;order:-1; }
    .uk-grid2, .uk-grid3 { grid-template-columns:1fr; }
    .uk-checkbox-grid { grid-template-columns:1fr; }
}