diff --git a/wwwroot/poc-booking-v2.html b/wwwroot/poc-booking-v2.html
new file mode 100644
index 0000000..7549d06
--- /dev/null
+++ b/wwwroot/poc-booking-v2.html
@@ -0,0 +1,2381 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Book tid - KARINA KNUDSEN®</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.woff') format('woff'); font-weight: 500; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.woff') format('woff'); font-weight: 700; }
+  </style>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+
+  <style>
+    :root {
+      --color-teal: #00897b;
+      --color-teal-light: #e0f2f1;
+      --color-surface: #ffffff;
+      --color-background: #f5f5f5;
+      --color-border: #e0e0e0;
+      --color-text: #333333;
+      --color-text-secondary: #666666;
+      --color-text-muted: #999999;
+      --color-green: #43a047;
+      --color-red: #e53935;
+      --font-family: 'Poppins', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+      --anim-duration: 250ms;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-family);
+      background: var(--color-background);
+      color: var(--color-text);
+      min-height: 100vh;
+    }
+
+    /* ==========================================
+       PAGE LAYOUT
+       ========================================== */
+    .booking-page {
+      display: grid;
+      grid-template-columns: 1fr 360px;
+      max-width: 1100px;
+      margin: 0 auto;
+      min-height: 100vh;
+    }
+
+    @media (max-width: 900px) {
+      .booking-page {
+        grid-template-columns: 1fr;
+      }
+      .sidebar {
+        display: none;
+      }
+    }
+
+    /* ==========================================
+       MAIN CONTENT
+       ========================================== */
+    .main-content {
+      background: var(--color-surface);
+      padding: 40px;
+    }
+
+    .salon-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 36px;
+    }
+
+    .salon-logo {
+      width: 52px;
+      height: 52px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 700;
+      color: white;
+    }
+
+    .salon-name {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .salon-address {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STEPS
+       ========================================== */
+    .steps {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .step {
+      background: var(--color-background);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .step.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .step-header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 18px 20px;
+      cursor: pointer;
+      user-select: none;
+      transition: background 150ms ease;
+    }
+
+    .step:not(.disabled) .step-header:hover {
+      background: rgba(0,0,0,0.02);
+    }
+
+    .step-icon {
+      font-size: 22px;
+      color: var(--color-text-muted);
+      transition: color var(--anim-duration) ease;
+    }
+
+    .step.active .step-icon,
+    .step.completed .step-icon {
+      color: var(--color-teal);
+    }
+
+    .step-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .step-title {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .step-summary {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .step.completed .step-summary {
+      color: var(--color-teal);
+    }
+
+    .step-chevron {
+      font-size: 20px;
+      color: var(--color-text-muted);
+      transition: transform var(--anim-duration) ease;
+    }
+
+    .step.active .step-chevron {
+      transform: rotate(180deg);
+    }
+
+    .step-body {
+      overflow: hidden;
+      height: 0;
+    }
+
+    .step-content {
+      padding: 4px 20px 24px;
+    }
+
+    /* ==========================================
+       SERVICES
+       ========================================== */
+    .category {
+      margin-bottom: 20px;
+    }
+
+    .category:last-child {
+      margin-bottom: 0;
+    }
+
+    .category-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+
+    .service-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .service-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .service-item:hover {
+      border-color: var(--color-border);
+    }
+
+    .service-item.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .service-check {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 2px solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      color: white;
+      transition: all 150ms ease;
+      flex-shrink: 0;
+    }
+
+    .service-item.selected .service-check {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+
+    .service-check i {
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    .service-item.selected .service-check i {
+      opacity: 1;
+    }
+
+    .service-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .service-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .service-duration {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .service-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      white-space: nowrap;
+    }
+
+    /* ==========================================
+       EMPLOYEES
+       ========================================== */
+    .employee-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    @media (max-width: 480px) {
+      .employee-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .employee-card {
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 12px;
+      padding: 20px 16px;
+      cursor: pointer;
+      text-align: center;
+      transition: all 150ms ease;
+    }
+
+    .employee-card:hover {
+      border-color: var(--color-border);
+    }
+
+    .employee-card.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .employee-photo {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+      margin: 0 auto 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      color: white;
+    }
+
+    .employee-photo.neutral {
+      background: var(--color-border);
+      color: var(--color-text-secondary);
+    }
+
+    .employee-photo.neutral i {
+      font-size: 32px;
+    }
+
+    .employee-name {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .employee-role {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .employee-price {
+      font-size: 13px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      margin-top: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    .employee-price.discount {
+      color: var(--color-green);
+    }
+
+    /* ==========================================
+       CALENDAR & TIME
+       ========================================== */
+    .datetime-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    @media (max-width: 560px) {
+      .datetime-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .calendar {
+      background: var(--color-surface);
+      border-radius: 10px;
+      padding: 16px;
+    }
+
+    .calendar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 14px;
+    }
+
+    .calendar-month {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .calendar-nav {
+      display: flex;
+      gap: 4px;
+    }
+
+    .calendar-nav button {
+      width: 30px;
+      height: 30px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    .calendar-nav button:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      padding: 6px 0;
+    }
+
+    .day {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .day:hover:not(.disabled):not(.selected) {
+      background: var(--color-surface);
+    }
+
+    .day.today {
+      font-weight: 600;
+      color: var(--color-teal);
+    }
+
+    .day.selected {
+      background: var(--color-teal);
+      color: white;
+      font-weight: 500;
+    }
+
+    .day.disabled {
+      color: var(--color-border);
+      cursor: default;
+    }
+
+    .time-section-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+
+    .time-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 6px;
+    }
+
+    .time-slot {
+      padding: 10px 8px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-mono);
+      background: var(--color-surface);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .time-slot:hover:not(.disabled):not(.selected) {
+      background: var(--color-teal-light);
+    }
+
+    .time-slot.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    .time-slot.disabled {
+      color: var(--color-text-muted);
+      cursor: default;
+      text-decoration: line-through;
+    }
+
+    /* ==========================================
+       FORM
+       ========================================== */
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .form-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .form-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    .form-label .optional {
+      font-weight: 400;
+      color: var(--color-text-muted);
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 10px 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      transition: border-color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .form-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.15);
+    }
+
+    .form-input::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    textarea.form-input {
+      resize: vertical;
+      min-height: 80px;
+    }
+
+    /* ==========================================
+       SIDEBAR
+       ========================================== */
+    .sidebar {
+      background: var(--color-background);
+      border-left: 1px solid var(--color-border);
+      padding: 40px 28px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .sidebar-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 20px;
+    }
+
+    .cart-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    .cart-empty i {
+      font-size: 48px;
+      margin-bottom: 12px;
+      display: block;
+    }
+
+    .cart-items {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .cart-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 12px 14px;
+      background: var(--color-surface);
+      border-radius: 10px;
+    }
+
+    .cart-item-name {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 2px;
+    }
+
+    .cart-item-duration {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .cart-item-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    .cart-details {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 16px 0;
+      border-top: 1px solid var(--color-border);
+      margin-bottom: 20px;
+    }
+
+    .cart-detail {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 13px;
+    }
+
+    .cart-detail i {
+      font-size: 18px;
+      color: var(--color-teal);
+      width: 20px;
+      flex-shrink: 0;
+    }
+
+    .cart-detail-label {
+      color: var(--color-text-secondary);
+    }
+
+    .cart-detail-value {
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    .cart-total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 18px;
+      background: var(--color-teal-light);
+      border-radius: 12px;
+      margin-bottom: 20px;
+    }
+
+    .cart-total-label {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .cart-total-price {
+      font-size: 22px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+    }
+
+    .book-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 16px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .book-btn:hover:not(:disabled) {
+      background: #00695c;
+    }
+
+    .book-btn:disabled {
+      background: var(--color-border);
+      cursor: not-allowed;
+    }
+
+    .book-btn i {
+      font-size: 20px;
+    }
+
+    /* ==========================================
+       FLOATING BUTTON
+       ========================================== */
+    .floating-btn {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%) translateY(80px);
+      opacity: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 28px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      box-shadow: 0 4px 20px rgba(0, 137, 123, 0.35);
+      transition: transform var(--anim-duration) ease, opacity var(--anim-duration) ease, background 150ms ease;
+      z-index: 100;
+    }
+
+    .floating-btn.visible {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .floating-btn:hover {
+      background: #00695c;
+    }
+
+    .floating-btn i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       MOBILE RESPONSIVE
+       ========================================== */
+    @media (max-width: 600px) {
+      .main-content {
+        padding: 20px 16px;
+      }
+
+      .salon-header {
+        margin-bottom: 24px;
+      }
+
+      .step-header {
+        padding: 16px 14px;
+        gap: 12px;
+      }
+
+      .step-content {
+        padding: 4px 14px 20px;
+      }
+
+      .service-item {
+        padding: 12px 14px;
+      }
+
+      .calendar {
+        padding: 14px 12px;
+      }
+
+      .employee-item {
+        padding: 10px 12px;
+      }
+    }
+
+    /* ==========================================
+       SUCCESS OVERLAY
+       ========================================== */
+    .success-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 200;
+    }
+
+    .success-overlay.visible {
+      display: flex;
+    }
+
+    .success-modal {
+      background: var(--color-surface);
+      border-radius: 16px;
+      padding: 40px;
+      text-align: center;
+      max-width: 360px;
+      margin: 20px;
+    }
+
+    .success-icon {
+      width: 72px;
+      height: 72px;
+      background: rgba(67, 160, 71, 0.12);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 20px;
+    }
+
+    .success-icon i {
+      font-size: 36px;
+      color: var(--color-green);
+    }
+
+    .success-modal h2 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .success-modal p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       LANDING VIEW
+       ========================================== */
+    .landing-view {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-background);
+      padding: 20px;
+    }
+
+    .landing-card {
+      background: var(--color-surface);
+      border-radius: 16px;
+      padding: 48px 40px;
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+    }
+
+    .landing-card .salon-logo {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto 16px;
+      font-size: 20px;
+    }
+
+    .landing-card .salon-name {
+      font-size: 20px;
+      margin-bottom: 4px;
+    }
+
+    .landing-card .salon-address {
+      margin-bottom: 32px;
+    }
+
+    .landing-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    .landing-form {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .landing-divider {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      color: var(--color-text-muted);
+      font-size: 13px;
+      margin: 24px 0;
+    }
+
+    .landing-divider::before,
+    .landing-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    .btn-primary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 14px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .btn-primary:hover {
+      background: #00695c;
+    }
+
+    .btn-secondary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 14px 24px;
+      background: var(--color-surface);
+      color: var(--color-text);
+      font-size: 15px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .btn-secondary:hover {
+      background: var(--color-background);
+      border-color: var(--color-text-muted);
+    }
+
+    .landing-step {
+      width: 100%;
+    }
+
+    .landing-phone-display {
+      font-size: 18px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+      margin-bottom: 20px;
+    }
+
+    .landing-back {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 20px;
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    .landing-back:hover {
+      color: var(--color-text);
+    }
+
+    .landing-back i {
+      font-size: 16px;
+    }
+
+    /* ==========================================
+       MY PAGE VIEW
+       ========================================== */
+    .mypage-view {
+      display: none;
+      min-height: 100vh;
+      background: var(--color-background);
+    }
+
+    .mypage-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .mypage-header-brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .mypage-header .salon-logo {
+      width: 40px;
+      height: 40px;
+      font-size: 14px;
+    }
+
+    .mypage-header .salon-name {
+      font-size: 16px;
+    }
+
+    .btn-logout {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .btn-logout:hover {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    .mypage-content {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 32px 24px;
+    }
+
+    .mypage-greeting {
+      font-size: 22px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    .mypage-section {
+      background: var(--color-surface);
+      border-radius: 12px;
+      margin-bottom: 20px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+    }
+
+    .mypage-section-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .mypage-section-header i {
+      font-size: 20px;
+      color: var(--color-teal);
+    }
+
+    .mypage-section-content {
+      padding: 20px;
+    }
+
+    .book-cta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .book-cta:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 137, 123, 0.3);
+    }
+
+    .book-cta-text {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .book-cta-sub {
+      font-size: 13px;
+      opacity: 0.9;
+      margin-top: 2px;
+    }
+
+    .book-cta i {
+      font-size: 24px;
+    }
+
+    .upcoming-booking {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .upcoming-booking:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .upcoming-booking:first-child {
+      padding-top: 0;
+    }
+
+    .upcoming-icon {
+      width: 44px;
+      height: 44px;
+      background: var(--color-teal-light);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .upcoming-icon i {
+      font-size: 22px;
+      color: var(--color-teal);
+    }
+
+    .upcoming-info {
+      flex: 1;
+    }
+
+    .upcoming-service {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .upcoming-datetime {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 2px;
+    }
+
+    .upcoming-details {
+      font-size: 12px;
+      color: var(--color-text-muted);
+    }
+
+    .btn-cancel {
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-red);
+      background: transparent;
+      border: 1px solid var(--color-red);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      white-space: nowrap;
+    }
+
+    .btn-cancel:hover {
+      background: rgba(229, 57, 53, 0.08);
+    }
+
+    .mypage-form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .mypage-form-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .mypage-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .mypage-form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .password-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      grid-column: 1 / -1;
+    }
+
+    .password-row .mypage-form-field {
+      flex: 1;
+    }
+
+    .btn-change-password {
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-teal);
+      background: transparent;
+      border: 1px solid var(--color-teal);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      white-space: nowrap;
+      margin-top: 20px;
+    }
+
+    .btn-change-password:hover {
+      background: var(--color-teal-light);
+    }
+
+    .mypage-form-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .btn-save {
+      padding: 10px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      color: white;
+      background: var(--color-teal);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .btn-save:hover {
+      background: #00695c;
+    }
+
+    .receipt-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .receipt-item:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .receipt-item:first-child {
+      padding-top: 0;
+    }
+
+    .receipt-date {
+      font-size: 13px;
+      color: var(--color-text-muted);
+      width: 100px;
+    }
+
+    .receipt-service {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .receipt-amount {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 24px;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    .empty-state i {
+      font-size: 32px;
+      margin-bottom: 8px;
+      display: block;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Landing View -->
+  <div class="landing-view" id="landingView">
+    <div class="landing-card">
+      <div class="salon-logo">KK</div>
+      <div class="salon-name">KARINA KNUDSEN®</div>
+      <div class="salon-address">Hovedgaden 123, København</div>
+
+      <!-- Step 1: Phone -->
+      <div class="landing-step" id="landingStep1">
+        <div class="landing-title">Book tid hos os</div>
+        <div class="landing-form">
+          <input type="tel" class="form-input" id="phoneInput" placeholder="Telefonnummer">
+          <button class="btn-primary" id="phoneNextBtn">
+            Fortsæt <i class="ph ph-arrow-right"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 2: PIN -->
+      <div class="landing-step" id="landingStep2" style="display: none;">
+        <div class="landing-title">Indtast PIN-kode</div>
+        <p class="landing-phone-display" id="phoneDisplay"></p>
+        <div class="landing-form">
+          <input type="password" class="form-input" id="pinInput" placeholder="PIN-kode" inputmode="numeric" maxlength="4">
+          <button class="btn-primary" id="loginBtn">
+            Log ind <i class="ph ph-arrow-right"></i>
+          </button>
+          <div class="landing-divider">eller</div>
+          <button class="btn-secondary" id="continueBtn">
+            Fortsæt uden login <i class="ph ph-arrow-right"></i>
+          </button>
+        </div>
+        <button class="landing-back" id="backToPhoneBtn">
+          <i class="ph ph-arrow-left"></i> Ret telefonnummer
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- My Page View -->
+  <div class="mypage-view" id="mypageView">
+    <div class="mypage-header">
+      <div class="mypage-header-brand">
+        <div class="salon-logo">KK</div>
+        <div class="salon-name">KARINA KNUDSEN®</div>
+      </div>
+      <button class="btn-logout" id="logoutBtn">Log ud</button>
+    </div>
+
+    <div class="mypage-content">
+      <div class="mypage-greeting" id="mypageGreeting">Hej, Maria!</div>
+
+      <!-- Book CTA -->
+      <div class="book-cta" id="bookCtaBtn">
+        <div>
+          <div class="book-cta-text">Book ny tid</div>
+          <div class="book-cta-sub">Vælg ydelse, tidspunkt og medarbejder</div>
+        </div>
+        <i class="ph ph-arrow-right"></i>
+      </div>
+
+      <!-- Upcoming Bookings -->
+      <div class="mypage-section" style="margin-top: 24px;">
+        <div class="mypage-section-header">
+          <i class="ph ph-calendar-check"></i> Kommende tider
+        </div>
+        <div class="mypage-section-content" id="upcomingBookings">
+          <div class="upcoming-booking">
+            <div class="upcoming-icon">
+              <i class="ph ph-scissors"></i>
+            </div>
+            <div class="upcoming-info">
+              <div class="upcoming-service">Dameklip</div>
+              <div class="upcoming-datetime">Fredag 24. januar kl. 14:00</div>
+              <div class="upcoming-details">Camilla · 725 kr.</div>
+            </div>
+            <button class="btn-cancel">Aflys</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Account Settings -->
+      <div class="mypage-section">
+        <div class="mypage-section-header">
+          <i class="ph ph-user-circle"></i> Mine oplysninger
+        </div>
+        <div class="mypage-section-content">
+          <div class="mypage-form-grid">
+            <div class="mypage-form-field">
+              <label class="form-label">Fornavn</label>
+              <input type="text" class="form-input" id="mypageFirstName" value="Maria">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Efternavn</label>
+              <input type="text" class="form-input" id="mypageLastName" value="Hansen">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Email</label>
+              <input type="email" class="form-input" id="mypageEmail" value="maria@email.dk">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Telefon</label>
+              <input type="tel" class="form-input" id="mypagePhone" value="12 34 56 78">
+            </div>
+            <div class="password-row">
+              <div class="mypage-form-field">
+                <label class="form-label">Adgangskode</label>
+                <input type="password" class="form-input" value="••••••••" disabled>
+              </div>
+              <button class="btn-change-password">Skift</button>
+            </div>
+          </div>
+          <div class="mypage-form-actions">
+            <button class="btn-save">Gem ændringer</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Receipts -->
+      <div class="mypage-section">
+        <div class="mypage-section-header">
+          <i class="ph ph-receipt"></i> Kvitteringer
+        </div>
+        <div class="mypage-section-content" id="receipts">
+          <div class="receipt-item">
+            <div class="receipt-date">12. dec 2024</div>
+            <div class="receipt-service">Dameklip + Olaplex</div>
+            <div class="receipt-amount">1.275 kr.</div>
+          </div>
+          <div class="receipt-item">
+            <div class="receipt-date">15. nov 2024</div>
+            <div class="receipt-service">Dameklip</div>
+            <div class="receipt-amount">725 kr.</div>
+          </div>
+          <div class="receipt-item">
+            <div class="receipt-date">18. okt 2024</div>
+            <div class="receipt-service">Farve + Klip</div>
+            <div class="receipt-amount">1.510 kr.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Booking View -->
+  <div class="booking-page" id="bookingView" style="display: none;">
+    <!-- Main Content -->
+    <div class="main-content">
+      <div class="salon-header">
+        <div class="salon-logo">KK</div>
+        <div>
+          <div class="salon-name">KARINA KNUDSEN®</div>
+          <div class="salon-address">Hovedgaden 123, København</div>
+        </div>
+      </div>
+
+      <div class="steps">
+        <!-- Step 1: Services -->
+        <div class="step active" data-step="1">
+          <div class="step-header">
+            <i class="ph ph-scissors step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg ydelse</div>
+              <div class="step-summary" data-summary>Hvad vil du have lavet?</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="servicesContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 2: Add-ons -->
+        <div class="step disabled" data-step="2">
+          <div class="step-header">
+            <i class="ph ph-plus-circle step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Tilvalg</div>
+              <div class="step-summary" data-summary>Valgfrit</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="addonsContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 3: Employee -->
+        <div class="step disabled" data-step="3">
+          <div class="step-header">
+            <i class="ph ph-user-circle step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg medarbejder</div>
+              <div class="step-summary" data-summary>Valgfrit</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="employeesContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 4: Date & Time -->
+        <div class="step disabled" data-step="4">
+          <div class="step-header">
+            <i class="ph ph-calendar step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg dato og tid</div>
+              <div class="step-summary" data-summary>Find en ledig tid</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="datetimeContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 5: Contact -->
+        <div class="step disabled" data-step="5">
+          <div class="step-header">
+            <i class="ph ph-identification-card step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Dine oplysninger</div>
+              <div class="step-summary" data-summary>Kontaktinformation</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content">
+              <div class="form-grid">
+                <div class="form-field">
+                  <label class="form-label" for="firstName">Fornavn</label>
+                  <input type="text" class="form-input" id="firstName" placeholder="Dit fornavn">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="lastName">Efternavn</label>
+                  <input type="text" class="form-input" id="lastName" placeholder="Dit efternavn">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="phone">Telefon</label>
+                  <input type="tel" class="form-input" id="phone" placeholder="12 34 56 78">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="email">Email</label>
+                  <input type="email" class="form-input" id="email" placeholder="din@email.dk">
+                </div>
+                <div class="form-field full-width">
+                  <label class="form-label" for="notes">Noter <span class="optional">(valgfrit)</span></label>
+                  <textarea class="form-input" id="notes" placeholder="Særlige ønsker..."></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-title">Din booking</div>
+
+      <div class="cart-empty" id="cartEmpty">
+        <i class="ph ph-shopping-cart"></i>
+        Vælg en ydelse for at starte
+      </div>
+
+      <div class="cart-items" id="cartItems" style="display: none;"></div>
+
+      <div class="cart-details" id="cartDetails" style="display: none;">
+        <div class="cart-detail">
+          <i class="ph ph-user-circle"></i>
+          <span class="cart-detail-label">Medarbejder:</span>
+          <span class="cart-detail-value" id="detailEmployee">Ikke valgt</span>
+        </div>
+        <div class="cart-detail">
+          <i class="ph ph-calendar"></i>
+          <span class="cart-detail-label">Dato:</span>
+          <span class="cart-detail-value" id="detailDate">Ikke valgt</span>
+        </div>
+        <div class="cart-detail">
+          <i class="ph ph-clock"></i>
+          <span class="cart-detail-label">Tid:</span>
+          <span class="cart-detail-value" id="detailTime">Ikke valgt</span>
+        </div>
+      </div>
+
+      <div class="cart-total" id="cartTotal" style="display: none;">
+        <span class="cart-total-label">Total</span>
+        <span class="cart-total-price" id="totalPrice">0 kr.</span>
+      </div>
+
+      <button class="book-btn" id="bookBtn" disabled>
+        <i class="ph ph-check-circle"></i>
+        Book tid
+      </button>
+    </div>
+  </div>
+
+  <!-- Floating "Videre" button -->
+  <button class="floating-btn" id="floatingBtn">
+    Videre <i class="ph ph-arrow-right"></i>
+  </button>
+
+  <!-- Success overlay -->
+  <div class="success-overlay" id="successOverlay">
+    <div class="success-modal">
+      <div class="success-icon">
+        <i class="ph ph-check"></i>
+      </div>
+      <h2>Booking bekræftet!</h2>
+      <p>Du modtager en bekræftelse på email og SMS. Vi glæder os til at se dig!</p>
+    </div>
+  </div>
+
+  <script>
+    // ==========================================
+    // CONFIG
+    // ==========================================
+    const ANIM_DURATION = 250;
+
+    // ==========================================
+    // STATE
+    // ==========================================
+    const state = {
+      services: [],
+      addons: [],
+      employee: null,
+      date: null,
+      time: null,
+      customer: { firstName: '', lastName: '', phone: '', email: '', notes: '' }
+    };
+
+    // ==========================================
+    // DATA
+    // ==========================================
+    const servicesData = {
+      "Klip": [
+        { id: "s1", name: "Dameklip", duration: 60, price: 725 },
+        { id: "s2", name: "Herreklip", duration: 60, price: 645 },
+        { id: "s3", name: "Børneklip (0-12 år)", duration: 45, price: 475 }
+      ],
+      "Farve": [
+        { id: "s4", name: "Bundfarve", duration: 90, price: 785 },
+        { id: "s5", name: "Helfarve kort hår", duration: 105, price: 950 },
+        { id: "s6", name: "Striber/Highlights", duration: 120, price: 1465 }
+      ],
+      "Styling": [
+        { id: "s7", name: "Vask & føn", duration: 40, price: 450 },
+        { id: "s8", name: "Håropsætning", duration: 60, price: 850 }
+      ],
+      "Behandlinger": [
+        { id: "s9", name: "Olaplex", duration: 60, price: 550 },
+        { id: "s10", name: "Kurbehandling", duration: 40, price: 365 }
+      ]
+    };
+
+    const addonsData = [
+      { id: "a1", name: "Hårkur", duration: 15, price: 150 },
+      { id: "a2", name: "Hovedbundsmassage", duration: 10, price: 95 },
+      { id: "a3", name: "Styling produkt", duration: 0, price: 175 },
+      { id: "a4", name: "Varmebeskyttelse", duration: 5, price: 85 }
+    ];
+
+    const employeesData = [
+      { id: null, name: "Ingen præference", role: "Første ledige", color: null, priceModifier: 0 },
+      { id: "EMP001", name: "Camilla", role: "Master Stylist", color: "#9c27b0", priceModifier: 0 },
+      { id: "EMP002", name: "Isabella", role: "Master Stylist", color: "#e91e63", priceModifier: 0 },
+      { id: "EMP003", name: "Alexander", role: "Frisør", color: "#3f51b5", priceModifier: -50 },
+      { id: "EMP004", name: "Viktor", role: "Junior Stylist", color: "#009688", priceModifier: -100 }
+    ];
+
+    // ==========================================
+    // STEP ANIMATION
+    // ==========================================
+    function animateStep(stepEl, open) {
+      const body = stepEl.querySelector('.step-body');
+
+      if (open) {
+        body.style.height = 'auto';
+        const targetHeight = body.scrollHeight;
+        body.style.height = '0px';
+        body.offsetHeight; // Force reflow
+
+        const anim = body.animate(
+          [{ height: '0px' }, { height: targetHeight + 'px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => { body.style.height = 'auto'; };
+      } else {
+        const currentHeight = body.scrollHeight;
+        const anim = body.animate(
+          [{ height: currentHeight + 'px' }, { height: '0px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => { body.style.height = '0px'; };
+      }
+    }
+
+    // ==========================================
+    // STEP NAVIGATION
+    // ==========================================
+    function getActiveStep() {
+      const active = document.querySelector('.step.active');
+      return active ? parseInt(active.dataset.step) : null;
+    }
+
+    function openStep(stepNum) {
+      const targetStep = document.querySelector(`.step[data-step="${stepNum}"]`);
+      if (!targetStep || targetStep.classList.contains('disabled')) return;
+
+      const currentActive = document.querySelector('.step.active');
+      if (currentActive) {
+        currentActive.classList.remove('active');
+        animateStep(currentActive, false);
+      }
+
+      targetStep.classList.add('active');
+      animateStep(targetStep, true);
+      updateFloatingBtn();
+    }
+
+    function toggleStep(stepEl) {
+      if (stepEl.classList.contains('disabled')) return;
+
+      const isActive = stepEl.classList.contains('active');
+      const stepNum = parseInt(stepEl.dataset.step);
+
+      if (isActive) {
+        stepEl.classList.remove('active');
+        animateStep(stepEl, false);
+        updateFloatingBtn();
+      } else {
+        openStep(stepNum);
+      }
+    }
+
+    // ==========================================
+    // FLOATING BUTTON
+    // ==========================================
+    function updateFloatingBtn() {
+      const floatingBtn = document.getElementById('floatingBtn');
+      const activeStepNum = getActiveStep();
+
+      // Show floating button on step 1 (when services selected) and step 2 (always)
+      let showBtn = false;
+      if (activeStepNum === 1) showBtn = state.services.length > 0;
+      else if (activeStepNum === 2) showBtn = true;
+
+      floatingBtn.classList.toggle('visible', showBtn);
+    }
+
+    function onFloatingBtnClick() {
+      const activeStepNum = getActiveStep();
+      if (activeStepNum && activeStepNum < 5) {
+        openStep(activeStepNum + 1);
+      }
+    }
+
+    // ==========================================
+    // RENDER: SERVICES
+    // ==========================================
+    function renderServices() {
+      const container = document.getElementById('servicesContainer');
+      container.innerHTML = Object.entries(servicesData).map(([category, services]) => `
+        <div class="category">
+          <div class="category-title">${category}</div>
+          <div class="service-list">
+            ${services.map(s => `
+              <div class="service-item" data-id="${s.id}">
+                <div class="service-check"><i class="ph ph-check"></i></div>
+                <div class="service-info">
+                  <div class="service-name">${s.name}</div>
+                  <div class="service-duration">${s.duration} min</div>
+                </div>
+                <div class="service-price">${s.price} kr.</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `).join('');
+
+      container.querySelectorAll('.service-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const id = item.dataset.id;
+          const service = Object.values(servicesData).flat().find(s => s.id === id);
+          const idx = state.services.findIndex(s => s.id === id);
+
+          if (idx > -1) {
+            state.services.splice(idx, 1);
+            item.classList.remove('selected');
+          } else {
+            state.services.push(service);
+            item.classList.add('selected');
+          }
+          updateUI();
+        });
+      });
+    }
+
+    // ==========================================
+    // RENDER: ADDONS
+    // ==========================================
+    function renderAddons() {
+      const container = document.getElementById('addonsContainer');
+      container.innerHTML = `
+        <div class="service-list">
+          ${addonsData.map(a => `
+            <div class="service-item" data-id="${a.id}">
+              <div class="service-check"><i class="ph ph-check"></i></div>
+              <div class="service-info">
+                <div class="service-name">${a.name}</div>
+                <div class="service-duration">${a.duration > 0 ? a.duration + ' min' : ''}</div>
+              </div>
+              <div class="service-price">${a.price} kr.</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+
+      container.querySelectorAll('.service-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const id = item.dataset.id;
+          const addon = addonsData.find(a => a.id === id);
+          const idx = state.addons.findIndex(a => a.id === id);
+
+          if (idx > -1) {
+            state.addons.splice(idx, 1);
+            item.classList.remove('selected');
+          } else {
+            state.addons.push(addon);
+            item.classList.add('selected');
+          }
+          updateUI();
+        });
+      });
+    }
+
+    // ==========================================
+    // UPDATE EMPLOYEE PRICES
+    // ==========================================
+    function updateEmployeePrices() {
+      const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+      const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+      const baseTotal = servicesTotal + addonsTotal;
+      const container = document.getElementById('employeesContainer');
+
+      container.querySelectorAll('.employee-card').forEach(card => {
+        const empId = card.dataset.id || null;
+        const emp = employeesData.find(e => (e.id || '') === empId);
+        if (!emp || emp.id === null) return;
+
+        const priceEl = card.querySelector('.employee-price');
+        const employeePrice = baseTotal + (emp.priceModifier || 0);
+
+        if (servicesTotal > 0) {
+          if (priceEl) {
+            priceEl.textContent = `${employeePrice} kr.`;
+          } else {
+            const newPriceEl = document.createElement('div');
+            newPriceEl.className = `employee-price ${emp.priceModifier < 0 ? 'discount' : ''}`;
+            newPriceEl.textContent = `${employeePrice} kr.`;
+            card.appendChild(newPriceEl);
+          }
+        } else if (priceEl) {
+          priceEl.remove();
+        }
+      });
+    }
+
+    // ==========================================
+    // RENDER: EMPLOYEES
+    // ==========================================
+    function renderEmployees() {
+      const container = document.getElementById('employeesContainer');
+      const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+      const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+      const baseTotal = servicesTotal + addonsTotal;
+
+      container.innerHTML = `
+        <div class="employee-grid">
+          ${employeesData.map(e => {
+            const employeePrice = baseTotal + (e.priceModifier || 0);
+            const isDiscount = e.priceModifier < 0;
+            const isSelected = (e.id === null && state.employee === null) || e.id === state.employee;
+
+            return `
+              <div class="employee-card ${isSelected ? 'selected' : ''}" data-id="${e.id || ''}">
+                <div class="employee-photo ${e.id === null ? 'neutral' : ''}" ${e.color ? `style="background:${e.color}"` : ''}>
+                  ${e.id === null ? '<i class="ph ph-shuffle"></i>' : e.name[0]}
+                </div>
+                <div class="employee-name">${e.name}</div>
+                <div class="employee-role">${e.role}</div>
+                ${e.id !== null && servicesTotal > 0 ? `<div class="employee-price ${isDiscount ? 'discount' : ''}">${employeePrice} kr.</div>` : ''}
+              </div>
+            `;
+          }).join('')}
+        </div>
+      `;
+
+      container.querySelectorAll('.employee-card').forEach(item => {
+        item.addEventListener('click', () => {
+          container.querySelectorAll('.employee-card').forEach(i => i.classList.remove('selected'));
+          item.classList.add('selected');
+          state.employee = item.dataset.id || null;
+          updateUI();
+          // Auto-advance to step 4
+          setTimeout(() => openStep(4), 150);
+        });
+      });
+    }
+
+    // ==========================================
+    // RENDER: CALENDAR
+    // ==========================================
+    let currentMonth = new Date();
+
+    function renderCalendar() {
+      const container = document.getElementById('datetimeContainer');
+      const monthNames = ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'];
+      const today = new Date();
+      today.setHours(0,0,0,0);
+
+      const year = currentMonth.getFullYear();
+      const month = currentMonth.getMonth();
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+
+      let startOffset = firstDay.getDay() - 1;
+      if (startOffset < 0) startOffset = 6;
+
+      let daysHtml = '';
+      for (let i = 0; i < startOffset; i++) {
+        daysHtml += '<div class="day disabled"></div>';
+      }
+
+      for (let d = 1; d <= lastDay.getDate(); d++) {
+        const date = new Date(year, month, d);
+        const dateStr = date.toISOString().split('T')[0];
+        const isToday = date.getTime() === today.getTime();
+        const isPast = date < today;
+        const isSelected = state.date === dateStr;
+
+        let cls = 'day';
+        if (isToday) cls += ' today';
+        if (isPast && !isToday) cls += ' disabled';
+        if (isSelected) cls += ' selected';
+
+        daysHtml += `<div class="${cls}" data-date="${dateStr}">${d}</div>`;
+      }
+
+      const times = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30'];
+      const taken = ['10:30', '14:00'];
+
+      container.innerHTML = `
+        <div class="datetime-grid">
+          <div class="calendar">
+            <div class="calendar-header">
+              <div class="calendar-month">${monthNames[month]} ${year}</div>
+              <div class="calendar-nav">
+                <button id="prevMonth"><i class="ph ph-caret-left"></i></button>
+                <button id="nextMonth"><i class="ph ph-caret-right"></i></button>
+              </div>
+            </div>
+            <div class="calendar-grid">
+              <div class="weekday">Ma</div>
+              <div class="weekday">Ti</div>
+              <div class="weekday">On</div>
+              <div class="weekday">To</div>
+              <div class="weekday">Fr</div>
+              <div class="weekday">Lø</div>
+              <div class="weekday">Sø</div>
+              ${daysHtml}
+            </div>
+          </div>
+          <div class="time-section">
+            <div class="time-section-title">Ledige tider</div>
+            <div class="time-grid">
+              ${times.map(t => {
+                let cls = 'time-slot';
+                if (taken.includes(t)) cls += ' disabled';
+                if (state.time === t) cls += ' selected';
+                return `<div class="${cls}" data-time="${t}">${t}</div>`;
+              }).join('')}
+            </div>
+          </div>
+        </div>
+      `;
+
+      document.getElementById('prevMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() - 1);
+        renderCalendar();
+      });
+
+      document.getElementById('nextMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() + 1);
+        renderCalendar();
+      });
+
+      container.querySelectorAll('.day:not(.disabled)').forEach(day => {
+        day.addEventListener('click', () => {
+          container.querySelectorAll('.day').forEach(d => d.classList.remove('selected'));
+          day.classList.add('selected');
+          state.date = day.dataset.date;
+          updateUI();
+        });
+      });
+
+      container.querySelectorAll('.time-slot:not(.disabled)').forEach(slot => {
+        slot.addEventListener('click', () => {
+          container.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
+          slot.classList.add('selected');
+          state.time = slot.dataset.time;
+          updateUI();
+          // Auto-advance to step 5 when both date and time are selected
+          if (state.date && state.time) {
+            setTimeout(() => openStep(5), 150);
+          }
+        });
+      });
+    }
+
+    // ==========================================
+    // UI UPDATE
+    // ==========================================
+    function updateUI() {
+      const step1 = document.querySelector('.step[data-step="1"]');
+      const step2 = document.querySelector('.step[data-step="2"]');
+      const step3 = document.querySelector('.step[data-step="3"]');
+      const step4 = document.querySelector('.step[data-step="4"]');
+      const step5 = document.querySelector('.step[data-step="5"]');
+
+      // Step 1: Services
+      if (state.services.length > 0) {
+        step1.classList.add('completed');
+        step1.querySelector('[data-summary]').textContent = state.services.map(s => s.name).join(', ');
+        step2.classList.remove('disabled');
+        step3.classList.remove('disabled');
+        step4.classList.remove('disabled');
+      } else {
+        step1.classList.remove('completed');
+        step1.querySelector('[data-summary]').textContent = 'Hvad vil du have lavet?';
+        step2.classList.add('disabled');
+        step3.classList.add('disabled');
+        step4.classList.add('disabled');
+        step5.classList.add('disabled');
+      }
+
+      // Step 2: Addons
+      if (state.addons.length > 0) {
+        step2.classList.add('completed');
+        step2.querySelector('[data-summary]').textContent = state.addons.map(a => a.name).join(', ');
+      } else {
+        step2.classList.remove('completed');
+        step2.querySelector('[data-summary]').textContent = 'Valgfrit';
+      }
+
+      // Update employee prices based on selected services + addons
+      updateEmployeePrices();
+
+      // Step 3: Employee
+      const selectedEmployee = state.employee ? employeesData.find(e => e.id === state.employee) : null;
+      const empName = selectedEmployee?.name || 'Ingen præference';
+      const empPriceModifier = selectedEmployee?.priceModifier || 0;
+      step3.classList.add('completed');
+      step3.querySelector('[data-summary]').textContent = empName;
+
+      // Step 4: Date & Time
+      if (state.date && state.time) {
+        step4.classList.add('completed');
+        const d = new Date(state.date);
+        step4.querySelector('[data-summary]').textContent = `${d.toLocaleDateString('da-DK', { weekday: 'short', day: 'numeric', month: 'short' })} kl. ${state.time}`;
+        step5.classList.remove('disabled');
+      } else {
+        step4.classList.remove('completed');
+        step4.querySelector('[data-summary]').textContent = 'Find en ledig tid';
+      }
+
+      // Step 5: Contact
+      const { firstName, lastName, phone } = state.customer;
+      if (firstName && phone) {
+        step5.classList.add('completed');
+        step5.querySelector('[data-summary]').textContent = `${firstName} ${lastName || ''} · ${phone}`;
+      } else {
+        step5.classList.remove('completed');
+        step5.querySelector('[data-summary]').textContent = 'Kontaktinformation';
+      }
+
+      // Sidebar
+      const cartEmpty = document.getElementById('cartEmpty');
+      const cartItems = document.getElementById('cartItems');
+      const cartDetails = document.getElementById('cartDetails');
+      const cartTotal = document.getElementById('cartTotal');
+
+      if (state.services.length === 0) {
+        cartEmpty.style.display = 'block';
+        cartItems.style.display = 'none';
+        cartDetails.style.display = 'none';
+        cartTotal.style.display = 'none';
+      } else {
+        cartEmpty.style.display = 'none';
+        cartItems.style.display = 'flex';
+        cartDetails.style.display = 'flex';
+        cartTotal.style.display = 'flex';
+
+        let cartHtml = state.services.map(s => `
+          <div class="cart-item">
+            <div>
+              <div class="cart-item-name">${s.name}</div>
+              <div class="cart-item-duration">${s.duration} min</div>
+            </div>
+            <div class="cart-item-price">${s.price} kr.</div>
+          </div>
+        `).join('');
+
+        if (state.addons.length > 0) {
+          cartHtml += state.addons.map(a => `
+            <div class="cart-item">
+              <div>
+                <div class="cart-item-name">${a.name}</div>
+                <div class="cart-item-duration">${a.duration > 0 ? a.duration + ' min' : 'Tilvalg'}</div>
+              </div>
+              <div class="cart-item-price">${a.price} kr.</div>
+            </div>
+          `).join('');
+        }
+
+        cartItems.innerHTML = cartHtml;
+
+        const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+        const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+        const total = servicesTotal + addonsTotal + empPriceModifier;
+        document.getElementById('totalPrice').textContent = total + ' kr.';
+
+        document.getElementById('detailEmployee').textContent = empName;
+
+        if (state.date) {
+          const d = new Date(state.date);
+          document.getElementById('detailDate').textContent = d.toLocaleDateString('da-DK', { weekday: 'long', day: 'numeric', month: 'long' });
+        } else {
+          document.getElementById('detailDate').textContent = 'Ikke valgt';
+        }
+
+        document.getElementById('detailTime').textContent = state.time || 'Ikke valgt';
+      }
+
+      // Book button
+      const canBook = state.services.length > 0 && state.date && state.time && firstName && phone;
+      document.getElementById('bookBtn').disabled = !canBook;
+
+      updateFloatingBtn();
+    }
+
+    // ==========================================
+    // FORM LISTENERS
+    // ==========================================
+    function setupFormListeners() {
+      ['firstName', 'lastName', 'phone', 'email', 'notes'].forEach(field => {
+        const el = document.getElementById(field);
+        if (el) {
+          el.addEventListener('input', () => {
+            state.customer[field] = el.value;
+            updateUI();
+          });
+        }
+      });
+    }
+
+    // ==========================================
+    // BOOKING
+    // ==========================================
+    function onBookClick() {
+      const { firstName, phone } = state.customer;
+      if (!firstName || !phone) {
+        alert('Udfyld venligst fornavn og telefon.');
+        return;
+      }
+      document.getElementById('successOverlay').classList.add('visible');
+    }
+
+    // ==========================================
+    // VIEW SWITCHING
+    // ==========================================
+    let isLoggedIn = false;
+    let loggedInUser = null;
+    let enteredPhone = '';
+
+    const views = {
+      landing: document.getElementById('landingView'),
+      mypage: document.getElementById('mypageView'),
+      booking: document.getElementById('bookingView')
+    };
+
+    function showView(viewName) {
+      Object.entries(views).forEach(([name, el]) => {
+        if (name === viewName) {
+          el.style.display = name === 'booking' ? 'grid' : (name === 'mypage' ? 'block' : 'flex');
+        } else {
+          el.style.display = 'none';
+        }
+      });
+
+      // Reset landing to step 1 when showing
+      if (viewName === 'landing') {
+        showLandingStep(1);
+      }
+    }
+
+    function showLandingStep(step) {
+      const step1 = document.getElementById('landingStep1');
+      const step2 = document.getElementById('landingStep2');
+
+      if (step === 1) {
+        step1.style.display = 'block';
+        step2.style.display = 'none';
+      } else {
+        step1.style.display = 'none';
+        step2.style.display = 'block';
+        document.getElementById('pinInput').value = '';
+        document.getElementById('pinInput').focus();
+      }
+    }
+
+    function handlePhoneNext() {
+      const phone = document.getElementById('phoneInput').value.trim();
+
+      if (!phone) {
+        alert('Indtast telefonnummer');
+        return;
+      }
+
+      enteredPhone = phone;
+      document.getElementById('phoneDisplay').textContent = phone;
+      showLandingStep(2);
+    }
+
+    function handleBackToPhone() {
+      showLandingStep(1);
+      document.getElementById('phoneInput').focus();
+    }
+
+    function handleLogin() {
+      const pin = document.getElementById('pinInput').value.trim();
+
+      if (!pin) {
+        alert('Indtast PIN-kode');
+        return;
+      }
+
+      // Mock login - in real app, validate phone + PIN against backend
+      isLoggedIn = true;
+      loggedInUser = {
+        firstName: 'Maria',
+        lastName: 'Hansen',
+        email: 'maria@email.dk',
+        phone: enteredPhone
+      };
+
+      // Update mypage form fields with user data
+      document.getElementById('mypageFirstName').value = loggedInUser.firstName;
+      document.getElementById('mypageLastName').value = loggedInUser.lastName;
+      document.getElementById('mypageEmail').value = loggedInUser.email;
+      document.getElementById('mypagePhone').value = loggedInUser.phone;
+
+      document.getElementById('mypageGreeting').textContent = `Hej, ${loggedInUser.firstName}!`;
+      showView('mypage');
+    }
+
+    function handleLogout() {
+      isLoggedIn = false;
+      loggedInUser = null;
+      enteredPhone = '';
+      document.getElementById('phoneInput').value = '';
+      document.getElementById('pinInput').value = '';
+      showView('landing');
+    }
+
+    function handleContinueWithoutLogin() {
+      // Not logged in, but pre-fill phone in booking
+      isLoggedIn = false;
+      loggedInUser = null;
+
+      document.getElementById('phone').value = enteredPhone;
+      state.customer.phone = enteredPhone;
+      updateUI();
+
+      showView('booking');
+    }
+
+    function handleBookFromMyPage() {
+      // Pre-fill customer info from logged in user
+      if (loggedInUser) {
+        document.getElementById('firstName').value = loggedInUser.firstName;
+        document.getElementById('lastName').value = loggedInUser.lastName;
+        document.getElementById('email').value = loggedInUser.email;
+        document.getElementById('phone').value = loggedInUser.phone;
+
+        state.customer = {
+          firstName: loggedInUser.firstName,
+          lastName: loggedInUser.lastName,
+          email: loggedInUser.email,
+          phone: loggedInUser.phone,
+          notes: ''
+        };
+        updateUI();
+      }
+      showView('booking');
+    }
+
+    // ==========================================
+    // INIT
+    // ==========================================
+    function init() {
+      renderServices();
+      renderAddons();
+      renderEmployees();
+      renderCalendar();
+
+      // Open step 1
+      document.querySelector('.step[data-step="1"] .step-body').style.height = 'auto';
+
+      // Step headers
+      document.querySelectorAll('.step-header').forEach(header => {
+        header.addEventListener('click', () => toggleStep(header.closest('.step')));
+      });
+
+      // Floating button
+      document.getElementById('floatingBtn').addEventListener('click', onFloatingBtnClick);
+
+      // Book button
+      document.getElementById('bookBtn').addEventListener('click', onBookClick);
+
+      // Form
+      setupFormListeners();
+
+      // Success overlay close
+      document.getElementById('successOverlay').addEventListener('click', (e) => {
+        if (e.target.id === 'successOverlay') location.reload();
+      });
+
+      // View switching - Landing
+      document.getElementById('phoneNextBtn').addEventListener('click', handlePhoneNext);
+      document.getElementById('backToPhoneBtn').addEventListener('click', handleBackToPhone);
+      document.getElementById('loginBtn').addEventListener('click', handleLogin);
+      document.getElementById('continueBtn').addEventListener('click', handleContinueWithoutLogin);
+
+      // Enter key support
+      document.getElementById('phoneInput').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') handlePhoneNext();
+      });
+      document.getElementById('pinInput').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') handleLogin();
+      });
+
+      // View switching - MyPage
+      document.getElementById('logoutBtn').addEventListener('click', handleLogout);
+      document.getElementById('bookCtaBtn').addEventListener('click', handleBookFromMyPage);
+
+      // Start with landing view
+      showView('landing');
+    }
+
+    init();
+  </script>
+
+</body>
+</html>
diff --git a/wwwroot/poc-booking.html b/wwwroot/poc-booking.html
new file mode 100644
index 0000000..7377aab
--- /dev/null
+++ b/wwwroot/poc-booking.html
@@ -0,0 +1,1564 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Book tid - KARINA KNUDSEN®</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.woff') format('woff'); font-weight: 500; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.woff') format('woff'); font-weight: 700; }
+  </style>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+
+  <style>
+    :root {
+      --color-teal: #00897b;
+      --color-teal-light: #e0f2f1;
+      --color-surface: #ffffff;
+      --color-background: #f5f5f5;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-text-muted: #999;
+      --color-green: #43a047;
+      --color-amber: #f59e0b;
+      --font-family: 'Poppins', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-family);
+      background: var(--color-background);
+      color: var(--color-text);
+      min-height: 100vh;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-booking-page {
+      display: grid;
+      grid-template-columns: 1fr 380px;
+      max-width: 1200px;
+      margin: 0 auto;
+      min-height: 100vh;
+      gap: 0;
+    }
+
+    @media (max-width: 900px) {
+      swp-booking-page {
+        grid-template-columns: 1fr;
+      }
+      swp-booking-sidebar {
+        display: none;
+      }
+    }
+
+    /* ==========================================
+       MAIN CONTENT
+       ========================================== */
+    swp-booking-main {
+      display: flex;
+      flex-direction: column;
+      padding: 40px;
+      background: var(--color-surface);
+    }
+
+    swp-salon-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 40px;
+    }
+
+    swp-salon-logo {
+      width: 56px;
+      height: 56px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+    }
+
+    swp-salon-info h1 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    swp-salon-info p {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ACCORDION STEPS
+       ========================================== */
+    swp-steps-container {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-step {
+      display: block;
+      background: var(--color-background);
+      border-radius: 12px;
+      overflow: hidden;
+      transition: all 200ms ease;
+    }
+
+    swp-step.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    swp-step-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 20px 24px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-step:not(.disabled) swp-step-header:hover {
+      background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background));
+    }
+
+    swp-step-icon {
+      font-size: 22px;
+      color: var(--color-text-muted);
+      flex-shrink: 0;
+      transition: all 200ms ease;
+    }
+
+    swp-step.completed swp-step-icon {
+      color: var(--color-green);
+    }
+
+    swp-step.active swp-step-icon {
+      color: var(--color-teal);
+    }
+
+    swp-step-title {
+      flex: 1;
+    }
+
+    swp-step-title h3 {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    swp-step-title p {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-step.completed swp-step-title p {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    swp-step-action {
+      font-size: 13px;
+      color: var(--color-teal);
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    swp-step.completed:hover swp-step-action {
+      opacity: 1;
+    }
+
+    swp-step-chevron {
+      color: var(--color-text-muted);
+      font-size: 20px;
+      transition: transform 300ms ease-out;
+    }
+
+    swp-step.active swp-step-chevron {
+      transform: rotate(180deg);
+    }
+
+    swp-step-content {
+      display: block;
+      overflow: hidden;
+      height: 0;
+    }
+
+    swp-step-content-inner {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 0 24px 24px;
+    }
+
+    /* Floating Videre button */
+    swp-floating-next {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      background: linear-gradient(to top, var(--color-surface) 60%, transparent);
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity 250ms ease, transform 250ms ease;
+      z-index: 100;
+    }
+
+    swp-floating-next.visible {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    swp-next-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 32px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      box-shadow: 0 4px 20px rgba(0, 137, 123, 0.3);
+      transition: background 150ms ease, transform 150ms ease;
+    }
+
+    swp-next-btn:hover {
+      background: #00695c;
+      transform: scale(1.02);
+    }
+
+    swp-next-btn i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       SERVICES GRID
+       ========================================== */
+    swp-services-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-section-title {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-services-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+    }
+
+    @media (max-width: 600px) {
+      swp-services-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    swp-service-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-service-item:hover {
+      border-color: var(--color-border);
+    }
+
+    swp-service-item.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    swp-service-check {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 2px solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 150ms ease;
+    }
+
+    swp-service-item.selected swp-service-check {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    swp-service-check i {
+      font-size: 14px;
+      opacity: 0;
+    }
+
+    swp-service-item.selected swp-service-check i {
+      opacity: 1;
+    }
+
+    swp-service-details {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-service-name {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    swp-service-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-service-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      white-space: nowrap;
+    }
+
+    /* ==========================================
+       EMPLOYEE SELECTION
+       ========================================== */
+    swp-employee-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    swp-employee-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-employee-item:hover {
+      border-color: var(--color-border);
+    }
+
+    swp-employee-item.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    swp-employee-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      color: white;
+      flex-shrink: 0;
+    }
+
+    swp-employee-item.no-pref swp-employee-avatar {
+      background: var(--color-border);
+      color: var(--color-text-secondary);
+    }
+
+    swp-employee-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-employee-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-employee-role {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       DATE & TIME
+       ========================================== */
+    swp-datetime-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 600px) {
+      swp-datetime-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    swp-calendar {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 10px;
+      padding: 16px;
+    }
+
+    swp-calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-calendar-month {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    swp-calendar-nav {
+      display: flex;
+      gap: 4px;
+    }
+
+    swp-calendar-nav button {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 8px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 150ms ease;
+    }
+
+    swp-calendar-nav button:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+    }
+
+    swp-weekday {
+      text-align: center;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      padding: 8px 0;
+    }
+
+    swp-day {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-day:hover:not(.disabled):not(.selected) {
+      background: var(--color-background);
+    }
+
+    swp-day.today {
+      color: var(--color-teal);
+      font-weight: 600;
+    }
+
+    swp-day.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-day.disabled {
+      color: var(--color-border);
+      cursor: default;
+    }
+
+    swp-day.other-month {
+      color: var(--color-text-muted);
+    }
+
+    swp-time-section {
+      display: block;
+    }
+
+    swp-time-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+    }
+
+    swp-time-slot {
+      padding: 12px 8px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-mono);
+      background: var(--color-surface);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-time-slot:hover:not(.disabled) {
+      background: var(--color-teal-light);
+    }
+
+    swp-time-slot.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-time-slot.disabled {
+      color: var(--color-text-muted);
+      cursor: default;
+      text-decoration: line-through;
+    }
+
+    /* ==========================================
+       CONTACT FORM
+       ========================================== */
+    swp-form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 600px) {
+      swp-form-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-form-label span {
+      font-weight: 400;
+      color: var(--color-text-muted);
+    }
+
+    swp-form-input {
+      display: block;
+      width: 100%;
+      padding: 12px 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      transition: all 150ms ease;
+    }
+
+    swp-form-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+    }
+
+    swp-form-textarea {
+      display: block;
+      width: 100%;
+      padding: 12px 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      resize: vertical;
+      min-height: 80px;
+    }
+
+    swp-form-textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+    }
+
+    /* ==========================================
+       SIDEBAR
+       ========================================== */
+    swp-booking-sidebar {
+      display: flex;
+      flex-direction: column;
+      background: var(--color-background);
+      border-left: 1px solid var(--color-border);
+      padding: 40px 32px;
+    }
+
+    swp-sidebar-title {
+      display: block;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 20px;
+    }
+
+    swp-cart-empty {
+      display: block;
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    swp-cart-empty i {
+      font-size: 48px;
+      margin-bottom: 12px;
+      display: block;
+    }
+
+    swp-cart-items {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    swp-cart-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 14px 16px;
+      background: var(--color-surface);
+      border-radius: 10px;
+    }
+
+    swp-cart-item-info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-cart-item-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-cart-item-duration {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-cart-item-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    swp-cart-details {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px 0;
+      border-top: 1px solid var(--color-border);
+      margin-bottom: 24px;
+    }
+
+    swp-cart-detail {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 13px;
+    }
+
+    swp-cart-detail i {
+      font-size: 18px;
+      color: var(--color-teal);
+      width: 20px;
+    }
+
+    swp-cart-detail span {
+      color: var(--color-text-secondary);
+    }
+
+    swp-cart-detail strong {
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    swp-cart-total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      background: var(--color-teal-light);
+      border-radius: 12px;
+      margin-bottom: 24px;
+    }
+
+    swp-cart-total-label {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    swp-cart-total-price {
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+    }
+
+    swp-book-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 16px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-book-btn:hover:not(:disabled) {
+      background: #00695c;
+    }
+
+    swp-book-btn:disabled {
+      background: var(--color-border);
+      cursor: not-allowed;
+    }
+
+    swp-book-btn i {
+      font-size: 20px;
+    }
+
+    /* ==========================================
+       SUCCESS OVERLAY
+       ========================================== */
+    swp-success-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    swp-success-overlay.active {
+      display: flex;
+    }
+
+    swp-success-modal {
+      background: var(--color-surface);
+      border-radius: 20px;
+      padding: 48px;
+      text-align: center;
+      max-width: 400px;
+      margin: 20px;
+    }
+
+    swp-success-icon {
+      width: 80px;
+      height: 80px;
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 24px;
+    }
+
+    swp-success-icon i {
+      font-size: 40px;
+      color: var(--color-green);
+    }
+
+    swp-success-modal h2 {
+      font-size: 22px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    swp-success-modal p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+
+  <swp-booking-page>
+    <!-- Main Content -->
+    <swp-booking-main>
+      <swp-salon-header>
+        <swp-salon-logo>SB</swp-salon-logo>
+        <swp-salon-info>
+          <h1>KARINA KNUDSEN®</h1>
+          <p>Hovedgaden 123, København</p>
+        </swp-salon-info>
+      </swp-salon-header>
+
+      <swp-steps-container>
+        <!-- Step 1: Services -->
+        <swp-step class="active" data-step="1">
+          <swp-step-header>
+            <swp-step-icon><i class="ph ph-scissors"></i></swp-step-icon>
+            <swp-step-title>
+              <h3>Vælg ydelse</h3>
+              <p id="step1Summary">Vælg hvad du vil have lavet</p>
+            </swp-step-title>
+            <swp-step-action>Rediger</swp-step-action>
+            <swp-step-chevron><i class="ph ph-caret-down"></i></swp-step-chevron>
+          </swp-step-header>
+          <swp-step-content>
+            <swp-step-content-inner>
+              <div id="servicesContent"></div>
+            </swp-step-content-inner>
+          </swp-step-content>
+        </swp-step>
+
+        <!-- Step 2: Employee -->
+        <swp-step class="disabled" data-step="2">
+          <swp-step-header>
+            <swp-step-icon><i class="ph ph-user-circle"></i></swp-step-icon>
+            <swp-step-title>
+              <h3>Vælg medarbejder</h3>
+              <p id="step2Summary">Valgfrit</p>
+            </swp-step-title>
+            <swp-step-action>Rediger</swp-step-action>
+            <swp-step-chevron><i class="ph ph-caret-down"></i></swp-step-chevron>
+          </swp-step-header>
+          <swp-step-content>
+            <swp-step-content-inner>
+              <div id="employeesContent"></div>
+            </swp-step-content-inner>
+          </swp-step-content>
+        </swp-step>
+
+        <!-- Step 3: Date & Time -->
+        <swp-step class="disabled" data-step="3">
+          <swp-step-header>
+            <swp-step-icon><i class="ph ph-calendar"></i></swp-step-icon>
+            <swp-step-title>
+              <h3>Vælg dato og tid</h3>
+              <p id="step3Summary">Find en ledig tid</p>
+            </swp-step-title>
+            <swp-step-action>Rediger</swp-step-action>
+            <swp-step-chevron><i class="ph ph-caret-down"></i></swp-step-chevron>
+          </swp-step-header>
+          <swp-step-content>
+            <swp-step-content-inner>
+              <div id="datetimeContent"></div>
+            </swp-step-content-inner>
+          </swp-step-content>
+        </swp-step>
+
+        <!-- Step 4: Contact -->
+        <swp-step class="disabled" data-step="4">
+          <swp-step-header>
+            <swp-step-icon><i class="ph ph-identification-card"></i></swp-step-icon>
+            <swp-step-title>
+              <h3>Dine oplysninger</h3>
+              <p id="step4Summary">Kontaktinformation</p>
+            </swp-step-title>
+            <swp-step-action>Rediger</swp-step-action>
+            <swp-step-chevron><i class="ph ph-caret-down"></i></swp-step-chevron>
+          </swp-step-header>
+          <swp-step-content>
+            <swp-step-content-inner>
+              <swp-form-grid>
+                <swp-form-field>
+                  <swp-form-label>Fornavn</swp-form-label>
+                  <swp-form-input type="text" id="firstName" placeholder="Dit fornavn" is="input">
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Efternavn</swp-form-label>
+                  <swp-form-input type="text" id="lastName" placeholder="Dit efternavn" is="input">
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Telefon</swp-form-label>
+                  <swp-form-input type="tel" id="phone" placeholder="12 34 56 78" is="input">
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Email</swp-form-label>
+                  <swp-form-input type="email" id="email" placeholder="din@email.dk" is="input">
+                </swp-form-field>
+                <swp-form-field class="full-width">
+                  <swp-form-label>Noter <span>(valgfrit)</span></swp-form-label>
+                  <swp-form-textarea id="notes" placeholder="Særlige ønsker..." is="textarea"></swp-form-textarea>
+                </swp-form-field>
+              </swp-form-grid>
+            </swp-step-content-inner>
+          </swp-step-content>
+        </swp-step>
+      </swp-steps-container>
+    </swp-booking-main>
+
+    <!-- Sidebar -->
+    <swp-booking-sidebar>
+      <swp-sidebar-title>Din booking</swp-sidebar-title>
+
+      <swp-cart-empty id="cartEmpty">
+        <i class="ph ph-shopping-cart"></i>
+        Vælg en ydelse for at starte
+      </swp-cart-empty>
+
+      <swp-cart-items id="cartItems"></swp-cart-items>
+
+      <swp-cart-details id="cartDetails" style="display: none;">
+        <swp-cart-detail id="detailEmployee">
+          <i class="ph ph-user-circle"></i>
+          <span>Medarbejder:</span>
+          <strong>Ikke valgt</strong>
+        </swp-cart-detail>
+        <swp-cart-detail id="detailDate">
+          <i class="ph ph-calendar"></i>
+          <span>Dato:</span>
+          <strong>Ikke valgt</strong>
+        </swp-cart-detail>
+        <swp-cart-detail id="detailTime">
+          <i class="ph ph-clock"></i>
+          <span>Tid:</span>
+          <strong>Ikke valgt</strong>
+        </swp-cart-detail>
+      </swp-cart-details>
+
+      <swp-cart-total id="cartTotal" style="display: none;">
+        <swp-cart-total-label>Total</swp-cart-total-label>
+        <swp-cart-total-price id="totalPrice">0 kr.</swp-cart-total-price>
+      </swp-cart-total>
+
+      <swp-book-btn id="bookBtn" disabled>
+        <i class="ph ph-check-circle"></i>
+        Book tid
+      </swp-book-btn>
+    </swp-booking-sidebar>
+  </swp-booking-page>
+
+  <!-- Floating Next Button -->
+  <swp-floating-next id="floatingNext">
+    <swp-next-btn id="nextBtn">Videre <i class="ph ph-arrow-right"></i></swp-next-btn>
+  </swp-floating-next>
+
+  <!-- Success Modal -->
+  <swp-success-overlay id="successOverlay">
+    <swp-success-modal>
+      <swp-success-icon>
+        <i class="ph ph-check"></i>
+      </swp-success-icon>
+      <h2>Booking bekræftet!</h2>
+      <p>Du modtager en bekræftelse på email og SMS. Vi glæder os til at se dig!</p>
+    </swp-success-modal>
+  </swp-success-overlay>
+
+  <script>
+    // ==========================================
+    // STATE
+    // ==========================================
+    const state = {
+      services: [],
+      employee: null,
+      date: null,
+      time: null,
+      customer: {}
+    };
+
+    // ==========================================
+    // DATA
+    // ==========================================
+    const servicesData = {
+      "Klip": [
+        { id: "s1", name: "Dameklip", duration: 60, price: 725 },
+        { id: "s2", name: "Herreklip", duration: 60, price: 645 },
+        { id: "s3", name: "Børneklip (0-12 år)", duration: 45, price: 475 }
+      ],
+      "Farve": [
+        { id: "s4", name: "Bundfarve", duration: 90, price: 785 },
+        { id: "s5", name: "Helfarve kort hår", duration: 105, price: 950 },
+        { id: "s6", name: "Striber/Highlights", duration: 120, price: 1465 }
+      ],
+      "Styling": [
+        { id: "s7", name: "Vask & føn", duration: 40, price: 450 },
+        { id: "s8", name: "Håropsætning", duration: 60, price: 850 }
+      ],
+      "Behandlinger": [
+        { id: "s9", name: "Olaplex", duration: 60, price: 550 },
+        { id: "s10", name: "Kurbehandling", duration: 40, price: 365 }
+      ]
+    };
+
+    const employeesData = [
+      { id: null, name: "Ingen præference", role: "Første ledige", color: null },
+      { id: "EMP001", name: "Camilla", role: "Master Stylist", color: "#9c27b0" },
+      { id: "EMP002", name: "Isabella", role: "Master Stylist", color: "#e91e63" },
+      { id: "EMP003", name: "Alexander", role: "Frisør", color: "#3f51b5" },
+      { id: "EMP004", name: "Viktor", role: "Frisør", color: "#009688" }
+    ];
+
+    // ==========================================
+    // INIT
+    // ==========================================
+    function init() {
+      renderServices();
+      renderEmployees();
+      renderCalendar();
+      renderTimeSlots();
+      setupStepHeaders();
+      setupFloatingButton();
+      setupFormListeners();
+      initFirstStep();
+    }
+
+    // ==========================================
+    // STEP NAVIGATION
+    // ==========================================
+    function getActiveStep() {
+      const active = document.querySelector('swp-step.active');
+      return active ? parseInt(active.dataset.step) : null;
+    }
+
+    function animateStepContent(stepEl, expand) {
+      const content = stepEl.querySelector('swp-step-content');
+      const inner = content.querySelector('swp-step-content-inner');
+
+      if (expand) {
+        // Measure target height
+        content.style.height = 'auto';
+        const targetHeight = content.offsetHeight;
+        content.style.height = '0px';
+
+        // Animate open
+        content.animate([
+          { height: '0px' },
+          { height: targetHeight + 'px' }
+        ], {
+          duration: 300,
+          easing: 'ease-out',
+          fill: 'forwards'
+        }).onfinish = () => {
+          content.style.height = 'auto';
+        };
+      } else {
+        const currentHeight = content.offsetHeight;
+
+        // Animate close
+        content.animate([
+          { height: currentHeight + 'px' },
+          { height: '0px' }
+        ], {
+          duration: 300,
+          easing: 'ease-out',
+          fill: 'forwards'
+        }).onfinish = () => {
+          content.style.height = '0px';
+        };
+      }
+    }
+
+    function goToStep(stepNumber) {
+      // Hide floating button immediately
+      document.getElementById('floatingNext').classList.remove('visible');
+
+      // Close current active step
+      const currentActive = document.querySelector('swp-step.active');
+      if (currentActive) {
+        currentActive.classList.remove('active');
+        animateStepContent(currentActive, false);
+      }
+
+      // Open new step
+      const nextStep = document.querySelector(`swp-step[data-step="${stepNumber}"]`);
+      if (nextStep && !nextStep.classList.contains('disabled')) {
+        nextStep.classList.add('active');
+        animateStepContent(nextStep, true);
+      }
+
+      // Update floating button after animation
+      setTimeout(updateFloatingButton, 350);
+    }
+
+    function updateFloatingButton() {
+      const activeStep = getActiveStep();
+      const floatingNext = document.getElementById('floatingNext');
+
+      // Don't show on step 4 (last step)
+      if (activeStep === 4) {
+        floatingNext.classList.remove('visible');
+        return;
+      }
+
+      // Check if current step has selection
+      let hasSelection = false;
+      if (activeStep === 1) {
+        hasSelection = state.services.length > 0;
+      } else if (activeStep === 2) {
+        hasSelection = true; // Always has default selection
+      } else if (activeStep === 3) {
+        hasSelection = state.date && state.time;
+      }
+
+      if (hasSelection) {
+        floatingNext.classList.add('visible');
+      } else {
+        floatingNext.classList.remove('visible');
+      }
+    }
+
+    function setupFloatingButton() {
+      document.getElementById('nextBtn').addEventListener('click', () => {
+        const activeStep = getActiveStep();
+        if (activeStep && activeStep < 4) {
+          goToStep(activeStep + 1);
+        }
+      });
+    }
+
+    // ==========================================
+    // SERVICES
+    // ==========================================
+    function renderServices() {
+      const container = document.getElementById('servicesContent');
+      container.innerHTML = Object.entries(servicesData).map(([category, services]) => `
+        <swp-services-section>
+          <swp-section-title>${category}</swp-section-title>
+          <swp-services-grid>
+            ${services.map(s => `
+              <swp-service-item data-id="${s.id}" data-name="${s.name}" data-duration="${s.duration}" data-price="${s.price}">
+                <swp-service-check><i class="ph ph-check"></i></swp-service-check>
+                <swp-service-details>
+                  <swp-service-name>${s.name}</swp-service-name>
+                  <swp-service-meta>${s.duration} min</swp-service-meta>
+                </swp-service-details>
+                <swp-service-price>${s.price} kr.</swp-service-price>
+              </swp-service-item>
+            `).join('')}
+          </swp-services-grid>
+        </swp-services-section>
+      `).join('');
+
+      container.querySelectorAll('swp-service-item').forEach(item => {
+        item.addEventListener('click', () => toggleService(item));
+      });
+    }
+
+    function toggleService(item) {
+      const id = item.dataset.id;
+      const idx = state.services.findIndex(s => s.id === id);
+
+      if (idx > -1) {
+        state.services.splice(idx, 1);
+        item.classList.remove('selected');
+      } else {
+        state.services.push({
+          id,
+          name: item.dataset.name,
+          duration: parseInt(item.dataset.duration),
+          price: parseInt(item.dataset.price)
+        });
+        item.classList.add('selected');
+      }
+
+      updateSidebar();
+      updateSteps();
+    }
+
+    // ==========================================
+    // EMPLOYEES
+    // ==========================================
+    function renderEmployees() {
+      const container = document.getElementById('employeesContent');
+      container.innerHTML = `<swp-employee-grid>
+        ${employeesData.map(e => `
+          <swp-employee-item data-id="${e.id || ''}" class="${e.id === null ? 'no-pref selected' : ''}">
+            <swp-employee-avatar style="${e.color ? `background:${e.color}` : ''}">
+              ${e.id === null ? '<i class="ph ph-shuffle"></i>' : e.name[0]}
+            </swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>${e.name}</swp-employee-name>
+              <swp-employee-role>${e.role}</swp-employee-role>
+            </swp-employee-info>
+          </swp-employee-item>
+        `).join('')}
+      </swp-employee-grid>`;
+
+      container.querySelectorAll('swp-employee-item').forEach(item => {
+        item.addEventListener('click', () => {
+          container.querySelectorAll('swp-employee-item').forEach(i => i.classList.remove('selected'));
+          item.classList.add('selected');
+          state.employee = item.dataset.id || null;
+          updateSidebar();
+          updateSteps();
+        });
+      });
+    }
+
+    // ==========================================
+    // CALENDAR
+    // ==========================================
+    let currentMonth = new Date();
+
+    function renderCalendar() {
+      const container = document.getElementById('datetimeContent');
+      const monthNames = ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'];
+
+      container.innerHTML = `
+        <swp-datetime-layout>
+          <swp-calendar>
+            <swp-calendar-header>
+              <swp-calendar-month>${monthNames[currentMonth.getMonth()]} ${currentMonth.getFullYear()}</swp-calendar-month>
+              <swp-calendar-nav>
+                <button id="prevMonth"><i class="ph ph-caret-left"></i></button>
+                <button id="nextMonth"><i class="ph ph-caret-right"></i></button>
+              </swp-calendar-nav>
+            </swp-calendar-header>
+            <swp-calendar-grid>
+              <swp-weekday>Ma</swp-weekday>
+              <swp-weekday>Ti</swp-weekday>
+              <swp-weekday>On</swp-weekday>
+              <swp-weekday>To</swp-weekday>
+              <swp-weekday>Fr</swp-weekday>
+              <swp-weekday>Lø</swp-weekday>
+              <swp-weekday>Sø</swp-weekday>
+              ${generateCalendarDays()}
+            </swp-calendar-grid>
+          </swp-calendar>
+          <swp-time-section>
+            <swp-section-title>Ledige tider</swp-section-title>
+            <swp-time-grid id="timeGrid"></swp-time-grid>
+          </swp-time-section>
+        </swp-datetime-layout>
+      `;
+
+      document.getElementById('prevMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() - 1);
+        renderCalendar();
+      });
+
+      document.getElementById('nextMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() + 1);
+        renderCalendar();
+      });
+
+      container.querySelectorAll('swp-day:not(.disabled)').forEach(day => {
+        day.addEventListener('click', () => selectDate(day));
+      });
+
+      renderTimeSlots();
+    }
+
+    function generateCalendarDays() {
+      const firstDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
+      const lastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
+      const today = new Date();
+      let html = '';
+
+      let startDay = firstDay.getDay() - 1;
+      if (startDay < 0) startDay = 6;
+
+      for (let i = 0; i < startDay; i++) {
+        const d = new Date(firstDay.getTime() - (startDay - i) * 86400000);
+        html += `<swp-day class="other-month disabled">${d.getDate()}</swp-day>`;
+      }
+
+      for (let i = 1; i <= lastDay.getDate(); i++) {
+        const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i);
+        const dateStr = date.toISOString().split('T')[0];
+        const isToday = date.toDateString() === today.toDateString();
+        const isPast = date < today && !isToday;
+        const isSelected = state.date === dateStr;
+
+        html += `<swp-day data-date="${dateStr}" class="${isToday ? 'today' : ''} ${isPast ? 'disabled' : ''} ${isSelected ? 'selected' : ''}">${i}</swp-day>`;
+      }
+
+      return html;
+    }
+
+    function selectDate(day) {
+      document.querySelectorAll('swp-day.selected').forEach(d => d.classList.remove('selected'));
+      day.classList.add('selected');
+      state.date = day.dataset.date;
+      renderTimeSlots();
+      updateSidebar();
+      updateSteps();
+    }
+
+    function renderTimeSlots() {
+      const grid = document.getElementById('timeGrid');
+      if (!grid) return;
+
+      const times = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30'];
+      const taken = ['10:30', '14:00'];
+
+      grid.innerHTML = times.map(t => `
+        <swp-time-slot data-time="${t}" class="${taken.includes(t) ? 'disabled' : ''} ${state.time === t ? 'selected' : ''}">${t}</swp-time-slot>
+      `).join('');
+
+      grid.querySelectorAll('swp-time-slot:not(.disabled)').forEach(slot => {
+        slot.addEventListener('click', () => {
+          grid.querySelectorAll('swp-time-slot').forEach(s => s.classList.remove('selected'));
+          slot.classList.add('selected');
+          state.time = slot.dataset.time;
+          updateSidebar();
+          updateSteps();
+        });
+      });
+    }
+
+    // ==========================================
+    // STEPS NAVIGATION
+    // ==========================================
+    function setupStepHeaders() {
+      document.querySelectorAll('swp-step-header').forEach(header => {
+        header.addEventListener('click', () => {
+          const step = header.closest('swp-step');
+          if (step.classList.contains('disabled')) return;
+
+          const isActive = step.classList.contains('active');
+          const stepNumber = parseInt(step.dataset.step);
+
+          // Close current active step
+          const currentActive = document.querySelector('swp-step.active');
+          if (currentActive && currentActive !== step) {
+            currentActive.classList.remove('active');
+            animateStepContent(currentActive, false);
+          }
+
+          // Toggle clicked step
+          if (!isActive) {
+            step.classList.add('active');
+            animateStepContent(step, true);
+          } else {
+            step.classList.remove('active');
+            animateStepContent(step, false);
+          }
+
+          // Update floating button
+          setTimeout(updateFloatingButton, 350);
+        });
+      });
+    }
+
+    function initFirstStep() {
+      const step1 = document.querySelector('swp-step[data-step="1"]');
+      const content = step1.querySelector('swp-step-content');
+      content.style.height = 'auto';
+    }
+
+    function updateSteps() {
+      const step1 = document.querySelector('swp-step[data-step="1"]');
+      const step2 = document.querySelector('swp-step[data-step="2"]');
+      const step3 = document.querySelector('swp-step[data-step="3"]');
+      const step4 = document.querySelector('swp-step[data-step="4"]');
+
+      // Step 1 completion
+      if (state.services.length > 0) {
+        step1.classList.add('completed', 'has-selection');
+        document.getElementById('step1Summary').textContent = state.services.map(s => s.name).join(', ');
+        step2.classList.remove('disabled');
+      } else {
+        step1.classList.remove('completed', 'has-selection');
+        document.getElementById('step1Summary').textContent = 'Vælg hvad du vil have lavet';
+        step2.classList.add('disabled');
+      }
+
+      // Step 2 - always has selection (default "Ingen præference")
+      const empName = state.employee ? employeesData.find(e => e.id === state.employee)?.name : 'Ingen præference';
+      step2.classList.add('completed', 'has-selection');
+      document.getElementById('step2Summary').textContent = empName;
+
+      if (state.services.length > 0) {
+        step3.classList.remove('disabled');
+      }
+
+      // Step 3 completion
+      if (state.date && state.time) {
+        step3.classList.add('completed', 'has-selection');
+        const date = new Date(state.date);
+        const options = { weekday: 'short', day: 'numeric', month: 'short' };
+        document.getElementById('step3Summary').textContent = `${date.toLocaleDateString('da-DK', options)} kl. ${state.time}`;
+        step4.classList.remove('disabled');
+      } else {
+        step3.classList.remove('completed', 'has-selection');
+        document.getElementById('step3Summary').textContent = 'Find en ledig tid';
+      }
+
+      // Step 4
+      updateFormSummary();
+      updateBookButton();
+      updateFloatingButton();
+    }
+
+    // ==========================================
+    // FORM
+    // ==========================================
+    function setupFormListeners() {
+      ['firstName', 'lastName', 'phone', 'email', 'notes'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+          el.addEventListener('input', () => {
+            state.customer[id] = el.value;
+            updateFormSummary();
+            updateBookButton();
+          });
+        }
+      });
+    }
+
+    function updateFormSummary() {
+      const step4 = document.querySelector('swp-step[data-step="4"]');
+      const { firstName, lastName, phone } = state.customer;
+
+      if (firstName && phone) {
+        step4.classList.add('completed');
+        document.getElementById('step4Summary').textContent = `${firstName} ${lastName || ''} · ${phone}`;
+      } else {
+        step4.classList.remove('completed');
+        document.getElementById('step4Summary').textContent = 'Kontaktinformation';
+      }
+    }
+
+    // ==========================================
+    // SIDEBAR
+    // ==========================================
+    function updateSidebar() {
+      const cartEmpty = document.getElementById('cartEmpty');
+      const cartItems = document.getElementById('cartItems');
+      const cartDetails = document.getElementById('cartDetails');
+      const cartTotal = document.getElementById('cartTotal');
+
+      if (state.services.length === 0) {
+        cartEmpty.style.display = 'block';
+        cartItems.style.display = 'none';
+        cartDetails.style.display = 'none';
+        cartTotal.style.display = 'none';
+      } else {
+        cartEmpty.style.display = 'none';
+        cartItems.style.display = 'flex';
+        cartDetails.style.display = 'flex';
+        cartTotal.style.display = 'flex';
+
+        cartItems.innerHTML = state.services.map(s => `
+          <swp-cart-item>
+            <swp-cart-item-info>
+              <swp-cart-item-name>${s.name}</swp-cart-item-name>
+              <swp-cart-item-duration>${s.duration} min</swp-cart-item-duration>
+            </swp-cart-item-info>
+            <swp-cart-item-price>${s.price} kr.</swp-cart-item-price>
+          </swp-cart-item>
+        `).join('');
+
+        const total = state.services.reduce((sum, s) => sum + s.price, 0);
+        document.getElementById('totalPrice').textContent = `${total} kr.`;
+
+        // Update details
+        const empName = state.employee ? employeesData.find(e => e.id === state.employee)?.name : 'Ingen præference';
+        document.querySelector('#detailEmployee strong').textContent = empName;
+
+        if (state.date) {
+          const date = new Date(state.date);
+          const options = { weekday: 'long', day: 'numeric', month: 'long' };
+          document.querySelector('#detailDate strong').textContent = date.toLocaleDateString('da-DK', options);
+        } else {
+          document.querySelector('#detailDate strong').textContent = 'Ikke valgt';
+        }
+
+        document.querySelector('#detailTime strong').textContent = state.time || 'Ikke valgt';
+      }
+    }
+
+    function updateBookButton() {
+      const btn = document.getElementById('bookBtn');
+      const { firstName, phone } = state.customer;
+      const canBook = state.services.length > 0 && state.date && state.time && firstName && phone;
+      btn.disabled = !canBook;
+    }
+
+    // ==========================================
+    // BOOKING
+    // ==========================================
+    document.getElementById('bookBtn').addEventListener('click', () => {
+      document.getElementById('successOverlay').classList.add('active');
+    });
+
+    document.getElementById('successOverlay').addEventListener('click', (e) => {
+      if (e.target.id === 'successOverlay') {
+        location.reload();
+      }
+    });
+
+    // Init
+    init();
+  </script>
+
+</body>
+</html>
diff --git a/wwwroot/poc-indstillinger.html b/wwwroot/poc-indstillinger.html
index 9a67879..03c3598 100644
--- a/wwwroot/poc-indstillinger.html
+++ b/wwwroot/poc-indstillinger.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Indstillinger - Salon Beauty</title>
+  <title>Indstillinger - KARINA KNUDSEN®</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
   <style>
@@ -935,6 +935,68 @@
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
+      position: relative;
+    }
+
+    /* Onboarding popover */
+    #variablesHint[popover] {
+      margin: 0;
+      border: none;
+      padding: 0;
+      background: transparent;
+      overflow: visible;
+      inset: unset;
+    }
+
+    #variablesHint[popover]:popover-open {
+      display: block;
+    }
+
+    swp-onboarding-hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+      color: white;
+      padding: 12px 16px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1.4;
+      white-space: nowrap;
+      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+    }
+
+    swp-onboarding-hint i.ph-lightbulb {
+      font-size: 18px;
+    }
+
+    swp-onboarding-hint::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 8px solid transparent;
+      border-top-color: #8b5cf6;
+    }
+
+    swp-onboarding-hint swp-hint-close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      margin-left: 4px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 12px;
+      transition: background 150ms ease;
+    }
+
+    swp-onboarding-hint swp-hint-close:hover {
+      background: rgba(255, 255, 255, 0.3);
     }
 
     swp-variable-tag {
@@ -1313,7 +1375,7 @@
         <swp-edit-section>
           <swp-edit-row>
             <swp-edit-label>Virksomhedsnavn</swp-edit-label>
-            <swp-edit-value contenteditable="true">Salon Beauty</swp-edit-value>
+            <swp-edit-value contenteditable="true">KARINA KNUDSEN®</swp-edit-value>
           </swp-edit-row>
           <swp-edit-row>
             <swp-edit-label>CVR-nummer</swp-edit-label>
@@ -1644,7 +1706,7 @@
         <swp-edit-section>
           <swp-edit-row>
             <swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
-            <swp-edit-value contenteditable="true">Salon Beauty ApS</swp-edit-value>
+            <swp-edit-value contenteditable="true">KARINA KNUDSEN® ApS</swp-edit-value>
           </swp-edit-row>
           <swp-edit-row>
             <swp-edit-label>CVR-nummer</swp-edit-label>
@@ -1964,7 +2026,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
 
       <swp-message-section>
         <swp-message-section-title>Indsæt variabel</swp-message-section-title>
-        <swp-variables-grid>
+        <swp-variables-grid id="smsVariablesGrid">
           <swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
           <swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
           <swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
@@ -1985,7 +2047,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
           <span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
           <span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
           Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
-          <span class="highlight" data-var="{firma_navn}">Salon Beauty</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
+          <span class="highlight" data-var="{firma_navn}">KARINA KNUDSEN®</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
           Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
         </swp-message-preview>
         <swp-preview-meta>
@@ -2026,7 +2088,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
           <swp-edit-section>
             <swp-edit-row>
               <swp-edit-label>Email emne</swp-edit-label>
-              <swp-edit-value contenteditable="true" id="emailSubject">Din tid hos Salon Beauty er bekræftet</swp-edit-value>
+              <swp-edit-value contenteditable="true" id="emailSubject">Din tid hos KARINA KNUDSEN® er bekræftet</swp-edit-value>
             </swp-edit-row>
 
             <swp-edit-row>
@@ -2076,7 +2138,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
             <swp-email-header id="emailPreviewHeader">
               <swp-email-logo>SB</swp-email-logo>
               <h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
-              <p>Salon Beauty</p>
+              <p>KARINA KNUDSEN®</p>
             </swp-email-header>
 
             <swp-email-body>
@@ -2113,7 +2175,7 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
             </swp-email-body>
 
             <swp-email-footer>
-              <swp-email-footer-logo>Salon Beauty</swp-email-footer-logo>
+              <swp-email-footer-logo>KARINA KNUDSEN®</swp-email-footer-logo>
               <p>Hovedgaden 123, 2100 København Ø</p>
               <p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
               <p style="margin-top: 12px; font-size: 11px;">
@@ -2134,6 +2196,15 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
     </swp-drawer-footer>
   </swp-drawer>
 
+  <!-- Onboarding Popover -->
+  <div id="variablesHint" popover="manual">
+    <swp-onboarding-hint>
+      <i class="ph ph-lightbulb"></i>
+      <span>Klik for at indsætte, hold musen over for at se i preview</span>
+      <swp-hint-close><i class="ph ph-x"></i></swp-hint-close>
+    </swp-onboarding-hint>
+  </div>
+
   <script>
     // Tab switching
     document.querySelectorAll('swp-tab').forEach(tab => {
@@ -2180,12 +2251,47 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
       smsDrawer.classList.add('open');
       smsOverlay.classList.add('open');
       document.body.style.overflow = 'hidden';
+
+      // Show onboarding hint if not seen before
+      if (!localStorage.getItem('variablesHintSeen')) {
+        setTimeout(() => {
+          showVariablesHint();
+        }, 600);
+      }
+    }
+
+    function showVariablesHint() {
+      const hint = document.getElementById('variablesHint');
+      const anchor = document.getElementById('smsVariablesGrid');
+      if (!hint || !anchor) return;
+
+      const anchorRect = anchor.getBoundingClientRect();
+
+      hint.style.position = 'fixed';
+      hint.style.top = `${anchorRect.top - 60}px`;
+      hint.style.left = `${anchorRect.left - 80}px`;
+
+      hint.showPopover();
+    }
+
+    function hideVariablesHint() {
+      const hint = document.getElementById('variablesHint');
+      if (hint) {
+        hint.hidePopover();
+        localStorage.setItem('variablesHintSeen', 'true');
+      }
     }
 
     function closeSmsDrawer() {
       smsDrawer.classList.remove('open');
       smsOverlay.classList.remove('open');
       document.body.style.overflow = '';
+
+      // Hide hint without marking as seen (will show again next time)
+      const hint = document.getElementById('variablesHint');
+      if (hint) {
+        try { hint.hidePopover(); } catch(e) {}
+      }
     }
 
     document.getElementById('drawerClose').addEventListener('click', closeSmsDrawer);
@@ -2298,6 +2404,9 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
         const varText = tag.dataset.var;
         const editor = document.getElementById('messageEditor');
 
+        // Dismiss onboarding hint on first click
+        hideVariablesHint();
+
         const selection = window.getSelection();
         if (selection.rangeCount > 0) {
           const range = selection.getRangeAt(0);
@@ -2348,6 +2457,15 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
       });
     });
 
+    // ==========================================
+    // ONBOARDING HINT CLOSE
+    // ==========================================
+    document.querySelectorAll('swp-hint-close').forEach(closeBtn => {
+      closeBtn.addEventListener('click', () => {
+        hideVariablesHint();
+      });
+    });
+
     // ==========================================
     // ESCAPE KEY
     // ==========================================
