/**
 * Globaler Footer (Sektion 13, Plan docs/plans/16-footer.md)
 * Wird global auf allen Frontend-Seiten geladen (includes/footer/enqueue.php); alle Regeln sind auf .jp-footer* bzw. #nm-footer.jp-footer begrenzt.
 * Kein JavaScript. Markup: footer.php + template-parts/footer/* (Daten: includes/footer/footer.php).
 *
 * Aufbau (dunkle Fläche, Designsystem: --jp-color-darkgray_02 = #282828):
 *   .jp-footer                    <footer id="nm-footer" class="nm-footer jp-footer">
 *     .nm-footer-bar.jp-footer__bar   (Klasse nm-footer-bar bleibt für Savoy erhalten)
 *       .nm-row > .col-xs-12          (Container wie der Header)
 *         .jp-footer__main            Raster: Marke + drei Navigationsspalten
 *           .jp-footer__brand | nav.jp-footer__col (je Spalte)
 *         .jp-footer__payments        separate Zahlungsarten-Leiste
 *         .jp-footer__bottom          Abschlussleiste (Copyright)
 *
 * Layout (eigene Footer-Grenzen):
 *   >= 1200px  Marke + drei Spalten (1.4fr 1fr 1fr 1fr)
 *   768-1199px 2 x 2 (Marke | Information & Service / Shop & Produkte | Rechtliches)
 *   <= 767px   eine Spalte (alle Links sichtbar, keine Accordions)
 * Die Reihenfolge im DOM ist die visuelle Reihenfolge (kein order).
 */

#nm-footer.jp-footer {
   --jp-footer-bg:      var(--jp-color-darkgray_02, #282828);
   --jp-footer-text:    #d6d6d6;   /* Kontrast auf #282828 ca. 9,7:1 */
   --jp-footer-muted:   #b9b9b9;   /* ca. 7,2:1 */
   --jp-footer-strong:  #ffffff;
   --jp-footer-line:    rgb(255 255 255 / .18);
   --jp-footer-gap-x:   48px;
   --jp-footer-gap-y:   40px;
   --jp-footer-pad-top: 56px;

   margin: 0;
   padding: 0;
   background-color: var(--jp-footer-bg);
   color: var(--jp-footer-text);
   font-size: var(--jp-font-size-body, 16px);
   line-height: 1.5;
}

#nm-footer.jp-footer .jp-footer__bar {
   padding: var(--jp-footer-pad-top) 0 0;
   background-color: transparent;
   color: var(--jp-footer-text);
}

/* Raster */
#nm-footer .jp-footer__main {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--jp-footer-gap-y);
}
@media (min-width: 768px) {
   #nm-footer .jp-footer__main {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--jp-footer-gap-y) var(--jp-footer-gap-x);
   }
}
@media (min-width: 1200px) {
   #nm-footer.jp-footer {
      --jp-footer-gap-x: clamp(32px, 4vw, 56px);
   }
   #nm-footer .jp-footer__main {
      grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
   }
}

/* Links (Savoy färbt .nm-footer-bar a; hier gezielt überschrieben) */
#nm-footer.jp-footer a {
   color: var(--jp-footer-text);
   text-decoration: none;
}
#nm-footer.jp-footer a:focus-visible {
   outline: 2px solid var(--jp-footer-strong);
   outline-offset: 3px;
   border-radius: 2px;
}
@media (hover: hover) {
   #nm-footer.jp-footer a:hover {
      color: var(--jp-footer-strong);
   }
   #nm-footer.jp-footer .jp-footer__link:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
   }
}

/* Überschriften */
#nm-footer.jp-footer .jp-footer__title {
   margin: 0 0 14px;
   color: var(--jp-footer-strong);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .08em;
   line-height: 1.4;
   text-transform: uppercase;
}

