/* Scopes unter .journey */
.journey .choices{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; width:100%; }
.journey .choices .chip{
  background:#fff; color:#0aa37f; border:1px solid #0aa37f;
  border-radius:999px; padding:8px 12px; font-weight:600;
  cursor:pointer; transition: transform .12s, background .15s, color .15s;
}
.journey .choices .chip:hover{ background:#0aa37f; color:#fff; transform: translateY(-1px); }
.journey .choices .chip.selected{ background:#0aa37f; color:#fff; }
.journey .choices .chip:disabled{ opacity:.6; cursor:default; transform:none; }

.journey .chip--primary{ background:#0aa37f; color:#fff; border-color:#0aa37f; }
.journey .chip--secondary{ background:#fff; color:#4a4a4a; border-color:#cfcfcf; }

@keyframes chipPulse{ 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
.journey .pulse-once{ animation: chipPulse .9s ease-in-out 1; }

/* Consent Box */
.journey .consent{ margin:8px 0 0; padding:10px 12px; border:1px solid #eee; border-radius:12px; }
.journey .consent label{ display:flex; gap:8px; align-items:flex-start; margin:6px 0; }
.journey .consent-actions{ display:flex; gap:8px; margin-top:8px; }
.journey .consent-actions .btn{
  border-radius:999px; padding:8px 12px; font-weight:600;
  border:1px solid #0aa37f; color:#0aa37f; background:#fff; cursor:pointer;
}
.journey .consent-actions .btn.primary{ background:#0aa37f; color:#fff; }
.journey .consent-actions .btn:disabled{ opacity:.6; cursor:default; }

/* Slider/Scales */
.journey .slider-wrap{
  margin:8px 0 0; padding:10px 12px; border:1px solid #eee; border-radius:12px;
  display:flex; align-items:center; gap:10px;
}
.journey .slider{ flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#e9e9e9; outline:none; }
.journey .slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#0aa37f; cursor:pointer; }
.journey .slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#0aa37f; cursor:pointer; }
.journey .slider-tip{ font-weight:700; }

.scale-head{ display:flex; justify-content:space-between; align-items:baseline; width:100%; }
.scale-value{ min-width:32px; text-align:right; font-variant-numeric: tabular-nums; }
.scale-legend{ display:flex; justify-content:space-between; font-size:.85rem; opacity:.8; margin-top:6px; width:100%; }
.scale-footer{ font-size:.9rem; opacity:.8; margin-top:6px; width:100%; }

/* Time Picker */
.journey .time-picker-wrap{
  margin:8px 0 0; padding:12px 14px; border:1px solid #eee; border-radius:12px;
  background:#fff;
}
.journey .time-picker-header{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:12px;
}
.journey .time-display{
  font-size:1.1rem; font-weight:600; color:#0aa37f;
  font-variant-numeric: tabular-nums;
}
.journey .time-inputs{
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.journey .time-input-group{
  display:flex; flex-direction:column; gap:4px; align-items:center;
}
.journey .time-input-group label{
  font-size:.75rem; color:#666; text-transform:uppercase; letter-spacing:0.5px;
}
.journey .time-input{
  width:60px; padding:8px 10px; border:1px solid #ddd; border-radius:8px;
  text-align:center; font-size:1.2rem; font-weight:600;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s;
}
.journey .time-input:focus{
  outline:none; border-color:#0aa37f; box-shadow:0 0 0 3px rgba(10,163,127,.1);
}
.journey .time-separator{
  font-size:1.5rem; font-weight:600; color:#0aa37f; margin-top:20px;
}

/* CTA-Puls für geführte Eingaben */
@keyframes ctaPulse{
  0%{ transform:scale(1); box-shadow:0 4px 10px rgba(10,163,127,.25); }
  50%{ transform:scale(1.08); box-shadow:0 8px 22px rgba(10,163,127,.45); }
  100%{ transform:scale(1); box-shadow:0 4px 10px rgba(10,163,127,.25); }
}
.input-bar button.cta-pulse{ animation: ctaPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .input-bar button.cta-pulse{ animation:none; } }

/* Typing-Reihe minimal (Look kommt aus global.css) */
.typing-row{ display:flex; align-items:flex-end; }

/* Compact density for the consent sheet */
.consent--compact {
  --c-gap-v: 8px;            /* vertikale Lücke zwischen Reihen */
  --c-gap-h: 10px;           /* horizontale Lücke in Labels */
  --c-pad: 10px;             /* Innenabstand der Box */
  --c-font: 0.98rem;         /* Basis-Schriftgröße */
  --c-line: 1.25;            /* Zeilenhöhe kompakt */
  --c-row-pad: 6px;          /* Label-Row Padding */
  --c-action-gap: 8px;       /* Abstand Buttons */
  --c-action-pad: 8px 0 0;   /* Innenabstand Actions */
}

.consent.consent--compact {
  padding: var(--c-pad);
  font-size: var(--c-font);
  line-height: var(--c-line);
}

.consent--compact .consent-title {
  margin: 2px 0 6px;
  font-size: 0.95em;
  opacity: .9;
}

.consent--compact label {
  display: grid;
  grid-template-columns: auto 1fr;  /* [checkbox] [text] */
  align-items: start;
  column-gap: var(--c-gap-h);
  row-gap: 0;
  padding: var(--c-row-pad) 6px;
  margin: 0;                        /* Lücke kommt von .consent selbst */
  border-radius: 10px;
}

.consent--compact input[type="checkbox"] {
  margin: 2px 0 0;                  /* minimaler optischer Ausgleich */
  transform: translateY(1px);       /* sitzt etwas höher, wirkt kompakter */
}

.consent--compact .consent-actions {
  display: flex;
  gap: var(--c-action-gap);
  padding: var(--c-action-pad);
  margin: 6px 0 0;
}

.consent--compact .btn {
  padding: 8px 12px;                /* kleinere Buttons */
  line-height: 1.1;
}

.consent--compact .btn.primary {
  font-weight: 600;
}

.consent--compact .bubble.compact {
  margin-bottom: 6px;               /* Bot-Bubble direkt über Consent */
}

/* Optional: leichte Zeilenabstände zwischen Checkbox-Zeilen statt großer Blocks */
.consent--compact > div > label + label {
  margin-top: 2px;
}

/* Mobile noch enger */
@media (max-width: 420px) {
  .consent--compact {
    --c-font: 0.96rem;
    --c-gap-h: 8px;
    --c-row-pad: 5px;
  }
  .consent--compact .btn { padding: 7px 10px; }
}

/* === Consent: kompakt & einheitlich === */
.consent {
  /* baseline */
  padding: 12px;
}

.consent--compact {
  --c-gap-row: 4px;       /* Abstand zwischen Checkbox-Zeilen */
  --c-gap-groups: 6px;    /* Abstand zwischen Pflicht- und Optional-Gruppe */
  --c-pad: 10px;          /* Innenabstand Box */
  --c-font: 0.98rem;
  --c-line: 1.25;
  padding: var(--c-pad);
  font-size: var(--c-font);
  line-height: var(--c-line);
}

/* Gruppen (Pflicht / Optional) stehen dichter zusammen */
.consent--compact .consent-section {
  margin: 0;                 /* KEINE Standardmargins */
  padding: 0;
  display: grid;
  grid-auto-rows: min-content;
  row-gap: var(--c-gap-row); /* gleichmäßiger Abstand zwischen den Zeilen */
}

/* Abstand zwischen Gruppen angleichen (oben = unten) */
.consent--compact .consent-section + .consent-section {
  margin-top: var(--c-gap-groups); /* nur kleiner, definierter Gap */
}

/* Titel minimal, kein zusätzlicher Collapsing-Margin */
.consent--compact .consent-title {
  margin: 0 0 4px;          /* klein halten */
  font-size: 0.95em;
  opacity: .9;
}

/* Checkbox-Zeilen selbst */
.consent--compact .consent-section label {
  display: grid;
  grid-template-columns: auto 1fr; /* [☑] [Text] */
  column-gap: 8px;
  align-items: start;
  margin: 0;                 /* NICHT wachsen lassen */
  padding: 4px 6px;          /* sehr schlank */
  border-radius: 8px;
}

/* Checkbox optisch minimal höher für Kompaktheit */
.consent--compact .consent-section input[type="checkbox"] {
  margin: 1px 0 0;
  transform: translateY(1px);
}

/* Aktionen knapp halten */
.consent--compact .consent-actions {
  display: flex;
  gap: 8px;
  padding: 6px 0 0;         /* kein großer Top-Padding */
  margin: 6px 0 0;          /* einheitlich klein */
}

.consent--compact .btn {
  padding: 8px 12px;
  line-height: 1.1;
}

/* Bot-Bubble über der Consent-Box: ebenfalls enger */
.consent--compact .bubble.compact {
  margin-bottom: 6px;
}

/* Fehler-UI */
.error-msg {
  margin: 8px 0;
}

.error-msg .bubble.error {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

.error-msg .error-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error-msg .error-content strong {
  font-weight: 600;
  margin-bottom: 4px;
}

.error-msg .error-retry {
  margin-top: 8px;
  padding: 8px 16px;
  background: #ffc107;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  align-self: flex-start;
}

.error-msg .error-retry:hover {
  background: #ffb300;
  transform: translateY(-1px);
}

.error-msg .error-retry:active {
  transform: translateY(0);
}

/* Offline-Status */
.error-msg .bubble.error[data-offline="true"] {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

/* Mobile noch etwas enger */
@media (max-width: 420px) {
  .consent--compact {
    --c-gap-row: 1px;
    --c-gap-groups: 5px;
    --c-pad: 8px;
    --c-font: 0.96rem;
  }
  .consent--compact .btn { padding: 7px 10px; }
}

/* ==== CONSENT COMPACT: hard override (am Dateiende!) ==== */
.journey .consent.consent--compact .consent-section { 
  display: grid; 
  row-gap: 4px !important; 
  margin: 0 !important; 
  padding: 0 !important;
}

.journey .consent.consent--compact .consent-section + .consent-section {
  /* exakt gleicher Abstand wie zwischen den Zeilen oben */
  margin-top: 6px !important;
}

.journey .consent.consent--compact label {
  /* killt das globale margin:6px 0; */
  margin: 0 !important;
  padding: 4px 6px !important;
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  column-gap: 8px !important;
  align-items: start !important;
}

.journey .consent.consent--compact .consent-actions {
  margin-top: 6px !important;
  padding-top: 6px !important;
}