/* Brüls Reservierung
 * Alle Regeln sind unter .brr gekapselt und etwas spezifischer als die Formularstile
 * des Salient-Themes, damit Theme-Updates das Formular nicht verändern. */

.brr {
  --brr-green: #3d7f55;        /* mildes Grün statt Pink (Kundenwunsch) */
  --brr-green-dark: #2f6644;
  --brr-green-soft: #e8f1e9;
  --brr-green-line: #cfe0d1;
  --brr-ink: #1f2a24;
  --brr-text: #3e4a43;
  --brr-muted: #67736c;
  --brr-line: #d9ded8;
  --brr-field: #fff;
  --brr-card: #fbfcfa;
  --brr-warn: #a3472f;
  --brr-brand: #d5007f;        /* Magenta aus dem Logo, nur als kleiner Akzent */
  --brr-head-font: "Raleway", "Open Sans", system-ui, sans-serif;
  --brr-font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  box-sizing: border-box;
  color: var(--brr-text);
  font-family: var(--brr-font);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.brr *, .brr *::before, .brr *::after { box-sizing: border-box; }
.brr [hidden] { display: none !important; }
.brr strong, .brr b { font-family: inherit; }
.brr p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; }
.brr a { color: var(--brr-green-dark) !important; text-decoration: underline; text-underline-offset: 2px; } /* Salient färbt Links je nach Zeile weiß/pink */
.brr a:hover { color: var(--brr-ink) !important; }
.brr :focus-visible { outline: 3px solid var(--brr-green); outline-offset: 2px; }
.brr .brr-tel { white-space: nowrap; font-weight: 600; }

