/*
 * SGS 4x4 Footer – Styles (auf allen Seiten geladen, per <link> direkt vor dem Footer)
 * Alle Regeln sind auf #footer.sgsf begrenzt und überschreiben damit die NOVA-Footer-Styles.
 * Farben und Abstände sind dieselben wie auf der Startseite (sgs-home.css).
 * Version 1.0.1
 */
#footer.sgsf {
    --sgsf-ink: #161718;
    --sgsf-panel: #1f2123;
    --sgsf-panel-2: #26282b;
    --sgsf-line: rgba(255, 255, 255, .1);
    --sgsf-text: #f4f4f2;
    --sgsf-text-2: rgba(244, 244, 242, .68);
    --sgsf-text-3: rgba(244, 244, 242, .5);
    --sgsf-yellow: #efc03d;
    --sgsf-yellow-2: #e0ad22;
    --sgsf-r: 12px;
    --sgsf-r-lg: 24px;
    --sgsf-max: 1250px;
    --sgsf-ease: cubic-bezier(.22, 1, .36, 1);
    --sgsf-head: Poppins, "Helvetica Neue", Arial, sans-serif;
    --sgsf-font: Raleway, "Helvetica Neue", Arial, sans-serif;

    position: relative;
    margin: 0;
    padding: 0;
    background: var(--sgsf-ink);
    color: var(--sgsf-text-2);
    font-family: var(--sgsf-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
#footer.sgsf *,
#footer.sgsf *::before,
#footer.sgsf *::after { box-sizing: border-box; }
#footer.sgsf p { margin: 0; }
#footer.sgsf ul { list-style: none; margin: 0; padding: 0; }
#footer.sgsf a { color: inherit; }
#footer.sgsf .sgsh-ico { display: block; width: 18px; height: 18px; flex: none; }
#footer.sgsf .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#footer.sgsf a:focus-visible,
#footer.sgsf button:focus-visible,
#footer.sgsf input:focus-visible { outline: 3px solid var(--sgsf-yellow); outline-offset: 3px; }

#footer.sgsf .sgsf-wrap { max-width: var(--sgsf-max); margin-inline: auto; padding-inline: 16px; }
#footer.sgsf > .sgsf-wrap { padding-top: clamp(40px, 5vw, 64px); }

/* ------------------------------------------------------------------ Buttons */
#footer.sgsf .sgsf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 12px 26px; border: 1.5px solid transparent; border-radius: 999px;
    font-family: var(--sgsf-font); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
#footer.sgsf .sgsf-btn--yellow { background: var(--sgsf-yellow); color: var(--sgsf-ink); }
#footer.sgsf .sgsf-btn--yellow:hover { background: var(--sgsf-yellow-2); color: var(--sgsf-ink); }
#footer.sgsf .sgsf-btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
#footer.sgsf .sgsf-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--sgsf-ink); }
#footer.sgsf .sgsf-btn .sgsh-ico { transition: transform .25s var(--sgsf-ease); }
#footer.sgsf .sgsf-btn--ghost:hover .sgsh-ico { transform: translateX(3px); }

#footer.sgsf .sgsf-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sgsf-text-2); }
#footer.sgsf .sgsf-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--sgsf-yellow); }

/* ------------------------------------------------------------------ Service-Leiste */
#footer.sgsf .sgsf-service {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center;
    padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px);
    border: 1px solid var(--sgsf-line); border-radius: var(--sgsf-r-lg);
    background: linear-gradient(120deg, var(--sgsf-panel-2) 0%, var(--sgsf-panel) 60%);
}
#footer.sgsf .sgsf-service__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--sgsf-yellow); color: var(--sgsf-ink); }
#footer.sgsf .sgsf-service__ico .sgsh-ico { width: 26px; height: 26px; }
#footer.sgsf .sgsf-service__copy { display: grid; gap: 8px; }
#footer.sgsf .sgsf-service__title { font-family: var(--sgsf-head); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
#footer.sgsf .sgsf-service__text { max-width: 60ch; color: var(--sgsf-text-2); }
#footer.sgsf .sgsf-service__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ------------------------------------------------------------------ Newsletter (optional) */
#footer.sgsf .sgsf-nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: center; margin-top: 16px; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 40px); border-radius: var(--sgsf-r-lg); background: var(--sgsf-yellow); color: var(--sgsf-ink); }
#footer.sgsf .sgsf-nl__title { font-family: var(--sgsf-head); font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
#footer.sgsf .sgsf-nl__info { margin-top: 6px; font-size: 13px; color: rgba(22, 23, 24, .75); }
#footer.sgsf .sgsf-nl__info a { text-decoration: underline; }
#footer.sgsf .sgsf-nl__form { margin: 0; }
#footer.sgsf .sgsf-nl__field { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; }
#footer.sgsf .sgsf-nl__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--sgsf-ink); font: 500 15px/1.3 var(--sgsf-font); }
#footer.sgsf .sgsf-nl .sgsf-btn--yellow { background: var(--sgsf-ink); color: #fff; min-height: 48px; }
#footer.sgsf .sgsf-nl .sgsf-btn--yellow:hover { background: #000; color: #fff; }

