.sb-wrap{
  /* Skinmed / DERMANOVIS Haut³ — exact website system colours */
  --bg: #F5F1E9;          /* Isabelline — page background */
  --surface: #FFFFFF;     /* white — cards / inputs */
  --soft: #EEE7DC;        /* White Chocolate — soft fills */
  --ink: #212427;         /* Text — primary text (black) */
  --raisin: #2C2415;      /* Raisin Black — deepest brown */
  --ink-soft: #7C7362;    /* Sekundäre — muted warm text */
  --line: rgba(124,115,98,.30); /* Sekundäre @ low alpha — hairline borders */

  /* Golden / bronze accents */
  --gold: #D4C4A7;        /* Primär — primary buttons & active fills */
  --gold-dark: #C6B592;   /* darker Primär — button hover */
  --accent: #A2854F;      /* Accent — borders, focus, progress */
  --coyote: #7B643C;      /* Coyote Brown — links & accent text */

  /* Semantic aliases used across the stylesheet */
  --gold-line: var(--accent);   /* borders / focus / progress fill */
  --gold-soft: var(--soft);     /* soft selected backgrounds */
  --gold-deep: var(--coyote);   /* accent text / links on light bg */
  --teal: var(--accent);
  --teal-soft: var(--soft);
  --teal-strong: var(--coyote);

  --clay: #C0562F;        /* error / remove accent */
  --clay-soft: #F6E7DE;
  --radius: 14px;
  --serif: 'Quilon', 'Montserrat', sans-serif;   /* headings */
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body & bold */
  --sb-max-width: 100%;

  display:block;
  width:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.sb-wrap *{ box-sizing:border-box; }
.sb-wrap.sb-full-bleed{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding-left:var(--sb-side-padding, 0);
  padding-right:var(--sb-side-padding, 0);
}
@media (max-width: 700px){
  .sb-wrap.sb-full-bleed{
    padding-left:16px;
    padding-right:16px;
  }
}
.sb-wrap .page{
  max-width:var(--sb-max-width); width:100%; margin:0 auto; min-height:400px;
  display:flex; flex-direction:column;
  padding:0 0 40px;
}
.sb-wrap header.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px 16px;
}
.sb-wrap .brand{ display:flex; align-items:center; }
.sb-wrap .brand-logo{ height:46px; width:auto; max-width:200px; display:block; }
.sb-wrap .brand span{ color:var(--gold-deep); }
.sb-wrap .brand-sub{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.2px; color:var(--ink-soft); margin-top:8px; }

.sb-wrap .progress-wrap{ padding:0 24px 18px; display:none; }
.sb-wrap .progress-wrap.show{ display:block; }
.sb-wrap .progress-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:8px; }
.sb-wrap .progress-track{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
.sb-wrap .progress-fill{ height:100%; background:var(--teal); border-radius:99px; transition:width .35s ease; }

.sb-wrap main{ flex:1; padding:8px 24px 0; }
.sb-wrap .screen{ display:none; animation:sb-rise .35s ease; }
.sb-wrap .screen.active{ display:block; }
@keyframes sb-rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.sb-wrap h1.step-title{ font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.25; margin:6px 0 8px; }
.sb-wrap p.step-sub{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0 0 24px; }

.sb-wrap .job-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:14px; cursor:pointer; transition:border-color .15s, transform .15s;
}
.sb-wrap .job-card:hover{ border-color:var(--teal); transform:translateY(-1px); }
.sb-wrap .job-card h3{ margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:17px; }
.sb-wrap .job-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); }
.sb-wrap .job-meta span{ display:inline-flex; align-items:center; gap:5px; }
.sb-wrap .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-soft); }

.sb-wrap .tile-group{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.sb-wrap .tile{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:15px 18px; font-size:15px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  transition:border-color .15s, background .15s;
}
.sb-wrap .tile:hover{ border-color:var(--teal); }
.sb-wrap .tile.selected{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-strong); }
.sb-wrap .tile .check{
  width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--surface);
}
.sb-wrap .tile.selected .check{ background:var(--teal); border-color:var(--teal); }

