/* === Basis === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }

/* === Header / Topbar === */
.topbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* links | mitte | rechts */
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

/* Positionen in der Grid-Zeile */
.menu-btn { justify-self: start; }
.logo-wrap { justify-self: center; }
.donate-link{ justify-self: end; }

/* Logo-Größe (zentral), fein anpassbar */
/* Desktop/Default */
.logo-wrap img{
  width: 420px; /* statt height */
  height: auto; /* Verhältnis bewahren */
  margin-top: -60px; /* dein „höher“ */
}

/* Mobile */
@media (max-width: 600px){
  .logo-wrap img{
    width: 60vw; /* responsive Breite */
    height: auto; /* wichtig */
    margin-top: -20px;
  }
}

/* Spendenlink-Optik */
.donate-link a{
  text-decoration: none;
  background: #7c3aed; /* Lila */
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.donate-link a:hover{ filter: brightness(0.95); }

.donate-link {
    display: none !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* Wichtig: gesamte Fensterhöhe */
  background: linear-gradient(
    180deg,
    #faf7ff 0%,
    #ffffff 50%,
    #fdfbff 100%
  );
  color: #333;
}

main {
  flex: 1;             /* Hauptinhalt nimmt restlichen Platz ein */
}

footer {
  margin-top: auto;    /* Footer immer ans Seitenende */
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
  color: #555;
  border-top: 1px solid #ccc;
}

.main-nav {
	padding: 0,5rem 1rem 1rem;
	background: transparent: /*später hübsch machen
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0.25rem 0;
}

/*Mobile: untereinander statt nebeneinander */
@media (max-width: 600px) {
.main-nav ul }
   flex-direction: column;
   }
}