/* ------------------------------------------------------------------ Marke + Linkgruppen */
#footer.sgsf .sgsf-main { display: grid; grid-template-columns: minmax(240px, 1.15fr) minmax(0, 3fr); gap: 40px clamp(32px, 5vw, 80px); padding-block: clamp(48px, 6vw, 80px); }
#footer.sgsf .sgsf-brand { display: grid; gap: 20px; align-content: start; }
#footer.sgsf .sgsf-brand__logo { display: inline-block; width: fit-content; text-decoration: none; }
#footer.sgsf .sgsf-brand__logo img { display: block; width: auto; height: 64px; max-width: 100%; }
#footer.sgsf .sgsf-brand__logo span { font-family: var(--sgsf-head); font-size: 28px; font-weight: 600; color: #fff; }
#footer.sgsf .sgsf-brand__text { max-width: 36ch; }
#footer.sgsf .sgsf-facts { display: grid; gap: 10px; }
#footer.sgsf .sgsf-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sgsf-text); }
#footer.sgsf .sgsf-facts__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(239, 192, 61, .14); color: var(--sgsf-yellow); flex: none; }
#footer.sgsf .sgsf-facts__ico .sgsh-ico { width: 13px; height: 13px; stroke-width: 2.6; }
#footer.sgsf .sgsf-social { display: flex; flex-wrap: wrap; gap: 8px; }
#footer.sgsf .sgsf-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--sgsf-line); border-radius: 50%; color: #fff; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
#footer.sgsf .sgsf-social a:hover { background: var(--sgsf-yellow); border-color: var(--sgsf-yellow); color: var(--sgsf-ink); }

#footer.sgsf .sgsf-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 32px; margin: 0; }
#footer.sgsf .sgsf-col { min-width: 0; }

/* NOVA-Box-Markup (Linkgruppen, Text-Boxen) */
#footer.sgsf .box { margin: 0; padding: 0; border: 0; background: none; }
#footer.sgsf .box-normal-hr { display: none; }
#footer.sgsf .productlist-filter-headline {
    display: block; margin: 0 0 18px; padding: 0; border: 0;
    font-family: var(--sgsf-head); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
