/* ═══════════════════════════════════════════════════════════════════════
   SEKTIONSGRUPPE „SPONSOREN-SEITE" — Kontrast-Rhythmus
   Shortcodes: [tp_sponsoren_alle] (.tp-spall + .tp-spall-egg)
               [tp_sponsor_pakete] (#pakete .tp-pakete)
               [tp_sponsor_kontakt] (#sponsor-kontakt .tp-spkontakt)

   Tonwerte:  spall     = HELL  (Hairline-Zellenraster, Detail-Karten hell)
              pakete    = DUNKEL (Akzentkapitel, .nb-card-Muster)
              spkontakt = HELL  (Finale-Karte: Surface + rote 3px-Topline)
              Easter-Egg-Modal = dunkles System-Panel

   Datum: 2026-08-07
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ [tp_sponsoren_alle] — HELL · Logo-/Partner-Wand ═══════════ */

/* Intro: zentrierter Lead unter dem Seiten-Hero.
   Steht seit dem Umbau in einem eigenen kurzen Sand-Kapitel — deshalb
   kein Außenabstand nach unten mehr, den macht jetzt die Sektion. */
.tp-spall__intro{
  margin: 0 auto;
  text-align: center;
}
/* Das Maß gehört auf das Element, das die Lead-Größe TRÄGT — auf dem
   Wrapper (17px) hätte 34em nur 578 px und damit 48 Zeichen ergeben,
   deutlich unter dem Zielkorridor 60–75. */
.tp-spall__intro p{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--nb-ink-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
}
.tp-spall__intro strong{ color: var(--nb-ink); font-weight: 600; }

/* Tier-Gruppen — Kopf-Container macht das Fundament (.tp-spall__group-head),
   hier nur Mono-Etikett + Anton-Kopf im khead--mini-Muster */
/* Jede Gruppe hat jetzt ihr eigenes Kapitel — der Abstand kommt von
   .tp-sec, nicht mehr vom Block. */
.tp-spall__group{ margin-bottom: 0; }
.tp-spall__group-h{
  font-family: var(--nb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--nb-ink);
  margin: 0;
  order: 2;
}
.tp-spall__group-h::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: 18px auto 22px;
}
.tp-spall__group-count{
  order: 1;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nb-ink-3);
}

/* Hairline-Zellenraster (Entwurfsmuster .sponsors):
   Zellen NUR aus Hairlines, Surface, kein Radius — geteilte Linien */
/* KOMPENSATION Kadence-Theme: `.single-content ul, .single-content ol`
   setzt padding-left:2em (content.min.css) und schlägt jede einklassige
   Regel. Ergebnis waren 34 px Versatz — das Kartenraster stand neben
   seiner eigenen Rahmenlinie, die Stichpunkte neben dem Fließtext.
   Deshalb hier zwei Klassen tief, nicht !important. */
.tp-spall .tp-spall__grid,
.tp-spall .tp-spall__card-bullets,
.tp-pakete .tp-pakete__grid,
.tp-pakete .tp-pakete__features{
  padding-left: 0;
  padding-inline-start: 0;
}

.tp-spall__grid{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--nb-hair-l);
  border-left: 1px solid var(--nb-hair-l);
}
/* Spaltenzahl folgt der Kartenzahl — sonst bleibt bei 1, 2 oder 4 Partnern
   eine leere Zelle im Raster stehen (die „Waisen-Reihe", die auf der
   Sponsorenseite bei 2 Exklusiv-Partnern ein Drittel Leerfläche erzeugt hat).
   :has() liest die Anzahl über das letzte Kind. */
/* Bei EINER Karte muss das Raster selbst schmaler werden — sonst laufen
   seine Rahmenlinien (border-top/-left) weiter über die volle Breite und
   es steht ein Strich im Nichts. */
