/* =========================================================
   Musikkapelle Eberfing e.V. – gemeinsames Stylesheet
   Designsprache abgeleitet vom Vereinslogo (Königsblau + Gold)
   ========================================================= */

:root {
  /* === Logo-treue Hauptpalette: Königsblau + Heraldik-Gold === */
  --blue-deep: #1A4A8C;         /* Hauptfarbe: Königsblau (Logo-Ring & Schrift) */
  --blue-medium: #2D5DAA;       /* helleres Blau für Hover/Akzent */
  --blue-soft: #6E8AB7;         /* gedämpftes Blau für sekundäre Flächen */
  --blue-pale: #C9D5E8;         /* sehr helles Blau für Hintergründe */

  --cream: #FAF5E4;             /* Pergamentcreme (Logo-Hintergrund) */
  --cream-light: #FDFBF2;       /* helleres Creme */
  --cream-paper: #F0E9D2;       /* etwas wärmer */

  --gold: #E5B836;              /* warmes Heraldik-Gold (Schild/Lyra im Logo) */
  --gold-dark: #B68822;         /* dunkleres Gold für Borders/Hover */

  --ink: #1A2236;               /* Dunkelnavy statt reinem Schwarz */
  --shadow: rgba(26, 74, 140, 0.18);

  /* === Legacy-Aliase: alte --green-* Referenzen zeigen auf Blau === */
  /* So funktionieren bestehende Templates und CSS-Regeln weiter,
     ohne dass jede Datei einzeln angepasst werden muss. */
  --green-deep: var(--blue-deep);
  --green-medium: var(--blue-medium);
  --green-soft: var(--blue-soft);
  --green-pale: var(--blue-pale);
}

/* -------- Reset & Basis -------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Lora', 'Georgia', serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  background-image:
    radial-gradient(ellipse at top, rgba(122,154,130,0.10), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(201,163,71,0.07), transparent 70%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .display {
  font-family: 'Pirata One', 'UnifrakturMaguntia', 'Lora', serif;
  color: var(--blue-deep);
  letter-spacing: 0.01em;
  font-weight: 400;
  line-height: 1.2;
}

/* Fraktur ist in Großbuchstaben schwer lesbar — daher KEIN text-transform: uppercase. */
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: 0.6rem; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: 1rem; }
h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1rem; }
a { color: var(--green-medium); text-decoration: none; }
a:hover { color: var(--gold-dark); }

/* -------- Layout-Hilfen -------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4rem 0; }
.section-alt { background: var(--cream-light); border-top: 1px solid rgba(26,74,140,0.08); border-bottom: 1px solid rgba(26,74,140,0.08); }

.divider {
  display: block;
  width: 80px;
  height: 3px;
  background: var(--gold);
  margin: 0.6rem 0 1.4rem 0;
  border-radius: 2px;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* -------- Navigation / Header -------- */
