/*
 * Fahrschul-App – "Termin anfragen" (appointment request) and the contact dock.
 *
 * The appointment button is the LAST child of the contact dock (<aside class="dock">), so both form ONE
 * floating group with the contact actions first (V5.7.3: Phone, WhatsApp, E-mail - then the button):
 *   desktop (>= 1200px)  bottom right: the round phone / WhatsApp / e-mail rail, [Termin anfragen] below it
 *   tablet  (700-1199px) centred: the dock pill, the button directly below it
 *   phone   (< 700px)    Call / WhatsApp / E-mail bar, the full-width button directly below it
 * The header keeps its own "Termin anfragen"; the hero has none. Every button only points at the existing
 * enquiry form (#anfrage). Soft gold pulse on a pseudo-element (text and button never move); none with
 * prefers-reduced-motion. Base dock rules: style.css / site-v565.css – only the grouping is changed here.
 */

.btn--appt .icon { width: 1.05rem; height: 1.05rem; }

/* ---------------------------------------------------------------- the appointment button */

:root .dock a.appt-cta {
  --appt-bg: var(--c-terra-500, #d99a2b);
  --appt-fg: var(--accent-on, #0b0f17);
  --appt-glow: var(--v5-glow, 255 196 20);
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  width: auto;
  height: auto;
  transform: none;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--c-terra-300, #f0c46a) 60%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-terra-400, #e8b04a), var(--appt-bg) 55%, var(--c-terra-600, #b97c14));
  color: var(--appt-fg);
  font-weight: 750;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 14px 30px -14px rgb(0 0 0 / 0.7), 0 0 22px -8px rgb(var(--appt-glow) / 0.55);
  transition: opacity 0.25s ease, visibility 0s linear, filter 0.2s ease, box-shadow 0.2s ease;
}
:root[dir="rtl"] .dock a.appt-cta { padding: 0.55rem 0.6rem 0.55rem 1rem; }
html[data-theme="4"] .dock a.appt-cta, html[data-theme="5"] .dock a.appt-cta, html[data-theme="9"] .dock a.appt-cta, html[data-theme="10"] .dock a.appt-cta { text-shadow: 0 1px 0 rgb(0 0 0 / 0.25); }
:root .dock a.appt-cta:hover, :root .dock a.appt-cta:active { color: var(--appt-fg); filter: brightness(1.06) saturate(1.05); transform: none; background: linear-gradient(180deg, var(--c-terra-400, #e8b04a), var(--appt-bg) 55%, var(--c-terra-600, #b97c14)); border-color: color-mix(in srgb, var(--c-terra-300, #f0c46a) 60%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 16px 34px -14px rgb(0 0 0 / 0.75), 0 0 30px -6px rgb(var(--appt-glow) / 0.7); }
:root .dock a.appt-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgb(11 15 23 / 0.85), 0 14px 30px -14px rgb(0 0 0 / 0.7); }
/* the dock paints its round-action icons gold: the button's own icons stay in the button's text colour */
:root .dock a.appt-cta .icon { color: var(--appt-fg); }
.appt-cta__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: rgb(255 255 255 / 0.32); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.appt-cta__icon .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.appt-cta__label { flex: 1 1 auto; }
.appt-cta__arrow { display: grid; place-items: center; flex: 0 0 auto; margin-inline-start: 0.35rem; }
.appt-cta__arrow .icon { width: 1.05rem; height: 1.05rem; stroke-width: 2.1; }
/* RTL: style.css already mirrors every #arrow-right icon */

/* premium soft pulse: a ring outside the button grows and fades (~2.8 s) */
.appt-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(var(--appt-glow) / 0.55);
  animation: appt-cta-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes appt-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--appt-glow) / 0.5), 0 0 12px 0 rgb(var(--appt-glow) / 0.25); }
  55% { box-shadow: 0 0 0 11px rgb(var(--appt-glow) / 0), 0 0 26px 4px rgb(var(--appt-glow) / 0.4); }
  100% { box-shadow: 0 0 0 0 rgb(var(--appt-glow) / 0), 0 0 12px 0 rgb(var(--appt-glow) / 0.2); }
}

/* the enquiry form is on screen: the button calms down and steps aside (it comes back on scroll) */
html.appt-form-visible .appt-cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
html.appt-form-visible .appt-cta::before { animation: none; }