.tp-spall__grid:has(> :last-child:nth-child(1)){
  grid-template-columns: minmax(0, 1fr);
  max-width: 440px;
  margin-inline: auto;
}
.tp-spall__grid:has(> :last-child:nth-child(2)),
.tp-spall__grid:has(> :last-child:nth-child(4)){
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.tp-spall__card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--nb-surface);
  border-right: 1px solid var(--nb-hair-l);
  border-bottom: 1px solid var(--nb-hair-l);
  transition: background-color .18s ease;
}
.tp-spall__card:hover{ background: var(--tp-surface); filter: brightness(1.06); }
/* Exklusiv-Zelle: rote Signal-Topline */
.tp-spall__card--exklusiv::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nb-red);
}

/* Logo-Bühne: zentriert, Hairline zum Body.
   WICHTIG: Die Fläche bleibt IMMER hell — auch im dunklen Premium-Kapitel.
   Sponsorenlogos sind fast alle dunkle Schrift auf Transparenz; auf einer
   dunklen Kachel verschwinden sie (BUCHEN und OPTIRENT waren im Test
   unsichtbar). Die helle Platte ist damit kein Bruch, sondern die
   Bedingung dafür, dass die Marken überhaupt lesbar sind. */
.tp-spall__card-logo{
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
  padding: 30px 26px 26px;
  background: var(--tp-paper);
  border-bottom: 1px solid var(--nb-hair-l);
}
.tp-spall__card-logo img{
  max-width: 72%; max-height: 88px;
  object-fit: contain; display: block;
  transition: transform .25s var(--nb-ease);
}
.tp-spall__card:hover .tp-spall__card-logo img{ transform: scale(1.04); }
/* Fehlt das Logo in der Mediathek, steht hier der Name als Platzhalter.
   Er MUSS gegen die immer helle Platte gesetzt werden (fester Wert statt
   --nb-ink-2, das im dunklen Kapitel auf Hell umschaltet und dann
   unsichtbar wäre). Damit sieht die logolose Kachel nach Absicht aus,
   nicht nach Fehler. */
.tp-spall__card-logo span{
  font-family: var(--nb-font-display);
  font-size: var(--tp-fs-d3); letter-spacing: .03em; text-transform: uppercase;
  color: #545A64;            /* = --tp-ink-2, 5.4:1 auf --tp-paper */
  text-align: center; line-height: 1.16;
  max-width: 12em;
}
/* Platte OHNE Bild: flacher und mit feiner Schraffur, damit die fehlende
   Datei nach Gestaltung aussieht und nicht nach Loch. (Mehrere Logos
   fehlen aktuell in der Mediathek — das ist ein Inhalts-, kein Designfehler,
   die Seite darf daran aber nicht auseinanderfallen.) */
.tp-spall__card-logo:has(> span){
  /* gleiche Höhe wie die Bild-Platte — sonst starten die Karten einer
     Reihe auf verschiedenen Höhen und die Reihe wirkt schief */
  min-height: 150px;
  background-color: var(--tp-paper);
  background-image: repeating-linear-gradient(135deg,
    rgba(22,24,28,.05) 0 1px, transparent 1px 9px);
}

/* Karten-Body: linksbündig */
.tp-spall__card-body{
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 26px 22px;
  text-align: left;
}
.tp-spall__card-body h3{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-lead);
  line-height: 1.14;
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0;
}
/* width:max-content ließ die Branche aus der Karte laufen, sobald die
   Spalte schmal wurde („CONTAINER-MIETSERVIC" abgeschnitten). Sie darf
   umbrechen. */
.tp-spall__card-branche{
  display: inline-block;
  max-width: 100%;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--tp-red-ink);
  margin-top: -4px;
}
.tp-spall__card-kurz{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.6;
  color: var(--nb-ink-2);
  margin: 0;
}
.tp-spall__card-bullets{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 7px;
}
.tp-spall__card-bullets li{
  position: relative;
  padding-left: 18px;
  font-size: var(--tp-fs-body); line-height: 1.55;
  color: var(--nb-ink-2);
}
.tp-spall__card-bullets li::before{
  content: "";
  position: absolute; left: 1px; top: .5em;
  width: 6px; height: 6px;
  background: var(--nb-red);
  transform: rotate(45deg);
}

