/* ══════════════════════════════════════════════════════════════
   Uhrenservice Preisrechner  ·  v4
   Farben: #9E8A4C Akzent · #151515 Text · #fff Hintergrund
   Schrift: IBM Plex Sans (body), GT Sectra (headings)
   ══════════════════════════════════════════════════════════════ */

:root {
  --acc:        #9E8A4C;
  --acc-lt:     #f5f0e6;
  --acc-dk:     #7d6c39;
  --text:       #151515;
  --text-muted: #6b6b6b;
  --border:     #e2dfd8;
  --surface:    #f9f8f6;
  --white:      #ffffff;
  --error:      #b83030;
  --info-bg:    #f2f7ff;
  --info-border:#c5d8f5;
  --warn-bg:    #fff8ec;
  --warn-border:#f0d9a0;
  --radius:     8px;
  --radius-sm:  5px;
  --font-body:  'IBM Plex Sans', -apple-system, sans-serif;
  --font-head:  'GT Sectra', Georgia, serif;
  --trans:      0.16s ease;
}

*, *::before, *::after { box-sizing: border-box; }

.usr-layout {
  font-family: var(--font-body);
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}

/* ── Rechte Spalte sticky ────────────────────────────────────── */
.usr-panel-right {
  position: sticky;
  top: 40px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 840px) {
  .usr-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .usr-panel-right {
    position: static;
    order: 2; /* Rechner UNTER dem Formular */
  }
  .usr-panel-left {
    order: 1;
  }
}
@media (max-width: 520px) {
  .usr-radio-grid      { grid-template-columns: 1fr 1fr; }
  .usr-radio-grid--2   { grid-template-columns: 1fr 1fr; }
  .usr-form-grid       { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   SEKTION-TITEL
══════════════════════════════════════ */
.usr-section-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 1.5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════
   FELDER
══════════════════════════════════════ */
.usr-field { margin-bottom: 1.25rem; }

.usr-progressive {
  animation: usr-fadein .3s ease;
}
@keyframes usr-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.usr-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .6rem;
  color: var(--text);
  letter-spacing: .01em;
}
.usr-label-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem; height: 1.45rem; min-width: 1.45rem;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.usr-label-sub   { font-size: .73rem; font-weight: 400; color: var(--text-muted); margin-left: auto; }
.usr-label--sub  { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .5rem; padding-left: 0; }
.usr-label--plain{ display: block; font-size: .86rem; font-weight: 600; margin-bottom: .4rem; }

/* ══════════════════════════════════════
   RADIO CARDS (Grid)
══════════════════════════════════════ */
.usr-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .4rem;
}
.usr-radio-grid--2 { grid-template-columns: repeat(2, 1fr); }

.usr-radio-card { position: relative; cursor: pointer; }
.usr-radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.usr-radio-card span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .6rem .5rem;
  gap: .15rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color var(--trans), background var(--trans);
}
.usr-radio-card span small { font-size: .7rem; color: var(--text-muted); display: block; }
.usr-radio-card:hover span { border-color: var(--acc); background: var(--acc-lt); }
.usr-radio-card input:checked + span {
  border-color: var(--acc);
  background: var(--acc-lt);
  font-weight: 600;
}
.usr-radio-card input:checked + span::after {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
}

/* ══════════════════════════════════════
   RADIO ROWS (Versand)
══════════════════════════════════════ */
.usr-radio-list { display: flex; flex-direction: column; gap: .38rem; }
.usr-radio-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .9rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.usr-radio-row input { flex-shrink: 0; accent-color: var(--acc); }
.usr-radio-row:hover, .usr-radio-row:has(input:checked) { border-color: var(--acc); background: var(--acc-lt); }
.usr-radio-info { flex: 1; }
.usr-radio-info strong { display: block; font-size: .85rem; }
.usr-radio-info small  { font-size: .74rem; color: var(--text-muted); }
.usr-radio-price { font-size: .8rem; font-weight: 700; color: var(--acc); white-space: nowrap; }