.sb-wrap .locked-card{
  background:var(--teal-soft); border:1px solid var(--teal); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px;
}
.sb-wrap .locked-card .label{ font-size:11.5px; color:var(--teal-strong); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.sb-wrap .locked-card .value{ font-size:15.5px; font-weight:500; color:var(--ink); }

.sb-wrap .field{ margin-bottom:16px; }
.sb-wrap .field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.sb-wrap .field input, .sb-wrap .field select, .sb-wrap .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:15px; font-family:var(--sans); background:var(--surface); color:var(--ink);
}
.sb-wrap .field input:focus, .sb-wrap .field select:focus, .sb-wrap .field textarea:focus{ outline:none; border-color:var(--teal); }
.sb-wrap .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.sb-wrap .dropzone{
  border:2px dashed var(--line); border-radius:var(--radius); padding:32px 20px;
  text-align:center; cursor:pointer; margin-bottom:12px; transition:border-color .15s;
}
.sb-wrap .dropzone:hover, .sb-wrap .dropzone.drag{ border-color:var(--teal); background:var(--teal-soft); }
.sb-wrap .dropzone .icon{ font-size:26px; margin-bottom:8px; }
.sb-wrap .dropzone .cta{ font-weight:500; color:var(--teal-strong); }
.sb-wrap .dropzone .hint{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.sb-wrap .file-chip{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:13.5px; margin-bottom:12px;
}
.sb-wrap .file-chip .remove{ color:var(--clay); cursor:pointer; font-size:12px; font-weight:500; }
.sb-wrap .fallback-link{ font-size:13px; color:var(--ink-soft); text-align:center; display:block; }
.sb-wrap .fallback-link a{ color:var(--teal-strong); }
.sb-wrap .cv-optional-note{ margin:14px 0 12px; font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--ink-soft); background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }

.sb-wrap .day-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:16px; }
.sb-wrap .day-pill{
  flex-shrink:0; min-width:58px; text-align:center; border:1.5px solid var(--line);
  border-radius:12px; padding:10px 6px; cursor:pointer; font-size:12.5px;
}
.sb-wrap .day-pill .num{ font-family:var(--serif); font-size:17px; font-weight:500; display:block; margin-top:2px; }
.sb-wrap .day-pill.selected{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-strong); }

.sb-wrap .cal-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.sb-wrap .cal-month-label{ font-family:var(--serif); font-weight:500; font-size:16px; text-transform:capitalize; }
.sb-wrap .cal-nav{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface);
  font-size:18px; line-height:1; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.sb-wrap .cal-nav:hover{ border-color:var(--teal); color:var(--teal-strong); }
.sb-wrap .cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.sb-wrap .cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11.5px;
  color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;
}
.sb-wrap .cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:18px;
}
.sb-wrap .cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1.5px solid transparent; font-size:14px; cursor:pointer;
  background:var(--surface);
}
.sb-wrap .cal-day.empty{ visibility:hidden; cursor:default; }
.sb-wrap .cal-day.today{ font-weight:600; border-color:var(--line); }
.sb-wrap .cal-day.disabled{
  color:var(--ink-soft); opacity:.35; cursor:not-allowed; background:transparent; text-decoration:line-through;
}
.sb-wrap .cal-day:not(.disabled):not(.empty):hover{ border-color:var(--teal); }
.sb-wrap .cal-day.selected{ background:var(--gold); border-color:var(--gold-line); color:var(--ink); font-weight:600; }
.sb-wrap .slot-heading{ font-size:12.5px; color:var(--ink-soft); margin:-8px 0 10px; }
.sb-wrap .slot.taken{
  opacity:.4; cursor:not-allowed; text-decoration:line-through; background:transparent;
}
.sb-wrap .slot.taken:hover{ border-color:var(--line); }

.sb-wrap .slot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.sb-wrap .slot{ border:1.5px solid var(--line); border-radius:10px; padding:12px; text-align:center; font-size:14px; font-weight:500; cursor:pointer; }
.sb-wrap .slot:hover{ border-color:var(--teal); }
.sb-wrap .slot.selected{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-strong); }

