/*
 * CUSTOMER-ACCOUNT-FOOTER (16.09.2026) · DER EINE TIN MAN FOOTER.
 *
 * Autoritaet ist der Footer der oeffentlichen Seite (`mobile.html`). Dieselben
 * Regeln — unveraendert aus `mobile.html` herausgeloest — gelten jetzt fuer die
 * oeffentliche Seite UND das Customer Account (`account.html`). Es gibt keine
 * zweite, account-eigene Footer-Gestaltung. Markup beider Seiten:
 *
 *   <footer class="footer"> Logo · Adresse · Telefon/E-Mail · Legal-Links </footer>
 *
 * Breakpoints identisch zu `mobile.html`: Phone (Basis), Tablet 700–1100 px,
 * Desktop ab 1101 px. Die Variablen fallen auf die Werte von `mobile.html`
 * zurueck, falls eine Seite sie nicht definiert.
 */
.footer {
  padding:18px clamp(16px, 5vw, 20px) calc(24px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  text-align:center;
  color:rgba(255,255,255,.7);
  font-size:12px;
  line-height:1.55;
  background:var(--navy, #071a36);
  border-top:1px solid rgba(255,255,255,.1);
}
.footerLogo {
  width:86px;
  height:auto;
  margin:0 auto 8px;
  filter:brightness(0) invert(1);
  opacity:.72;
}
.footer a {
  color:rgba(255,255,255,.7);
  /* Die oeffentliche Seite setzt Links global ohne Unterstreichung; der Footer traegt das selbst. */
  text-decoration:none;
  transition:color 0.2s ease;
}
.footer a:hover { color:#fff; }
.footerAddress { margin-top:3px; }
.footerContact { margin-top:2px; }
.footerContact a { overflow-wrap:anywhere; }
.footerLegal { margin-top:8px; font-size:12px; }

/*
 * ACCOUNT UX · PART 1 (17.09.2026) · CUSTOMER ACCOUNT — MOBILE FOOTER.
 *
 * Auf dem Telefon gehoert der Footer zur Account-Oberflaeche: dieselbe Breite und
 * Ausrichtung wie die Account-Karten (16 px Seitenrand), gerundet wie eine Karte,
 * nicht vollflaechig, nicht sticky. Die Account-Shell ist dafuer eine Spalte, deren
 * Inhalt waechst: auf kurzen Seiten sitzt der Footer unten, auf langen folgt er dem
 * Inhalt. Tablet und Desktop behalten die gemeinsame Darstellung.
 */
@media (max-width:699px) {
  .account-shell { display:flex; flex-direction:column; }
  .account-shell > main { flex:1 0 auto; margin-inline:auto; }
  .footer.accountFooter {
    position:static;
    width:auto;
    margin:0 16px calc(16px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    padding:18px 16px 20px;
    border:0;
    border-radius:18px;
  }
}

@media (min-width:700px) and (max-width:1100px) {
  .footer { padding:28px 32px 32px; }
}

@media (min-width:1101px) {
  .footer {
    display:grid;
    grid-template-columns:auto minmax(220px,1fr) minmax(260px,1fr) auto;
    align-items:center;
    gap:18px 32px;
    padding:34px max(40px, calc((100% - var(--desktop-content-max, 1200px)) / 2));
    text-align:left;
  }
  .footerLogo { width:96px; margin:0; }
  .footerAddress, .footerContact, .footerLegal { margin:0; }
  .footerLegal { text-align:right; }
}