/* ---------- Pop-up ---------- */
html.brr-locked, html.brr-locked body { overflow: hidden !important; }
dialog.brr-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  width: min(44rem, calc(100% - 1.5rem));
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: var(--brr-card);
  box-shadow: 0 30px 80px rgba(10, 20, 15, .35);
}
dialog.brr-dialog::backdrop { background: rgba(14, 24, 18, .72); }
dialog.brr-dialog[open] { animation: brr-rise .25s ease-out; }
@keyframes brr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Kopf ---------- */
.brr .brr-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--brr-green-soft);
  border-bottom: 1px solid var(--brr-green-line);
}
.brr-dialog .brr-head { position: sticky; top: 0; z-index: 2; }
.brr-inline { border: 1px solid var(--brr-line); border-radius: 16px; background: var(--brr-card); overflow: hidden; }
.brr .brr-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brr .brr-logo { display: block; width: auto; height: 52px; flex: none; }
.brr .brr-title {
  margin: 0; padding: 0;
  font: 700 1.75rem/1.15 var(--brr-head-font);
  letter-spacing: 0;
  color: var(--brr-ink);
  text-transform: none;
}
.brr .brr-sub { margin-top: .2rem; font-size: .92rem; color: #4b5f52; }
.brr .brr-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
.brr .brr-lang { display: inline-flex; background: #fff; border: 1px solid var(--brr-green-line); border-radius: 999px; padding: 3px; }
.brr .brr-lang button {
  border: 0; margin: 0; background: none; box-shadow: none;
  font: 600 .8rem/1 var(--brr-font); letter-spacing: .04em; text-transform: none;
  color: #4b5f52; padding: .5rem .6rem; border-radius: 999px; cursor: pointer; min-width: 0; height: auto;
}
.brr .brr-lang button:hover { color: var(--brr-ink); background: var(--brr-green-soft); }
.brr .brr-lang button[aria-pressed="true"] { background: var(--brr-green); color: #fff; }
.brr .brr-close {
  border: 0; margin: 0; background: none; box-shadow: none; cursor: pointer;
  width: 2.5rem; height: 2.5rem; border-radius: 8px; padding: 0;
  font: 400 1.9rem/1 var(--brr-font); color: var(--brr-ink);
}
.brr .brr-close:hover { background: rgba(31, 58, 48, .08); }

/* ---------- Formular ---------- */
.brr .brr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem; margin: 0; }
.brr .brr-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; }
.brr .brr-full { grid-column: 1 / -1; }
.brr .brr-field > label, .brr .brr-preorder legend {
  display: block; margin: 0; padding: 0;
  font: 600 .92rem/1.3 var(--brr-font); color: var(--brr-ink); text-transform: none; letter-spacing: 0;
}
.brr label span { color: inherit; } /* Salient färbt „label span“ in der Akzentfarbe */
.brr .brr-field .brr-opt { font-weight: 400; color: var(--brr-muted); }

.brr .brr-field .brr-input,
.brr .brr-preorder .brr-input {
  display: block; width: 100%; height: auto; min-height: 2.9rem; margin: 0;
  padding: .65rem .8rem;
  font: 400 16px/1.4 var(--brr-font); /* 16px verhindert Zoom auf iPhone */
  color: var(--brr-ink) !important;
  background-color: var(--brr-field) !important;
  border: 1.5px solid var(--brr-line) !important;
  border-radius: 10px !important;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.brr .brr-field select.brr-input {
  padding-right: 2.4rem;
  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' fill='none' stroke='%231f2a24' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  cursor: pointer;
}
.brr .brr-field select.brr-input:disabled { background-color: #f1f3f0 !important; color: var(--brr-muted) !important; cursor: not-allowed; }
.brr .brr-field input[type="date"].brr-input { min-width: 0; }
.brr .brr-field input[type="date"].brr-input::-webkit-date-and-time-value { text-align: left; }
.brr .brr-field .brr-input:focus,
.brr .brr-preorder .brr-input:focus { border-color: var(--brr-green) !important; outline: none; box-shadow: 0 0 0 3px rgba(61, 127, 85, .2); }
.brr .brr-input::placeholder { color: var(--brr-muted) !important; opacity: 1 !important; }
.brr .brr-preorder textarea.brr-input { min-height: 4.5rem; resize: vertical; margin-top: .7rem; }

.brr .brr-check, .brr .brr-field > label.brr-check {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: 0;
  font: 400 .95rem/1.45 var(--brr-font); color: var(--brr-text); cursor: pointer; text-transform: none;
}
.brr .brr-check > span { display: block; color: inherit; line-height: 1.45; }
.brr .brr-check input[type="checkbox"] {
  flex: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; padding: 0;
  accent-color: var(--brr-green); cursor: pointer;
  -webkit-appearance: auto; appearance: auto; position: static; opacity: 1;
}
.brr .brr-hint { font-size: .86rem; color: var(--brr-muted); }
.brr .brr-err { font-size: .86rem; font-weight: 600; color: var(--brr-warn); }
.brr .brr-err:empty { display: none; }
.brr .brr-field.is-invalid .brr-input { border-color: var(--brr-warn) !important; }

.brr .brr-cutoff {
  margin-top: -.25rem;
  padding: .6rem .8rem;
  font-size: .88rem; color: #3f5847;
  background: var(--brr-green-soft);
  border-left: 3px solid var(--brr-green);
  border-radius: 0 8px 8px 0;
}
.brr .brr-kids { justify-content: flex-end; padding-bottom: .75rem; }

/* Vorbestellung */
.brr .brr-preorder { border: 1px solid var(--brr-line); border-radius: 12px; padding: .9rem 1rem 1rem; background: #fff; }
.brr .brr-preorder legend { padding: 0 .35rem; width: auto; float: none; border: 0; }
.brr .brr-pre-hint { font-size: .86rem; color: var(--brr-muted); margin-bottom: .7rem; }
.brr .brr-picks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; }
.brr .brr-pick {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .6rem;
  min-height: 3rem; padding: .45rem .7rem;
  border: 1.5px solid var(--brr-line); border-radius: 10px; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.brr .brr-pick.is-on { border-color: var(--brr-green); background: var(--brr-green-soft); }
.brr .brr-pick .brr-check { font-weight: 500; color: var(--brr-ink); align-items: center; }
.brr .brr-pick .brr-check input[type="checkbox"] { margin-top: 0; }
.brr .brr-qty { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; color: var(--brr-muted); }
.brr .brr-preorder .brr-qty .brr-input { width: 4.2rem; min-height: 2.2rem; padding: .25rem .45rem; text-align: center; -moz-appearance: textfield; }
.brr .brr-preorder.is-invalid .brr-pick.is-bad,
.brr .brr-preorder.is-invalid .brr-input.is-bad { border-color: var(--brr-warn) !important; }
.brr .brr-preorder > .brr-err { display: block; margin-top: .5rem; }
.brr .brr-preorder > .brr-err:empty { display: none; }

/* Fuß */
.brr .brr-foot {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--brr-line);
}
.brr .brr-foot .brr-hint { flex: 1 1 18rem; }
.brr .brr-foot .brr-hint strong { color: var(--brr-ink); font-weight: 600; }

/* Buttons */
.brr .brr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; padding: 1rem 1.6rem; min-height: 0; height: auto;
  font: 700 1rem/1.1 var(--brr-font) !important; letter-spacing: .01em !important; text-transform: none; text-decoration: none;
  color: #fff !important; background: var(--brr-green);
  border: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
  transition: background-color .15s;
}
.brr .brr-btn:hover { background: var(--brr-green-dark); }
.brr .brr-btn-ghost { background: #fff; color: var(--brr-green-dark) !important; box-shadow: inset 0 0 0 1.5px var(--brr-green); padding: .7rem 1.2rem; font-size: .92rem !important; text-decoration: none !important; }
.brr .brr-btn-ghost:hover { background: var(--brr-green-soft); color: var(--brr-ink) !important; }

/* Senden-Button: groß, grün, atmet langsam ein und aus */
.brr .brr-submit { font-size: 1.1rem !important; padding: 1.1rem 2rem; animation: brr-breathe 2.8s ease-in-out infinite; }
.brr .brr-submit:hover, .brr .brr-submit:focus-visible { animation-play-state: paused; }
@keyframes brr-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(61, 127, 85, .4); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(61, 127, 85, 0); }
}

/* ---------- Nach dem Absenden ---------- */
.brr .brr-done { padding: 1.8rem 1.5rem 1.6rem; }
.brr .brr-done-title { margin: 0 0 1rem; padding: 0; font: 700 1.6rem/1.2 var(--brr-head-font); color: var(--brr-ink); text-transform: none; letter-spacing: 0; }
.brr .brr-done-title:focus { outline: none; }
.brr .brr-send-alert {
  display: flex; flex-direction: column; gap: .35rem;
  margin: 0 0 1.2rem; padding: 1.2rem 1.3rem;
  color: #fff; background: var(--brr-green);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(61, 127, 85, .28);
  animation: brr-breathe-soft 2.8s ease-in-out infinite;
}
.brr .brr-send-alert strong { font: 700 1.5rem/1.2 var(--brr-font); }
.brr .brr-send-alert span { font-size: .98rem; color: #eaf4ec; }
@keyframes brr-breathe-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.brr .brr-confirm {
  padding: .8rem 1rem; margin-bottom: 1.2rem;
  font-weight: 600; color: var(--brr-ink);
  background: var(--brr-green-soft); border-left: 4px solid var(--brr-green); border-radius: 0 10px 10px 0;
}
.brr .brr-summary { margin: 0 0 1.2rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--brr-line); border-radius: 12px; }
.brr .brr-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; margin: 0; }
.brr .brr-summary dt { margin: 0; color: var(--brr-muted); font-weight: 400; }
.brr .brr-summary dd { margin: 0; color: var(--brr-ink); font-weight: 600; overflow-wrap: anywhere; }
.brr .brr-help { margin-bottom: 1.4rem; font-size: .92rem; }
.brr .brr-help strong { color: var(--brr-ink); }
.brr .brr-help-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .6rem; }

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  dialog.brr-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
  .brr .brr-head { flex-wrap: wrap; padding: 1rem; gap: .75rem; }
  .brr-dialog .brr-head { position: static; }
  .brr .brr-tools { order: -1; width: 100%; justify-content: space-between; }
  .brr .brr-logo { height: 40px; }
  .brr .brr-title { font-size: 1.45rem; }
  .brr .brr-form { grid-template-columns: 1fr; padding: 1rem; }
  .brr .brr-picks { grid-template-columns: 1fr; }
  .brr .brr-kids { padding-bottom: 0; }
  .brr .brr-foot { flex-direction: column; align-items: stretch; }
  .brr .brr-submit { width: 100%; }
  .brr .brr-done { padding: 1.4rem 1rem; }
  .brr .brr-send-alert strong { font-size: 1.3rem; }
  .brr .brr-finish { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.brr-dialog[open], .brr .brr-submit, .brr .brr-send-alert { animation: none; }
}