/**
 * 6Flaschen WeinApp
 * Datei: /assets/capture-experience.css
 * Version: 8.4.9-r9
 * Stand: 2026-08-05 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;
  }
}


/* === v8.1.14: Mobile Bedienbarkeit der sieben Geschmacksachsen === */
@media (max-width: 760px) {
  html.coastal-ui body.tasting-wizard-page .wine-axis-row input.capture-axis-range[type="range"] {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    touch-action: pan-y;
  }

  html.coastal-ui body.tasting-wizard-page .wine-axis-row input.capture-axis-range[type="range"]::-webkit-slider-runnable-track {
    height: 7px;
  }

  html.coastal-ui body.tasting-wizard-page .wine-axis-row input.capture-axis-range[type="range"]::-moz-range-track {
    height: 7px;
  }

  html.coastal-ui body.tasting-wizard-page .wine-axis-row input.capture-axis-range[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -12px;
    border-width: 3px;
    box-shadow: 0 4px 14px rgba(36, 49, 59, 0.30), 0 0 0 5px rgba(184, 154, 103, 0.12);
  }

  html.coastal-ui body.tasting-wizard-page .wine-axis-row input.capture-axis-range[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-width: 3px;
    box-shadow: 0 4px 14px rgba(36, 49, 59, 0.30), 0 0 0 5px rgba(184, 154, 103, 0.12);
  }
}


/* --------------------------------------------------------------------------
 * Revision 9 – „1. Wein erfassen“ als klare Kartenfolge statt Außenkasten
 * -------------------------------------------------------------------------- */
html.coastal-ui .capture-experience-enabled > .capture-primary-section.form-section.card {
  overflow: visible !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.coastal-ui .capture-experience-enabled > .capture-primary-section.form-section > summary {
  min-height: 0 !important;
  padding: 4px 2px 12px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: clamp(21px,3vw,25px) !important;
  cursor: default;
}
html.coastal-ui .capture-experience-enabled > .capture-primary-section.form-section > summary::after { display:none !important; }
html.coastal-ui .capture-experience-enabled > .capture-primary-section.form-section > .form-section-content { padding:0 !important; }
html.coastal-ui .capture-experience-enabled > .capture-primary-section .form-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:14px !important;
}
html.coastal-ui .capture-label-panel,
html.coastal-ui .capture-experience-enabled .capture-quick-data,
html.coastal-ui .capture-experience-enabled .capture-primary-axis-editor {
  grid-column:1/-1;
  width:100%;
  margin:0 !important;
  padding:18px !important;
  border:1px solid var(--capture-line) !important;
  border-radius:24px !important;
  background:var(--capture-soft) !important;
  box-shadow:0 12px 30px rgba(53,45,31,.055) !important;
}
html.coastal-ui .capture-label-panel-body { display:grid; gap:14px; }
html.coastal-ui .capture-label-panel .label-upload-section,
html.coastal-ui .capture-label-panel .ai-analysis-field { margin:0; }
html.coastal-ui .capture-label-panel .ai-analysis-button { width:100%; }
html.coastal-ui .capture-experience-enabled .capture-primary-axis-editor > summary {
  min-height:0;
  padding:0 0 14px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--capture-ink) !important;
  font-size:1.08rem !important;
  font-weight:750 !important;
}
html.coastal-ui .capture-experience-enabled .capture-primary-axis-editor .wine-axis-editor-content { padding:0 !important; }
html.coastal-ui .edit-record-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-4px 0 16px;
  padding:11px 14px;
  border:1px solid var(--capture-line);
  border-radius:16px;
  color:var(--capture-muted);
  font-size:.86rem;
}
@media(max-width:720px){
  html.coastal-ui .capture-label-panel,
  html.coastal-ui .capture-experience-enabled .capture-quick-data,
  html.coastal-ui .capture-experience-enabled .capture-primary-axis-editor { padding:15px !important; border-radius:20px !important; }
  html.coastal-ui .edit-record-meta { align-items:flex-start; flex-direction:column; }
}


/* ==========================================================================
 * Hotfix 8.4.9 Revision 9.3 – einheitliche Ziehharmonika auf Erfassen/Edit
 *
 * 1. Wein erfassen = feste Bereichsüberschrift
 * Darunter echte, unabhängig bedienbare Accordions:
 * - Etikett & Wein finden
 * - Erkannte Weindaten
 * - Geschmack in 7 Entscheidungen
 * - 2. Bewertung
 * ========================================================================== */

/* Der äußere Container ist nur noch Gruppierung, kein eigenes Accordion. */
html.coastal-ui .capture-experience-enabled
> .capture-primary-section.form-section[data-capture-container="1"]
> summary {
  pointer-events: none !important;
  user-select: none !important;
}

