/* ================================================================
   Cycling-Stop Werkstatt Booking — werkstatt.css v2.0.0
   Design: Orange #f79007 / Schwarz #000000
   ================================================================ */

:root {
    --cs-orange:   #f79007;
    --cs-orange-d: #d97d06;
    --cs-orange-l: #fff5e6;
    --cs-black:    #000000;
    --cs-dark:     #1a1a1a;
    --cs-text:     #2c2c2c;
    --cs-muted:    #666666;
    --cs-border:   #e0e0e0;
    --cs-bg:       #f8f9fa;
    --cs-white:    #ffffff;
    --cs-green:    #2d6a4f;
    --cs-green-l:  #d4edda;
    --cs-blue:     #1565c0;
    --cs-blue-l:   #e3f2fd;
    --cs-red:      #c0392b;
    --cs-red-l:    #f8d7da;
    --cs-radius:   12px;
    --cs-shadow:   0 2px 12px rgba(0,0,0,.08);
}

/* ── Base ─────────────────────────────────────────── */
.cs-werkstatt {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cs-text); max-width: 760px; margin: 2rem auto; padding: 0 1rem;
}
.cs-card {
    background: var(--cs-white); border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow); padding: 2rem; border-top: 4px solid var(--cs-orange);
}
.cs-wk-header h2 { margin: 0 0 .25rem; font-size: 1.5rem; color: var(--cs-black); }
.cs-subtitle { color: var(--cs-muted); font-size: .95rem; margin: 0 0 1.5rem; }