/* Karten-Link als ruhiger Fuß-Streifen */
.tp-spall__card-link,
.tp-spall__card-link:link, .tp-spall__card-link:visited{
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em;
  text-transform: none;
  color: var(--nb-ink);
  text-decoration: none;
  padding: 16px 26px;
  border-top: 1px solid var(--nb-hair-l);
  transition: color .18s ease;
}
.tp-spall__card-link:hover{ color: var(--tp-red-ink); }
.tp-spall__card-link span[aria-hidden]{ transition: transform .18s var(--nb-ease); }
.tp-spall__card-link:hover span[aria-hidden]{ transform: translateX(4px); }

/* Partner-Stempel oben rechts — Mono-Chip statt Glow-Sticker */
.tp-stamp{
  position: absolute; top: 12px; right: 12px; z-index: 3;
  pointer-events: none;
  transform: rotate(-8deg);
}
/* Stempel und Pin liegen auf der IMMER hellen Logo-Platte. Deshalb hier
   der feste helle Rot-Wert (#C8050F = --tp-red-ink, 4.7:1 auf Papier) statt
   der Variable: im dunklen Premium-Kapitel würde --tp-red-ink automatisch
   auf --tp-red-lift (#FF6E76) umschalten und käme auf der hellen Platte nur
   noch auf 2.4:1. */
.tp-stamp__ring{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-weight: 400;
  font-size: var(--tp-fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C8050F;
  border: 1px solid rgba(227,6,19,.5);
  border-radius: var(--nb-r-ui);
  padding: 5px 8px;
  /* DECKEND, nicht halbtransparent: der Stempel liegt absolut über der
     Karte. Mit rgba() maß die Kontrastprüfung ihn gegen den dunklen
     Kartenhintergrund (2.5:1) statt gegen die helle Logo-Platte darunter.
     Mit einer eigenen deckenden Fläche ist der Wert unabhängig davon,
     was zufällig darunter liegt. */
  background: #F8EDED;
}
/* Entrance: Skript setzt .is-live auf .tp-spall.
   SICHERHEITSNETZ — vorher stand der Stempel auf opacity:0 und wurde erst
   durch .is-live sichtbar. Seit dem Umbau gibt es fuenf .tp-spall-Sektionen
   statt einer; jede braucht ihren eigenen Observer-Treffer. Wer per
   Sprungmarke landet oder sehr schnell scrollt, kann eine Sektion
   ueberspringen — dann waere ihr Stempel dauerhaft unsichtbar gewesen.
   Jetzt ist der Stempel sichtbar und .is-live spielt nur noch die
   Einblendung. Faellt der Observer aus, fehlt die Animation, nicht der
   Inhalt. */
.tp-stamp{ opacity: 1; }
html.tp-anim .tp-spall.is-live .tp-stamp{
  animation: tpStampSet .34s var(--nb-ease) both;
}
html.tp-anim .tp-spall.is-live .tp-spall__card:nth-child(2) .tp-stamp{ animation-delay: .1s; }
html.tp-anim .tp-spall.is-live .tp-spall__card:nth-child(3) .tp-stamp{ animation-delay: .2s; }
@keyframes tpStampSet{
  from{ opacity: 0; transform: rotate(-8deg) scale(1.2); }
  to  { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* BRANDSTA-Pin (Agentur-Karte) — Chip im selben Muster, ohne rote Fläche */
.tp-spall__special-pin{
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C8050F;                 /* siehe Kommentar bei .tp-stamp__ring */
  background: var(--tp-surface, #FCFAF6);
  border: 1px solid rgba(227,6,19,.35);
  border-radius: var(--nb-r-ui);
  padding: 6px 10px;
  white-space: nowrap;
}
.tp-spall--tier .tp-spall__special-pin{ background: #FCFAF6; }

/* Bottom-CTA: helle Surface-Karte mit roter Topline (Finale-Muster, klein) */
/* Schlusskapitel liegt auf einem Luftbild. Der Standard-Veil reicht dort
   nicht: Lead und Etikett standen über heller Wiese bei unter 3:1.
   Kräftigerer Veil NUR für dieses Kapitel — lokale Abweichung wie beim
   Parken-Kapitel auf /anreise/. */
.tp-spall--schluss{
  --tp-veil: linear-gradient(180deg,
              rgba(15,17,21,.88) 0%,
              rgba(15,17,21,.78) 45%,
              rgba(15,17,21,.90) 100%);
}

/* Schluss-CTA im Muster des Fundament-Footers: EINE Achse, die Mitte.
   Vorher stand der Text links und der Button rechts — genau die zwei
   Achsen in einem Block, die Dennis moniert hat. Die Karte ist jetzt
   rahmenlos: sie steht auf dem Foto-Kapitel, ein zweiter Kasten darauf
   wäre eine Fläche zu viel. */
.tp-spall__bottom-cta{ margin-top: 0; }
.tp-spall__cta-card{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--tp-s5);
  text-align: center;
}
.tp-spall__cta-card > div{ display: contents; }
.tp-spall__cta-card h2{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d2);
  line-height: var(--tp-lh-display);
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ink);
  max-width: var(--tp-measure-head);
  margin: var(--tp-s2) auto 0;
}
/* rote Linie zwischen Etikett und Headline — gleiche Geste wie im
   Kapitelkopf des Fundaments */
.tp-spall__cta-card h2::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: 0 auto var(--tp-s3);
}
.tp-spall__cta-card p{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--nb-ink-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
}
.tp-spall__cta-card .tp-eye{ margin-bottom: 0; }
.tp-spall__cta-actions{ display: flex; justify-content: center; }
.tp-spall__cta-btn,
.tp-spall__cta-btn:link, .tp-spall__cta-btn:visited,
.tp-spall__cta-btn:focus, .tp-spall__cta-btn:active{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none; text-decoration: none;
  padding: 19px 34px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-ui);
  background: var(--nb-red); color: #fff;
  white-space: nowrap;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: background-color .18s ease, transform .18s ease;
}
.tp-spall__cta-btn:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-spall__cta-btn span[aria-hidden]{ transition: transform .18s var(--nb-ease); }
.tp-spall__cta-btn:hover span[aria-hidden]{ transform: translateX(4px); }

