#lu-form {
    /* Primitive tokens (Phase 1) - wortgleich aus primitive-tokens.md, isoliert
       innerhalb des #lu-form-Scopes, da das Formular unabhaengig gestylt wird. */
    --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; --space-1: 0.25rem;
    --space-1-5: 0.375rem; --space-2: 0.5rem; --space-2-5: 0.625rem; --space-3: 0.75rem;
    --space-3-5: 0.875rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
    --space-7: 1.75rem; --space-8: 2rem; --space-9: 2.25rem; --space-10: 2.5rem;
    --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

    --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem;
    --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms;

    --ink:#161616;
    --paper:#f7f7f5;
    --line:#e2e2e0;
    --brand:#111111;
    --brand-dark:#000000;
    --accent:#111111;
    --accent-soft:#eeeeec;
    --ok:#2e7d4f;
    --danger:#c0392b;
    --white:#ffffff;
    font-size:16px;
  }
#lu-form * {box-sizing:border-box;}
#lu-form a:focus-visible, #lu-form button:focus-visible, #lu-form input:focus-visible,
#lu-form select:focus-visible, #lu-form summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-dark);
    border-radius: 4px;
  }
#lu-form {
    margin:0;
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    background:var(--paper);
    color:var(--ink);
  }
#lu-form header {
    background:var(--brand-dark);
    color:var(--white);
    padding:var(--space-5) var(--space-4) var(--space-3-5);
  }
#lu-form header h1 {
    margin:0;
    font-size:var(--font-size-xl);
    font-weight:800;
    letter-spacing:0.3px;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:var(--space-2);
  }
#lu-form header .sub {
    font-size:var(--font-size-xs);
    opacity:0.75;
    margin-top:var(--space-0-5);
  }
#lu-form main {
    padding:var(--space-4);
    max-width:720px;
    margin:0 auto;
  }
#lu-form .card {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:var(--space-4);
    margin-bottom:var(--space-3-5);
  }
#lu-form .card h2 {
    margin:0 0 var(--space-2-5);
    font-size:var(--font-size-base);
    color:var(--brand-dark);
  }
#lu-form .row {
    display:flex;
    gap:var(--space-2);
    align-items:center;
  }
#lu-form input[type=text], #lu-form input[type=number], #lu-form input[type=date], #lu-form select {
    width:100%;
    padding:var(--space-2-5);
    border:1px solid var(--line);
    border-radius:8px;
    font-size:var(--font-size-base);
    background:var(--paper);
    color:var(--ink);
  }
#lu-form input.field-error, #lu-form select.field-error {
    border-color:var(--danger);
    box-shadow:0 0 0 1px var(--danger);
  }
#lu-form .field-error-msg {
    display:none;
    color:var(--danger);
    font-size:var(--font-size-xs);
    margin-top:var(--space-1);
  }
#lu-form .field-error-msg.is-visible {display:block;}
#lu-form label {
    font-size:var(--font-size-xs);
    color:#555;
    display:block;
    margin-bottom:var(--space-1);
  }
#lu-form .field {margin-bottom:var(--space-2-5);}
#lu-form button.btn {
    border:none;
    border-radius:999px;
    padding:var(--space-3) var(--space-5);
    font-size:var(--font-size-sm);
    cursor:pointer;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.4px;
  }
#lu-form .btn-brand {background:var(--brand); color:white;}
#lu-form .btn-accent {background:var(--accent); color:white;}
#lu-form .btn-ghost {background:transparent; color:var(--brand-dark); border:1px solid var(--line) !important;}
#lu-form .btn-danger {background:transparent; color:var(--danger); border:1px solid var(--danger);}
#lu-form .btn-sm {padding:var(--space-2) var(--space-3-5); font-size:var(--font-size-xs);}
#lu-form .room {
    border:1px dashed var(--line);
    border-radius:12px;
    padding:var(--space-3);
    margin-bottom:var(--space-3);
    background:#fbfaf6;
  }
#lu-form .room-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:var(--space-2);
  }
#lu-form .room-head input {font-weight:600; border:none; background:transparent; padding:var(--space-0-5) 0; font-size:var(--font-size-base);}
#lu-form .item-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--space-1-5) 0;
    border-bottom:1px solid var(--line);
    font-size:var(--font-size-sm);
  }
#lu-form .item-row:last-child {border-bottom:none;}
#lu-form .item-meta {color:#595959; font-size:var(--font-size-xs);}
#lu-form .qty-controls {display:flex; align-items:center; gap:var(--space-1-5);}
#lu-form .qty-controls button {
    width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line); background:white; cursor:pointer; font-size:var(--font-size-sm);
  }
#lu-form .qty-controls .btn-danger {border-color:var(--danger); color:var(--danger);}
#lu-form .catalog-picker {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-1-5);
    max-height:260px;
    overflow-y:auto;
    margin-top:var(--space-2);
    padding:var(--space-2);
    background:var(--paper);
    border-radius:8px;
  }
#lu-form .catalog-item {
    background:white;
    border:1px solid var(--line);
    border-radius:8px;
    padding:var(--space-2);
    font-size:var(--font-size-xs);
    cursor:pointer;
    text-align:left;
  }
#lu-form .catalog-item:hover {border-color:var(--brand);}
#lu-form .catalog-item .m3 {color:var(--accent); font-weight:600;}
#lu-form .service-list label {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-1-5) 0;
    font-size:var(--font-size-sm);
    color:var(--ink);
    cursor:pointer;
  }
#lu-form .summary-bar {
    background:var(--brand-dark);
    color:white;
    padding:var(--space-3-5) var(--space-4);
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:14px;
    margin-top:var(--space-1-5);
    flex-wrap:wrap;
    gap:var(--space-3);
  }
#lu-form .summary-bar .num {font-size:var(--font-size-lg); font-weight:700;}
#lu-form .summary-bar .label {font-size:var(--font-size-xs); opacity:0.75; text-transform:uppercase; letter-spacing:0.5px;}
#lu-form .summary-bar .price {color:#ffffff;}
#lu-form .summary-bar .price-range {display:none;}
#lu-form .summary-bar .price-range.is-visible {display:block;}
#lu-form .hint {font-size:var(--font-size-xs); color:#595959; margin-top:var(--space-1);}
#lu-form .loading-dot {
    display:inline-block; width:var(--space-2); height:var(--space-2); border-radius:50%;
    background:var(--accent); animation:lu-pulse 1s infinite ease-in-out;
  }
  @keyframes lu-pulse{0%,100%{opacity:0.3;} 50%{opacity:1;}}
#lu-form .grid2 {display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2-5);}
  @media (max-width:480px){
#lu-form .catalog-picker {grid-template-columns:1fr;}
#lu-form .grid2 {grid-template-columns:1fr;}
  }
#lu-form .mode-switch {
    display:flex; gap:var(--space-2); margin-bottom:var(--space-3-5);
  }
#lu-form .mode-btn {
    flex:1; border:1px solid var(--line); background:var(--white); color:var(--ink);
    border-radius:10px; padding:var(--space-3) var(--space-2); font-size:var(--font-size-sm);
    font-weight:700; cursor:pointer; text-align:center;
  }
#lu-form .mode-btn.active {
    background:var(--brand-dark); color:#fff; border-color:var(--brand-dark);
  }
#lu-form .mode-btn .mode-hint {
    display:block; font-weight:400; font-size:var(--font-size-xs); opacity:0.75; margin-top:2px;
  }
  @media (max-width:480px){
#lu-form .mode-switch {flex-direction:column;}
  }