/* ============================================================
   Mobile-Optimierung für "Wir für Hohenhameln"
   Die Seiten sind komplett inline gestylt (Desktop-first) und
   werden vom dc-Runtime über die CSSOM neu serialisiert, d.h.
   die style-Attribute liegen in normalisierter Form vor
   (z.B. "font-size: 60px", "grid-template-columns: repeat(3, 1fr)",
    ".95fr" -> "0.95fr"). Die Selektoren unten treffen genau
   diese normalisierte Schreibweise.
   Breakpoints:  <= 860px (Tablet/groß)   <= 520px (Handy)
   ============================================================ */

/* --- Grundsicherung: kein horizontales Scrollen durch Deko --- */
@media (max-width: 860px) {
  body    { overflow-x: clip !important; }
  section { overflow-x: clip !important; }   /* dekorative absolute Kreise kappen */
  img     { max-width: 100% !important; }
}

/* --- Hero-Badge (rundes Logo am Team-Foto) ---
   Auf dem Desktop hängt das Siegel angeschnitten über der linken oberen
   Ecke. Auf dem Handy gibt es keinen Platz dafür: Entweder wird es vom
   overflow-x-Clip der Section abgeschnitten (negatives left) oder es
   verdeckt die Köpfe auf dem Gruppenfoto. Darum mobil ganz ausblenden –
   das Logo steht ohnehin bereits in der Navigation. */
@media (max-width: 860px) {
  .hero-badge { display: none !important; }
}

/* ============================================================
   1) Mehrspaltige Grids stapeln
   ============================================================ */
@media (max-width: 860px) {
  /* Zweispalter (Hero/Text+Bild) und dreispaltige Hero-Grids -> eine Spalte */
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.3fr 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Index-Hero: extra Luft, da das "Das sind wir!"-Label nach oben übersteht
     und sonst an der Datums-Box klebt */
  [style*="grid-template-columns: 1.05fr 0.95fr"] { gap: 56px !important; }

  /* Text + Button nebeneinander (z.B. "Wahlhelfer:innen gesucht") -> stapeln */
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Karten-/Statistik-Raster -> zunächst zweispaltig */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 520px) {
  /* Auf dem Handy alles einspaltig */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ============================================================
   2) Große Schriftgrößen herunterskalieren
      (normalisierte "font-size: NNpx"-Form, mit Leerzeichen)
   ============================================================ */
@media (max-width: 860px) {
  [style*="font-size: 180px"] { font-size: 68px !important; }
  [style*="font-size: 130px"] { font-size: 54px !important; }
  [style*="font-size: 64px"]  { font-size: 40px !important; }
  [style*="font-size: 60px"]  { font-size: 38px !important; }
  [style*="font-size: 56px"]  { font-size: 36px !important; }
  [style*="font-size: 54px"]  { font-size: 34px !important; }
  [style*="font-size: 52px"]  { font-size: 33px !important; }
  [style*="font-size: 46px"]  { font-size: 31px !important; }
  [style*="font-size: 40px"]  { font-size: 29px !important; }
  [style*="font-size: 38px"]  { font-size: 27px !important; }
}

@media (max-width: 520px) {
  [style*="font-size: 180px"] { font-size: 52px !important; }
  [style*="font-size: 130px"] { font-size: 44px !important; }
  [style*="font-size: 64px"]  { font-size: 33px !important; }
  [style*="font-size: 60px"]  { font-size: 31px !important; }
  [style*="font-size: 56px"]  { font-size: 30px !important; }
  [style*="font-size: 54px"]  { font-size: 29px !important; }
  [style*="font-size: 52px"]  { font-size: 28px !important; }
  [style*="font-size: 46px"]  { font-size: 27px !important; }
  [style*="font-size: 40px"]  { font-size: 26px !important; }
  [style*="font-size: 38px"]  { font-size: 25px !important; }
  [style*="font-size: 34px"]  { font-size: 24px !important; }
  [style*="font-size: 32px"]  { font-size: 23px !important; }
  [style*="font-size: 31px"]  { font-size: 22px !important; }
  [style*="font-size: 30px"]  { font-size: 22px !important; }
}

/* ============================================================
   3) Navigation als Burger-Menü auf dem Handy
   ============================================================ */
/* Burger-Button: auf Desktop ausgeblendet, Icon oben + "Menü" darunter */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 4px 6px;
  cursor: pointer;
  color: #14315C;
  font-family: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.burger .ms { font-size: 29px; }
.burger .burger-label { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.burger .icon-close { display: none; }
html.menu-open .burger .icon-menu  { display: none; }
html.menu-open .burger .icon-close { display: inline-block; }

@media (max-width: 720px) {
  /* Header-Zeile: Logo links, Burger rechts */
  header nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 24px !important;
  }
  .burger { display: inline-flex !important; }

  /* Link-Gruppe standardmäßig versteckt … */
  header nav > div { display: none !important; }

  /* … und als aufklappbares Panel unter dem Header, wenn geöffnet */
  html.menu-open header nav > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    order: 3 !important;
    gap: 2px !important;
    margin: 8px 0 2px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e7e3d8 !important;
  }
  html.menu-open header nav > div a {
    font-size: 17px !important;
    padding: 12px 6px !important;
    border-radius: 10px !important;
  }
  html.menu-open header nav > div a[href="wahl.html"] {
    align-self: flex-start !important;
    margin-top: 8px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 520px) {
  /* Auf dem Handy sitzen die Sections bei 18px – Header gleich ausrichten */
  header nav { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ============================================================
   4) Abschnitts-Innenabstände auf dem Handy verschlanken
   ============================================================ */
@media (max-width: 520px) {
  [style*="padding: 56px 24px"] { padding: 34px 18px !important; }
  [style*="padding: 64px 24px"] { padding: 36px 18px !important; }
  [style*="padding: 72px 24px"] { padding: 38px 18px !important; }
  [style*="padding: 48px 24px"] { padding: 30px 18px !important; }
  [style*="padding: 40px 24px"] { padding: 26px 18px !important; }
}