/**
 * 6Flaschen WeinApp
 * Datei: /assets/capture-experience.css
 * Version: 7.4.3
 * Stand: 2026-08-02 Europe/Berlin
 */

html.coastal-ui {
  --capture-gold: #b98a2f;
  --capture-gold-dark: #8f681f;
  --capture-ink: #21323a;
  --capture-muted: #758087;
  --capture-line: rgba(42, 53, 57, 0.12);
  --capture-soft: rgba(255, 255, 255, 0.72);
  --capture-green: #5d8d62;
}

html.coastal-ui .capture-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--capture-line);
  box-shadow: 0 8px 30px rgba(48, 42, 31, 0.07);
}

html.coastal-ui .capture-mode-button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--capture-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

html.coastal-ui .capture-mode-button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #b9892d, #d2aa53);
  box-shadow: 0 8px 18px rgba(169, 119, 28, 0.22);
}

html.coastal-ui .capture-experience-enabled > details.form-section[hidden],
html.coastal-ui .capture-experience-enabled [hidden] {
  display: none !important;
}

html.coastal-ui .capture-experience-enabled .capture-quick-data,
html.coastal-ui .capture-experience-enabled .capture-quick-axes,
html.coastal-ui .capture-experience-enabled .capture-score-panel {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--capture-line);
  background: var(--capture-soft);
  box-shadow: 0 12px 30px rgba(53, 45, 31, 0.055);
}

html.coastal-ui .capture-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

html.coastal-ui .capture-panel-title {
  margin: 0;
  color: var(--capture-ink);
  font-size: 1.08rem;
  line-height: 1.25;
}

html.coastal-ui .capture-panel-copy,
html.coastal-ui .capture-axis-note,
html.coastal-ui .capture-score-explanation {
  margin: 5px 0 0;
  color: var(--capture-muted);
  font-size: .9rem;
  line-height: 1.45;
}

html.coastal-ui .capture-quick-data-grid {
  gap: 14px;
}

html.coastal-ui .capture-quick-data-grid .field {
  margin: 0;
}

html.coastal-ui .capture-axis-choice-list {
  display: grid;
  gap: 11px;
}

html.coastal-ui .capture-axis-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

html.coastal-ui .capture-axis-choice {
  min-height: 44px;
  padding: 9px 8px;
  border: 1px solid var(--capture-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--capture-ink);
  font: inherit;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: anywhere;
}

html.coastal-ui .capture-axis-choice.is-selected {
  border-color: rgba(185, 138, 47, 0.68);
  background: rgba(211, 174, 95, 0.19);
  color: var(--capture-gold-dark);
  box-shadow: inset 0 0 0 1px rgba(185, 138, 47, 0.22);
}

html.coastal-ui .capture-deepen-button {
  width: 100%;
  margin-top: 16px;
}

html.coastal-ui .capture-score-panel {
  text-align: center;
}

html.coastal-ui .capture-score-result {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: 7px;
  margin: 8px 0 10px;
}

html.coastal-ui .capture-score-number {
  color: var(--capture-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 500;
  line-height: 1;
}

html.coastal-ui .capture-score-unit {
  color: var(--capture-muted);
  font-weight: 700;
}

html.coastal-ui .capture-score-label {
  grid-column: 1 / -1;
  display: block;
  min-height: 1.6em;
  margin-top: 6px;
  color: var(--capture-gold-dark);
  font-weight: 750;
  font-size: 1.02rem;
}

html.coastal-ui .capture-score-range {
  width: 100%;
  height: 32px;
  margin: 8px 0 0;
  accent-color: var(--capture-gold);
  cursor: pointer;
}

html.coastal-ui .capture-score-ruler {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  align-items: start;
  min-height: 28px;
  margin: -2px 2px 0;
  color: var(--capture-muted);
  font-size: .65rem;
}

html.coastal-ui .capture-score-ruler span {
  position: relative;
  min-width: 0;
  padding-top: 10px;
  text-align: center;
}

html.coastal-ui .capture-score-ruler span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5px;
  background: rgba(80, 84, 84, 0.28);
}

html.coastal-ui .capture-score-ruler span.is-major::before {
  height: 8px;
  background: rgba(185, 138, 47, 0.72);
}

