/* ---------- ausgelagert aus <style> (sponsoring.html) ---------- */
/* ============ MOBILE · ≤760px ============
   Desktop bleibt unberührt — alle Anpassungen leben nur in diesem Block.
   !important überall dort, wo Inline-Styles überschrieben werden müssen. */
@media (max-width: 760px) {

  /* Basis: Section-Padding + Head untereinander */
  .web-section { padding: 48px 20px 28px !important; }
  .web-section .head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .web-section .head .l { font-size: 30px; }
  input, select, textarea { font-size: 16px !important; }
  .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero */
  .m-hero { height: auto !important; }
  .m-hero-inner { position: relative !important; left: 0 !important; top: 0 !important; max-width: 100% !important; padding: 88px 20px 56px; }
  .m-hero-title { font-size: clamp(48px, 15vw, 72px) !important; line-height: 0.9 !important; }
  .m-hero-giant { font-size: 180px !important; right: -50px !important; top: -40px !important; }
  .m-cta-row { flex-wrap: wrap; }
  .m-cta-row a { font-size: 17px !important; padding: 14px 20px !important; }

  /* Reichweite-Bar: 4 → 2 Spalten */
  .m-stats { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; padding: 28px 20px !important; }
  .m-stats > div { padding: 0 !important; border-right: none !important; }
  .m-stats .display { font-size: 42px !important; }
  .m-stats .display small { font-size: 20px !important; }

  /* Partner-Spotlight (OSPA / Stadtwerke): 2-spaltig → gestapelt */
  .spo-spotlight-card.hero-haupt, .spo-spotlight-card.hero-platin {
    grid-template-columns: 1fr !important; gap: 24px; padding: 28px 20px !important; min-height: 0;
  }
  .spo-spotlight-card.hero-haupt .heading { font-size: 44px; }
  .spo-spotlight-card.hero-platin .heading { font-size: 38px; }
  .spo-spotlight-card.hero-haupt .num, .spo-spotlight-card.hero-platin .num { font-size: 56px !important; }
  .spo-spotlight-card.hero-haupt .logo-box, .spo-spotlight-card.hero-platin .logo-box { min-height: 120px; padding: 20px; }
  .spo-spotlight-card.hero-haupt .logo-box img { max-height: 110px; }
  .spo-spotlight-card.hero-platin .logo-box img { max-height: 90px; }

  /* Tier-Logo-Grids: 4/7/10 Spalten → 1–3 */
  .spo-grid.tier-platin  { grid-template-columns: 1fr; }
  .spo-grid.tier-premium { grid-template-columns: 1fr; }
  .spo-grid.tier-team    { grid-template-columns: repeat(2, 1fr); }
  .spo-grid.tier-pro, .spo-grid.tier-club { grid-template-columns: repeat(3, 1fr); }
  .spo-grid.tier-ausruester { grid-template-columns: repeat(2, 1fr) !important; }
  .spo-grid.tier-partner    { grid-template-columns: repeat(3, 1fr) !important; }
  /* Kacheln müssen unter ihre Inhaltsbreite schrumpfen dürfen (sonst laufen die 1fr-Spalten über) */
  .spo-grid > .spo-tile { min-width: 0; }
  .spo-tile .caption .name, .spo-tile .caption .branche { overflow-wrap: anywhere; }
  .spo-tile .box img { max-width: 100%; height: auto; }

  /* Warum-Karten: 3 → 1 */
  .m-grid3 { grid-template-columns: 1fr !important; }
  .m-grid3 > div { min-height: 240px !important; padding: 28px 20px !important; }
  .m-grid3 .display { font-size: 36px !important; }

  /* Plattformen / Säulen (JS-gerenderte Grids) */
  .pkg-card { min-height: 0; }
  #plattformen { grid-template-columns: 1fr 1fr !important; }
  #saeulen { grid-template-columns: 1fr !important; }
  #saeulen > div { min-height: 160px !important; }

  /* Broschüre-Band */

  /* Testimonial */
  .m-testimonial { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 20px !important; }
  .m-testimonial .m-photo { height: 240px !important; }
  .m-testimonial .display { font-size: 26px !important; line-height: 1.08 !important; }

  /* Kontakt: Karte + Formular untereinander, Formularfelder einspaltig */
  .m-contact { grid-template-columns: 1fr !important; }
  .m-contact > div, .m-contact > form { padding: 24px 20px !important; }
  .m-contact .display { font-size: 34px !important; }
  .m-form-grid { grid-template-columns: 1fr !important; }
}

