/*
 * Sound-Spirit Footer - extern geladenes CSS
 * Quelle: seiten-bausteine/footer/assets/footer.css
 * Wird vom Build kopiert nach dist/assets/footer.css
 * 
 * Für Produktion siehe Doku: https://www.sound-spirit.de/doku/neuer-footer-2026/
 * Im HTML eingebunden via <link rel="stylesheet" href="https://img.sound-spirit.de/siteparts/footer/footer.css">
 *
 * Branding-Farben werden hier zentral definiert (CSS Custom Properties)
 * Touch-Target >=44px (WCAG 2.5.5 enhanced)
 */
:root {
    /* Firmen-CI: Footer in Marken-Blau (Christina-Wunsch 2026-06-03), weisser Text,
       Gold-Akzent fuer Headings + Widerruf-Button. CI-Blau #01398d aus der Live-
       Website (sound-spirit.de). Kontrast: weiss/blau ~9:1, gold/blau + blau/gold WCAG-OK. */
    --ss-bg:           #01398d;
    --ss-fg:           #ffffff;
    --ss-accent:       #ffb800;
    --ss-accent-hover: #ffd84d;
    --ss-muted:        #b8c9e0;
    --ss-divider:      rgba(255,255,255,0.18);
    --ss-button-fg:    #01398d;

    --ss-touch-min:    44px;
    --ss-padding-y:    10px;
    --ss-padding-x:    8px;
    --ss-gap-tight:    8px;
    --ss-gap:          12px;
    --ss-gap-loose:    16px;

    --ss-font-base:    16px;
    --ss-font-heading: 1em;
    --ss-font-claim:   1.1em;

    --ss-radius:       4px;
    --ss-max-width:    1280px;
}

.ss-footer { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--ss-bg); color: var(--ss-fg); padding: var(--ss-gap-loose) var(--ss-gap-loose) var(--ss-gap-tight); font-size: var(--ss-font-base); }
.ss-footer__inner { max-width: var(--ss-max-width); margin: 0 auto; display: grid; gap: var(--ss-gap); }
.ss-footer a { color: var(--ss-fg); text-decoration: none; display: inline-block; min-height: var(--ss-touch-min); padding: var(--ss-padding-y) var(--ss-padding-x); line-height: 1.3; }
.ss-footer__cookie-button { background: none; border: none; color: var(--ss-fg); text-decoration: none; display: inline-block; min-height: var(--ss-touch-min); padding: var(--ss-padding-y) var(--ss-padding-x); line-height: 1.3; font-family: inherit; font-size: inherit; cursor: pointer; }
.ss-footer__cookie-button:hover, .ss-footer__cookie-button:focus-visible { color: var(--ss-accent); text-decoration: underline; outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.ss-footer a:hover, .ss-footer a:focus-visible { color: var(--ss-accent); text-decoration: underline; outline: 2px solid var(--ss-accent); outline-offset: 2px; }

.ss-footer__brand { display: flex; flex-direction: column; gap: 4px; }
.ss-footer__logo img { display: block; height: auto; max-width: 180px; }
.ss-footer__claim { font-weight: 600; font-size: var(--ss-font-claim); }
.ss-footer__phone a { font-size: 1.2em; font-weight: 600; padding: 12px 0; }

.ss-footer__trust { list-style: none; padding: 0; margin: var(--ss-gap-tight) 0; display: flex; flex-wrap: wrap; gap: var(--ss-gap); }
.ss-footer__trust-item { display: flex; align-items: center; gap: var(--ss-gap-tight); min-height: var(--ss-touch-min); }
.ss-footer__trust-label { font-size: var(--ss-font-base); }

/* Icons als Sprite-File (extern, 1 HTTP-Request fuer alle 6).
 * url() ist relativ zu DIESEM CSS-File aufgeloest - funktioniert sowohl
 * unter file:// (Playwright) als auch /footer-assets/ (Profihost-Alias).
 */
.ss-icon { display: inline-block; width: 24px; height: 24px; background-image: url("https://www.sound-spirit.de/siteparts/footer/icons.svg"); background-repeat: no-repeat; background-size: 144px 24px; flex-shrink: 0; }
.ss-icon--sprechblase { background-position:   0 0; }
.ss-icon--check       { background-position: -24px 0; }
.ss-icon--klangschale { background-position: -48px 0; }
.ss-icon--facebook    { background-position: -72px 0; }
.ss-icon--instagram   { background-position: -96px 0; }
.ss-icon--youtube     { background-position: -120px 0; }

.ss-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ss-gap); }
.ss-footer__nav h2 { font-size: var(--ss-font-heading); margin: 0 0 4px 0; color: var(--ss-accent); }
.ss-footer__nav ul { list-style: none; padding: 0; margin: 0;  padding-left:7px;}
.ss-footer__nav li { display: block; }