#footer.sgsf .box-normal-link { display: none; }
#footer.sgsf .collapse.d-md-block { display: block; }
#footer.sgsf .nav-panel,
#footer.sgsf .box-nav-item { margin: 0; padding: 0; }
#footer.sgsf .nav { display: grid; gap: 4px; margin: 0; padding: 0; }
#footer.sgsf .nav-item { margin: 0; }
#footer.sgsf .nav-link {
    position: relative; display: inline-block; padding: 5px 0; margin: 0;
    font-size: 15px; line-height: 1.4; color: var(--sgsf-text-2); text-decoration: none;
    transition: color .2s ease, transform .3s var(--sgsf-ease);
}
#footer.sgsf .nav-link::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1.5px; background: var(--sgsf-yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sgsf-ease); }
#footer.sgsf .nav-link:hover { color: #fff; }
#footer.sgsf .nav-link:hover::after { transform: scaleX(1); }
#footer.sgsf .nav-item.active > .nav-link { color: #fff; }
#footer.sgsf .box-custom p + p { margin-top: 10px; }
#footer.sgsf .box-custom strong { color: #fff; }
#footer.sgsf .box-custom a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Rechtsleiste */
#footer.sgsf .sgsf-legal { border-top: 1px solid var(--sgsf-line); background: #111213; }
#footer.sgsf .sgsf-legal__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 24px; }
#footer.sgsf .sgsf-legal__notes { display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--sgsf-text-3); }
#footer.sgsf .sgsf-legal__notes a { color: var(--sgsf-text-2); text-decoration: underline; text-underline-offset: 2px; }
#footer.sgsf .sgsf-legal__notes a:hover { color: #fff; }
#footer.sgsf .sgsf-legal__copy { margin-top: 6px; color: var(--sgsf-text-2); }
#footer.sgsf .sgsf-withdrawal { min-height: 46px; padding-inline: 22px; font-size: 14px; }

/* NOVA „Nach oben“-Button */
#footer.sgsf .smoothscroll-top { border-radius: 50%; background: var(--sgsf-yellow); color: var(--sgsf-ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
#footer.sgsf .smoothscroll-top .scroll-top-inner { color: var(--sgsf-ink); }

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 991.98px) {
    #footer.sgsf .sgsf-service { grid-template-columns: auto minmax(0, 1fr); }
    #footer.sgsf .sgsf-service__btns { grid-column: 1 / -1; justify-content: flex-start; }
    #footer.sgsf .sgsf-main { grid-template-columns: minmax(0, 1fr); }
    #footer.sgsf .sgsf-nl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    #footer.sgsf .sgsf-service { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #footer.sgsf .sgsf-service__ico { width: 48px; height: 48px; }
    #footer.sgsf .sgsf-service__btns .sgsf-btn { flex: 1 1 100%; }
    #footer.sgsf .sgsf-main { gap: 36px; }
    /* Linkgruppen als Akkordeon (NOVA-Collapse) */
    #footer.sgsf .sgsf-links { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--sgsf-line); }
    #footer.sgsf .sgsf-col { border-bottom: 1px solid var(--sgsf-line); }
    #footer.sgsf .productlist-filter-headline { display: none; }
    #footer.sgsf .box-normal-link {
        display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0;
        font-family: var(--sgsf-head); font-size: 15px; font-weight: 600; color: #fff; text-decoration: none;
    }
    #footer.sgsf .box-normal-link::after {
        content: ""; width: 10px; height: 10px; margin: 0 6px 4px 0; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .3s var(--sgsf-ease);
    }
    #footer.sgsf .box-normal-link[aria-expanded="true"]::after { transform: translateY(4px) rotate(-135deg); }
    #footer.sgsf .collapse.d-md-block:not(.show) { display: none; }
    #footer.sgsf .collapse .nav { padding-bottom: 16px; }
    #footer.sgsf .sgsf-col--text { padding-block: 18px; }
    /* unten Platz lassen, damit „Nach oben“ und das Google-Bewertungs-Badge den Widerrufsbutton nicht verdecken */
    #footer.sgsf .sgsf-legal__in { flex-direction: column; align-items: stretch; padding-bottom: 104px; }
    #footer.sgsf .sgsf-withdrawal { width: 100%; }
}
@media print {
    #footer.sgsf .sgsf-service,
    #footer.sgsf .sgsf-nl,
    #footer.sgsf .sgsf-withdrawal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #footer.sgsf *,
    #footer.sgsf *::after { transition: none !important; }
}