/* ============================================================
   Gesetzlicher Widerrufsbutton (§ 312k BGB-E)
   Optik + Hover kommen aus der globalen .btn.complement-Klasse (05-buttons.css) —
   hier nur das Drumherum: fixe Positionierung (floating) bzw. Abstand/Textfarbe
   (footer) sowie die Widerrufsseite (#withdrawal).
   ============================================================ */

/* --- Floating-Variante: .btn.complement liefert Look/Hover, hier nur Position --- */
#withdrawal-btn {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 901; /* ueber Cookie-/Scroll-Buttons (z-index 900) */
  min-height: 2.75rem; /* gleiche Hoehe wie der runde Cookie-Button → buendig daneben */
  box-sizing: border-box;
}

/* Erst wenn der Cookie-Button SICHTBAR ist (.visible, von JS beim Scrollen gesetzt)
   ruecken wir rechts daneben. Solange er ausgeblendet/inaktiv ist, bleibt der
   Button in der Ecke — sonst "haengt" er ohne Bezugselement in der Luft. */
body:has(#cookie-btn.visible) #withdrawal-btn {
  left: calc(var(--space-5) + 2.75rem + var(--space-3));
}

/* Mobile (<45rem): Cookie-Button ist per Kernel ausgeblendet (04-layout.css), bleibt
   aber im DOM → Offset zuruecksetzen, damit der Button in der Ecke sitzt. */
@media (max-width: 44.999rem) {
  body:has(#cookie-btn.visible) #withdrawal-btn {
    left: var(--space-5);
  }
}

/* --- Footer-Variante: VOLLSTAENDIG eigenstaendig gestylt (nicht auf .btn verlassen).
   Gruende: (a) #footer a hat hoehere Spezifitaet als .btn (Farbe/Transition wuerden
   sonst gewinnen → Ruckeln); (b) die HTML-Klassen kommen aus PHP — bei stale OPcache
   kann "btn complement" fehlen, dann darf der Button trotzdem gefuellt + sichtbar
   sein. Gefuellte Komplementaerfarbe → klarer Kontrast auf dem dunklen Footer.
   Werte gespiegelt von 05-buttons.css (.btn + .btn.complement) inkl. Gap-Push-Hover. */
#footer .withdrawal-footer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* An den Inhalt binden statt die (auf Mobile schmale) Kontaktspalte zu füllen —
     sonst wirkt der CTA voll gestreckt mit zentriert-umbrechendem Text. fit-content
     = auto-Breite wie die übrigen Buttons; max-width kappt bei sehr schmalen Screens. */
  width: fit-content;
  max-width: 100%;
  margin-block-start: var(--space-4);
  padding: var(--btn-padding);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--button-tracking, 0);
  background: var(--color-complement, var(--color-accent));
  /* Hellere Abstufung DERSELBEN Farbe als Rand (+ Schatten) → der Button hebt sich
     GARANTIERT vom Footer ab, selbst wenn Fuellfarbe und Footer-BG beim Kunden
     identisch sind (z.B. --color-complement faellt auf --color-accent zurueck und
     der Footer nutzt denselben Ton). Weiss-auf-gesaettigter-Fuellung bleibt lesbar. */
  border: 0.0625rem solid color-mix(in srgb, var(--color-complement, var(--color-accent)) 55%, white);
  border-radius: var(--btn-radius);
  color: var(--color-text-inverse);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, gap 0.4s ease;
}

#footer .withdrawal-footer:hover {
  background: var(--color-complement-hover, var(--color-accent-hover));
  border-color: color-mix(in srgb, var(--color-complement, var(--color-accent)) 35%, white);
  color: var(--color-text-inverse);
  gap: var(--space-4);
}

/* --- Widerrufsseite (#withdrawal) --- */

/* Feld-Hint (z.B. unter "Auftrags-/Bestellnummer") gehoert zum Feld DARUEBER:
   der Flex-Gap des Fieldsets (var(--gap-block)) + die globale .hint-margin ziehen
   ihn sonst zu weit weg. Negativer margin-block-start hebt den Gap fast auf →
   Hinweis sitzt direkt unter dem Eingabefeld. Der Disclaimer-Hint NACH dem
   Formular ist kein .field-Nachbar und bleibt unveraendert. */
#withdrawal .field + .hint {
  margin-block-start: calc(var(--space-1) - var(--gap-block));
}

/* Bestätigungsschritt vor dem Absenden — Rückfrage hervorheben. */
.withdrawal-confirm p {
  margin-block-end: var(--space-2);
  font-weight: 600;
}