/* meteo365 v4 — Mega-Footer
   Erweitert .site-footer aus base.css um Mehrspalten-Layout.
   Wird ausschliesslich auf Unterseiten via inc/footer_v4.php geladen.
*/

.site-footer.site-footer--mega {
  margin-top: 56px;
  padding: 48px 0 22px;
  /* Eigenes Token, NICHT mehr --header-bg: der Header ist Glas (84 %), der
     Footer soll deckend sein. Beide zeigen dieselbe Farbe #0C587A, nur mit
     unterschiedlicher Deckkraft (Maren, 07.08.2026). */
  background: var(--footer-bg, var(--header-bg));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ===== Grid ===== */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--legal { grid-column: span 1; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===== Spalten ===== */
.footer-col { min-width: 0; }

.footer-heading {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .85;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer-links a {
  display: inline-block;
  padding: 2px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--t) var(--ease);
}
.footer-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ===== Brand-Spalte ===== */
.footer-col--brand .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-brand-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg);
  padding: 4px;
  border: 1px solid var(--line);
  position: relative; z-index: 2;
}
/* Wortmarke als oranges Pill mit weißem Text — analog zum Header. */
.footer-brand-name {
  color: #fff;
  display: inline-flex; align-items: center; min-height: 34px;
  margin-left: -20px; padding: 0 14px 0 24px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #f8b03f, #f29c1f);
  border: 1px solid rgba(187, 107, 16, .26);
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: .02em;
  line-height: 1; white-space: nowrap;
  text-shadow: 0 0 4px rgba(0, 0, 0, .3);
}
.footer-claim {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.01em;
}
.footer-tagline {
  margin: 0 0 18px;
  max-width: 36ch;
  font-size: 13.5px;
  color: var(--muted);
}

/* ===== Social ===== */
.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social .social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--social-bg);
  border: 1px solid var(--social-border);
  color: var(--social-ink);
  transition: background var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.footer-social .social-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px);
}
.footer-social .social-link svg {
  width: 17px; height: 17px;
  fill: currentColor;
  stroke: none;
}

/* ===== Sprachen ===== */
.footer-langs {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.footer-lang {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--menu-input-bg);
  border: 1px solid var(--menu-input-border);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: color var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.footer-lang:hover {
  color: var(--text);
  border-color: var(--accent);
  text-decoration: none;
}
.footer-lang.is-active {
  background: linear-gradient(180deg, var(--brand-sun), var(--brand-sun-2));
  border-color: var(--accent-soft-border);
  color: var(--accent-ink);
}

/* ===== Bottom-Strip ===== */
.footer-bottom {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 12.5px;
}
.footer-copy { font-weight: 600; }
.footer-credits {
  max-width: 60ch;
  opacity: .82;
  font-size: 12px;
}
@media (max-width: 720px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Webcam-Partner: hervorgehobener Knopf, NUR im Footer (Entscheid Maren
   09.08.2026 — Header und Menue behalten den schlichten Textlink).
   Umrandet statt gefuellt: der Footer hat bereits einen kraeftigen Grund
   (--footer-bg #0c587a), eine Volltonflaeche wuerde daneben unruhig wirken. */
.site-footer .footer-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1rem; padding:.6rem 1rem;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  color:#fff; text-decoration:none; font-weight:600; font-size:.9rem;
  line-height:1.2; background:rgba(255,255,255,.08);
  transition:background .15s ease, border-color .15s ease;
}
.site-footer .footer-cta:hover,.site-footer .footer-cta:focus-visible{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.75);
}
.site-footer .footer-cta svg{ width:20px; height:20px; flex:none; }

/* Heller Footer (Licht-Thema hat KEIN --footer-bg, der Grund bleibt weiss)
   — dort braucht der Knopf die Markenfarbe, weiss auf weiss waere unsichtbar. */
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .site-footer .footer-cta{
    color:#0c587a; border-color:rgba(12,88,122,.45); background:rgba(12,88,122,.07);
  }
  html:not([data-theme="dark"]) .site-footer .footer-cta:hover,
  html:not([data-theme="dark"]) .site-footer .footer-cta:focus-visible{
    background:rgba(12,88,122,.14); border-color:rgba(12,88,122,.8);
  }
}