/* ============================================================
   Cosy Fox — Components
   Buttons, cards, menu items (dotted-leader), tags, dividers.
   ============================================================ */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-espresso);
  color: var(--color-creme);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-soft);
}
.btn:hover {
  background: var(--color-mustard);
  color: var(--color-espresso);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(0); }

.btn__arrow {
  width: 1em; height: 1em;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--color-espresso);
  border: 1px solid var(--color-line-strong);
}
.btn--ghost:hover {
  background: var(--color-espresso);
  color: var(--color-creme);
  border-color: var(--color-espresso);
}

.btn--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0;
  background: transparent;
  color: var(--color-espresso);
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}
.btn--inline:hover {
  background: transparent;
  color: var(--color-espresso);
  border-bottom-color: var(--color-mustard);
  transform: none;
  box-shadow: none;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface-sage);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-soft);
}
.card--paper { background: var(--color-paper); }
.card--linked:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-espresso-soft);
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  font-weight: 500;
  line-height: var(--lh-tight);
}
.card__body { color: var(--color-text-soft); }
.card__media {
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card--linked:hover .card__media img { transform: scale(1.03); }

/* ---------- Menu items (dotted leader pattern) ---------- */

.menu-list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-2xs);
}

.menu-item__main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs);
  align-items: baseline;
}

.menu-item__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.menu-item__leader {
  flex: 1;
  border-bottom: 1.5px dotted var(--hairline-accent);
  margin: 0 var(--space-2xs);
  transform: translateY(-4px);
  min-width: 1ch;
}

.menu-item__price {
  font-weight: 300;
  color: var(--color-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-item__desc {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  max-width: 56ch;
  margin-top: var(--space-3xs);
}

.menu-item--special .menu-item__name { color: var(--color-text); }
.menu-item--special .menu-item__name::before {
  content: "✦";
  color: var(--color-mustard);
  margin-right: 0.4em;
  font-size: 0.8em;
}

/* True dotted-leader layout (flexbox approach for tighter look) */
.menu-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
}
.menu-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.menu-row__dots {
  flex: 1;
  border-bottom: 1.5px dotted var(--hairline-accent);
  margin-bottom: 6px;
  min-width: 2ch;
}
.menu-row__price {
  font-weight: 300;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---------- Tags / pills ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 2px 0.6em;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--color-sand);
  color: var(--color-espresso);
}
.tag--accent { background: var(--color-mustard); color: var(--color-espresso); }
.tag--soft   { background: transparent; border: 1px solid var(--color-line-strong); color: var(--color-text-soft); }
.tag--sage   { background: var(--color-sage-soft); color: var(--color-espresso); }

/* ---------- Divider ---------- */

.divider {
  height: 1px;
  background: var(--color-line);
  margin-block: var(--space-xl);
  border: 0;
}

/* ---------- Quote / pull-quote ---------- */

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.5vw + 1rem, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-espresso);
  max-width: 26ch;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-mustard);
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-espresso-soft);
}

/* ---------- Media frame ---------- */

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-sand-soft);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame--portrait { aspect-ratio: 3 / 4; }
.media-frame--landscape { aspect-ratio: 4 / 3; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.media-frame--cinema { aspect-ratio: 21 / 9; }
.media-frame--square { aspect-ratio: 1 / 1; }

/* ---------- Global photo overlay (Christian-Review) ----------
   2nd beige (#D8C8B8) overlay at 40 % Deckkraft auf JEDEM Bild.
   Reine Solid-Color-Overlay (kein blend-mode) — sichtbar und
   konsistent über alle Browser und Foto-Tonalitäten hinweg.
   ------------------------------------------------------------- */
.photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.photo-frame > img,
.photo-frame > picture > img,
.photo-frame > picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-photo);
  pointer-events: none;
  z-index: 2;
}

/* When .photo-frame wraps a component that already has its own styling
   (e.g. hero__media, atmosphere__item), inherit border-radius from parent. */
.photo-frame { border-radius: inherit; }
/* Note: per Christian (Jun 2026) the overlay is applied on EVERY photo —
   no opt-out. Removing .photo-frame--unveiled would be the place if you
   ever need to escape it again. */

/* ---------- Sage-Veil overlay (Christian-Review) ----------
   Linear-gradient von 100% Sage zu transparent — Text sitzt auf dem
   100% Bereich, Foto scheint durch ab ca. 60% durch. Vier Richtungs-
   Varianten: left / right / bottom / top.

   Markup:
     <figure class="photo-veil photo-veil--left">
       <img src="…" alt="…">
       <figcaption>
         <span class="photo-veil__kicker">…</span>
         <h3 class="photo-veil__title">…</h3>
         <p class="photo-veil__body">…</p>
       </figcaption>
     </figure>
   ------------------------------------------------------------- */
.photo-veil {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: block;
}
.photo-veil > img,
.photo-veil > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-veil > figcaption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  color: var(--text-primary, var(--color-espresso));
}

/* Verlauf-Varianten */
.photo-veil--left > figcaption {
  background: linear-gradient(
    to right,
    var(--color-sage) 0%,
    var(--color-sage) 40%,
    color-mix(in srgb, var(--color-sage) 60%, transparent) 65%,
    transparent 90%
  );
  text-align: left;
  align-items: flex-start;
}
.photo-veil--right > figcaption {
  background: linear-gradient(
    to left,
    var(--color-sage) 0%,
    var(--color-sage) 40%,
    color-mix(in srgb, var(--color-sage) 60%, transparent) 65%,
    transparent 90%
  );
  text-align: right;
  align-items: flex-end;
}
.photo-veil--bottom > figcaption {
  background: linear-gradient(
    to top,
    var(--color-sage) 0%,
    var(--color-sage) 30%,
    color-mix(in srgb, var(--color-sage) 60%, transparent) 55%,
    transparent 80%
  );
}
.photo-veil--top > figcaption {
  background: linear-gradient(
    to bottom,
    var(--color-sage) 0%,
    var(--color-sage) 30%,
    color-mix(in srgb, var(--color-sage) 60%, transparent) 55%,
    transparent 80%
  );
  justify-content: flex-start;
}