.ss-footer__social { list-style: none; padding: 0; margin: var(--ss-gap-tight) 0; display: flex; gap: var(--ss-gap-tight); }
.ss-footer__social a { width: var(--ss-touch-min); height: var(--ss-touch-min); min-width: var(--ss-touch-min); padding: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border-radius: 50%; }
.ss-footer__social .ss-icon { width: 20px; height: 20px; background-size: 120px 20px; }
.ss-footer__social .ss-icon--facebook  { background-position: -60px 0; }
.ss-footer__social .ss-icon--instagram { background-position: -80px 0; }
.ss-footer__social .ss-icon--youtube   { background-position: -100px 0; }

.ss-footer__payment { list-style: none; padding: 0; margin: var(--ss-gap-tight) 0; display: flex; flex-wrap: wrap; gap: var(--ss-gap); align-items: center; }
.ss-footer__payment img { background: white; border-radius: var(--ss-radius); padding: 4px; height: 32px; width: auto; }

/* Trust-Widget: Trusted-Shops Rating + 10-Jahre-Excellent (ADR-0014). */
.ss-footer__trustedshops { display: flex; flex-direction: column; gap: var(--ss-gap); margin: var(--ss-gap) 0; align-items: flex-start; }
.ss-footer__trustedshops-link { display: flex; align-items: center; gap: var(--ss-gap); text-decoration: none; color: var(--ss-fg); padding: var(--ss-padding-y) 0; min-height: var(--ss-touch-min); }
.ss-footer__trustedshops-link:hover, .ss-footer__trustedshops-link:focus-visible { color: var(--ss-accent); }
.ss-footer__trustedshops-logo { display: block; height: auto; max-width: 70px; }
.ss-footer__trustedshops-rating { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.ss-footer__trustedshops-rating strong { font-size: 1.1em; color: var(--ss-accent); }
.ss-footer__trustedshops-text { font-size: 0.95em; }
.ss-footer__trustedshops-rating small { font-size: 0.85em; color: var(--ss-muted); }
.ss-footer__trustedshops-award { display: inline-block; padding: 0; }
.ss-footer__trustedshops-award img { display: block; max-width: 140px; height: auto; border-radius: 8px; }

.ss-footer__legal { list-style: none; padding: 0; margin: var(--ss-gap-tight) 0 0; display: flex; flex-wrap: wrap; gap: 2px var(--ss-gap); border-top: 1px solid var(--ss-divider); padding-top: var(--ss-gap-tight); }
.ss-footer__legal li { display: inline-block; margin: 0; }
/* Dezent statt knalliger CTA (Michael 11.06., Frank-Freigabe 13.06.): Outline-Stil -
   weisser Text auf Marine (sichtbar ~9:1, rechtlich auffindbar, ADR-0005/0017), dezenter
   Gold-Rand statt Gold-Fuellung. Hover fuellt gold = klare Affordance bei Bedarf. Kein Buddha. */
.ss-footer__widerruf-button { min-height: var(--ss-touch-min) !important; padding: 10px 16px; background: transparent; color: var(--ss-fg) !important; border: 1px solid var(--ss-accent); border-radius: var(--ss-radius); font-weight: 600; }
.ss-footer__widerruf-button:hover, .ss-footer__widerruf-button:focus-visible { background: var(--ss-accent); color: var(--ss-button-fg) !important; }

.ss-footer__copyright { text-align: center; margin-top: var(--ss-gap); font-size: 0.85em; color: var(--ss-muted); }

@media (max-width: 600px) {
    .ss-footer__nav { grid-template-columns: 1fr; }
    .ss-footer__trust { flex-direction: column; gap: var(--ss-gap-tight); }
}

@media (min-width: 601px) and (pointer: fine) {
    .ss-footer__nav li a { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-footer a, .ss-footer__widerruf-button { transition: none; }
}