/* ---------------------------------------------------------------- one group: contact actions + button */

/*
 * V5.7.3 order (in the markup and on screen): Phone, WhatsApp, E-mail - and the appointment
 * button BELOW them.
 *   desktop (>= 1200px)  bottom corner: the three round actions stacked, the button underneath
 *   tablet  (700-1199px) centred: the contact pill, the button underneath
 *   phone   (< 700px)    one solid sheet at the bottom: Call | WhatsApp | E-mail, then the button
 */
.dock { display: flex; flex-direction: column; }
.dock li .icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.75; }
.dock a.dock__action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgb(11 15 23 / 0.85); }

/* desktop: compact vertical group in the bottom corner */
@media (min-width: 1200px) {
  .dock { align-items: flex-end; gap: 0.75rem; }
  .dock ul { justify-items: end; }
  :root .dock a.appt-cta { min-height: 3.1rem; }
}

/* below 1200px the bar / pill look belongs to the list, the button sits underneath it */
@media (max-width: 1199px) {
  .dock, html[data-theme] .dock { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock { gap: 0.55rem; }
  /* opaque: page text must never shine through the contact bar */
  .dock ul { position: relative; background: rgb(42 44 47); }
  html[data-theme] .dock ul { background: rgb(var(--pv-dark-rgb)); }
  :root .dock a.appt-cta { min-height: 3.35rem; font-size: 1.02rem; }
  .dock li a .icon { color: var(--c-terra-300); }
  html[data-theme] .dock li a .icon { color: var(--c-terra-400); }
  /* the enquiry form is on screen: the button leaves the group (no empty gap under the contact bar) */
  html.appt-form-visible .dock a.appt-cta { display: none; }
  /* nothing at the end of the page may hide behind the contact bar + button */
  html { scroll-padding-bottom: calc(var(--dock-h) + var(--appt-h, 0px) + 1rem); }
  body { padding-bottom: calc(var(--dock-h) + var(--appt-h, 0px)); }
}

/* phones: one solid bottom sheet - the contact bar, then the full-width button (safe area below it) */
@media (max-width: 699px) {
  :root { --appt-h: 4.35rem; }
  .dock, html[data-theme] .dock { gap: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgb(42 44 47); border-top: 1px solid rgb(247 243 237 / 0.1); }
  html[data-theme] .dock { background: rgb(var(--pv-dark-rgb)); border-top: 1px solid color-mix(in srgb, var(--c-terra-500) 35%, transparent); }
  .dock ul, html[data-theme] .dock ul { background: none; }
  .dock a.dock__action { height: 56px; }
  :root .dock a.appt-cta { margin: 0.15rem 0.75rem 0.65rem; }
  html.appt-form-visible { --appt-h: 0px; }
}

/* tablets: centred group, the contact pill and the button underneath */
@media (min-width: 700px) and (max-width: 1199px) {
  :root { --appt-h: 3.9rem; }
  .dock { overflow: visible; border-radius: 0; }
  .dock ul {
    overflow: hidden;
    border: 1px solid rgb(247 243 237 / 0.14);
    border-radius: 999px;
    box-shadow: 0 16px 36px -18px rgb(10 10 10 / 0.8);
  }
  html[data-theme] .dock ul { border-color: color-mix(in srgb, var(--c-terra-500) 40%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .appt-cta, .appt-cta::before { animation: none !important; transition: none !important; }
  .dock, .dock a, .dock__label { transition: none !important; }
}

@media print {
  .appt-cta { display: none !important; }
}

/* V5.7.4: on desktop the contact group (contact buttons + appointment button) is much wider than
   the side rail the footer was laid out for. The legal links at the very end of the page - above
   all "Cookie settings", the way to change a consent later - were covered by it on common laptop
   widths. The last footer row now keeps clear of the group wherever it sits in the corner; on wide
   screens, where the group is outside the content column anyway, nothing changes. */
@media (min-width: 1200px) {
  .footer-bottom,
  [dir="rtl"] .footer-bottom {
    padding-right: 0;
    padding-left: 0;
    padding-inline-end: clamp(0px, calc(17.5rem - (100vw - 100%) / 2), 17.5rem);
  }
}