/* Gemeinsame Card-Grundform der drei Unteraccordions. */
html.coastal-ui .capture-experience-enabled .capture-primary-accordion {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--capture-line) !important;
  border-radius: 24px !important;
  background: var(--capture-soft) !important;
  box-shadow: 0 12px 30px rgba(53,45,31,.055) !important;
}

/* Alte Einzelregeln dürfen dem neuen Accordion keine Innenabstände geben. */
html.coastal-ui .capture-experience-enabled .capture-label-panel.capture-primary-accordion,
html.coastal-ui .capture-experience-enabled .capture-quick-data.capture-primary-accordion,
html.coastal-ui .capture-experience-enabled .capture-primary-axis-editor.capture-primary-accordion {
  padding: 0 !important;
}

/* Summary/Schalter einheitlich. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion > summary,
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion-summary {
  list-style: none !important;
  position: relative !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 17px 58px 17px 20px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--capture-ink) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: ui-serif, Georgia, "Times New Roman", serif !important;
  font-size: clamp(18px, 2.5vw, 21px) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  user-select: none !important;
}

html.coastal-ui .capture-experience-enabled
.capture-primary-accordion > summary::-webkit-details-marker {
  display: none !important;
}

/* Einheitlicher runder Pfeil wie bei den übrigen Form-Accordions. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion > summary::after {
  content: "⌄" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(185,138,47,.28) !important;
  border-radius: 50% !important;
  background: rgba(185,138,47,.10) !important;
  color: var(--capture-gold-dark) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

html.coastal-ui .capture-experience-enabled
.capture-primary-accordion[open] > summary {
  border-bottom: 1px solid var(--capture-line) !important;
}

html.coastal-ui .capture-experience-enabled
.capture-primary-accordion[open] > summary::after {
  content: "⌃" !important;
}

/* Inhalt erscheint nur im geöffneten Zustand – native details-Semantik. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion-body,
html.coastal-ui .capture-experience-enabled
.capture-primary-axis-editor .wine-axis-editor-content {
  padding: 18px !important;
}

/* Intro-Texte gehören in den aufgeklappten Inhalt, nicht in den Summary-Kopf. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion-body > .capture-panel-copy {
  margin: 0 0 14px !important;
}

html.coastal-ui .capture-experience-enabled
.capture-label-panel-body {
  display: grid !important;
  gap: 14px !important;
}

html.coastal-ui .capture-experience-enabled
.capture-quick-data-body .capture-quick-data-grid {
  margin-top: 0 !important;
}

/* Geschmack: bisherige Regel "cursor: default" und 0-Padding überschreiben. */
html.coastal-ui .capture-experience-enabled
.capture-primary-axis-editor.capture-primary-accordion > summary {
  min-height: 58px !important;
  padding: 17px 58px 17px 20px !important;
  cursor: pointer !important;
}

html.coastal-ui .capture-experience-enabled
.capture-primary-axis-editor.capture-primary-accordion
.wine-axis-editor-content {
  padding: 18px !important;
}

/* 2. Bewertung ist bereits ein echtes form-section-details.
   Nur optisch an dieselbe Sprache angleichen. */
html.coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section.card {
  overflow: hidden !important;
}

html.coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section > summary {
  cursor: pointer !important;
}

/* Dark Mode: Pfeile/Trennlinien bleiben dunkel integriert. */
html[data-theme="dark"].coastal-ui
.capture-experience-enabled
.capture-primary-accordion > summary {
  color: #fffaf1 !important;
}

html[data-theme="dark"].coastal-ui
.capture-experience-enabled
.capture-primary-accordion > summary::after {
  color: #e0bd76 !important;
  border-color: rgba(224,189,118,.30) !important;
  background: rgba(224,189,118,.10) !important;
}

html[data-theme="dark"].coastal-ui
.capture-experience-enabled
.capture-primary-accordion[open] > summary {
  border-bottom-color: rgba(211,222,224,.15) !important;
}

@media (max-width: 720px) {
  html.coastal-ui .capture-experience-enabled .capture-primary-accordion {
    border-radius: 20px !important;
  }

  html.coastal-ui .capture-experience-enabled
  .capture-primary-accordion > summary,
  html.coastal-ui .capture-experience-enabled
  .capture-primary-accordion-summary,
  html.coastal-ui .capture-experience-enabled
  .capture-primary-axis-editor.capture-primary-accordion > summary {
    min-height: 56px !important;
    padding: 16px 54px 16px 16px !important;
    font-size: 18px !important;
  }

  html.coastal-ui .capture-experience-enabled
  .capture-primary-accordion > summary::after {
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
  }

  html.coastal-ui .capture-experience-enabled
  .capture-primary-accordion-body,
  html.coastal-ui .capture-experience-enabled
  .capture-primary-axis-editor .wine-axis-editor-content {
    padding: 15px !important;
  }
}

