:root{
  --bg-top:#1c4f8e;
  --bg-bottom:#3c6db3;
  --panel1:#3865a8;
  --panel2:#2f5fa5;
  --text:#fff;
  --shadow: 0 10px 24px rgba(0,0,0,.25);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: "Source Sans 3", sans-serif;
  color:var(--text);
  background-color: #fff; /* Hintergrund weiß */
  background-image: url('/footer_polarbaer.jpg');
  background-repeat: no-repeat;
  background-position: bottom center; /* Bild unten zentriert */
  background-size: contain; /* Bild wird vollständig angezeigt */
  display:grid;
  place-items:center;
  padding:18px;
}

a {
	color: #FFF;
}

/* Karte */
.card{
  width:min(980px,100%);
  min-height: clamp(320px, 70vh, 540px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--panel1) 0%, var(--panel2) 100%);
  border:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}

.inner{ padding: clamp(18px,4vw,28px); }

/* Logo */
.brand{
  display:flex;
  justify-content:center;
  margin-bottom: clamp(16px,3.5vw,24px);
}
.logo{
  max-width: 320px;
  height: auto;
}

/* Headline */
.headline{
  text-align:center; font-weight:600;
  font-size: clamp(18px,3.4vw,30px); line-height:1.35;
  margin: clamp(14px,3.2vw,26px) 0;
}

/* Trennlinie */
.divider{
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  margin: clamp(14px,3vw,22px) 0;
}

/* Footer-Kontakt 3 Spalten mit auto-Breite */
.footer{
  display:grid;
  grid-template-columns: auto auto auto; /* Spalten passen sich dem Inhalt an */
  gap: clamp(40px,5vw,80px);
  font-size: clamp(17px,1.8vw,18px);
  align-items: end;       /* <-- Spalten am unteren Rand ausrichten */
  justify-content: center; /* Block zentrieren */
}

.footer b{
  display:block;
  margin-bottom:6px;
  white-space: nowrap;
}

.footer div{
  white-space: nowrap;
}

@media (max-width:780px){ 
  .footer{
    grid-template-columns:1fr;
    text-align:center;
    gap: 14px;
    justify-content: stretch;
    align-items: start; /* auf Mobil wieder normale Ausrichtung */
  }
  .footer div{
    white-space: normal;
  }
	
	.logo {
    max-width: 220px;
    height: auto;
}
}