/* ── Modal / Popup ────────────────────────────────── */
.cs-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6); z-index: 9999;
    justify-content: center; align-items: center; padding: 1rem;
}
.cs-modal {
    background: var(--cs-white); border-radius: var(--cs-radius);
    padding: 2rem; max-width: 520px; width: 100%; position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.cs-modal h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.cs-modal-body p { margin: 0 0 .75rem; font-size: .9rem; line-height: 1.6; color: var(--cs-text); }
.cs-modal-close {
    position: absolute; top: .75rem; right: 1rem; background: none; border: none;
    font-size: 1.5rem; cursor: pointer; color: var(--cs-muted); line-height: 1;
}
.cs-modal-close:hover { color: var(--cs-dark); }
.cs-anweisung-link { color: var(--cs-orange); text-decoration: underline; cursor: pointer; }

/* ── Alert ────────────────────────────────────────── */
.cs-alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.cs-alert--success { background: var(--cs-green-l); color: #155724; border: 1px solid #c3e6cb; }
.cs-alert--error   { background: var(--cs-red-l);   color: #721c24; border: 1px solid #f5c6cb; }

/* ── Steps ────────────────────────────────────────── */
.cs-steps { display: flex; gap: .4rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.cs-step {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .85rem; border-radius: 24px; font-size: .78rem;
    font-weight: 600; background: #f0f0f0; color: var(--cs-muted); white-space: nowrap; transition: .2s;
}
.cs-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,.1); font-size: .72rem; font-weight: 700;
}
.cs-step--active { background: var(--cs-orange); color: #fff; }
.cs-step--active .cs-step-num { background: rgba(255,255,255,.3); }
.cs-step--done { background: var(--cs-green); color: #fff; }
.cs-step--done .cs-step-num { background: rgba(255,255,255,.3); }

/* ── Buttons ──────────────────────────────────────── */
.cs-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.5rem; border-radius: 8px; font-size: .95rem;
    font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .2s;
}
.cs-btn--primary { background: var(--cs-orange); color: #fff; border-color: var(--cs-orange); }
.cs-btn--primary:hover { background: var(--cs-orange-d); border-color: var(--cs-orange-d); color: #fff; }
.cs-btn--book { font-size: 1.05rem; padding: .75rem 2rem; }
.cs-btn--ghost { background: transparent; color: var(--cs-muted); border-color: var(--cs-border); }
.cs-btn--ghost:hover { border-color: #999; color: var(--cs-text); }
.cs-btn:disabled { opacity: .5; cursor: not-allowed; }
.cs-btn-row { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Forms ────────────────────────────────────────── */
.cs-field { margin-bottom: 1rem; }
.cs-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; color: var(--cs-dark); }
.cs-input, .cs-select {
    width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--cs-border);
    border-radius: 8px; font-size: .95rem; background: var(--cs-white);
    box-sizing: border-box; transition: border-color .2s;
}
.cs-input:focus, .cs-select:focus {
    outline: none; border-color: var(--cs-orange);
    box-shadow: 0 0 0 3px rgba(247,144,7,.15);
}
.cs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .cs-field-row { grid-template-columns: 1fr; } }
.cs-checkbox-field label {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .9rem; font-weight: 400; cursor: pointer;
}
.cs-checkbox-field input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--cs-orange); }
.cs-checkbox-field a { color: var(--cs-orange); text-decoration: underline; }
.cs-faq-field {
    background: #fffde7; border: 1px solid #ffe082; border-left: 4px solid #ffa000;
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
}

/* ── Schritt 1: Login-Karten ──────────────────────── */
.cs-login-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 540px) { .cs-login-options { grid-template-columns: 1fr; } }
.cs-login-card {
    display: flex; align-items: flex-start; gap: .85rem;
    border: 2px solid var(--cs-border); border-radius: var(--cs-radius);
    padding: 1.25rem; cursor: pointer; transition: all .2s; text-decoration: none; color: inherit;
}
.cs-login-card:hover { border-color: var(--cs-orange); background: var(--cs-orange-l); }
.cs-login-card--selected { border-color: var(--cs-orange); background: var(--cs-orange-l); }
.cs-login-card--in { background: var(--cs-green-l); border-color: var(--cs-green); cursor: default; }
.cs-login-card--btn { background: var(--cs-bg); }
.cs-login-card--btn:hover { background: var(--cs-blue-l); border-color: var(--cs-blue); }
.cs-login-icon { font-size: 1.75rem; flex-shrink: 0; }
.cs-login-card strong { display: block; font-size: .95rem; margin-bottom: .2rem; color: var(--cs-dark); }
.cs-login-card p { margin: 0; font-size: .82rem; color: var(--cs-muted); line-height: 1.4; }

/* Auto-Add Info Box (Schritt 1) */
.cs-autoAdd-info {
    background: var(--cs-green-l); border: 1px solid #a5d6a7; border-left: 4px solid var(--cs-green);
    border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1.25rem;
}
.cs-autoAdd-info__title { font-weight: 700; font-size: .88rem; color: var(--cs-green); margin-bottom: .5rem; }
.cs-autoAdd-info__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 540px) { .cs-autoAdd-info__row { grid-template-columns: 1fr; } }
.cs-autoAdd-info__item { font-size: .82rem; line-height: 1.4; }
.cs-autoAdd-info__item strong { display: block; margin-bottom: .15rem; color: var(--cs-dark); }
.cs-autoAdd-info__item span { color: var(--cs-muted); }
.cs-autoAdd-info__item--fixed strong { color: #7b1fa2; }

/* ── Schritt 2: Mode Cards ────────────────────────── */
.cs-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .75rem 0 1rem; }
@media (max-width: 560px) { .cs-mode-cards { grid-template-columns: 1fr; } }
.cs-mode-card {
    border: 2px solid var(--cs-border); border-radius: var(--cs-radius);
    padding: 1.5rem; cursor: pointer; transition: all .2s; text-align: center;
}
.cs-mode-card:hover { border-color: var(--cs-orange); background: var(--cs-orange-l); }
.cs-mode-card--selected { border-color: var(--cs-orange); background: var(--cs-orange-l); box-shadow: 0 0 0 3px rgba(247,144,7,.2); }
.cs-mode-card__icon { width: 48px; height: 48px; margin: 0 auto .75rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cs-mode-card h4 { margin: 0 0 .5rem; font-size: 1rem; color: var(--cs-black); }
.cs-mode-card p { margin: 0; font-size: .85rem; color: var(--cs-muted); line-height: 1.4; }

/* Auto-Add Box (Schritt 2) */
.cs-auto-add-box {
    background: var(--cs-orange-l); border: 1.5px solid var(--cs-orange);
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
}
.cs-auto-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .3rem 0; font-size: .875rem; border-bottom: 1px solid rgba(247,144,7,.2);
}
.cs-auto-item:last-child { border-bottom: none; }
.cs-auto-item__code { font-family: monospace; font-weight: 700; color: var(--cs-orange); min-width: 36px; }
.cs-auto-item__name { flex: 1; color: var(--cs-dark); }
.cs-auto-item__price { font-weight: 600; color: var(--cs-dark); white-space: nowrap; }
.cs-auto-remove {
    background: none; border: 1.5px solid var(--cs-orange); color: var(--cs-orange);
    border-radius: 50%; width: 20px; height: 20px; font-size: .9rem; line-height: 1;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cs-auto-remove:hover { background: var(--cs-orange); color: #fff; }
.cs-auto-fixed {
    background: #7b1fa2; color: #fff; font-size: .7rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 4px;
}
.cs-auto-item--removed { opacity: .5; text-decoration: line-through; }
.cs-auto-removed-tag {
    font-size: .72rem; color: var(--cs-red); font-style: italic;
}

/* SVG Icons */
.cs-icon--tools {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f79007'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}
.cs-icon--team {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f79007'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
.cs-icon--wrench-inline {
    display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: .3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ── Service List ─────────────────────────────────── */
.cs-service-list {
    max-height: 420px; overflow-y: auto;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius); margin-bottom: 1rem;
}
.cs-service-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .7rem 1rem; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background .15s;
}
.cs-service-item:last-child { border-bottom: none; }
.cs-service-item:hover { background: #fafafa; }
.cs-service-item--selected { background: var(--cs-orange-l); border-left: 3px solid var(--cs-orange); }
.cs-service-item__left { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.cs-service-item__check { font-size: 1.1rem; flex-shrink: 0; }
.cs-service-item--selected .cs-service-item__check { color: var(--cs-orange); }
.cs-service-item__name { font-weight: 500; font-size: .88rem; }
.cs-service-item__code { color: var(--cs-muted); font-size: .75rem; font-family: monospace; flex-shrink: 0; }
.cs-service-item__meta { text-align: right; white-space: nowrap; flex-shrink: 0; margin-left: .75rem; }
.cs-service-item__price { font-weight: 700; color: var(--cs-orange); font-size: .88rem; }
.cs-service-item--cat-header {
    background: var(--cs-bg); font-weight: 700; font-size: .82rem; color: var(--cs-dark);
    padding: .45rem 1rem; cursor: default; border-bottom: 2px solid var(--cs-border);
    position: sticky; top: 0; z-index: 1;
}

/* ── Cart ─────────────────────────────────────────── */
.cs-cart {
    background: var(--cs-bg); border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.cs-cart h4 { margin: 0 0 .5rem; font-size: .95rem; color: var(--cs-dark); }
.cs-cart-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .3rem 0; font-size: .85rem; border-bottom: 1px solid #eee;
}
.cs-cart-item:last-child { border-bottom: none; }
.cs-cart-item__name { flex: 1; }
.cs-cart-item__price { font-weight: 600; color: var(--cs-dark); margin-left: .5rem; }
.cs-cart-tag { display: inline-block; background: var(--cs-green); color: #fff; padding: .1rem .45rem; border-radius: 4px; font-size: .7rem; font-weight: 600; margin-left: .35rem; }
.cs-cart-tag--insp { background: #0d6efd; }
.cs-cart-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .75rem; padding-top: .75rem; border-top: 2px solid var(--cs-orange);
    font-size: .95rem; flex-wrap: wrap; gap: .25rem;
}
.cs-cart-total strong { color: var(--cs-orange); font-size: 1.1rem; }

/* ── Cost Note ────────────────────────────────────── */
.cs-cost-note {
    display: block; background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #ffa000;
    border-radius: 6px; padding: .6rem .85rem; margin-top: .75rem;
    font-size: .8rem; color: #5d4037; line-height: 1.5;
}

/* ── Drop-Off Banner (Schritt 3, volle Breite) ─────── */
.cs-drop-off-banner {
    display: block; width: 100%; box-sizing: border-box;
    background: #e3f2fd; border: 1.5px solid #1976d2;
    border-left: 5px solid #1565c0; border-radius: 8px;
    padding: .9rem 1.1rem; margin-bottom: 1.1rem;
    font-size: .9rem; color: #0d47a1; font-weight: 500; line-height: 1.5;
}
.cs-drop-off-banner strong { color: #0d47a1; }

/* Drop-Off Inline (Zusammenfassung, Bestätigung) */
.cs-drop-off-hint {
    background: #e3f2fd; border: 1px solid #90caf9; border-left: 4px solid #1976d2;
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
    font-size: .88rem; color: #0d47a1; line-height: 1.5;
}
.cs-drop-off-hint--inline { display: block; margin: .25rem 0 .5rem; padding: .5rem .85rem; font-size: .82rem; }
.cs-success-box .cs-drop-off-hint { text-align: left; margin: .75rem auto; max-width: 500px; }

/* ── Schritt 3: Time Slots ────────────────────────── */
.cs-selected-service {
    background: var(--cs-orange-l); border: 1px solid var(--cs-orange); border-radius: 8px;
    padding: .65rem 1rem; margin-bottom: 1.25rem; font-size: .9rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.cs-selected-service strong { color: var(--cs-black); }
.cs-slots-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.cs-slot-btn {
    padding: .45rem 1rem; border: 2px solid var(--cs-border); border-radius: 8px;
    cursor: pointer; background: var(--cs-white); font-size: .9rem; font-weight: 500; transition: .2s;
}
.cs-slot-btn:hover { border-color: var(--cs-orange); background: var(--cs-orange-l); }
.cs-slot-btn--selected { border-color: var(--cs-orange); background: var(--cs-orange); color: #fff; font-weight: 700; }
.cs-mode-badge { display: inline-block; padding: .4rem 1rem; border-radius: 20px; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.cs-mode-badge--on_call { background: #cfe2ff; color: #084298; }

/* ── Schritt 4: Kunden-Hinweise ───────────────────── */
.cs-customer-hint {
    background: var(--cs-green-l); border: 1px solid #a5d6a7; border-left: 4px solid var(--cs-green);
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.25rem;
    font-size: .88rem; color: #2e7d32; line-height: 1.5; animation: cs-fade .3s ease;
}
.cs-login-hint {
    background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #f9a825;
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.25rem;
    font-size: .88rem; color: #5d4037; line-height: 1.6;
}
.cs-login-inline-link { color: var(--cs-orange); font-weight: 700; text-decoration: underline; }

/* ── Summary ──────────────────────────────────────── */
.cs-summary-box {
    background: var(--cs-bg); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    font-size: .88rem; line-height: 1.9; border-left: 4px solid var(--cs-orange);
}

/* ── Schritt 5: Success ───────────────────────────── */
.cs-success-box { text-align: center; padding: 2.5rem 1rem; }
.cs-success-icon { font-size: 4rem; margin-bottom: .75rem; color: var(--cs-green); }
.cs-success-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.cs-hint { font-size: .85rem; color: var(--cs-muted); margin-top: .5rem; margin-bottom: .5rem; line-height: 1.5; }
.cs-loading { text-align: center; color: var(--cs-muted); padding: 1.5rem; font-size: .9rem; }

/* ── Animation ────────────────────────────────────── */
.cs-step-panel { animation: cs-fade .3s ease; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 480px) {
    .cs-card { padding: 1.25rem; }
    .cs-wk-header h2 { font-size: 1.25rem; }
    .cs-service-item { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .cs-service-item__meta { text-align: left; margin-left: 0; }
    .cs-cart-total { flex-direction: column; align-items: flex-start; }
    .cs-success-actions { flex-direction: column; }
}

/* ========================================================
   BUG-0019: Mengen-Stepper im Cart (Leistungen + Artikel)
   ======================================================== */
.cs-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: .5rem .75rem;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid #eee;
}
.cs-cart-item:last-child { border-bottom: none; }
.cs-cart-item__name { word-break: break-word; }

.cs-cart-item__qty .cs-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.cs-qty--locked { opacity: .55; }

.cs-qty__btn {
    width: 28px; height: 28px;
    border: 0; background: #f5f5f5;
    cursor: pointer;
    font-size: 1rem; line-height: 1;
    color: #333; padding: 0;
}
.cs-qty__btn:hover:not(:disabled) { background: #e8e8e8; }
.cs-qty__btn:disabled { cursor: not-allowed; opacity: .4; }

.cs-qty__val {
    min-width: 28px;
    text-align: center;
    padding: 0 .35rem;
    font-weight: 600;
    font-size: .95rem;
}

.cs-cart-item__price {
    text-align: right;
    white-space: nowrap;
}
.cs-cart-item__unit {
    display: block;
    font-size: .78rem;
    color: #888;
    font-weight: normal;
}

.cs-cart-item__rm {
    width: 28px; height: 28px;
    border: 0; background: transparent;
    color: #c00;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}
.cs-cart-item__rm:hover { background: #fee; }

@media (max-width: 600px) {
    .cs-cart-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name name"
            "qty  price"
            "qty  rm";
        gap: .25rem .5rem;
    }
    .cs-cart-item__name  { grid-area: name; }
    .cs-cart-item__qty   { grid-area: qty; }
    .cs-cart-item__price { grid-area: price; }
    .cs-cart-item__rm    { grid-area: rm; justify-self: end; }
}