/* Danke-Zeile + Easter-Egg-Trigger — Inter-Satz, Anton-Signalwort, kein Glow */
.tp-spall__thanks{
  margin-top: var(--tp-s6);
  text-align: center;
}
/* margin-inline:auto ist hier PFLICHT: text-align:center zentriert nur die
   Zeilen IN der Box — die Box selbst (max-width aus dem Fließtext-Maß)
   klebte sonst links am Satzspiegel und stand neben der Mittelachse. */
.tp-spall__thanks p{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: var(--tp-lh-body);
  letter-spacing: 0; text-transform: none;
  color: var(--nb-ink-2);
  max-width: 44em;
  margin: 0 auto;
}
.tp-spall__egg-trigger,
.tp-spall__egg-trigger:focus, .tp-spall__egg-trigger:active{
  display: inline-block;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(227,6,19,.5);
  outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font-family: var(--nb-font-display);
  font-weight: 400;
  /* War 1.25em = 21.3 px und damit ein Zwischenwert neben der Skala.
     Der Trigger soll laut Inventur „wie Fließtext aussehen" — also
     Fließtextgröße. Signal bleibt Anton + Rot + gestrichelte Linie.
     !important, weil treckerparty-design.php:382 mit 1.05rem !important
     dagegenhält (gesperrter Audit-Block). */
  font-size: var(--tp-fs-body) !important;
  line-height: 1;
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--tp-red-ink);
  padding: 0 0 1px;
  margin-right: .15em;
  cursor: pointer;
  vertical-align: baseline;
  animation: tpSpallDankePulse 2.4s ease-in-out infinite;
  transition: color .18s ease, transform .18s ease;
}
.tp-spall__egg-trigger:hover{ color: var(--nb-red-dark); transform: scale(1.05); }
@keyframes tpSpallDankePulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }

