/* Sponsorenseite hinter der Sponsorentafel (app/bausteine/sponsoren_bereich.php):
   die Elemente der Sponsorenmappe im Aufbau der Webseite - Zahlenband,
   Sponsoring-Wege als nummerierte Kacheln, Trikot und Bande, Anfrage.
   Farben und Schriften aus den Bausteinen der Seite, beide Themen. Stufen
   nach der Leiter: bis 1000px Zahlen zu dritt, Wege zu zweit, Anfrage
   untereinander; bis 900px Trikot und Bande untereinander; bis 640px
   Felder untereinander; bis 480px Zahlen zu zweit, Wege untereinander. */

.sp-leerfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Zahlen: dunkles Band ------------------------------------------- */
.sp-zahlen .p-display { color: var(--p-band-fg); }
.sp-zahlen__lead { max-width: 60ch; margin: 0 0 var(--p-sp-sektion); color: var(--p-band-fg-2); }
.sp-zahlen__liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s8) var(--s6);
                    margin: 0; padding: 0; list-style: none; }
.sp-zahlen__liste li { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5);
                       border-top: 3px solid var(--p-on-band); }
.sp-zahl { font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; line-height: 1;
           font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--p-band-fg); font-variant-numeric: lining-nums; }
.sp-zahl--offen { font-size: var(--t-sm); }
.sp-zahl__text { font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--p-band-fg-2); }

/* ---- Sponsoring-Wege: nummerierte Kacheln zum Ankreuzen ---------------
   Groesse wie am 30.09.2026 (Auftraggeber: "bei dem Sponsorenlink soll das
   gleich groß bleiben"; 01.10.2026 nach dem Wegfall der Mindesthoehe: "die
   Größe ... wieder ... geändert"): ab 641px mindestens 180px hoch, bis
   640px so hoch wie der Inhalt. */
.sp-wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6);
           margin-top: var(--p-sp-oben); }
.sp-weg { position: relative; display: grid; align-content: start; gap: var(--s3); min-height: 180px;
          padding: var(--s7); cursor: pointer; overflow: hidden;
          background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--r-lg);
          transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.sp-weg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent-500);
                  transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.sp-weg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Nummer und Auswahlkreis stehen auf derselben Grundlinie (baseline), der
   Kreis mit seiner Mitte auf der Versalmitte der Nummer (Designvorgabe
   01.10.2026, wie das Kaestchen im Antrag): Unterkante auf der Grundlinie,
   top schiebt ihn um seine halbe Hoehe weniger die halbe Versalhoehe (cap)
   nach unten - dafuer traegt er die Schrift der Nummer. margin-top -12px:
   der Kreis drueckt die Nummer nicht nach unten, der Kopf bleibt so hoch
   wie vorher. align-items: center mittete den Zeilenkasten - die Nummer
   stand 2,5-3,5px ueber der Kreismitte. */
.sp-weg__kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s4); }
.sp-weg__nr { font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; line-height: 1;
              font-size: 2.4rem; color: var(--accent-text); font-variant-numeric: lining-nums; }
/* Rand wie die Felder im Antrag (antrag.css): hell --fg-3, dunkel 15 %
   --fg-2 dazu - mindestens 4,5:1 auf der Kachel und der Karte (#191919).
   --border-strong erreichte 2,2:1 hell und 1,7:1 dunkel. */
.sp-weg__haken { flex: none; width: 24px; height: 24px; border-radius: 50%;
                 border: 2px solid light-dark(var(--fg-3), color-mix(in srgb, var(--fg-3) 85%, var(--fg-2))); background: var(--bg-body);
                 margin-top: -12px; position: relative; top: calc(12px - .5cap);
                 font-family: var(--p-font-display); font-weight: 700; font-size: 2.4rem; }
.sp-weg__titel { font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; font-size: 1.15rem;
                 line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; color: var(--fg-1); hyphens: manual; }
.sp-weg:hover { transform: translateY(-2px); border-color: var(--accent-500); }
.sp-weg:hover::before { transform: scaleX(1); }
.sp-weg:has(input:focus-visible) { outline: 3px solid var(--accent-500); outline-offset: 2px; }
.sp-weg:has(input:checked) { background: var(--accent-500); border-color: var(--accent-500); }
.sp-weg:has(input:checked) .sp-weg__nr,
.sp-weg:has(input:checked) .sp-weg__titel { color: var(--accent-fg); }
.sp-weg:has(input:checked) .sp-weg__haken { border-color: #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230c5729' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Trikot und Bande: Bild und Text nebeneinander. */
.sp-nah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s8), 4vw, var(--s12));
          align-items: center; margin-top: var(--p-sp-sektion); }
.sp-nah__bild { margin: 0; }
.sp-nah__bild picture, .sp-nah__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
                                            object-fit: cover; border-radius: var(--r-lg); }
.sp-nah__text { display: grid; gap: var(--s5); }

/* ---- Partner werden: Schritte und Anfrage ------------------------------ */
.p-two.sp-anfrage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.sp-unterkopf { margin: var(--p-sp-sektion) 0 var(--s6); font-size: var(--p-t-h3); }
.sp-schritte { display: grid; gap: var(--s5); margin: 0 0 var(--p-sp-sektion); padding: 0; list-style: none; counter-reset: sp; }
.sp-schritte li { position: relative; padding-left: 44px; min-height: 30px; counter-increment: sp; color: var(--fg-2); }
.sp-schritte li b { color: var(--fg-1); }
.sp-schritte li::before { content: counter(sp); position: absolute; left: 0; top: -2px; display: grid; place-items: center;
                          width: 30px; height: 30px; border-radius: 50%; background: var(--accent-500); color: var(--accent-fg);
                          font-family: var(--p-font-display); font-weight: 700; }
