/* Footer der Website: Trennlinie, Newsletter und Linkspalten (auf /news nur die Linkspalten), Schlusszeile. */

.sf { padding: 72px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.45); text-align: left; }
@media (max-width: 880px) { .sf { padding-top: 56px; } }
/* Legal pages underline every link with a border. */
.sf a { border-bottom: 0; }
.sf-inner { width: 100%; }
.sf-rule { height: 1px; background-color: rgba(240, 237, 230, 0.12); }

/* Side by side when both fit, otherwise the links wrap below the newsletter on their own. */
.sf-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 32px; padding-top: 40px; }
.sf-main > .nl-form--footer { flex: 999 1 360px; min-width: 0; margin: 0; }

/* Three columns if they fit, otherwise two plus one. */
.sf-links { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 20px; }
/* Wide screens: one compact group at the right edge; the free space stays open between it and the newsletter. */
@media (min-width: 881px) { .sf-links { flex: 0 1 auto; margin-left: auto; column-gap: 40px; } }
.sf-heading { margin: 0 0 14px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.sf-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-links li { margin: 0; line-height: 1.4; }
.sf-links a { color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: color 0.2s ease; }
.sf-social { display: inline-flex; align-items: center; gap: 8px; }
.sf-social svg { flex: none; width: 16px; height: 16px; display: block; color: rgba(134, 168, 131, 0.65); transition: color 0.2s ease; }
/* Only where hovering is real: touch browsers keep :hover on a tapped link. */
@media (hover: hover) {
  .sf-links a:hover { color: #86A883; }
  .sf-social:hover svg { color: #86A883; }
}

.sf-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-top: 56px; }
.sf-bottom p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.35); }
.sf-bottom .sf-made-in { font-size: 17px; }
.sf-heart { color: #86A883; }
@media (max-width: 720px) {
  .sf-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* On pages with the green download card the footer sits in the card's wrapper and takes its width by itself.
   Pages without a card break out to the card's usual width: at most 1136px (1200px with 32px side padding, 16px from 880px down). */
.container > .sf, .blog-end--article > .sf { --sf-width: min(1136px, calc(100vw - 64px)); width: var(--sf-width); margin-left: calc(50% - var(--sf-width) / 2); }
@media (max-width: 880px) { .container > .sf, .blog-end--article > .sf { --sf-width: calc(100vw - 32px); } }