html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .form-page-hero {
  margin-bottom: 12px;
}

html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .label-upload-grid {
  grid-template-columns: 1fr 1fr;
}

html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .ai-analysis-button {
  min-height: 52px;
  font-weight: 800;
}

html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] > details.form-section {
  margin-bottom: 14px;
}

html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] > details.form-section > summary {
  font-size: 1rem;
}

/* Ergebnisansicht */
html.coastal-ui .tasting-result-page .app-container {
  max-width: 980px;
}

html.coastal-ui .tasting-result-shell {
  display: grid;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

html.coastal-ui .tasting-result-hero {
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,247,239,.92));
}

html.coastal-ui .tasting-result-hero h1 {
  max-width: 680px;
  margin: 0 auto 8px;
  color: var(--capture-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 3.7rem);
  font-weight: 500;
  line-height: 1.02;
}

html.coastal-ui .tasting-result-hero p {
  margin: 0;
  color: var(--capture-muted);
}

html.coastal-ui .tasting-result-wine-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

html.coastal-ui .tasting-result-label-image,
html.coastal-ui .tasting-result-placeholder {
  width: 104px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  object-fit: cover;
  background: #f0eadf;
  border: 1px solid var(--capture-line);
}

html.coastal-ui .tasting-result-placeholder {
  display: grid;
  place-items: center;
  color: var(--capture-gold-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
}

html.coastal-ui .tasting-result-wine-copy h2 {
  margin: 0 0 4px;
  color: var(--capture-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1.08;
}

html.coastal-ui .tasting-result-wine-copy p {
  margin: 3px 0;
  color: var(--capture-muted);
}

html.coastal-ui .tasting-result-score {
  min-width: 112px;
  padding: 14px 12px;
  border-radius: 18px;
  text-align: center;
  background: rgba(210, 170, 83, .13);
}

html.coastal-ui .tasting-result-score strong {
  display: block;
  color: var(--capture-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
}

html.coastal-ui .tasting-result-score span {
  display: block;
  margin-top: 3px;
  color: var(--capture-gold-dark);
  font-size: .82rem;
  font-weight: 750;
}

html.coastal-ui .tasting-result-panel {
  padding: clamp(18px, 4vw, 28px);
}

html.coastal-ui .tasting-result-panel h2 {
  margin: 0 0 16px;
  color: var(--capture-ink);
  font-size: 1.25rem;
}

html.coastal-ui .tasting-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html.coastal-ui .tasting-insight {
  min-height: 108px;
  padding: 16px 12px;
  border-radius: 18px;
  text-align: center;
  background: rgba(250, 247, 240, .86);
  border: 1px solid var(--capture-line);
}

html.coastal-ui .tasting-insight-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(185, 138, 47, .13);
  color: var(--capture-gold-dark);
  font-weight: 800;
}

html.coastal-ui .tasting-insight p {
  margin: 0;
  color: var(--capture-ink);
  font-weight: 650;
  line-height: 1.3;
}

html.coastal-ui .tasting-axis-list {
  display: grid;
  gap: 14px;
}

html.coastal-ui .tasting-axis-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(150px, 3fr) minmax(80px, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--capture-muted);
  font-size: .9rem;
}

html.coastal-ui .tasting-axis-row > span:last-child {
  text-align: right;
}

html.coastal-ui .tasting-axis-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(57, 65, 68, .13);
}

html.coastal-ui .tasting-axis-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--axis-position, 50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #c39a47;
  box-shadow: 0 0 0 4px rgba(195, 154, 71, .14);
}