/* ═══════════ EASTER-EGG-MODAL — dunkles System-Panel ═══════════ */

.tp-spall-egg{
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  overflow: hidden;
}
.tp-spall-egg[hidden]{ display: none; }
.tp-spall-egg__bg{
  position: absolute; inset: 0;
  background: rgba(15,17,21,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: tpSpEggFade .3s var(--nb-ease);
}
@keyframes tpSpEggFade{ from{ opacity: 0; } to{ opacity: 1; } }
.tp-spall-egg__confetti{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tp-spall-egg-piece{
  position: absolute; top: -12px; left: var(--x, 50%);
  width: 8px; height: 12px;
  background: var(--nb-red);
  transform: rotate(var(--r, 0deg));
  animation: tpSpEggConf var(--d, 2.4s) linear var(--s, 0s) infinite;
  opacity: 0;
}
.tp-spall-egg-piece:nth-child(3n){ background: var(--nb-paper); }
.tp-spall-egg-piece:nth-child(4n){ background: var(--nb-ondark-3); height: 8px; }
@keyframes tpSpEggConf{
  0%{ transform: translateY(0) rotate(var(--r, 0deg)); opacity: 0; }
  8%{ opacity: 1; }
  100%{ transform: translateY(105vh) rotate(calc(var(--r, 0deg) + 240deg)); opacity: .9; }
}
.tp-spall-egg__panel{
  position: relative; z-index: 2;
  max-width: 560px;
  text-align: center;
  color: var(--nb-ondark);
  padding: 3rem 2.4rem 2.6rem;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2), var(--nb-d1));
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: tpSpEggIn .4s var(--nb-ease);
}
@keyframes tpSpEggIn{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
.tp-spall-egg__pre{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--tp-red-lift);
  margin-bottom: 1rem;
}
.tp-spall-egg__title{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0 0 .85rem;
}
.tp-spall-egg__text{
  font-family: var(--nb-font-text);
  font-size: var(--nb-fs-body); line-height: 1.65;
  color: var(--nb-ondark-2);
  margin: 0 0 1.6rem;
}
.tp-spall-egg__text strong{ color: var(--nb-ondark); }
.tp-spall-egg__row{
  display: flex; gap: 1.25rem;
  justify-content: center; align-items: center; flex-wrap: wrap;
}
.tp-spall-egg__cta,
.tp-spall-egg__cta:link, .tp-spall-egg__cta:visited,
.tp-spall-egg__cta:focus, .tp-spall-egg__cta:active{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none; text-decoration: none;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--nb-r-ui);
  background: var(--nb-red); color: #fff;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: background-color .18s ease, transform .15s ease;
}
.tp-spall-egg__cta:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-spall-egg__cta span[aria-hidden]{ transition: transform .18s var(--nb-ease); }
.tp-spall-egg__cta:hover span[aria-hidden]{ transform: translateX(4px); }
.tp-spall-egg__close,
.tp-spall-egg__close:focus, .tp-spall-egg__close:active{
  background: transparent;
  color: var(--nb-ondark-2);
  border: 0;
  border-bottom: 1px solid rgba(243,239,232,.25);
  outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: color .2s, border-color .2s;
}
.tp-spall-egg__close:hover{ color: var(--nb-ondark); border-bottom-color: var(--nb-ondark); }

/* ═══════════ [tp_sponsor_pakete] — DUNKEL · drei Paket-Karten ═══════════ */

/* Sektionsfläche + Kapitelkopf macht das Fundament (.tp-sec--dark, .tp-sec-head) */
.tp-pakete__intro{
  text-align: center;
  font-family: var(--nb-font-text);
  font-size: var(--nb-fs-lead);
  line-height: 1.6;
  color: var(--nb-ondark-2);
  max-width: 36em;
  margin: -34px auto 64px;
}
.tp-pakete__intro strong{ color: var(--nb-ondark); font-weight: 600; }

.tp-pakete__grid{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--nb-gap);
  align-items: stretch;
}