.sb-wrap .consent-box{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:22px;
}
.sb-wrap .consent-box input{ margin-top:3px; width:17px; height:17px; accent-color:var(--teal); flex-shrink:0; }
.sb-wrap .consent-box p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.sb-wrap .consent-box a{ color:var(--teal-strong); }

.sb-wrap .nav-row{ display:flex; gap:10px; margin-top:8px; }
.sb-wrap button.btn{
  font-family:var(--sans); font-size:15px; font-weight:600; border:none; border-radius:10px;
  padding:14px 20px; cursor:pointer; flex:1; transition:opacity .15s, transform .1s;
}
.sb-wrap button.btn:active{ transform:scale(0.98); }
.sb-wrap button.btn.primary{ background:var(--gold); color:var(--ink); }
.sb-wrap button.btn.primary:hover{ background:var(--gold-dark); }
.sb-wrap button.btn.primary:disabled{ opacity:.45; cursor:not-allowed; }
.sb-wrap button.btn.primary:disabled:hover{ background:var(--gold); }
.sb-wrap button.btn.ghost{ background:transparent; color:var(--ink-soft); flex:0 0 auto; padding:14px 16px; }

.sb-wrap .summary-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.sb-wrap .chip{ background:var(--teal-soft); color:var(--teal-strong); font-size:12.5px; font-weight:500; padding:7px 12px; border-radius:99px; }
.sb-wrap .phase{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.sb-wrap .phase:last-child{ padding-bottom:0; }
.sb-wrap .phase .num{
  font-family:var(--serif); font-weight:500; font-size:14px; color:var(--teal-strong);
  background:var(--teal-soft); width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sb-wrap .phase h4{ margin:0 0 3px; font-size:14.5px; font-weight:600; }
.sb-wrap .phase p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.sb-wrap .done-mark{
  width:56px; height:56px; border-radius:50%; background:var(--teal-soft); color:var(--teal-strong);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px;
}
.sb-wrap .form-error{
  background:var(--clay-soft); border:1px solid var(--clay); color:#8a3113;
  border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:16px; display:none;
}
.sb-wrap .form-error.show{ display:block; }
.sb-wrap button.btn.primary.loading{ opacity:.7; cursor:wait; }

/* --- Responsive breakpoints --- */

/* Wide containers (desktop pages with a spacious content column):
   keep line lengths readable and give the card some breathing room. */
@media (min-width: 900px){
  .sb-wrap main{ padding:8px 48px 0; }
  .sb-wrap header.top{ padding:28px 48px 16px; }
  .sb-wrap .progress-wrap{ padding:0 48px 18px; }
  .sb-wrap h1.step-title{ font-size:30px; }
  .sb-wrap .row-2{ grid-template-columns:1fr 1fr; }
}

/* Tablets / small laptops */
@media (max-width: 640px){
  .sb-wrap h1.step-title{ font-size:23px; }
}

/* Phones */
@media (max-width: 480px){
  .sb-wrap header.top{ padding:18px 16px 14px; }
  .sb-wrap .brand-logo{ height:38px; }
  .sb-wrap .progress-wrap{ padding:0 16px 16px; }
  .sb-wrap main{ padding:6px 16px 0; }
  .sb-wrap h1.step-title{ font-size:21px; }
  .sb-wrap p.step-sub{ font-size:14px; }
  .sb-wrap .row-2{ grid-template-columns:1fr; gap:16px; }
  .sb-wrap .slot-grid{ grid-template-columns:1fr; }
  .sb-wrap .job-card{ padding:16px; }
  .sb-wrap .job-meta{ gap:8px 12px; }
  .sb-wrap .nav-row{ flex-wrap:wrap; }
  .sb-wrap button.btn.primary{ flex:1 1 100%; order:1; }
  .sb-wrap button.btn.ghost{ order:2; }
}

/* Very small phones */
@media (max-width: 360px){
  .sb-wrap .day-pill{ min-width:50px; padding:8px 4px; }
}