/* Ruhige Farbwelt: Beige ist die Bühne, Blau und Gold sind Akzente. */
:root {
  --cream: #f8f1e6;
  --cream-deep: #e7d4b5;
  --yellow: #cfa64d;
  --blue: #1d6696;
  --navy: #103b5f;
  --text: #103b5f;
}

body { background: var(--cream); }
.header { background: rgba(248, 241, 230, .96); }
.logo { background: transparent; overflow: visible; }
.logo img { width: 176px; height: 128px; object-fit: contain; mix-blend-mode: normal; }

.hero { background: var(--cream-deep); }
.hero-image,
.association-photo {
  box-shadow: 0 18px 42px rgba(76, 54, 25, .16);
}
.statement { background: var(--navy); }
.association { background: #f0e2cc; }
.board { background: #f3e8d7; }
.closing { background: #e9dac2; }

.event,
.impact-grid > div {
  border-color: rgba(76, 54, 25, .13);
  box-shadow: 0 14px 30px rgba(76, 54, 25, .10);
}
.impact-grid i { background: #e7d4b5; }

.board-list b,
.board-list li:nth-child(2) b,
.board-list li:nth-child(3) b,
.board-list li:nth-child(4) b,
.board-list li:nth-child(5) b {
  background: #1169a5;
  color: #fff;
  border-color: #fffaf2;
  box-shadow: none;
}
.board-list article:nth-child(2) b { background: #d4a640; color: #16324b; }
.board-list article:nth-child(3) b { background: #d75b47; }
.board-list article:nth-child(4) b { background: #3b8b6e; }
.board-list article:nth-child(5) b { background: #a84e75; }
.board-list article > a { color: #1169a5; }

.footer-photo {
  border: 0;
  box-shadow: 0 -8px 32px rgba(36, 28, 16, .12);
}
.footer-brand img {
  width: 178px;
  height: 114px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  object-fit: contain;
}
.site-credit { display:block; margin-top:9px; color:rgba(255,255,255,.82); font-weight:700; }

/* Partnerübersicht */
.partner-hero { background: var(--cream-deep); }
.partner-directory { background: var(--cream); }
.partner-card {
  border-color: rgba(76, 54, 25, .13);
  box-shadow: 0 12px 28px rgba(76, 54, 25, .10);
}
.partner-logo {
  background: linear-gradient(135deg, #fcf8f1, #eee0c7);
  border-color: rgba(76, 54, 25, .12);
}
.filter-buttons button { background: #fffaf2; }
.filter-buttons button.is-selected { background: var(--blue); }

/* Formulare und Rechtliches */
.form-header,
.legal-header { background: #fffaf2; }
.form-hero { background: var(--cream-deep); }
.online-form {
  border-color: rgba(76, 54, 25, .13);
  box-shadow: 0 18px 40px rgba(76, 54, 25, .12);
}
.choice-grid label { background: #fbf7ef; }
.consent { background: #f3e7d4; }
.legal-main { background: var(--cream); }

/* Header: das Logo bleibt innerhalb seiner Fläche und die Navigation klappt früher ein. */
@media (max-width: 1100px) {
  .header { height: 86px; }
  .nav-wrap { justify-content: space-between; gap: 18px; }
  .logo { flex: 0 0 132px; width: 132px; height: 82px; }
  .logo img { width: 126px; height: 82px; }
  .menu-label { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: .8rem; cursor: pointer; }
  .menu-label i { display: block; width: 19px; height: 2px; background: var(--navy); }
  .nav { display: none; position: absolute; z-index: 30; top: 86px; left: 0; right: 0; padding: 22px 24px 26px; flex-direction: column; align-items: flex-start; gap: 17px; background: #fffaf2; border-top: 1px solid rgba(76, 54, 25, .12); box-shadow: 0 18px 28px rgba(76, 54, 25, .14); }
  .menu-input:checked ~ .nav { display: flex; }
  .nav .nav-cta { width: 100%; text-align: center; }
}

@media (max-width: 760px) {
  .header { height: 78px; }
  .logo { flex-basis: 118px; width: 118px; height: 72px; }
  .logo img { width: 112px; height: 72px; }
  .nav { top: 78px; padding: 20px; }
  .hero-image,
  .association-photo { box-shadow: 0 12px 28px rgba(76, 54, 25, .14); }
  .footer-brand img { width: 148px; height: 96px; }
}

@media (max-width: 520px) {
  .wrap { width: min(100% - 32px, 1500px); }
  .board-list { grid-template-columns: 1fr; gap: 30px; }
  .board-list article { max-width: 290px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links, .footer-social { gap: 9px; }
}

@supports (content-visibility: auto) {
  .association, .impact, .board, .closing, footer { content-visibility: auto; contain-intrinsic-size: auto 760px; }
}