.site-header {
  /* Logo-Bereich links: Weiß wie der Logo-Hintergrund, sanfter Übergang ins Vereins-Blau */
  background: linear-gradient(
      to right,
      #FFFFFF 0px,
      #FFFFFF 130px,
      var(--blue-pale) 270px,
      var(--blue-soft) 380px,
      var(--blue-deep) 520px,
      var(--blue-deep) 100%);
  color: var(--cream);
  border-bottom: 4px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.site-header > .container {
  max-width: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img { height: 64px; width: 64px; object-fit: contain; display: block; }
.header-right {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .site-header {
    background: linear-gradient(
      to right,
      #FFFFFF 0px,
      #FFFFFF 80px,
      var(--blue-pale) 180px,
      var(--blue-soft) 260px,
      var(--blue-deep) 360px,
      var(--blue-deep) 100%);
  }
  .header-right { justify-content: flex-end; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; }
.brand-text:hover .brand-name { color: var(--gold); }
.brand-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.brand-tag {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 0.9rem;
}

nav.primary ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0.25rem;
}
nav.primary a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  color: var(--cream);
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
nav.primary a:hover,
nav.primary a.active {
  background: var(--gold);
  color: var(--green-deep);
}

/* -------- Hero — weißblauer Himmel mit Radial-Glow + 4-Schichten-Silhouette -------- */
.hero {
  position: relative;
  min-height: clamp(420px, 60vh, 720px);
  /* Analog Festtage: Radial-Glow oben für Wärme, dann Sky-Gradient. */
  background:
    radial-gradient(ellipse at 55% 25%, rgba(229, 184, 54, 0.18), transparent 52%),
    linear-gradient(
      to bottom,
      #FFFFFF 0%,
      #D6E0F0 22%,
      var(--blue-soft) 50%,
      var(--blue-medium) 75%,
      var(--blue-deep) 100%
    );
  color: var(--cream);
  padding: 9rem 1.5rem 12rem;
  text-align: center;
  overflow: hidden;
}
.hero h1 {
  text-shadow: 0 2px 10px rgba(10, 39, 82, 0.45);
}
.hero::before {
  /* Drei Ebenen Pfaffenwinkel-Panorama nach Vorbild Eberfinger Filialkirche:
     1. Distante Wetterstein-Alpen mit Zugspitze-Cluster — hellstes Blau (atmosph. Distanz)
     2. Bewaldeter Mittelgrund — mittleres Brand-Blau
     3. Wiese mit Eberfinger Kirche (Bayerischer Zwiebelturm + Nave) — dunkelstes Navy */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 240px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'><polygon fill='%236E8AB7' points='0,240 0,32 20,32 60,52 100,32 140,55 180,70 220,90 260,105 330,100 370,75 400,55 430,30 465,55 500,28 540,15 580,8 620,18 660,8 700,5 740,12 780,28 820,10 860,22 900,38 940,18 980,28 1020,15 1060,38 1100,22 1140,32 1180,15 1200,15 1200,240'/><polygon fill='%231A4A8C' points='0,240 0,153 120,87 220,142 340,65 480,153 600,76 740,164 880,98 1000,153 1100,109 1200,175 1200,240'/><polygon fill='%232D5DAA' opacity='0.7' points='0,240 0,185 150,120 280,175 420,109 560,175 700,120 840,185 980,131 1120,175 1200,153 1200,240'/><rect x='750' y='150' width='75' height='90' fill='%230A2752'/><polygon points='750,150 787,130 825,150' fill='%230A2752'/><rect x='825' y='130' width='22' height='110' fill='%230A2752'/><polygon points='825,130 821,120 819,110 823,103 828,98 832,95 840,95 844,98 849,103 853,110 851,120 847,130' fill='%230A2752'/><rect x='834' y='78' width='4' height='17' fill='%230A2752'/><rect x='835' y='66' width='2' height='14' fill='%230A2752'/><rect x='831' y='70' width='10' height='2' fill='%230A2752'/></svg>") center bottom / cover no-repeat;
  pointer-events: none;
}
.hero h1 { color: var(--cream); margin-bottom: 0.6rem; }
.hero .subtitle {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}
.hero .hero-body { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero .gruss {
  display: inline-block;
  font-family: 'Lora', serif;
  background: var(--cream);
  color: var(--green-deep);
  padding: 0.35rem 1.2rem;
  border-radius: 30px;
  font-style: italic;
  margin-bottom: 1.6rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--gold);
}

.hero-cta { margin-top: 1.8rem; display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--green-deep);
  transition: all 0.2s ease;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover { background: var(--cream); border-color: var(--cream); color: var(--green-deep); }
.btn.outline { background: transparent; color: var(--cream); }
.btn.outline:hover { background: var(--cream); color: var(--green-deep); }
.btn.dark { background: var(--green-deep); color: var(--cream); border-color: var(--green-deep); }
.btn.dark:hover { background: var(--green-medium); border-color: var(--green-medium); }

/* -------- Karten / Gruppen -------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--cream-light);
  border: 1px solid rgba(26,74,140,0.12);
  border-radius: 8px;
  padding: 1.6rem;
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(26,74,140,0.25);
}
.card-icon {
  width: 64px; height: 64px;
  background: transparent;
  color: var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  overflow: hidden;
}
.card-icon img { width: 100%; height: 100%; display: block; }
.card-icon.text-icon {
  width: 56px; height: 56px;
  background: var(--green-deep);
  border: 2px solid var(--gold);
}
.card h3 { color: var(--green-deep); }

/* -------- Festtage-Badge -------- */
.festtage-banner {
  background: var(--green-deep);
  color: var(--cream);
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.festtage-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(201,163,71,0.18), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(122,154,130,0.20), transparent 55%);
}
.festtage-inner {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.festtage-inner img {
  width: 100%;
  max-width: 280px;
  border-radius: 50%;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
}
.festtage-text h2 { color: var(--gold); }
.festtage-text p { color: var(--cream); }
.festtage-meta {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin: 1.2rem 0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.festtage-meta span {
  border: 1px solid var(--gold);
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  color: var(--cream);
}

/* -------- Termine -------- */
.termine-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.termin {
  background: var(--cream-light);
  border-left: 5px solid var(--gold);
  padding: 1.2rem 1.4rem;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 8px var(--shadow);
}
.termin .datum {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  color: var(--green-deep);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.termin .titel {
  font-weight: 600;
  color: var(--green-medium);
  margin-bottom: 0.4rem;
}
.termin .detail {
  font-size: 0.92rem;
  color: #44513f;
  line-height: 1.5;
}

/* -------- Chronik / Timeline -------- */
.timeline {
  border-left: 3px solid var(--gold);
  padding-left: 1.8rem;
  margin-left: 0.5rem;
}
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 3px solid var(--gold);
  position: absolute;
  left: -2.55rem; top: 0.25rem;
}
.timeline-item .year {
  font-family: 'Oswald', sans-serif;
  color: var(--green-medium);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

/* -------- Kontakt -------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}
.kontakt-card {
  background: var(--cream-light);
  border-top: 4px solid var(--green-deep);
  padding: 1.4rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow);
}
.kontakt-card h4 { color: var(--gold-dark); margin-bottom: 0.4rem; }
.kontakt-card .name { font-weight: 600; color: var(--green-deep); }

/* Form */
form.contact {
  display: grid;
  gap: 0.9rem;
  max-width: 600px;
  margin: 0 auto;
}
form.contact label { font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-deep); }
form.contact input, form.contact textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: 'Lora', serif;
  font-size: 1rem;
  background: var(--cream-light);
  border: 1px solid rgba(26,74,140,0.25);
  border-radius: 4px;
  color: var(--ink);
}
form.contact input:focus, form.contact textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,163,71,0.18);
}