/* Karte im .nb-card-Muster */
.tp-pakete__card{
  position: relative;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  padding: 38px 34px 34px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tp-pakete__card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--nb-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
}
.tp-pakete__card:hover{
  transform: translateY(-4px);
  border-color: rgba(243,239,232,.3);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.6);
}
.tp-pakete__card:hover::before{ transform: scaleX(1); }
/* Empfohlenes Paket: rote Topline permanent */
.tp-pakete__card.is-featured{ border-color: rgba(243,239,232,.3); }
.tp-pakete__card.is-featured::before{ height: 3px; transform: scaleX(1); }

/* „★ Empfohlen" lief vorher absolut oben rechts, während Tier-Etikett,
   Preis und Liste links standen — zwei Achsen in einer Karte. Jetzt steht
   das Abzeichen als erste Zeile auf derselben linken Achse wie alles
   andere, abgesetzt durch die rote Fläche. */
.tp-pakete__badge{
  position: static;
  align-self: flex-start;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;                      /* 4.9:1 auf --tp-red */
  background: var(--tp-red);
  border-radius: var(--tp-r-ui);
  padding: 0 10px;
  height: 28px;
  display: inline-flex; align-items: center;
  margin: 0 0 var(--tp-s2);
}
/* Nur EINE der drei Karten trägt das Abzeichen. Ohne Ausgleich würden
   Tier-Etikett und Preis der anderen beiden 44 px höher starten und die
   Reihe stünde versetzt. Die Karten ohne Abzeichen bekommen dieselbe
   Zeilenhöhe als Vorlauf. */
.tp-pakete__card:not(.is-featured) > .tp-pakete__name{
  margin-top: 44px;                 /* 28 px Abzeichen + 16 px Abstand */
}

.tp-pakete__name{
  display: block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin: 0 0 18px;
}
.tp-pakete__preis{
  display: block;
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-m);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0 0 12px;
}
.tp-pakete__sub{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  color: var(--nb-ondark-2);
  margin: 0 0 24px;
}
.tp-pakete__sub:empty{ display: none; }

.tp-pakete__features{
  list-style: none; padding: 0;
  margin: 0 0 30px;
  flex: 1;
  border-top: 1px solid var(--nb-hair-d);
}
.tp-pakete__features li{
  position: relative;
  padding: 11px 0 10px 22px;
  border-bottom: 1px solid var(--nb-hair-d);
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.55;
  color: var(--nb-ondark-2);
}
.tp-pakete__features li::before{
  content: "";
  position: absolute; left: 2px; top: 18px;
  width: 7px; height: 7px;
  background: var(--nb-red);
  transform: rotate(45deg);
}

.tp-pakete__cta,
.tp-pakete__cta:link, .tp-pakete__cta:visited,
.tp-pakete__cta:focus, .tp-pakete__cta:active{
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none; text-decoration: none;
  padding: 14px 24px;
  background: transparent;
  color: var(--nb-ondark);
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--nb-r-ui);
  outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-pakete__cta:hover{
  background: rgba(243,239,232,.07);
  border-color: var(--nb-ondark);
  color: var(--nb-ondark);
  transform: translateY(-2px);
}
.tp-pakete__cta span[aria-hidden]{ transition: transform .18s var(--nb-ease); }
.tp-pakete__cta:hover span[aria-hidden]{ transform: translateX(4px); }
.tp-pakete__card.is-featured .tp-pakete__cta{
  background: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
}
.tp-pakete__card.is-featured .tp-pakete__cta:hover{
  background: var(--nb-red-dark);
  border-color: var(--nb-red-dark);
  color: #fff;
}

/* ═══════════ [tp_sponsor_kontakt] — HELL · Finale-Karte ═══════════ */

.tp-spkontakt__inner{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--nb-surface);
  border: 1px solid var(--nb-hair-l);
  border-top: 3px solid var(--nb-red);
  border-radius: var(--nb-r-fl);
  box-shadow: 0 1px 0 rgba(22,24,28,.03);
  padding: 88px 60px 80px;
}
.tp-spkontakt__left{
  display: flex; flex-direction: column; align-items: center;
}
.tp-spkontakt__left h2{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d2);
  line-height: var(--tp-lh-display);
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ink);
  max-width: var(--tp-measure-head);
  margin: var(--tp-s2) 0 var(--tp-s3);
}
/* rote Linie zwischen Etikett und Headline — dieselbe Geste wie im
   Kapitelkopf des Fundaments und im Schluss-CTA der Sponsorenseite */