/* ========================================================================== 
 * Hotfix 8.4.9 Revision 9.4 – Capture Accordion Alignment
 *
 * Einheitliche Flucht und Outline fuer:
 * - Etikett & Wein finden
 * - Erkannte Weindaten
 * - Geschmack in 7 Entscheidungen
 * - 2. Bewertung
 * ========================================================================== */

html.coastal-ui .capture-experience-enabled {
  --capture-accordion-outline: rgba(42, 53, 57, 0.14);
  --capture-accordion-radius: 24px;
}

html[data-theme="dark"].coastal-ui .capture-experience-enabled {
  --capture-accordion-outline: rgba(211, 222, 224, 0.17);
}

/* Die Gruppierung von „1. Wein erfassen“ und die direkte Bewertungssektion
   nutzen exakt dieselbe verfügbare Formularbreite. */
html.coastal-ui .capture-experience-enabled
> .capture-primary-section.form-section[data-capture-container="1"],
html.coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section.card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keine versteckten Grid-/Content-Abstände dürfen die Unterkarten verbreitern. */
html.coastal-ui .capture-experience-enabled
> .capture-primary-section.form-section[data-capture-container="1"]
> .form-section-content,
html.coastal-ui .capture-experience-enabled
> .capture-primary-section.form-section[data-capture-container="1"]
> .form-section-content
> .form-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Alle drei Unteraccordions exakt innerhalb derselben Box berechnen.
   box-sizing:border-box verhindert das bisherige +Border-Übermaß bei width:100%. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 1px solid var(--capture-accordion-outline) !important;
  border-radius: var(--capture-accordion-radius) !important;
}

/* „2. Bewertung“ bekommt dieselbe Außenkontur wie die drei Unteraccordions. */
html.coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section.card {
  border: 1px solid var(--capture-accordion-outline) !important;
  border-radius: var(--capture-accordion-radius) !important;
  background: var(--capture-soft) !important;
  box-shadow: 0 12px 30px rgba(53, 45, 31, 0.055) !important;
}

/* Auch offene Summary-Trennlinien verwenden dieselbe Farbfamilie. */
html.coastal-ui .capture-experience-enabled
.capture-primary-accordion[open] > summary,
html.coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section[open] > summary {
  border-bottom-color: var(--capture-accordion-outline) !important;
}

html[data-theme="dark"].coastal-ui .capture-experience-enabled
> .capture-score-accordion.form-section.card {
  background: linear-gradient(155deg, rgba(16, 44, 57, 0.98), rgba(8, 29, 40, 0.98)) !important;
  border-color: var(--capture-accordion-outline) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20) !important;
}

@media (max-width: 720px) {
  html.coastal-ui .capture-experience-enabled {
    --capture-accordion-radius: 20px;
  }
}


/* ==========================================================================
 * Hotfix 8.4.9 Revision 9.11 – Edit visuell wie Erfassen
 *
 * Die Edit-Seite verwendet denselben Hero, dieselbe Contentbreite,
 * denselben Modusumschalter und dieselbe Accordion-Geometrie wie Erfassen.
 * Nur der notwendige Datensatzstatus bleibt als kompakte Zusatzzeile erhalten.
 * ========================================================================== */

html.coastal-ui body.coastal-edit-page #weinForm {
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html.coastal-ui body.coastal-edit-page .edit-record-meta {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--capture-accordion-outline, var(--capture-line)) !important;
  border-radius: 18px !important;
  background: var(--capture-soft) !important;
  box-shadow: none !important;
}

html.coastal-ui body.coastal-edit-page
.capture-mode-switch + .edit-record-meta {
  margin-top: -1px !important;
}

/* Keine alten Edit-Hero-Sonderregeln mehr erforderlich. */
html.coastal-ui body.coastal-edit-page
.capture-start-reference-hero.wr6-master-page-hero {
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

@media (max-width: 720px) {
  html.coastal-ui body.coastal-edit-page .edit-record-meta {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
}


/* Hotfix 8.4.9 Revision 9.12:
   Edit bleibt geometrisch identisch zu Erfassen (1120px Contentbreite). */
html.coastal-ui body.coastal-edit-page #weinForm,
html.coastal-ui body.coastal-edit-page
.capture-start-reference-hero.wr6-master-page-hero {
  max-width: 1120px !important;
  max-inline-size: 1120px !important;
}