/* -------- Footer -------- */
.site-footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 4rem;
  border-top: 4px solid var(--gold);
}
.site-footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.site-footer h4 { color: var(--gold); margin-bottom: 0.8rem; }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 0.4rem; }
.copy {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(243,236,213,0.2);
  font-size: 0.85rem;
  color: rgba(243,236,213,0.7);
}

/* -------- Illustration-Grid -------- */
.illu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.illu {
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px var(--shadow);
  background: var(--cream-light);
  border: 1px solid rgba(26,74,140,0.12);
  position: relative;
}
.illu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.illu .caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(26,74,140,0.85));
  color: var(--cream);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 0.4rem 0.5rem;
  font-size: 0.85rem;
}

/* -------- Banner-Illustration -------- */
.banner-illu {
  width: 100%;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px var(--shadow);
  background: var(--cream-light);
  margin: 1.5rem 0;
  border: 1px solid rgba(26,74,140,0.12);
}
.banner-illu img { width: 100%; display: block; }

/* -------- Hero-Illustration unter Hero -------- */
.hero-illu {
  background: var(--cream);
  padding: 0;
  margin-top: -1px;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--gold);
}
.hero-illu img { width: 100%; display: block; }
.hero-illu.photo { max-height: 460px; }
.hero-illu.photo img { object-fit: cover; width: 100%; height: 100%; max-height: 460px; }
.hero-illu.photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 80px;
  background: linear-gradient(transparent, var(--cream));
  pointer-events: none;
}