.tp-spkontakt__left h2::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: 0 auto var(--tp-s3);
}
.tp-spkontakt__left p{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--nb-ink-2);
  max-width: var(--tp-measure-lead);
  margin: 0;
}
.tp-spkontakt__right{
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.tp-spkontakt__btn,
.tp-spkontakt__btn:link, .tp-spkontakt__btn:visited,
.tp-spkontakt__btn:focus, .tp-spkontakt__btn:active{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em; line-height: 1.3;
  text-transform: none; text-decoration: none;
  padding: 19px 34px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-ui);
  background: var(--nb-red); color: #fff;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
  transition: background-color .18s ease, transform .18s ease;
}
.tp-spkontakt__btn:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-spkontakt__btn-arrow{ transition: transform .18s var(--nb-ease); }
.tp-spkontakt__btn:hover .tp-spkontakt__btn-arrow{ transform: translateX(4px); }
.tp-spkontakt__phone,
.tp-spkontakt__phone:link, .tp-spkontakt__phone:visited{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-s);
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ink);
  text-decoration: none;
  transition: color .18s ease;
}
.tp-spkontakt__phone:hover{ color: var(--tp-red-ink); }
.tp-spkontakt__note{
  display: block;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.6;
  letter-spacing: 0; text-transform: none;
  color: var(--nb-ink-2);
  max-width: 44ch;
  margin-top: 10px;
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 1000px){
  .tp-pakete__grid{
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}
/* ACHTUNG SPEZIFITÄT: Die Karten-Anzahl-Regeln oben nutzen :has(…) und
   wiegen damit (0,3,0). Eine einklassige Regel `.tp-spall__grid` in einer
   Media Query (0,1,0) verliert dagegen — egal wie weit unten sie steht.
   Deshalb tragen die Umbrüche denselben :has()-Ballast. Ohne das standen
   auf 390 px weiter zwei Spalten nebeneinander und der Text zerfiel in
   Silbentrennung („Markenidentit-ät"). */
@media (max-width: 900px){
  .tp-spall__grid:has(> :last-child:nth-child(n)){
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-width: none;
  }
  .tp-spall__cta-card{
    gap: 28px;
    padding: 44px 32px;
  }
  .tp-spkontakt__inner{ padding: 64px 32px 60px; }
}
@media (max-width: 640px){
  .tp-spall__grid:has(> :last-child:nth-child(n)){
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
  .tp-spall__bottom-cta{ margin-top: 72px; }
  .tp-spall__cta-btn{ width: 100%; }
  .tp-spall-egg__panel{ padding: 2.4rem 1.6rem 2rem; }
  .tp-pakete__card{ padding: 32px 26px 28px; }
  .tp-spkontakt__inner{ padding: 56px 22px 52px; }
  .tp-spkontakt__btn{ width: 100%; }
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce){
  .tp-spall__egg-trigger{ animation: none; }
  .tp-spall-egg-piece{ animation: none; display: none; }
  .tp-spall-egg__bg, .tp-spall-egg__panel{ animation: none; }
  .tp-stamp{ opacity: 1 !important; transform: rotate(-8deg) !important; transition: none !important; }
  .tp-spall__card-logo img,
  .tp-spall__card-link span[aria-hidden],
  .tp-spall__cta-btn span[aria-hidden],
  .tp-spall-egg__cta span[aria-hidden],
  .tp-pakete__cta span[aria-hidden],
  .tp-spkontakt__btn-arrow{ transition: none; }
  .tp-pakete__card, .tp-pakete__card::before,
  .tp-spall__card, .tp-spall__cta-btn, .tp-spkontakt__btn{ transition: none; }
}