.photo-veil__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xsmall);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-primary, var(--color-espresso));
  opacity: 0.85;
}
.photo-veil__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-primary, var(--color-espresso));
  margin: 0;
  text-wrap: balance;
  max-width: 24ch;
}
.photo-veil__body {
  font-size: var(--fs-body);
  color: var(--text-primary, var(--color-espresso));
  line-height: 1.5;
  margin: 0;
  max-width: 32ch;
}

/* ============================================================
   Picker — Mini Reservation Picker (Home Hero + /reservierung.html)
   Wiederverwendbare Editorial-Komponente:
   - Date-Chips (radio group)
   - Personen-Stepper
   - Time-Chips (radio group)
   - Submit-Pill
   ============================================================ */

.picker {
  margin-top: var(--space-xs);
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
}

.picker__fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--space-sm);
}
.picker__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-xsmall);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  padding: 0;
}

.picker__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-sm);
  align-items: center;
}
@media (max-width: 520px) {
  .picker__row { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

.picker__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
}

.picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Each chip is a real <label> wrapping an <input type="radio"> */
.picker__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.picker__chip input { position: absolute; opacity: 0; pointer-events: none; }
.picker__chip:hover { border-color: var(--accent); }
.picker__chip:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.picker__chip:has(input:checked) {
  background: var(--text-primary);
  color: var(--surface-base);
  border-color: var(--text-primary);
}

.picker__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.picker__step {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.picker__step:hover { border-color: var(--accent); }
.picker__step:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.picker__guests {
  min-width: 2.5ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.picker__submit {
  margin-top: var(--space-2xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--surface-base);
  background: var(--text-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}
.picker__submit:hover { background: var(--accent); color: var(--text-primary); }
.picker__submit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Picker headline variant — used on /reservierung.html where the
   picker is the primary UI element (not just a hero sub-element). */
.picker--prominent {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-width: 1.5px;
}
.picker--prominent .picker__legend { font-size: var(--fs-small); }
.picker--prominent .picker__submit { min-height: 56px; font-size: 1.125rem; }

/* ============================================================
   Static Map — Google Maps Static API image wrapped in a link
   (rendered by bindMap() when site.maps.google_maps_api_key is set)
   ============================================================ */
.map-static {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.map-static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.map-static:hover img { transform: scale(1.02); }
.map-static__pin {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--text-primary, var(--color-espresso));
  background: var(--surface-base, var(--color-creme));
  border: 1.5px solid var(--accent, var(--color-mustard));
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.map-static:hover .map-static__pin { transform: translateX(3px); }
.map-static:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ============================================================
   Map consent placeholder — shown until the visitor accepts
   external embeds (DSGVO: no IP transfer to Google before consent).
   ============================================================ */
.map-consent {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
  background: var(--surface-sage, #EFF1EB);
  color: var(--text-primary, var(--color-espresso));
}
.map-consent__text {
  max-width: 38ch;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted, var(--color-text-soft));
  line-height: var(--lh-relaxed);
}
.map-consent__btn {
  min-height: 48px;
  padding: 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--surface-base, var(--color-creme));
  background: var(--text-primary, var(--color-espresso));
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.map-consent__btn:hover { background: var(--accent, var(--color-mustard)); color: var(--text-primary, var(--color-espresso)); }
.map-consent__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.map-consent__link {
  font-size: var(--fs-xsmall);
  color: var(--text-muted, var(--color-text-soft));
  border-bottom: 1px solid var(--hairline-accent, var(--color-mustard));
}

/* ============================================================
   Cookie-Consent banner — bottom bar, warm CI, kein Dark-Overlay
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal, 1000);
  padding: var(--space-sm) var(--container-pad) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--surface-elevated, var(--color-paper));
  border-top: 1.5px solid var(--hairline-accent, var(--color-mustard));
  box-shadow: 0 -8px 32px rgba(58, 48, 44, 0.12);
  transform: translateY(110%);
  transition: transform var(--dur-base, 320ms) var(--ease-soft);
}
.cookie-banner[data-visible="true"] { transform: translateY(0); }

.cookie-banner__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-base, 1.6);
  color: var(--text-primary, var(--color-espresso));
}
.cookie-banner__link {
  color: var(--text-primary, var(--color-espresso));
  border-bottom: 1px solid var(--hairline-accent, var(--color-mustard));
  white-space: nowrap;
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-2xs);
  flex-shrink: 0;
}
.cookie-banner__btn {
  min-height: 44px;
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--text-primary, var(--color-espresso));
  border: 1px solid var(--hairline-strong, var(--color-line-strong));
}
.cookie-banner__btn--ghost:hover { border-color: var(--text-primary, var(--color-espresso)); }
.cookie-banner__btn--primary {
  background: var(--text-primary, var(--color-espresso));
  color: var(--surface-base, var(--color-creme));
}
.cookie-banner__btn--primary:hover { background: var(--accent, var(--color-mustard)); color: var(--text-primary, var(--color-espresso)); }
.cookie-banner__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}