/* -------- Foto-Karten (Register / Gruppen) -------- */
.photo-card {
  background: var(--cream-light);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(26,74,140,0.12);
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(26,74,140,0.28);
}
.photo-card .img-wrap {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--cream);
}
.photo-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.photo-card:hover .img-wrap img { transform: scale(1.04); }
.photo-card .body { padding: 1rem 1.2rem 1.2rem; }
.photo-card h3 { margin-bottom: 0.3rem; color: var(--green-deep); }
.photo-card .muted { font-size: 0.95rem; }

/* Galerie 2-3 Spalten */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.photo-gallery .photo-tile {
  aspect-ratio: 2/3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow);
  background: var(--green-deep);
}
.photo-gallery .photo-tile img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.photo-gallery .photo-tile:hover img { transform: scale(1.04); }

/* -------- Social-Media Icon-Links (Instagram etc.) -------- */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
}
.social-link svg {
  width: 22px;
  height: 22px;
  display: block;
}
.social-link:hover {
  color: var(--cream);
  transform: translateY(-1px);
}

/* Header-Variante: Default = gefülltes Gold (auffällig),
   Hover = Instagram-Brand-Verlauf via SVG-Gradient */
.header-social {
  margin-left: 1rem;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--blue-deep);
  border: 2px solid var(--gold);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.header-social:hover {
  background: #FFFFFF;
  border-color: #DD2A7B;
  transform: translateY(-1px) scale(1.05);
}

/* Auf Hover wechselt das SVG-Linework auf den Instagram-Verlauf */
.header-social:hover svg rect,
.header-social:hover svg path,
.header-social:hover svg line {
  stroke: url(#ig-gradient-header);
}

/* Footer-Variante: Icon mit Handle-Text daneben */
.footer-social {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.footer-social svg {
  width: 20px;
  height: 20px;
}

/* -------- Scrollbar ausblenden (Scrollen weiter möglich) -------- */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}
body {
  -ms-overflow-style: none;
}

/* =========================================================
   RESPONSIVE DESIGN — Musikkapelle Hauptseite
   Breakpoints: 1100 / 900 / 640 / 480
   ========================================================= */

/* ---------- <= 1100px ---------- */
@media (max-width: 1100px) {
  .site-header .container {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .container { padding: 0 1rem; }
}

/* ---------- <= 900px: Tablet hoch ---------- */
@media (max-width: 900px) {
  .site-header .container {
    padding: 0.6rem 1rem;
  }
  .header-right {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .nav.primary ul {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .nav.primary li a {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  .brand img { width: 50px; height: 50px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: 0.8rem; }

  /* Hero kompakter */
  .hero { padding: 3rem 1rem 4rem; }
  .hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }

  /* Card-Grids 2-spaltig */
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Footer 2-spaltig */
  .site-footer .container {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* ---------- <= 640px: Smartphone ---------- */
@media (max-width: 640px) {
  /* Header weiter komprimieren */
  .brand-text { display: none; }
  .nav.primary li a {
    font-size: 0.75rem;
    padding: 0.3rem 0.45rem;
  }

  /* Hero kompakt */
  .hero { padding: 2rem 1rem 3rem; }
  .hero h1 { font-size: 1.6rem; letter-spacing: 0.04em; }
  .hero .hero-subtitle { font-size: 0.95rem; }
  .hero .hero-buttons { flex-direction: column; gap: 0.6rem; }
  .hero .btn { width: 100%; max-width: 280px; }

  /* Sections kompakter */
  section { padding: 2.5rem 1rem; }
  section h2 { font-size: 1.4rem; }

  /* Cards 1-spaltig */
  .cards-grid { grid-template-columns: 1fr; }
  .card { padding: 1rem 1.2rem; }

  /* Termine-Liste */
  .termine-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.8rem 0;
  }
  .termine-datum { font-size: 0.95rem; }

  /* Festtage-Banner kompakter */
  .festtage-banner {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .festtage-banner img { width: 90px; height: 90px; }

  /* Footer 1-spaltig */
  .site-footer { padding: 2rem 1rem 1rem; }
  .site-footer .container {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    text-align: center;
  }
}

/* ---------- <= 480px ---------- */
@media (max-width: 480px) {
  .brand img { width: 42px; height: 42px; }
  .hero h1 { font-size: 1.4rem; }
  section h2 { font-size: 1.2rem; }
  .nav.primary li a {
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
  }
}