/* GENERATED by tools/build.mjs from Metzler UI Kit v1.73 — FOR-CLAUDE.md § 14.
   Do not edit: change the kit or kit.json, then re-run the build. */
/* ── FOOTER — 1:1 with edelstahl-tuerklingel.de (1 Oct 2026). rem + tokens; the only literal colors
      are the payment brands (DHL, Amex, Klarna), the logo tile outline and the rating widget's star/arrow colors. ── */
.ft { background: var(--color-teal-700); color: var(--color-white); font-family: var(--font-family);
  font-size: 1rem; line-height: 1.4; padding-top: 2rem; overflow-x: hidden; }
.ft a { color: var(--color-white); text-decoration: none; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft p { margin: 0; }
.ft strong { font-weight: 600; }
.ft-logo { display: inline-block; line-height: 0; }
.ft-logo svg { width: 11.875rem; height: 2.0625rem; }
.ft-special { color: var(--color-mint) !important; font-weight: 800; }
.ft-label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: var(--color-footer-muted); }
.ft-hr { height: 0; margin: 0.9375rem 0; border: 0; border-top: 0.0625rem solid var(--color-footer-line); }

/* Logo tiles (shipping + payment): 52×33 desktop, 44×28 mobile */
.ft-pay { display: flex; flex-wrap: wrap; }
.ft-pay li { width: 3.25rem; height: 2.0625rem; margin: 0 0.55rem 0.5rem 0; border-radius: 0.3125rem; outline: 0.0625rem solid #006D75; }
.ft-pay .ship-dpd { background: url("../../Metzler%20UI%20Kit/footer/payment/ship-dpd.svg") center center / 70% auto no-repeat, var(--color-white); }
.ft-pay .ship-dhl { background: url("../../Metzler%20UI%20Kit/footer/payment/ship-dhl.svg") center center / cover no-repeat, #FFCB00; }
.ft-pay .ship-hk { background: url("../../Metzler%20UI%20Kit/footer/payment/ship-hasenauer-koch.svg") center center / 88% auto no-repeat, var(--color-white); }
.ft-pay .pay-sepa { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-sepa.svg") center center / 70% auto no-repeat, var(--color-white); }
.ft-pay .pay-ae { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-amex.svg") right center / 75% auto no-repeat, #006FCF; }
.ft-pay .pay-visa { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-visa.svg") center center / 70% auto no-repeat, var(--color-white); }
.ft-pay .pay-amazon { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-amazon.svg") center center / 45% auto no-repeat, var(--color-white); }
.ft-pay .pay-klarna { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-klarna.svg") center center / 80% auto no-repeat, #FFB4C7; }
.ft-pay .pay-paypal { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-paypal.svg") center center / 85% auto no-repeat, var(--color-white); }
.ft-pay .pay-mastercard { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-mastercard.svg") center center / 60% auto no-repeat, var(--color-white); }
.ft-pay .pay-apple { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-apple.svg") center center / 70% auto no-repeat, var(--color-white); }
.ft-pay .pay-google { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-google.svg") center center / 80% auto no-repeat, var(--color-white); }
.ft-pay .pay-vorkasse { background: url("../../Metzler%20UI%20Kit/footer/payment/pay-vorkasse.svg") center center / 90% auto no-repeat, var(--color-white); }

/* Rating pill (auto-rotates every 5 s, pauses on hover) */
.ft-rating { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.625rem;
  width: 100%; min-width: 25rem; height: 3.25rem; padding: 0.625rem 0.9375rem; border-radius: 3.75rem;
  background: rgba(255,255,255,0.08); color: var(--color-white); line-height: 1.1; }
.ft-rating__viewport { position: relative; flex: 1 1 auto; height: 2rem; min-width: 0; }
.ft-rating__slide { position: absolute; inset: 0; display: flex; align-items: center; gap: 0.625rem; opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1); }
.ft-rating__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.ft-rating__badge { flex-shrink: 0; width: 1.875rem; height: 1.875rem; display: inline-flex; align-items: center; justify-content: center; }
.ft-rating__badge img, .ft-rating__badge svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.ft-rating__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; min-width: 0; }
.ft-rating__stars { display: inline-flex; align-items: center; gap: 0.1875rem; height: 1rem; }
.ft-rating__star { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; display: inline-block; }
.ft-rating__meta { display: inline-flex; align-items: center; gap: 0.3125rem; height: 0.875rem; font-size: 0.8125rem; line-height: 0.875rem; white-space: nowrap; }
.ft-rating__count { color: var(--color-mint) !important; }
a.ft-rating__count:hover { text-decoration: underline; }
.ft-rating__count--plain { color: rgba(255,255,255,0.65) !important; }
.ft-rating__nav { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem; }
.ft-rating__arrow { width: 1.375rem; height: 1.375rem; padding: 0; border: 0.0625rem solid #DDDDDD; border-radius: 0.4rem;
  background: var(--color-white); color: var(--color-black); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.15s; }
.ft-rating__arrow:hover { background: #F6F6F6; }
.ft-rating__arrow svg { width: 0.29rem; height: 0.47rem; }
.ft-rating__arrow--next svg { transform: rotate(180deg); }

/* Legal links + Widerrufsbutton (always last, own row) */
.ft-legal, .ft-m-legal { text-align: center; }
.ft-legal ul, .ft-m-legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.8rem; }
.ft-legal a, .ft-m-legal a { font-size: 0.75rem; line-height: 1.4; color: var(--color-footer-muted); }
.ft-legal a:hover, .ft-m-legal a:hover { color: var(--color-white); }
.ft-withdraw { order: 99; flex-basis: 100%; margin-top: 0.5rem; }
.ft .ft-withdraw a { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--radius); background: var(--color-teal);
  font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--color-white); }
.ft .ft-withdraw a:hover { background: #00373A; color: var(--color-white); }

/* ── Desktop (≥ 62rem) ── */
.ft-desktop { display: none; max-width: 100rem; margin: 0 auto; padding: 0 6.25rem; }
@media (max-width: 87.5rem) { .ft-desktop { padding: 0 3.125rem; } }
.ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; margin: 0 -0.9375rem; padding: 2.5rem 0 2rem; line-height: 1.5; }
.ft-col { min-width: 0; padding: 0 0.9375rem; }
.ft-col--brand, .ft-col--social { flex: 0 0 18%; }
.ft-col--contact { flex: 0 0 20%; }
.ft-col--links { flex: 0 0 14%; }
.ft-subtitle { font-size: 0.85rem; line-height: 1.6; color: var(--color-footer-muted); }
.ft-tagline { margin: 0.75rem 0 0.5rem !important; font-size: 0.9rem; font-weight: 700; line-height: 1.6; }
.ft-tagline--cta { margin-top: 1.25rem !important; }
.ft-contact { margin-bottom: 0.85rem; }
.ft-contact strong, .ft-col--links strong, .ft-col--social strong { display: block; font-size: 1rem; font-weight: 700; }
.ft-contact strong { margin-bottom: 0.15rem; }
.ft-contact a { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-mint); }
.ft-contact small { font-size: 0.8rem; line-height: 1.3; color: var(--color-footer-muted); }
.ft-col--links strong { margin-bottom: 0.6rem; }
.ft-col--links li { margin-bottom: 0.4rem; }
.ft-col--links a { font-size: 0.9rem; color: var(--color-footer-muted); }
.ft-col--links a:hover { color: var(--color-white); }
.ft-col--social strong { margin-bottom: 0.5rem; }
.ft-social { display: flex; gap: 0.6rem; margin-bottom: 2.25rem; }
.ft-social a { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 50%; background: rgba(255,255,255,0.1); }
.ft-social svg { width: 1.75rem; height: 1.75rem; fill: var(--color-white); }
.ft-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ft-badges img { display: block; width: auto; height: 4.6875rem; }
.ft-mid { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
@media (min-width: 93.75rem) { .ft-mid { flex-direction: row; align-items: center; } }
.ft-mid__shipping, .ft-mid__rating { flex: 0 0 auto; }
.ft-mid__payment { flex: 1 1 0%; }
.ft-legal { padding: 0.75rem 0; }
.ft-copy { padding: 0.5rem 0 1rem; text-align: center; font-size: 0.75rem; line-height: 1.4; color: var(--color-footer-muted); }

/* ── Mobile (< 62rem) ── */
.ft-mobile { padding: 0 var(--page-inset) 2rem; font-size: 0.9rem; }   /* same inset as header + content (50px from 768px) */
.ft-m-logo { padding: 1.25rem 0 1rem; }
.ft-m-logo a { display: inline-block; margin-bottom: 0.75rem; }
.ft-m-logo .ft-logo { line-height: 1.4; }
.ft-m-logo__text { font-size: 0.85rem; line-height: 1.5; color: var(--color-footer-muted); }
.ft-m-logo__sub { display: block; margin-bottom: 1rem; }
.ft-m-logo__text > strong { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--color-white); }
.ft-m-logo__cta { margin: 1rem 0 1.75rem !important; font-size: 0.95rem; line-height: 1.5; }
.ft-m-logo__cta strong { font-size: 0.9rem; font-weight: 700; }
.ft-m-contact { padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--color-footer-line); }
.ft-m-contact .ft-contact { margin: 0.85rem 0 0; }
.ft-m-contact strong { display: block; margin-bottom: 0.15rem; font-size: 0.85rem; font-weight: 700; }
.ft-m-contact a { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-mint); }
.ft-m-contact small { display: block; font-size: 0.78rem; line-height: 1.3; color: var(--color-footer-muted); }
.ft-acc { border-top: 0.0625rem solid var(--color-footer-line); }
.ft-acc__item { border-bottom: 0.0625rem solid var(--color-footer-line); }
.ft-acc__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0;
  border: 0; background: none; color: var(--color-white); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; cursor: pointer; }
.ft-acc__toggle svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.25s; }
.ft-acc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ft-acc__body { display: none; padding-bottom: 0.75rem; }
.ft-acc__body.is-open { display: block; }
.ft-acc__body li { padding: 0.35rem 0; }
.ft-acc__body a { font-size: 0.9rem; }
.ft-m-pay { padding: 0.85rem 0; border-bottom: 0.0625rem solid var(--color-footer-line); }
.ft-m-pay .ft-label { line-height: 1.5; letter-spacing: 0.04em; }
.ft-pay--m { gap: 0.5rem; }
.ft-pay--m li { width: 2.75rem; height: 1.75rem; margin: 0; border-radius: var(--radius); outline: 0; flex-shrink: 0; }
.ft-m-rating { padding: 1.25rem 0; border-bottom: 0.0625rem solid var(--color-footer-line); }
@media (max-width: 30rem) { .ft-rating { min-width: 0; } .ft-rating__meta { font-size: 0.75rem; } }
.ft-m-social { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.35rem 0; border-bottom: 0.0625rem solid var(--color-footer-line); }
.ft-m-social a { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border: 0.0625rem solid rgba(255,255,255,0.4); border-radius: 50%; }
.ft-m-social svg { width: 1.25rem; height: 1.25rem; fill: var(--color-white); }
.ft-m-legal { padding-top: 1.25rem; }
.ft-m-legal li { font-size: 0.9rem; }
.ft-m-copy { display: block; padding-top: 1.25rem; text-align: center; font-size: 0.75rem; line-height: 1.6; color: var(--color-footer-muted); }

@media (min-width: 62rem) { .ft-desktop { display: block; } .ft-mobile { display: none; } }
@media (prefers-reduced-motion: reduce) { .ft-rating__slide, .ft-acc__toggle svg { transition: none; } }

:where(.ft, .site-footer) p, :where(.ft, .site-footer) li, :where(.ft, .site-footer) strong, :where(.ft, .site-footer) small { color: inherit; }