/* ══════════════════════════════════════
   CHECKBOXEN
══════════════════════════════════════ */
.usr-check-list { display: flex; flex-direction: column; gap: .36rem; }
.usr-check-card {
  display: flex; align-items: center; gap: .65rem;
  padding: .58rem .9rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.usr-check-card input { flex-shrink: 0; accent-color: var(--acc); width: 1rem; height: 1rem; }
.usr-check-card:hover, .usr-check-card:has(input:checked) { border-color: var(--acc); background: var(--acc-lt); }
.usr-check-info  { flex: 1; font-size: .85rem; }
.usr-check-price { font-size: .78rem; font-weight: 700; color: var(--acc); white-space: nowrap; }

/* ══════════════════════════════════════
   SUB-FELDER
══════════════════════════════════════ */
.usr-sub-field { padding-left: .85rem; border-left: 2px solid var(--acc); margin-left: .1rem; }

/* ══════════════════════════════════════
   TEXT-INPUTS
══════════════════════════════════════ */
.usr-input {
  width: 100%;
  padding: .6rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .88rem;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.usr-input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(158,138,76,.12);
  background: var(--white);
}
.usr-input--sm    { padding: .48rem .75rem; font-size: .84rem; }
.usr-input--error { border-color: var(--error) !important; }

/* ══════════════════════════════════════
   HINWEIS-BOXEN
══════════════════════════════════════ */
.usr-hint {
  padding: .65rem .9rem;
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.55;
  margin-top: .55rem;
  margin-bottom: 1.25rem;
}
.usr-hint a { color: var(--acc); }
.usr-hint--info    { background: var(--info-bg); border: 1px solid var(--info-border); color: #2c4a80; }
.usr-hint--warning { background: var(--warn-bg); border: 1px solid var(--warn-border); color: #6b4c10; }

/* ══════════════════════════════════════
   WEITER-BUTTON (Reparaturen)
══════════════════════════════════════ */
/* ══════════════════════════════════════
   FORMULAR-GRID
══════════════════════════════════════ */
.usr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1rem;
}

/* ══════════════════════════════════════
   UPLOAD-ZONE
══════════════════════════════════════ */
.usr-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1.3rem 1rem;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center; cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.usr-upload-zone:hover, .usr-upload-zone.drag-over { border-color: var(--acc); background: var(--acc-lt); }
.usr-upload-zone p   { margin: 0; font-size: .86rem; }
.usr-upload-zone span { font-size: .72rem; color: var(--text-muted); }
.usr-upload-link { color: var(--acc); font-weight: 600; cursor: pointer; text-decoration: underline; }

.usr-file-preview { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.usr-preview-item { position: relative; width: 66px; }
.usr-preview-item img { width: 66px; height: 66px; object-fit: cover; border-radius: 5px; border: 1.5px solid var(--border); display: block; }
.usr-preview-item span { display: block; font-size: .62rem; color: var(--text-muted); text-align: center; margin-top: .18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-preview-del {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text); color: #fff;
  border: 2px solid #fff;
  font-size: .75rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════
   AGB CHECKBOX
══════════════════════════════════════ */
.usr-checkbox-label { display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; cursor:pointer; line-height:1.5; }
.usr-checkbox-label input { flex-shrink:0; margin-top:.2rem; accent-color:var(--acc); width:1rem; height:1rem; }
.usr-checkbox-label a { color: var(--acc); }
.usr-label--error span { color: var(--error) !important; }
.req { color: var(--acc); }

/* ══════════════════════════════════════
   FEHLER / SUBMIT
══════════════════════════════════════ */
.usr-form-error {
  background: #fdf0f0; border: 1.5px solid #e07070;
  color: var(--error); border-radius: var(--radius);
  padding: .62rem .9rem; margin-bottom: .9rem; font-size: .86rem;
}
.usr-submit-btn {
  display: block; width: 100%;
  padding: .95rem 1rem;
  background: var(--text); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: .95rem; font-family: var(--font-body); font-weight: 600;
  cursor: pointer; letter-spacing: .02em;
  transition: background var(--trans), transform var(--trans);
  margin-top: .4rem; text-align: center;
}
.usr-submit-btn:hover   { background: var(--acc); transform: translateY(-1px); }
.usr-submit-btn:active  { transform: none; }
.usr-submit-btn:disabled{ opacity: .6; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════
   KONTAKT-HEADER
══════════════════════════════════════ */
.usr-contact-header { margin-bottom: 1.25rem; }
.usr-contact-intro  { color: var(--text-muted); font-size: .88rem; margin: .35rem 0 0; }
.usr-back-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: none;
  color: var(--acc); font-size: .82rem; font-weight: 600;
  font-family: var(--font-body); cursor: pointer; padding: 0;
}
.usr-back-btn:hover { opacity: .72; }

/* ══════════════════════════════════════
   KOSTENÜBERSICHT (rechte Karte) – LIGHT
══════════════════════════════════════ */
.usr-cost-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.usr-cost-header {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc);
}
.usr-cost-body {
  padding: .9rem 1.1rem;
  min-height: 90px;
}
.usr-cost-placeholder {
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 0; text-align: center; min-height: 80px;
}
.usr-cost-placeholder p {
  color: var(--text-muted);
  font-size: .82rem;
  margin: 0;
  line-height: 1.5;
}
.usr-cost-line {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .5rem; padding: .45rem 0; font-size: .83rem;
  border-bottom: 1px solid var(--border);
}
.usr-cost-line:last-child { border-bottom: none; }
.usr-cost-line-label {
  color: var(--text-muted);
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.35;
}
.usr-cost-line-label strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: .83rem;
}
.usr-cost-line-label small {
  display: block;
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.usr-cost-line span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
  padding-top: .1rem;
}
.usr-line-incl { color: #bbb !important; font-size: .76rem !important; font-weight: 400 !important; }

.usr-cost-total {
  padding: .7rem 1.1rem;
  border-top: 1.5px solid var(--border);
  background: var(--surface);
}
.usr-cost-row { display: flex; justify-content: space-between; }
.usr-grand-total {
  font-size: 1.05rem; font-weight: 700; color: var(--acc);
  padding-top: .4rem; margin-top: .1rem;
  border-top: 1px solid var(--border);
}
.usr-mwst-note { font-size: .7rem; color: var(--text-muted); margin-top: .25rem; }
.usr-disclaimer { padding: .45rem 1.1rem .6rem; font-size: .68rem; color: #bbb; border-top: 1px solid var(--border); }

/* ══════════════════════════════════════
   VERSANDBOX-BUTTON
══════════════════════════════════════ */
.usr-order-btn {
  display: block; width: 100%; margin-top: .9rem;
  padding: .85rem 1rem;
  background: var(--acc); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: .92rem; font-family: var(--font-body); font-weight: 700;
  cursor: pointer; text-align: center;
  transition: background var(--trans), transform var(--trans);
  letter-spacing: .02em;
}
.usr-order-btn:hover   { background: var(--acc-dk); transform: translateY(-1px); }
.usr-order-btn:active  { transform: none; }
.usr-order-hint {
  text-align: left;
  font-size: .75rem;
  color: var(--text-muted);
  margin: .45rem 0 0;
  line-height: 1.5;
}

/* ══════════════════════════════════════
   TIPP-BOX (Bild oben, Text darunter)
══════════════════════════════════════ */
.usr-tipp-box {
  margin-top: .8rem;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.usr-tipp-img {
  width: 100%;
  max-height: 140px;
  overflow: hidden;
  background: var(--surface);
}
.usr-tipp-img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.usr-tipp-content {
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.usr-tipp-price { font-size: .8rem; color: var(--text); line-height: 1.5; }
.usr-tipp-price strong { color: var(--text); }
.usr-tipp-price small  { font-size: .7rem; color: var(--text-muted); }
.usr-tipp-info {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════
   THANK YOU
══════════════════════════════════════ */
.usr-thankyou { text-align: center; padding: 4rem 2rem; grid-column: 1 / -1; }
.usr-thankyou-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--acc); margin-bottom: 1.25rem;
}
.usr-thankyou h2 { font-family: var(--font-head); font-size: 1.7rem; font-weight: 400; margin: 0 0 .6rem; }
.usr-thankyou p  { color: var(--text-muted); font-size: .95rem; }
.usr-thankyou-msg { color: var(--text-muted); font-size: .92rem; line-height: 1.7; max-width: 480px; margin: 0 auto; text-align: center; }
.usr-thankyou-msg p { margin: 0 0 .75rem; }
.usr-thankyou-msg p:last-child { margin-bottom: 0; }
.usr-thankyou-msg strong { color: var(--text); }
.usr-thankyou-msg a { color: var(--acc); }