/* Die Ziffer stand 2-3px ueber der Kreismitte (place-items mittet den
   Zeilenkasten). text-box schneidet ihn auf Versalhoehe bis Grundlinie,
   gleicher Innenabstand oben und unten stellt die Ziffer in die Mitte -
   der Kreis bleibt 30 x 30px (wie der Nummernkreis im Antrag). */
@supports (text-box: trim-both cap alphabetic) {
  .sp-schritte li::before { display: block; text-align: center;
                            padding-block: calc((30px - 1cap) / 2); text-box: trim-both cap alphabetic; }
}
.sp-karte { display: grid; gap: var(--s6); padding: clamp(var(--s7), 3vw, var(--s9)); }
.sp-karte .p-display { font-size: var(--p-t-h3); }
.sp-meldung { padding: var(--s5) var(--s6); font-weight: 600; color: var(--danger);
              background: var(--danger-tint); border-left: 3px solid var(--danger); border-radius: 0 var(--r-md) var(--r-md) 0; }
.sp-auswahl { display: grid; gap: var(--s2); padding: var(--s5) var(--s6); background: var(--surface-2); border-radius: var(--r-md); }
.sp-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.sp-feld { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.sp-feld--breit { grid-column: 1 / -1; }
.sp-feld > label { font-size: var(--t-sm); font-weight: 600; color: var(--fg-1); }
.sp-frei { font-weight: 400; color: var(--fg-3); }
.sp-feld input[type="text"], .sp-feld input[type="email"], .sp-feld input[type="tel"], .sp-feld textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--s4); font: inherit; color: var(--fg-1);
  background: var(--bg-body); border: 1px solid light-dark(var(--fg-3), color-mix(in srgb, var(--fg-3) 85%, var(--fg-2))); border-radius: var(--r-md); }
.sp-feld textarea { padding: var(--s4); min-height: 110px; resize: vertical; }
.sp-feld :is(input, textarea):focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.sp-feld [aria-invalid="true"] { border-color: var(--danger); }
/* Das Kaestchen steht mit seiner Mitte auf der Versalmitte der ersten Zeile
   (Designvorgabe 01.10.2026, wie .antrag-haken): Grundlinie, dann um die
   halbe Hoehe weniger die halbe Versalhoehe nach unten. Vorher stand es mit
   margin-top 2px 1,5px zu tief. min-height 25px: so hoch wie vorher das
   Kaestchen mit seinen Raendern - bei einzeiligem Text bleibt die Karte
   gleich hoch. */
.sp-haken { display: flex; align-items: baseline; gap: var(--s4); min-height: 25px; cursor: pointer; }
.sp-haken input { flex: none; width: 20px; height: 20px; font: inherit; margin-top: -10px;
                  position: relative; top: calc(10px - .5cap); accent-color: var(--accent-500); }
.sp-fehler { font-size: var(--t-sm); font-weight: 600; color: var(--danger); }
.sp-hinweis { font-size: var(--t-sm); color: var(--fg-3); }
.sp-liste { display: grid; gap: var(--s3); margin: 0; }
.sp-liste div { display: grid; grid-template-columns: 10em 1fr; gap: var(--s4); padding-bottom: var(--s3);
                border-bottom: 1px solid var(--border-subtle); }
.sp-liste dt { font-weight: 600; }
.sp-liste dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Stufen ----------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sp-zahlen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-two.sp-anfrage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sp-nah { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp-weg { min-height: 0; padding: var(--s6); }
  .sp-weg__nr { font-size: 2rem; }
  .sp-weg__haken { font-size: 2rem; }
  /* "Partner werden" auf Gruen traegt einen sichtbaren Rahmen: unter der
     Ueberschrift steht der Rahmen auf der Linie von Kicker und
     Ueberschrift, nicht 13px davor (bbc08.css C5.7 d gilt fuer Verweise
     ohne Rahmen). Die 13px gehen in den Spaltenabstand - der Knopf bricht
     bei derselben Breite um wie vorher, daneben steht er wie vorher. */
  .p-sec--gruen .p-head { column-gap: calc(var(--s9) - var(--s5) - 1px); }
  .p-sec--gruen .p-head > .btn--ghost.btn--sm { margin-left: 0; }
  .sp-felder { grid-template-columns: minmax(0, 1fr); }
  .sp-liste div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 480px) {
  .sp-zahlen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-wege { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* Kartentitel nicht groesser als die Sektionskoepfe (bis 480px
     max(--p-t-hero, --p-t-h3)): --p-t-h3 wie die Kartentitel der uebrigen
     Seiten. Die Zeilenhoehe bleibt 1,15rem x 1,12 wie vorher - die Kachel
     bleibt gleich hoch. Ab 481px bleibt 1.15rem: dort haetten sich mit
     --p-t-h3 Kacheln in der Hoehe geaendert (499-520px um 20,6px). */
  .sp-weg__titel { font-size: var(--p-t-h3); line-height: calc(1.15rem * 1.12); }
}