/* Neue Stufen (Ausrüster · Offizielle Partner): kleine Logo-Kacheln statt Vollbreite (Desktop) */
.spo-grid.tier-ausruester { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.spo-grid.tier-partner    { grid-template-columns: repeat(6, 1fr); gap: 10px; }

/* ---------- ausgelagert aus style="…" (sponsoring.html) ---------- */
.web .sponsoring-u1 {
  position: relative;
  height: 830px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.web .sponsoring-u2 {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/event-board-speech.jpg');
  background-size: cover;
  background-position: center 35%;
  opacity: 1;
}
.web .sponsoring-u3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(250,248,245,0.95) 0%,rgba(250,248,245,0.78) 44%,rgba(250,248,245,0.38) 72%,rgba(250,248,245,0.12) 100%),linear-gradient(0deg,rgba(250,248,245,0.60) 0%,transparent 42%);
}
.web .sponsoring-u4 {
  position: absolute;
  right: -80px;
  top: -90px;
  font-size: 460px;
  opacity: 0.20;
}
.web .sponsoring-u5 {
  position: absolute;
  left: 56px;
  top: 96px;
  max-width: 800px;
  z-index: 3;
}
.web .sponsoring-u6 {
  font-size: 148px;
  margin: 18px 0 0;
  color: var(--ink);
  line-height: 0.86;
}
.web .sponsoring-u7 {
  color: var(--red);
}
.web .sponsoring-u8 {
  font-size: 18px;
  line-height: 1.55;
  max-width: 580px;
  margin: 28px 0 0;
  color: rgba(11,46,63,0.78);
}
.web .sponsoring-u9 {
  display: flex;
  gap: 14px;
  margin-top: 38px;
}
.web .sponsoring-u10 {
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  padding: 16px 28px;
  text-transform: uppercase;
  border: 2px solid rgba(11,46,63,0.4);
  letter-spacing: 0.02em;
}
.web .sponsoring-u11 {
  background: var(--red);
  color: white;
  padding: 32px 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  overflow: hidden;
}
.web .sponsoring-u12 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px,transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.4;
}
.web .sponsoring-u13 {
  padding-right: 22px;
  border-right: 1px solid rgba(255,255,255,0.25);
  position: relative;
}
.web .sponsoring-u14 {
  font-size: 72px;
  color: white;
  line-height: 0.9;
}
.web .sponsoring-u15 {
  font-size: 36px;
}
.web .sponsoring-u16 {
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
}
.web .sponsoring-u17 {
  padding: 0 22px;
  border-right: 1px solid rgba(255,255,255,0.25);
  position: relative;
}
.web .sponsoring-u18 {
  font-size: 32px;
}
.web .sponsoring-u19 {
  padding-left: 22px;
  position: relative;
}
.web .sponsoring-u20 {
  background: var(--paper);
}
.web .sponsoring-u21 {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 18px;
}
.web .sponsoring-u22 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.web .sponsoring-u23 {
  font-size: 120px;
}
.web .sponsoring-u24 {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 48px;
}
.web .sponsoring-u25 {
  background: var(--ink);
  color: white;
}
.web .sponsoring-u26 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.web .sponsoring-u27 {
  font-size: 96px;
  color: var(--ink);
}
.web .sponsoring-u28 {
  color: rgba(255,255,255,0.95);
}
.web .sponsoring-u29 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.web .sponsoring-u30 {
  background: white;
  color: var(--ink);
  padding: 36px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(11,46,63,0.10);
  position: relative;
  overflow: hidden;
}
.web .sponsoring-u31 {
  position: absolute;
  right: -30px;
  bottom: -50px;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 280px;
  color: var(--red);
  line-height: 0.8;
  opacity: 0.10;
}
.web .sponsoring-u32 {
  position: relative;
}
.web .sponsoring-u33 {
  font-size: 48px;
  color: var(--ink);
}
.web .sponsoring-u34 {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 18px;
  color: #5b5853;
}
.web .sponsoring-u35 {
  background: var(--red);
  color: white;
  padding: 36px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.web .sponsoring-u36 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px,transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.3;
}
.web .sponsoring-u37 {
  position: absolute;
  right: -30px;
  bottom: -50px;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 280px;
  color: white;
  line-height: 0.8;
  opacity: 0.18;
}
.web .sponsoring-u38 {
  font-size: 48px;
  color: white;
}
.web .sponsoring-u39 {
  color: var(--ink);
}
.web .sponsoring-u40 {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 18px;
  color: rgba(255,255,255,0.95);
}
.web .sponsoring-u41 {
  background: white;
  color: var(--ink);
  padding: 36px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(11,46,63,0.08);
  position: relative;
  overflow: hidden;
}
.web .sponsoring-u42 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
.web .sponsoring-u43 {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 14px;
}
.web .sponsoring-u44 {
  margin-top: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5b5853;
}
.web .sponsoring-u45 {
  color: var(--red);
  font-weight: 700;
}
.web .sponsoring-u46 {
  background: var(--paper);
  padding-top: 64px;
  padding-bottom: 80px;
}
.web .sponsoring-u47 {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: stretch;
}
.web .sponsoring-u48 {
  background: var(--sand);
  color: var(--ink);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11,46,63,0.08);
}
.web .sponsoring-u49 {
  position: absolute;
  right: -40px;
  bottom: -50px;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 240px;
  color: var(--red);
  line-height: 0.8;
  opacity: 0.10;
}
.web .sponsoring-u50 {
  background: url('../../assets/mgmt-albs.jpg') center 14% / cover;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin-top: 18px;
  border: 3px solid var(--red);
}
.web .sponsoring-u51 {
  font-size: 48px;
  color: var(--ink);
  line-height: 0.92;
  margin-top: 24px;
}
.web .sponsoring-u52 {
  color: rgba(11,46,63,0.65);
  margin-top: 8px;
}
.web .sponsoring-u53 {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 18px;
  color: rgba(11,46,63,0.75);
}
.web .sponsoring-u54 {
  background: white;
  padding: 36px;
  border: 1px solid rgba(11,46,63,0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.web .sponsoring-u55 {
  font-size: 40px;
  color: var(--ink);
  line-height: 0.95;
}
.web .sponsoring-u56 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.web .sponsoring-u57 {
  margin-bottom: 6px;
}
.web .sponsoring-u58 {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid rgba(11,46,63,0.10);
  font-family: var(--body);
  font-size: 14px;
}
.web .sponsoring-u59 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.web .sponsoring-u60 {
  width: 100%;
  height: 120px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid rgba(11,46,63,0.10);
  font-family: var(--body);
  font-size: 14px;
  resize: vertical;
}
.web .sponsoring-u61 {
  background: var(--red);
  color: white;
  border: none;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 20px;
  padding: 16px 28px;
  text-transform: uppercase;
  align-self: flex-start;
  letter-spacing: 0.02em;
  cursor: pointer;
}