/* Marke */
#nm-footer.jp-footer .jp-footer__brand {
   min-width: 0;
}
#nm-footer.jp-footer .jp-footer__logo {
   display: block;
   width: auto;
   max-width: 100%;
   height: 56px;
   margin: 0 0 16px;
}
#nm-footer.jp-footer .jp-footer__name {
   margin: 0 0 12px;
   color: var(--jp-footer-strong);
   font-size: 20px;
   font-weight: 700;
   letter-spacing: .04em;
   line-height: 1.25;
   text-transform: uppercase;
}
#nm-footer.jp-footer .jp-footer__text {
   max-width: 34ch;
   margin: 0 0 20px;
   color: var(--jp-footer-muted);
   font-size: var(--jp-font-size-small, 14px);
   line-height: 1.6;
}
#nm-footer.jp-footer .jp-footer__social {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
}
#nm-footer.jp-footer .jp-footer__social li {
   margin: 0;
   padding: 0;
}
#nm-footer.jp-footer .jp-footer__social-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 1px solid rgb(255 255 255 / .55);
   border-radius: 50%;
   color: var(--jp-footer-strong);
   font-size: 20px;
   line-height: 1;
}
@media (hover: hover) {
   #nm-footer.jp-footer .jp-footer__social-link:hover {
      border-color: var(--jp-footer-strong);
      background-color: var(--jp-footer-strong);
      color: var(--jp-footer-bg);
   }
}

/* Navigationsspalten */
#nm-footer.jp-footer .jp-footer__col {
   min-width: 0;
}
#nm-footer.jp-footer .jp-footer__list {
   margin: 0;
   padding: 0;
   list-style: none;
}
#nm-footer.jp-footer .jp-footer__item {
   margin: 0;
   padding: 0;
}
#nm-footer.jp-footer .jp-footer__link {
   display: inline-block;
   padding: 4px 0;
   font-size: var(--jp-font-size-body, 16px);
   line-height: 1.4;
   overflow-wrap: break-word;
}

/* „Vertrag widerrufen“: hervorgehobener Aktionslink (bleibt ein Link, kein Submit-Button; steht zuletzt in „Rechtliches“).
   Aussehen wie der globale umrandete Sekundärbutton (.button-secondary: front.css, Savoy .button): Eckenradius var(--nm--border-radius-button),
   1px-Rahmen in Textfarbe, Schrift var(--jp-font-size-body) normal, line-height 16px, Padding 13px (ergibt 44px Höhe), Hover opacity .82 mit
   transition .2s. Footer-spezifisch bleiben die hellen Farben auf dunklem Grund, der Pfeil und die Mindesthöhe von 44px. */
#nm-footer.jp-footer .jp-footer__item--action {
   margin: 8px 0 6px;
}
#nm-footer.jp-footer .jp-footer__action {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   width: fit-content;
   max-width: 100%;
   min-height: 44px;
   box-sizing: border-box;
   padding: 13px;
   border: 1px solid var(--jp-footer-strong);
   border-radius: var(--nm--border-radius-button);
   background-color: transparent;
   color: var(--jp-footer-strong);
   font-size: var(--jp-font-size-body, 16px);
   font-weight: normal;
   line-height: 16px;
   text-align: center;
   transition: opacity .2s ease;
}
#nm-footer.jp-footer .jp-footer__action-arrow {
   transition: transform .15s ease;
}
@media (hover: hover) {
   #nm-footer.jp-footer .jp-footer__action:hover {
      opacity: .82;
      text-decoration: none;
   }
   #nm-footer.jp-footer .jp-footer__action:hover .jp-footer__action-arrow {
      transform: translateX(3px);
   }
}

/* Zahlungsarten-Leiste */
#nm-footer.jp-footer .jp-footer__payments {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 24px;
   margin-top: 48px;
   padding-top: 24px;
   border-top: 1px solid var(--jp-footer-line);
}
#nm-footer.jp-footer .jp-footer__title--inline {
   margin: 0;
}
#nm-footer.jp-footer .jp-footer__pay-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
}
#nm-footer.jp-footer .jp-footer__pay {
   display: inline-flex;
   align-items: center;
   min-height: 36px;
   margin: 0;
   padding: 6px 12px;
   border: 1px solid var(--jp-footer-line);
   border-radius: 4px;
   background-color: rgb(255 255 255 / .06);
   color: var(--jp-footer-text);
   font-size: 13px;
   line-height: 1.3;
}
/* Logo-Chips (lokale SVG aus assets/img/payment/, enthalten ihren hellen Grund selbst): einheitlich 58 × 36 px (Seitenverhältnis 64:40 der Logos);
   schmalere Logos (quadratisches PayPal-Monogramm) bleiben proportional und werden zentriert, der Chipgrund entspricht dem SVG-Grund (#F6F7F7) */
#nm-footer.jp-footer .jp-footer__pay--logo {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   box-sizing: border-box;
   width: 58px;
   height: 36px;
   min-height: 0;
   padding: 0;
   overflow: hidden;
   border: 0;
   border-radius: 3px;
   background-color: #F6F7F7;
}
#nm-footer.jp-footer .jp-footer__pay img {
   display: block;
   width: auto;
   height: 36px;
   max-width: 100%;
}

