:root {
    /* Brand */
    --brand-500:#ff2f90; /* Primär-CTA */
    --brand-600:#e02080; /* Active */
    --brand-400:#ff4fa0; /* Hover/Focus ring */
    --accent-neutral:#f79aac; /* Pill neutral border */
    --danger:#ff0000;
  
    /* Neutral */
    --bg:#FCFAF8;
    --bg-alt:#f5f6f7;          /* Seitenhintergrund/Flächen */
    --panel:#ffffff;           /* Panels/Sheet */
    --panel-alt:#F7F3F0;
    --line:#E6E1DC;
    --line-strong:#D4CEC8;    /* stärkere Rahmen (2px) */
  
    --text-strong:#1F1B1A;
    --text:#2B2625;
    --text-soft:#5F5855;
    --text-muted:#8E8581;
}

/* Desktop/tablet: container for profile content (non-Tailwind) */
.page-profile .profile-form-container {
  max-width: 896px; /* ~max-w-4xl */
  margin-left: auto;
  margin-right: auto;
  padding: 32px 24px;
}

/* Desktop/tablet: container for review content (non-Tailwind) */
.page-review .review-content-container {
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 10px 24px 0px;
}

/* Mobile Map UI (<=767px) */
@media (max-width: 767px) {
  html, body { height: 100%; }
  body { overflow: hidden; }
  /* Ensure map is the canvas */
  /* Map/form canvas anchor: used also for profile and review */
  #here-map-container {
    position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1;
  }
  /* Form canvas for profile: scrolls between islands */
  #mobile-form-canvas {
    position: fixed;
    left: 16px;
    right: 16px;
    top: calc(max(env(safe-area-inset-top), 16px) + 56px + 16px); /* navbar height + gap */
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px); /* bottom nav height + gap */
    overflow: auto;
    z-index: 2;
    -webkit-overflow-scrolling: touch;
  }
  /* Non-tailwind container for profile content */
  .profile-form-container { max-width: 640px; margin: 0 auto; padding: 24px 12px; }

  /* Place navbar and bottom nav as floating islands */
  .ka-navbar {
    position: fixed;
    top: max(env(safe-area-inset-top), 16px);
    left: 16px;
    right: 16px;
    z-index: 50;
    border: solid 1px var(--line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(16,24,40,0.16);
    display: block; /* ensure it renders on top of full-canvas */
  }

  /* Desktop workflow bottom nav: hide on mobile (wherever it sits) */
  .select-root .bg-white.border-t.shadow-lg.h-16,
  .bg-white.border-t.border-gray-200.shadow-lg.h-16 {
    display: none !important;
  }

  /* Mobile bottom nav */
  .mobile-bottom-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(env(safe-area-inset-bottom), 16px);
    height: 56px;
    border: solid 1px var(--line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(16,24,40,0.16);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 60;
  }
  .mobile-bottom-nav button {
    appearance: none;
    background: transparent;
    border: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Active state for non-CTA buttons */
  .mobile-bottom-nav button:not(.cta)[aria-current="true"] {
    background: #ECEFF1;
  }
  .mobile-bottom-nav button:not(.cta)[aria-current="true"] svg {
    color: #EA3891;
  }
  .mobile-bottom-nav iconify-icon,
  .mobile-bottom-nav svg { color: var(--text-strong); }
  .mobile-bottom-nav .cta {
    background: var(--brand-500);
    color: #fff;
  }

  /* Payment: 2-button layout with 1/4 and 3/4 split */
  .mobile-bottom-nav.mobile-bottom-nav--payment {
    grid-template-columns: 1fr 3fr;
  }
  .mobile-bottom-nav.mobile-bottom-nav--payment button#nav-back { border-right: 1px solid var(--line); }
  .mobile-bottom-nav.mobile-bottom-nav--payment #pay-now-btn { font-weight: 600; }

  /* Profile page: remove island drop shadows */
  .page-profile .ka-navbar { box-shadow: none; border: 1px solid var(--line); }
  .page-profile .mobile-bottom-nav { box-shadow: none; border: 1px solid var(--line); }
  /* Review page: remove island drop shadows */
  .page-review .ka-navbar { box-shadow: none; border: 1px solid var(--line); }
  .page-review .mobile-bottom-nav { box-shadow: none; border: 1px solid var(--line); }

  /* Ribbon above bottom nav (search location) */
  .mobile-location-ribbon {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px);
    border: solid 1px var(--line);
    border-radius: 2px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 55;
    background: var(--panel);
    width: min-content;
    text-wrap: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bottom sheet overlay (max 60% viewport height) */
  /* Sheet as non-modal panel (no backdrop), positioned like ribbon above nav */
  .mobile-sheet {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px);
    max-height: 60vh;
    background: #fff;
    border-radius: 2px;
    display: none; /* closed by default */
    flex-direction: column;
    overflow: hidden;
    z-index: 75;
  }
  .mobile-sheet.is-open { display: flex; }
  .mobile-sheet .sheet-header { padding: 12px 24px; border-bottom: 1px solid var(--line); display:flex; align-items:center; gap:8px; }
  .mobile-sheet .sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; }
  .mobile-sheet .sheet-body .sheet-body-inner { padding: 0 0 12px; }

  /* Allow selection/editing inside the email editor on mobile */
  .email-editor,
  .email-editor * {
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
  }

  /* Review card sizing (moved from review.css) */
  .ka-review-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--line);
    width: 100%;
    margin: 0;
}

  .ka-email-header { display: grid; grid-template-columns: 85px 1fr; row-gap: 0.5rem; column-gap: 0.75rem; font-size: 0.9rem; color: #374151; align-items: flex-start; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.75rem; margin-bottom: 1rem; }

  /* Review email content mobile overrides */
  .ka-email-content { padding: 24px; font-size: 0.9rem; }

  /* Review email editor mobile overrides */
  .email-editor {
    white-space: pre-line;
    font-size: .9rem;
    line-height: 1.5;
    min-height: 300px;
    outline: none;
    padding: 0;
    margin: 2rem 0 0 0;
    border: 0;
    color: var(--text);
  }

  /* List tiles inside the sheet */
  #mobile-sheet .sheet-body-inner { background: #fff; padding: 12px 24px !important; }
  #mobile-sheet .ka-item {
    position: relative;      /* wichtig für ::before */
    display: block;
    width: 100%;
    padding: 10px 0px;
    background: #fff;
  }
  
  #mobile-sheet .ka-item:hover {
    background: #f5f5f5;
  }
  
  /* Divider als Pseudo-Element */
  #mobile-sheet .ka-item::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: var(--line);
  }
  
  #mobile-sheet .ka-item:first-child::before {
    content: none;  /* kein Divider am Anfang */
  }
  #mobile-sheet .ka-item .name { font-size: 15px; font-weight: 500; color: #31051B; }
  #mobile-sheet .ka-item .addr { font-size: 13px; font-weight: 400; color: #31051B; }

  /* Kita ribbon above bottom nav */
  .mobile-kita-ribbon {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(16,24,40,0.16);
    padding: 16px 60px 16px 16px; /* space for bookmark button */
    display: none;
    z-index: 65; /* above bottom nav (60) */
  }

  /* Cart ribbon above bottom nav (payment) */
  .mobile-cart-ribbon {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(16,24,40,0.16);
    padding: 10px 12px;
    border: 1px solid var(--line);
    z-index: 58; /* below kita ribbon (65) and sheets (75), above form (2) */
  }
  .mobile-kita-ribbon.is-open { display: block; }
  .mobile-kita-ribbon .k-name { 
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 4px;
    color: var(--text-strong);
    font-weight: 500; 
  }
  .mobile-kita-ribbon .k-addr { 
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 4px;
  }

  .mobile-kita-ribbon .k-dist {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text); 
    font-weight: 400; 
  }

  #mobile-kita-bookmark {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 2px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb
  }

  .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
  }

  .nav-item button {
    border-radius: 2px;
  }

  /* When CTA is active (has selections), force white icon regardless of state */
  #nav-next.cta-on svg { color: #ffffff; }

  /* Hint/Toast above bottom nav */
  .mobile-hint {
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(max(env(safe-area-inset-bottom), 16px) + 56px + 16px);
    background: #fff;
    border-radius: 2px;
    border: 1px solid #EA3891;
    color: #EA3891;
    padding: 12px;
    z-index: 85;
    display: none;
  }
  .mobile-hint.is-visible { display: block; }

  /* Hide legacy desktop overlay on mobile */
  .kita-overlay { display: none !important; }

  /* Temporarily disable filter menu on mobile */
  .workflow-sidebar #filter-toggle-btn,
  .workflow-sidebar #filter-options {
    display: none !important;
  }
}