/* ===== Design to Smile — Footerbar ===== */
:root{
  --side:86px; --side-m:20px;
  --radius:36px;
  --pill-h:55px; /* identisch zum Header */
}

/* Seitenhintergrund hinter der Bar */
.dts-footer.footer--dark { background:#000; }
.dts-footer.footer--light{ background:#fff; }

.dts-footer{
  position:relative;
  padding: clamp(28px, 5vh, 64px) 0 calc(max(28px, env(safe-area-inset-bottom)));
}

/* Bar exakt wie Header: Höhe, Border, Radius, Padding */
.dts-footer__bar{
  width: calc(100% - (var(--side) * 2));
  margin: 0 auto;
  height: var(--pill-h);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 1.5px solid currentColor; /* Kontur 1.5px wie Header */
}

.footer--dark .dts-footer__bar{ background:#000; color:#fff; }
.footer--light .dts-footer__bar{ background:#fff; color:#000; }

/* Brand: +10px Offset zur Außenkontur, Desktop 1-zeilig */
.dts-footer__brand{
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  margin-left:10px;
}
.dts-footer__brand .brand-name{ font-weight:400; }
.dts-footer__brand .brand-role em{ font-style:italic; }
.dts-footer__brand .brand-sep{ opacity:.8; }

/* Nav rechts */
.dts-footer__nav{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(22px, 5.2vw, 48px);
  padding: 0 10px;
  margin-left:10px; /* Brand/Links gleiche Linkskante */
}

/* Links – gleiche Typo wie Header via .ui-nav-typo */
.dts-footer__link{
  position: relative;
  z-index: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 12px; /* wie Header .navbar a */
  transition: color .16s ease;
}
.footer--dark  .dts-footer__link{ color:#fff; }
.footer--light .dts-footer__link{ color:#000; }

/* Highlight-Pill – zentriert unter dem Link, wie Header */
.dts-footer__highlight{
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--pill-h);
  border-radius: var(--radius);
  transform: translate(0,-50%);
  width: 0;
  opacity: 0;
  z-index: 0;
  transition: transform .28s cubic-bezier(0.23,1,0.32,1),
              width .28s cubic-bezier(0.23,1,0.32,1),
              background-color .16s ease,
              opacity .16s ease;
}
.footer--dark  .dts-footer__highlight{ background:#fff; }
.footer--light .dts-footer__highlight{ background:#000; }

/* Kontrast AUF der Pill */
.footer--dark  .dts-footer__link.is-on-pill{ color:#000 !important; }
.footer--light .dts-footer__link.is-on-pill{ color:#fff !important; }

/* Active-Grundfarbe außerhalb der Pill */
.dts-footer__link.is-active{ color: inherit; }

/* =====================  MOBILE  ===================== */
@media (max-width: 900px){
  .dts-footer__bar{
    width: calc(100% - (var(--side-m) * 2));
    height: auto;
    display: block;    /* untereinander */
    padding: 14px 16px;
    gap: 0;
  }

  /* Brand wieder zweizeilig, +10px Offset bleibt */
  .dts-footer__brand{
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 2px;
    margin-left:10px;
  }
  .dts-footer__brand .brand-sep{ display:none; }

  /* Datenschutz/Impressum: linksbündig in exakt gleicher Flucht,
     +20px Abstand nach Brand */
  .dts-footer__nav{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin-top: 20px;  /* +20px Abstand */
    margin-left:10px;  /* gleiche Linkskante wie Brand */
    gap: clamp(16px, 5vw, 28px);
  }
}