/* STREUSELHELD Footer (09.10.2026), eingebunden in templates/NOVAChild/layout/footer.tpl */
#footer.shf { padding: 0; margin-top: 3rem; background: #fff; color: #1F2A33; font-family: 'Open Sans', sans-serif; }
#footer.shf a { text-decoration: none; }
.shf-wrap { max-width: 1440px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

/* Vorteile */
.shf-usp { background: #EAF5FC; }
.shf-usp .shf-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 30px; padding-bottom: 30px; }
.shf-usp-item { display: flex; gap: 14px; align-items: center; line-height: 1.35; }
.shf-usp-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #0A7DB8; }
.shf-usp-item strong { display: block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 15px; color: #0A7DB8; }
.shf-usp-item span { font-size: 14px; }

/* Hauptbereich */
.shf-main { position: relative; background: #0A7DB8; color: #fff; overflow: hidden; }
.shf-main .shf-wrap { position: relative; padding-top: 64px; padding-bottom: 40px; }
#footer.shf .shf-main a { color: #fff; }
#footer.shf .shf-main a:hover, #footer.shf .shf-main a:focus { color: #FFC93C; }
.shf-sprinkles i { position: absolute; display: block; width: 7px; height: 22px; border-radius: 4px; }
.shf-sprinkles i.dot { width: 10px; height: 10px; border-radius: 50%; }
.shf-grid { display: grid; grid-template-columns: 1.25fr .9fr .9fr 1.35fr; gap: 56px; }
.shf-brand { display: flex; flex-direction: column; gap: 20px; }
.shf-logo { width: 210px; height: 156px; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.shf-logo img { width: 186px; height: auto; display: block; }
.shf-brand p { margin: 0; font-size: 15px; line-height: 1.6; color: #E3F1F9; max-width: 300px; }
.shf-social { display: flex; gap: 12px; }
#footer.shf .shf-social a { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
#footer.shf .shf-social a:hover { border-color: #FFC93C; }
.shf-nav { display: flex; flex-direction: column; gap: 14px; }
.shf-nav .shf-h { margin: 0 0 6px; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #FFC93C; }
#footer.shf .shf-nav a { font-size: 15px; }
#footer.shf .shf-main a.shf-withdraw { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; background: #fff; color: #0A7DB8; font-weight: 700; font-size: 15px; }
#footer.shf .shf-main a.shf-withdraw:hover, #footer.shf .shf-main a.shf-withdraw:focus { background: #FFC93C; color: #0A7DB8; }

/* Kontaktkarte */
.shf-card { background: #fff; color: #1F2A33; border-radius: 20px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.shf-card-head { display: flex; gap: 16px; align-items: center; }
.shf-card-head img { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; border: 4px solid #FFC93C; object-fit: cover; box-sizing: border-box; }
.shf-card-title { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 20px; color: #0A7DB8; }
.shf-card-text { font-size: 14px; line-height: 1.5; color: #44525E; }
.shf-card-text b { font-family: Montserrat, sans-serif; color: #0A7DB8; }
#footer.shf .shf-main .shf-card a.shf-wa { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 12px; background: #1E8E4E; color: #fff; font-weight: 600; font-size: 15px; }
#footer.shf .shf-main .shf-card a.shf-wa:hover { background: #17733f; color: #fff; }
.shf-card-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#footer.shf .shf-main .shf-card-btns a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px; border: 2px solid #CFE6F3; color: #0A7DB8; font-weight: 600; font-size: 14px; }
#footer.shf .shf-main .shf-card-btns a:hover { border-color: #0A7DB8; color: #0A7DB8; }

/* Zahlung & Versand */
.shf-chips-row { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; flex-wrap: wrap; }
.shf-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shf-chips > span:first-child { font-size: 13px; font-weight: 600; color: #CFE6F3; margin-right: 4px; }
.shf-chip { background: #fff; color: #1F2A33; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.shf-chip.y { background: #FFCC00; font-weight: 700; }

/* Unterste Leiste */
.shf-bottom { background: #08669A; color: #CFE6F3; font-size: 13px; }
.shf-bottom .shf-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
#footer.shf .shf-bottom a { color: #fff; }
#footer.shf .shf-bottom a:hover { color: #FFC93C; }
.shf-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
#footer.shf .shf-bottom .shf-vat a { color: #CFE6F3; text-decoration: underline; }

/* Tablet */
@media (max-width: 1199.98px) {
    .shf-wrap { padding-left: 32px; padding-right: 32px; }
    .shf-usp .shf-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
    .shf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

/* Mobil */
@media (max-width: 767.98px) {
    .shf-wrap { padding-left: 16px; padding-right: 16px; }
    .shf-usp .shf-wrap { gap: 18px 14px; padding-top: 22px; padding-bottom: 22px; }
    .shf-usp-item { gap: 10px; line-height: 1.3; }
    .shf-usp-ico { width: 40px; height: 40px; flex-basis: 40px; }
    .shf-usp-ico svg { width: 20px; height: 20px; }
    .shf-usp-item strong { font-size: 13px; }
    .shf-usp-item span { font-size: 12px; }
    .shf-main .shf-wrap { padding-top: 44px; padding-bottom: 28px; }
    .shf-grid { display: flex; flex-direction: column; gap: 28px; }
    .shf-brand { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
    .shf-logo { width: 132px; height: 98px; flex: 0 0 132px; border-radius: 16px; }
    .shf-logo img { width: 118px; }
    .shf-brand-txt { flex: 1 1 150px; display: flex; flex-direction: column; gap: 12px; }
    .shf-brand p { font-size: 13px; line-height: 1.5; }
    .shf-card { order: 2; padding: 20px 18px; gap: 14px; border-radius: 18px; }
    .shf-card-head img { width: 64px; height: 64px; flex-basis: 64px; }
    .shf-card-title { font-size: 18px; }
    .shf-card-text { font-size: 13px; }
    .shf-navs { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .shf-nav { gap: 0; }
    .shf-nav .shf-h { font-size: 13px; }
    #footer.shf .shf-nav a { font-size: 14px; line-height: 44px; }
    .shf-withdraw-wrap { order: 4; }
    #footer.shf .shf-main a.shf-withdraw { width: 100%; justify-content: center; height: 48px; margin-top: 0; }
    .shf-chips-row { margin-top: 28px; padding-top: 22px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .shf-chips { gap: 8px; }
    .shf-chips > span:first-child { width: 100%; font-size: 12px; }
    .shf-chip { font-size: 12px; padding: 6px 10px; }
    .shf-bottom .shf-wrap { flex-direction: column-reverse; text-align: center; font-size: 12px; padding-bottom: 22px; }
    .shf-bottom-links { justify-content: center; gap: 22px; }
    #footer.shf .shf-bottom-links a { line-height: 32px; font-size: 13px; }
}
/* Desktop: Navigation zweispaltig nebeneinander, Widerrufs-Button sitzt in der Service-Spalte */
@media (min-width: 768px) {
    .shf-navs { display: contents; }
    .shf-withdraw-wrap { display: none; }
}
@media (max-width: 767.98px) {
    #footer.shf .shf-nav a.shf-withdraw { display: none; }
}
/* Theme-Regeln fuer #copyright ueberschreiben, Platz fuer den "Nach oben"-Button lassen */
#footer.shf #copyright.shf-bottom { background: #08669A; color: #CFE6F3; padding: 0; }
@media (min-width: 768px) { #footer.shf #copyright.shf-bottom .shf-wrap { padding-right: 96px; } }
@media (max-width: 767.98px) { #footer.shf #copyright.shf-bottom .shf-wrap { padding-bottom: 72px; } }
@media (max-width: 767.98px) { .shf-sprinkles { position: absolute; inset: 0 0 auto 0; height: 40px; transform: translateY(-10px) scale(.75); transform-origin: top right; } .shf-main .shf-wrap { padding-top: 52px; } }