/* ---- collapsible footer columns on phones ---- */
@media (max-width:640px){
  .footer2-cols{flex-direction:column;gap:0;text-align:left}
  .footer2-cols .footer-col{border-top:1px solid rgba(255,255,255,.18)}
  .footer2-cols .footer-col:last-of-type{border-bottom:1px solid rgba(255,255,255,.18)}
  /* .footer2 in front: the React pages add their own footer CSS after this
     file, with an equally specific h5 colour that would otherwise win */
  .footer2 .footer2-cols .footer-col h5{
    font-size:16px;letter-spacing:.01em;text-transform:none;
    color:#fff;margin:0;padding:17px 0;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    -webkit-tap-highlight-color:transparent;
  }
  /* chevron */
  .footer2-cols .footer-col h5::after{
    content:'';flex:none;width:9px;height:9px;margin-right:0;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-3px) rotate(45deg);
    transition:transform .25s ease;
  }
  .footer2-cols .footer-col.is-open h5::after{transform:translateY(1px) rotate(-135deg)}
  /* grid-rows 0fr -> 1fr animates open without needing a fixed height */
  .footer2-cols .footer-col-body{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
  }
  .footer2-cols .footer-col.is-open .footer-col-body{grid-template-rows:1fr}
  .footer2-cols .footer-col-body>div{overflow:hidden;min-height:0}
  .footer2-cols .footer-col a{font-size:15px;margin-bottom:14px}
  .footer2-cols .footer-col.is-open .footer-col-body>div{padding-bottom:6px}
}

/* the homepage footer's 44px corner is the one to keep; the React shell
   ships 160px, which reads as a different footer on those pages */
@media (max-width:1024px){
  .footer2{border-radius:36px!important}
}
@media (max-width:640px){
  /* centre the subscribe box rather than letting it sit flush right */
  .footer2-subscribe{margin-left:auto!important;margin-right:auto!important;
    max-width:100%;box-sizing:border-box}
  .footer2-newsletter,.footer2-intro,.footer2-social{
    margin-left:auto;margin-right:auto;width:100%}
  .footer2-social{justify-content:center}
}

/* Impressum / Datenschutz sit directly under the copyright line, in the
   intro column, instead of in their own ruled strip above the wordmark. */
.footer2-intro .footer2-legal{padding:12px 0 0;border-top:none;gap:20px}

/* Social icons line up under their "Folgen Sie uns" heading. The shared
   .icon-btns row centres itself, which left them floating mid-column under a
   left-aligned heading on desktop; the stacked (<=1024px) footer is centred
   throughout, so there they stay centred. */
.footer2-newsletter .footer2-social{justify-content:flex-start}
@media (max-width:1024px){.footer2-newsletter .footer2-social{justify-content:center}}