html.coastal-ui .tasting-profile-impact {
  color: var(--capture-ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

html.coastal-ui .tasting-profile-status {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

html.coastal-ui .tasting-profile-ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: conic-gradient(#bd9341 var(--profile-progress, 20%), rgba(64,70,72,.1) 0);
}

html.coastal-ui .tasting-profile-ring::after {
  content: "6";
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fbf8f1;
  color: var(--capture-gold-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

html.coastal-ui .tasting-profile-status strong,
html.coastal-ui .tasting-profile-status span,
html.coastal-ui .tasting-profile-status small {
  display: block;
}

html.coastal-ui .tasting-profile-status span {
  margin-top: 3px;
  color: var(--capture-muted);
}

html.coastal-ui .tasting-profile-status small {
  margin-top: 7px;
  color: var(--capture-muted);
  line-height: 1.4;
}

html.coastal-ui .tasting-result-actions {
  display: grid;
  gap: 10px;
}

html.coastal-ui .tasting-result-actions .btn {
  width: 100%;
  min-height: 54px;
}

html.coastal-ui .tasting-result-secondary-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 18px;
  padding: 4px 0 12px;
}

html.coastal-ui .tasting-result-secondary-links a {
  color: var(--capture-muted);
  font-size: .88rem;
  text-decoration: none;
}

html.coastal-ui .tasting-result-empty {
  color: var(--capture-muted);
  line-height: 1.5;
}

@media (max-width: 720px) {
  html.coastal-ui .capture-mode-button {
    min-height: 46px;
    padding: 8px 7px;
    font-size: .86rem;
  }

  html.coastal-ui .capture-experience-enabled .capture-quick-data,
  html.coastal-ui .capture-experience-enabled .capture-quick-axes,
  html.coastal-ui .capture-experience-enabled .capture-score-panel {
    padding: 15px;
    border-radius: 20px;
  }

  html.coastal-ui .capture-axis-choice {
    padding-inline: 4px;
    font-size: .76rem;
  }

  html.coastal-ui .capture-score-ruler span:not(.is-major) {
    color: transparent;
  }

  html.coastal-ui .tasting-result-wine-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 13px;
  }

  html.coastal-ui .tasting-result-label-image,
  html.coastal-ui .tasting-result-placeholder {
    width: 78px;
    border-radius: 15px;
  }

  html.coastal-ui .tasting-result-score {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    min-width: 0;
    text-align: left;
  }

  html.coastal-ui .tasting-result-score span {
    margin: 0 0 0 10px;
  }

  html.coastal-ui .tasting-insight-grid {
    grid-template-columns: 1fr;
  }

  html.coastal-ui .tasting-insight {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    text-align: left;
  }

  html.coastal-ui .tasting-insight-icon {
    margin: 0;
  }

  html.coastal-ui .tasting-axis-row {
    grid-template-columns: 72px minmax(110px, 1fr) 72px;
    gap: 8px;
    font-size: .76rem;
  }
}

@media (max-width: 390px) {
  html.coastal-ui .capture-axis-choice-row {
    gap: 5px;
  }

  html.coastal-ui .capture-axis-choice {
    min-height: 42px;
    font-size: .7rem;
  }
}

/* Kurzerfassung: längere Speicherbeschriftung auch auf schmalen Geräten vollständig lesbar. */
@media (max-width: 720px) {
  html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .sticky-actions-inner,
  html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .wizard-sticky-actions {
    display: grid !important;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 8px !important;
  }

  html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .sticky-actions .btn,
  html.coastal-ui .capture-experience-enabled[data-capture-mode="quick"] .wizard-sticky-actions .btn {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Herkunft und Bestätigung KI-erkannter Stammdaten. */
html.coastal-ui .coastal-capture-page .ai-field-marker {
  display: inline-flex;
  width: fit-content;
  margin: 3px 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--capture-gold-dark);
  background: rgba(185, 138, 47, .11);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.25;
}

html.coastal-ui .coastal-capture-page .field-ai-review .ai-field-marker {
  color: #8a5a1f;
  background: rgba(218, 157, 53, .17);
}

html.coastal-ui .coastal-capture-page .field-ai-confirmed .ai-field-marker {
  color: #446d4b;
  background: rgba(93, 141, 98, .13);
}

html.coastal-ui .coastal-capture-page .field-ai-review input,
html.coastal-ui .coastal-capture-page .field-ai-review select,
html.coastal-ui .coastal-capture-page .field-ai-review textarea {
  border-color: rgba(185, 126, 34, .62) !important;
  box-shadow: 0 0 0 3px rgba(185, 126, 34, .08) !important;
}

html.coastal-ui .coastal-capture-page .ai-field-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #675431;
  background: rgba(218, 157, 53, .10);
  font-size: .78rem;
  line-height: 1.35;
}

html.coastal-ui .coastal-capture-page .ai-field-suggestion-accept {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(185, 138, 47, .42);
  border-radius: 10px;
  color: var(--capture-gold-dark);
  background: rgba(255, 255, 255, .82);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

/* Präzise Achsen bleiben bei einer späteren Kurzansicht geschützt. */
html.coastal-ui .capture-axis-choice:disabled {
  cursor: not-allowed;
  opacity: .62;
}

html.coastal-ui .capture-quick-axes[data-preserve-precise="1"] .capture-axis-note {
  color: var(--capture-gold-dark);
  font-weight: 650;
}

html.coastal-ui .tasting-result-score small {
  display: block;
  color: var(--capture-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 720px) {
  html.coastal-ui .tasting-result-score {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  html.coastal-ui .tasting-result-score small {
    margin-left: 6px;
  }
}


/* Deployment check, only visible with ?ui_check=1. */
html.coastal-ui .capture-ui-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(157, 119, 43, 0.28);
  background: #fffaf0;
  font-size: 0.9rem;
}

html.coastal-ui .capture-ui-check strong {
  color: #7d5b19;
}

html.coastal-ui .capture-ui-check.is-confirmed {
  border-color: rgba(49, 116, 76, 0.35);
  background: #f2f8f3;
}

html.coastal-ui .capture-ui-check.is-confirmed strong {
  color: #2e6a47;
}

@media (max-width: 520px) {
  html.coastal-ui .capture-ui-check {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
 * Release 7.4.2: additive Erfassung und dreistufige Achsenregler
 * -------------------------------------------------------------------------- */
html.coastal-ui .capture-mode-switch {
  margin: 8px 0 18px;
}

html.coastal-ui .capture-detailed-intro {
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid var(--capture-line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(185, 138, 47, .10), rgba(255, 255, 255, .78));
}

html.coastal-ui .capture-detailed-intro h2 {
  margin: 3px 0 5px;
  color: var(--capture-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 500;
}

html.coastal-ui .capture-detailed-intro p {
  margin: 0;
  color: var(--capture-muted);
  line-height: 1.5;
}

html.coastal-ui .capture-detailed-supplement {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

html.coastal-ui .capture-detailed-supplement[hidden],
html.coastal-ui .capture-detailed-intro[hidden] {
  display: none !important;
}

html.coastal-ui .capture-detailed-axis-editor {
  margin: 0;
  border: 1px solid var(--capture-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(53, 45, 31, .055);
}

html.coastal-ui .capture-detailed-axis-editor > summary {
  min-height: 58px;
  padding: 17px 20px;
  color: var(--capture-ink);
  font-weight: 750;
}

html.coastal-ui .capture-detailed-axis-editor .wine-axis-editor-content {
  padding: 0 20px 20px;
}

html.coastal-ui .capture-axis-slider-list {
  display: grid;
  gap: 14px;
}

html.coastal-ui .capture-axis-slider-row {
  display: block;
  padding: 14px 14px 11px;
  border: 1px solid var(--capture-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
}

html.coastal-ui .capture-axis-slider-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-bottom: 7px;
}

html.coastal-ui .capture-axis-slider-label {
  min-width: 0;
  padding: 2px 3px 5px;
  border: 0;
  background: transparent;
  color: var(--capture-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  overflow-wrap: anywhere;
}

html.coastal-ui .capture-axis-slider-label:first-child {
  text-align: left;
}

html.coastal-ui .capture-axis-slider-label:nth-child(2) {
  text-align: center;
}

html.coastal-ui .capture-axis-slider-label:last-child {
  text-align: right;
}

html.coastal-ui .capture-axis-slider-label.is-selected {
  color: var(--capture-gold-dark);
}

html.coastal-ui .capture-axis-slider-control {
  position: relative;
  padding: 2px 3px 0;
}

html.coastal-ui .capture-axis-three-range {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 32px;
  margin: 0;
  accent-color: var(--capture-gold);
  cursor: pointer;
}

html.coastal-ui .capture-axis-three-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(185, 138, 47, .28), rgba(185, 138, 47, .58), rgba(185, 138, 47, .28));
}

html.coastal-ui .capture-axis-three-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #bd9341;
  box-shadow: 0 2px 8px rgba(104, 73, 19, .28), 0 0 0 3px rgba(189, 147, 65, .12);
  -webkit-appearance: none;
}

html.coastal-ui .capture-axis-three-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(185, 138, 47, .28), rgba(185, 138, 47, .58), rgba(185, 138, 47, .28));
}

html.coastal-ui .capture-axis-three-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #bd9341;
  box-shadow: 0 2px 8px rgba(104, 73, 19, .28), 0 0 0 3px rgba(189, 147, 65, .12);
}

html.coastal-ui .capture-axis-slider-row.is-unanswered .capture-axis-three-range::-webkit-slider-thumb {
  opacity: 0;
}

html.coastal-ui .capture-axis-slider-row.is-unanswered .capture-axis-three-range::-moz-range-thumb {
  opacity: 0;
}

html.coastal-ui .capture-axis-slider-stops {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

html.coastal-ui .capture-axis-slider-stops span {
  width: 8px;
  height: 8px;
  border: 2px solid rgba(185, 138, 47, .46);
  border-radius: 999px;
  background: #fbf8f1;
}

html.coastal-ui .capture-axis-slider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  margin-top: 2px;
}

html.coastal-ui .capture-axis-slider-footer .wine-axis-tendency {
  color: var(--capture-gold-dark);
  font-size: .8rem;
  font-weight: 750;
}

html.coastal-ui .capture-axis-slider-row.is-unanswered .wine-axis-tendency {
  color: var(--capture-muted);
  font-weight: 600;
}

html.coastal-ui .capture-axis-reset {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--capture-muted);
  font: inherit;
  font-size: .74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html.coastal-ui .capture-axis-three-range:disabled,
html.coastal-ui .capture-axis-slider-label:disabled,
html.coastal-ui .capture-axis-reset:disabled {
  cursor: not-allowed;
  opacity: .62;
}

@media (max-width: 720px) {
  html.coastal-ui .capture-axis-slider-row {
    padding: 13px 11px 10px;
  }

  html.coastal-ui .capture-axis-slider-label {
    font-size: .74rem;
  }

  html.coastal-ui .capture-detailed-intro {
    padding: 16px;
    border-radius: 20px;
  }
}

@media (max-width: 350px) {
  html.coastal-ui .capture-axis-slider-label {
    font-size: .68rem;
  }
}


/* 7.4.3 – vollständige Weinachsen dauerhaft in der Schnell-Erfassung */
html.coastal-ui .capture-primary-axis-editor {
  display: block;
  width: 100%;
  margin: 18px 0 4px;
}

html.coastal-ui .capture-primary-axis-editor[hidden] {
  display: block !important;
}

html.coastal-ui .capture-primary-axis-editor > summary {
  cursor: default;
}

html.coastal-ui .capture-primary-axis-editor > summary::-webkit-details-marker {
  display: none;
}

/* 7.4.3 – Achsenlayout: Tendenztext ohne Überlauf */
html.coastal-ui .capture-primary-axis-editor .wine-axis-row {
  grid-template-columns: minmax(72px, .8fr) minmax(150px, 2.4fr) minmax(72px, .8fr);
  grid-template-areas:
    "left range right"
    ". tendency .";
  row-gap: 5px;
}

html.coastal-ui .capture-primary-axis-editor .wine-axis-pole-left {
  grid-area: left;
}

html.coastal-ui .capture-primary-axis-editor .wine-axis-pole-right {
  grid-area: right;
}

html.coastal-ui .capture-primary-axis-editor input[type="range"] {
  grid-area: range;
  min-width: 0;
}

html.coastal-ui .capture-primary-axis-editor .wine-axis-tendency {
  grid-area: tendency;
  min-width: 0;
  color: var(--capture-gold-dark);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  html.coastal-ui .capture-primary-axis-editor .wine-axis-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "left right"
      "range range"
      "tendency tendency";
    row-gap: 5px;
    column-gap: 10px;
  }

  html.coastal-ui .capture-primary-axis-editor .wine-axis-pole-left {
    text-align: left;
  }

  html.coastal-ui .capture-primary-axis-editor .wine-axis-pole-right {
    text-align: right;
  }
}