/* =========================================================
   COMPONENTS.CSS — Genusswerte Bonn
   Buttons · Cards · Steps · Forms · Badges · Nav-Cards
   ========================================================= */

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.035em;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary: dark green fill */
.btn--primary {
  background-color: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
  box-shadow: 0 4px 16px rgba(45, 74, 62, 0.3);
}

/* Secondary: gold border, green text */
.btn--secondary {
  background-color: transparent;
  color: var(--color-green);
  border-color: var(--color-gold);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-green-dark);
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.3);
}

/* Ghost: white border, white text (for hero on dark bg) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

/* WhatsApp: green WhatsApp style */
.btn--whatsapp {
  background-color: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
  width: 100%;
}

.btn--whatsapp::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
  box-shadow: 0 4px 16px rgba(45, 74, 62, 0.3);
}

/* ---------------------------------------------------------
   Cards — Base
   --------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(45, 74, 62, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: 0 6px 28px rgba(45, 74, 62, 0.14), 0 2px 6px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card__image img {
  transform: scale(1.04);
}

/* Subtle gradient overlay at the bottom of card images */
.card__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(26, 18, 8, 0.2), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Gradient placeholder shown when img is absent/broken */
.card__image--kaese-wein    { background: linear-gradient(135deg, #C8A96D 0%, #8B6B3D 100%); }
.card__image--apero         { background: linear-gradient(135deg, #6B8C5A 0%, #3D5C2E 100%); }
.card__image--champagner    { background: linear-gradient(135deg, #DFC08A 0%, #C9A96E 50%, #A07840 100%); }
.card__image--craftbeer     { background: linear-gradient(135deg, #C8943A 0%, #8B5E1A 100%); }
.card__image--gin           { background: linear-gradient(135deg, #5A8C72 0%, #2D4A3E 100%); }
.card__image--alkoholfrei   { background: linear-gradient(135deg, #7AABB5 0%, #3D7A8A 100%); }
.card__image--wertgutschein { background: linear-gradient(135deg, #2D4A3E 0%, #C9A96E 100%); }
.card__image--klassiker     { background: linear-gradient(135deg, #9B7B5A 0%, #5C3D1E 100%); }
.card__image--bella-italia  { background: linear-gradient(135deg, #C8524A 0%, #7A2020 100%); }
.card__image--aperitivo     { background: linear-gradient(135deg, #D4703A 0%, #8B3A10 100%); }
.card__image--bonn          { background: linear-gradient(135deg, #5A7A9B 0%, #2D4A6B 100%); }
.card__image--date-night    { background: linear-gradient(135deg, #9B3A5A 0%, #5C1A2E 100%); }
.card__image--feierabend    { background: linear-gradient(135deg, #C8A060 0%, #7A5A20 100%); }

.card__image-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.6;
  pointer-events: none;
}

.card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.card__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.card__title {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin: 0;
}

.card__description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

/* Variant pills row */
.card__variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.variant-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  cursor: default;
}

/* Price line */
.card__price {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-green);
  font-family: var(--font-sans);
}

/* Card action area */
.card__action {
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------
   Intro Nav — Editorial Linkliste (rechte Spalte)
   --------------------------------------------------------- */
.intro-nav {
  border-bottom: 1px solid var(--color-border);
}

.intro-nav__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: border-top-color var(--transition-fast);
}

.intro-nav__item:hover,
.intro-nav__item:focus-visible {
  border-top-color: var(--color-gold);
}

.intro-nav__label {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-gold);
  opacity: 0.50;
  line-height: 1;
}

.intro-nav__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.intro-nav__item:hover .intro-nav__title {
  color: var(--color-green);
}

.intro-nav__sub {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.intro-nav__link {
  grid-column: 2;
  grid-row: 3;
  font-size: 0.8125rem;
  color: var(--color-gold);
  font-weight: 500;
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------
   Steps (How it works)
   --------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: calc(16.66% + var(--space-4));
  right: calc(16.66% + var(--space-4));
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), var(--color-gold-light), var(--color-gold));
  opacity: 0.4;
  pointer-events: none;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.step__number {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(45, 74, 62, 0.25);
}

.step__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.step__body {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-green);
  letter-spacing: 0.01em;
}

.form-label .required-mark {
  color: #C0392B;
  margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-light);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.12);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.form-error {
  font-size: 0.8125rem;
  color: #C0392B;
  font-weight: 500;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.form-grid--dates {
  grid-template-columns: repeat(3, 1fr);
}

/* Privacy note */
.form-privacy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.form-privacy a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-privacy a:hover {
  color: var(--color-green-light);
}

/* Success message */
.form-success {
  display: none;
  padding: var(--space-8);
  background-color: #F0F7F4;
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-card);
  text-align: center;
  gap: var(--space-4);
  flex-direction: column;
  align-items: center;
}

.form-success.is-visible {
  display: flex;
}

.form-success__icon {
  font-size: 2.5rem;
}

.form-success__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-green);
}

.form-success__body {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: 50ch;
}

/* ---------------------------------------------------------
   Order note (Bestellen button feedback)
   --------------------------------------------------------- */
.order-note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background-color: #F0F7F4;
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-card);
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.6;
  text-align: center;
}

/* ---------------------------------------------------------
   Availability Note Badge
   --------------------------------------------------------- */
.availability-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: rgba(201, 169, 110, 0.1);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-green);
}

.availability-note::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Slot Cards (Terminauswahl auf gutschein-einloesen.html)
   --------------------------------------------------------- */
.slots-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.slot-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.slot-card:hover {
  border-color: var(--color-green-light);
  box-shadow: var(--shadow-card);
}

.slot-card.is-selected {
  border-color: var(--color-green);
  background-color: #F0F7F4;
  box-shadow: 0 0 0 2px rgba(45, 74, 62, 0.12);
}

.slot-card__date {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
  flex: 1;
}

.slot-card__time {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.slot-card__seats {
  font-size: 0.8125rem;
  color: var(--color-green);
  font-weight: 500;
  white-space: nowrap;
}

.slots-empty {
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.slots-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  padding: var(--space-5) 0;
}

.slots-loading::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-green);
  border-radius: 50%;
  animation: gw-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes gw-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   Voucher Info Box + Step-Elemente (Einlöse-Flow)
   --------------------------------------------------------- */
.voucher-info {
  padding: var(--space-5) var(--space-6);
  background: #F0F7F4;
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-6);
}

.voucher-info__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--color-green);
  margin-bottom: var(--space-1);
}

.voucher-info__meta {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.step-heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.step-back-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}

.step-back-btn:hover {
  color: var(--color-green);
}

/* ---------------------------------------------------------
   Hero Outline Button (gold border, weißer Text — auf dunklem Hero)
   --------------------------------------------------------- */
.btn--hero-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-gold);
}

.btn--hero-outline:hover,
.btn--hero-outline:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-green-dark);
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.35);
}

/* ---------------------------------------------------------
   Scroll-Animationen — js-animate / is-visible
   --------------------------------------------------------- */
.js-animate {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Delays für Karten-Grids (data-delay Attribut) */
.js-animate[data-delay="1"] { transition-delay: 0.08s; }
.js-animate[data-delay="2"] { transition-delay: 0.16s; }
.js-animate[data-delay="3"] { transition-delay: 0.24s; }
.js-animate[data-delay="4"] { transition-delay: 0.32s; }
.js-animate[data-delay="5"] { transition-delay: 0.40s; }
.js-animate[data-delay="6"] { transition-delay: 0.48s; }
.js-animate[data-delay="7"] { transition-delay: 0.56s; }
.js-animate[data-delay="8"] { transition-delay: 0.64s; }
.js-animate[data-delay="9"] { transition-delay: 0.72s; }

/* Mobile: kürzerer Weg, ruhigerer Lauf.
   32px Versatz sind auf einem 375px-Screen proportional weit mehr als
   auf dem Desktop — die Inhalte "sprangen" beim Scrollen sichtbar.
   Auch die gestaffelten Delays werden gekürzt: untereinander gestapelt
   erscheinen die Karten sonst spürbar nacheinander statt als Gruppe. */
@media (max-width: 768px) {
  .js-animate {
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .js-animate[data-delay="1"] { transition-delay: 0.05s; }
  .js-animate[data-delay="2"] { transition-delay: 0.10s; }
  .js-animate[data-delay="3"] { transition-delay: 0.15s; }
  .js-animate[data-delay="4"] { transition-delay: 0.20s; }
  .js-animate[data-delay="5"] { transition-delay: 0.24s; }
  .js-animate[data-delay="6"] { transition-delay: 0.28s; }
  .js-animate[data-delay="7"] { transition-delay: 0.31s; }
  .js-animate[data-delay="8"] { transition-delay: 0.34s; }
  .js-animate[data-delay="9"] { transition-delay: 0.36s; }
}

@media (prefers-reduced-motion: reduce) {
  .js-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------
   Ranken-Trenner (section-ornament)
   Nur Mobile: dort stapeln sich Bildblöcke, die auf Desktop
   nebeneinander liegen. Zwei große Fotos direkt übereinander
   wirken zusammenhanglos — die Ranke setzt eine ruhige Zäsur
   und greift die Linienführung des Logos auf.
   --------------------------------------------------------- */
.section-ornament {
  display: none;
}

@media (max-width: 768px) {
  .section-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-gold);
  }

  .section-ornament__rule {
    flex: 1 1 auto;
    max-width: 88px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201, 169, 110, 0.55));
  }

  .section-ornament__rule:last-child {
    background: linear-gradient(to left, transparent, rgba(201, 169, 110, 0.55));
  }

  .section-ornament__mark {
    flex: 0 0 auto;
    width: 46px;
    height: auto;
    opacity: 0.9;
  }
}

/* Abstände rund um den Trenner.
   Höhere Spezifität (.section.x) als die generischen Sektions-Regeln
   in layout.css, damit diese Feinjustierung dort nichts umschreiben
   muss und alles zum Ornament an einer Stelle steht. */
@media (max-width: 768px) {
  .section.tasting-teaser {
    padding-bottom: var(--space-6);
  }

  .section.about-section {
    padding-top: var(--space-4);
  }

  .section-ornament {
    margin-bottom: var(--space-10);
  }
}