/* Abschlussleiste */
#nm-footer.jp-footer .jp-footer__bottom {
   margin: 0;
   padding: 20px 0 28px;
   color: var(--jp-footer-muted);
   font-size: 13px;
   line-height: 1.5;
}
#nm-footer.jp-footer .jp-footer__copy,
#nm-footer.jp-footer .jp-footer__note {
   margin: 0;
}
#nm-footer.jp-footer .jp-footer__note {
   margin-top: 6px;
}

/* Tablet 768-1199px: etwas kompaktere Abstände */
@media (max-width: 1199px) {
   #nm-footer.jp-footer {
      --jp-footer-pad-top: 48px;
   }
}

/* Smartphone <= 767px (AP3b, kompakt): Marke oben, Linkgruppen darunter, gut bedienbare Links (Trefferfläche >= 44px), kompakte Abstände und Zahlungsleiste.
   Das Markup und die Tab-Reihenfolge bleiben unverändert (Marke, Information & Service, Shop & Produkte, Rechtliches); nur die Raster ändern sich. */
@media (max-width: 767px) {
   #nm-footer.jp-footer {
      --jp-footer-pad-top: 32px;
      --jp-footer-gap-y:   28px;
      --jp-footer-col-gap: clamp(12px, 3vw, 28px); /* Spaltenabstand: gilt für das Raster und für „Rechtliches“, damit beide Spalten bündig stehen */
   }
   #nm-footer.jp-footer .jp-footer__title {
      margin-bottom: 8px;
   }
   #nm-footer.jp-footer .jp-footer__name {
      font-size: 18px;
      letter-spacing: .03em;
   }
   #nm-footer.jp-footer .jp-footer__text {
      margin-bottom: 16px;
   }
   #nm-footer.jp-footer .jp-footer__link {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 0;
   }
   #nm-footer.jp-footer .jp-footer__item--action {
      margin: 8px 0;
   }
   #nm-footer.jp-footer .jp-footer__action {
      display: inline-flex;
      padding: 13px; /* überschreibt das Link-Padding oben (gleiche Spezifität, spätere Regel) */
   }
   #nm-footer.jp-footer .jp-footer__payments {
      margin-top: 32px;
      row-gap: 14px;
   }
   #nm-footer.jp-footer .jp-footer__pay-list {
      gap: 8px;
   }
}
/* Smartphone 375-767px: „Information & Service“ und „Shop & Produkte“ nebeneinander (gemessen: ab 375px ohne Linkumbruch; darunter bleibt es einspaltig),
   Marke und „Rechtliches“ über die volle Breite. */
@media (min-width: 375px) and (max-width: 767px) {
   #nm-footer .jp-footer__main {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--jp-footer-col-gap);
   }
   #nm-footer .jp-footer__brand,
   #nm-footer .jp-footer__col--legal {
      grid-column: 1 / -1;
   }
}
/* 375-479px: die beiden Überschriften brechen um → zwei Zeilen reservieren, damit die Linklisten bündig beginnen */
@media (min-width: 375px) and (max-width: 479px) {
   #nm-footer.jp-footer .jp-footer__col--info .jp-footer__title,
   #nm-footer.jp-footer .jp-footer__col--shop .jp-footer__title {
      min-height: 2.8em;
   }
}
/* 390-767px: „Rechtliches“ zweispaltig (AGB | Impressum, Datenschutz | Cookie-Richtlinie, Widerruf | Vertrag widerrufen); schmaler als 390px bleibt die Liste
   einspaltig (sonst bricht „Cookie-Richtlinie (EU)“ um). Bis 549px steht der Aktionslink in einer eigenen Zeile über die volle Breite. */
@media (min-width: 390px) and (max-width: 767px) {
   #nm-footer.jp-footer .jp-footer__col--legal .jp-footer__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--jp-footer-col-gap);
      align-items: center;
   }
   #nm-footer.jp-footer .jp-footer__col--legal .jp-footer__item--action {
      margin: 4px 0;
   }
}
@media (min-width: 390px) and (max-width: 549px) {
   #nm-footer.jp-footer .jp-footer__col--legal .jp-footer__item--action {
      grid-column: 1 / -1;
   }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
   #nm-footer.jp-footer .jp-footer__action,
   #nm-footer.jp-footer .jp-footer__action-arrow {
      transition: none;
   }
   #nm-footer.jp-footer .jp-footer__action:hover .jp-footer__action-arrow {
      transform: none;
   }
}