/* =====================================================================
   Preis als Ticket - gilt fuer alle Seiten mit Kaufblock.

   Kadirs Vorgabe (05.11.2026): "ich will, dass alle wie Tickets aussehen
   wie auf den anderen Seiten". Hauptteil links (Inhalt), Abriss rechts
   (Preis, Knopf, Strichcode), dazwischen Perforation mit ausgestanzten
   Kerben. Dazu das kleine Ticket als Kaufknopf im Einstieg.
   Die Vorlagen setzen p und li mit !important auf 60 % Weiss, deshalb
   stehen gewollte Farben hier ebenfalls mit !important.
   ===================================================================== */

/* Preis als Ticket (Kadir, 05.11.2026). Hauptteil links, Abriss rechts,
   dazwischen eine Perforation mit zwei ausgestanzten Halbkreisen. Die
   Kerben schneidet eine mask aus, damit der warme Grund durchscheint
   (eine Flaeche in Seitenfarbe wuerde auf dem Verlauf als Fleck stehen). */
/* Volle Seitenbreite wie die uebrigen Abschnitte (Kadir: "mach es breiter"). */
.sp-ticket { --kerbe: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
             margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45)); }
.sp-ticket__haupt, .sp-ticket__abriss { padding: clamp(1.75rem, 4vw, 3.5rem) !important; }
.sp-ticket__haupt, .sp-ticket__abriss { position: relative; padding: clamp(1.75rem, 4vw, 3rem); }
.sp-ticket__haupt {
  background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.14); border-right: 0;
  -webkit-mask: radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.sp-ticket__abriss {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, #9A7149 0%, #7A5838 55%, #5E4329 100%);
  border-left: 2px dashed rgba(255,255,255,0.4);
  -webkit-mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.sp-ticket p { margin: 0; }
.sp-ticket__kopf { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem;
                   border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.75rem;
                   letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5) !important; }
.sp-ticket__kopf span:last-child { color: #D9B38C; }
.sp-ticket__titel { margin: 1.75rem 0 1.5rem; color: #FFFFFF; font-size: clamp(1.625rem, 2.6vw, 2.125rem);
                    line-height: 1.2; font-weight: 400; }
.sp-ticket .sp-ticket__unter { margin-bottom: 1rem; font-size: 0.75rem; letter-spacing: 0.18em;
                               text-transform: uppercase; color: rgba(255,255,255,0.5) !important; }
.sp-ticket__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.sp-ticket__liste li { position: relative; padding-left: 1.75rem; color: rgba(255,255,255,0.7) !important;
                       font-size: 1rem; line-height: 1.55; }
.sp-ticket__liste li::before { content: '\2713'; position: absolute; left: 0; color: #D9B38C; }
.sp-ticket__liste strong { color: #FFFFFF; font-weight: 600; }
.sp-ticket__felder { display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
                     gap: 1rem clamp(1.5rem, 3vw, 2.75rem); margin: 2rem 0 0; padding-top: 1.5rem;
                     border-top: 1px dashed rgba(255,255,255,0.18); }
.sp-ticket__felder dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
                        color: rgba(255,255,255,0.45); margin-bottom: 0.25rem; }
.sp-ticket__felder dd { margin: 0; color: #FFFFFF; font-size: 0.9375rem; }
.sp-ticket .sp-ticket__umfang { margin-top: 1.5rem; font-size: 0.8125rem; line-height: 1.6;
                                color: rgba(255,255,255,0.5) !important; }
.sp-ticket__umfang strong { color: rgba(255,255,255,0.75); font-weight: 600; }
.sp-ticket .sp-ticket__einmalig { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
                                  color: rgba(255,255,255,0.75) !important; margin-bottom: 0.75rem; }
.sp-ticket .sp-ticket__preis { color: #FFFFFF !important; font-size: clamp(3.25rem, 6vw, 4.5rem); line-height: 1;
                               margin-bottom: 1.75rem; }
.sp-ticket__preis sup { font-size: 0.35em; vertical-align: super; color: rgba(255,255,255,0.7); }
.sp-ticket__knopf { display: inline-flex; align-items: center; justify-content: center;
                    background: #F6F1E9; color: #1A1410 !important; text-decoration: none;
                    padding: 1rem 2rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 500;
                    transition: background 200ms ease, transform 200ms ease; }
.sp-ticket__knopf:hover { background: #FFFFFF; transform: translateY(-1px); }
.sp-ticket__strichcode { width: 168px; max-width: 100%; height: 40px; margin: 2rem auto 1.25rem; opacity: 0.55;
  background: repeating-linear-gradient(90deg,
    #F6F1E9 0 2px, transparent 2px 5px, #F6F1E9 5px 6px, transparent 6px 8px,
    #F6F1E9 8px 11px, transparent 11px 13px, #F6F1E9 13px 14px, transparent 14px 18px); }
.sp-ticket .sp-ticket__fuss { font-size: 0.75rem; line-height: 1.5; color: rgba(255,255,255,0.65) !important; max-width: 30ch; }
@media (max-width: 860px) {
  .sp-ticket { grid-template-columns: 1fr; }
  .sp-ticket__haupt {
    border-right: 1px solid rgba(255,255,255,0.14); border-bottom: 0;
    -webkit-mask: radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .sp-ticket__abriss {
    border-left: 0; border-top: 2px dashed rgba(255,255,255,0.4);
    -webkit-mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .sp-ticket__felder { grid-template-columns: repeat(2, auto); }
}

/* Kaufknopf oben als kleines Ticket (Kadir, 05.11.2026), gleiche Machart
   wie das grosse Ticket im Kaufen-Abschnitt. Ganze Flaeche ist der Link. */
.sp-miniticket { --kerbe: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
                 width: 100%; max-width: 580px; text-decoration: none !important;
                 filter: drop-shadow(0 18px 36px rgba(0,0,0,0.45)); transition: transform 200ms ease; }
.sp-miniticket:hover { transform: translateY(-2px); }
.sp-miniticket__haupt { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16); border-right: 0;
  -webkit-mask: radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.sp-miniticket__abriss { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; padding: 1.125rem 1.5rem; min-width: 170px; text-align: center;
  background: linear-gradient(160deg, #9A7149 0%, #7A5838 55%, #5E4329 100%);
  border-left: 2px dashed rgba(255,255,255,0.4);
  -webkit-mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--kerbe) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--kerbe) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.sp-miniticket__kopf { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #D9B38C; }
.sp-miniticket__zeile { color: #FFFFFF; font-size: 1.0625rem; line-height: 1.35; }
.sp-miniticket__klein { color: rgba(255,255,255,0.55); font-size: 0.8125rem; line-height: 1.4; }
.sp-miniticket__einmalig { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
                           color: rgba(255,255,255,0.8); }
.sp-miniticket__preis { color: #FFFFFF; font-size: 2.125rem; line-height: 1.05; }
.sp-miniticket__knopf { margin-top: 0.55rem; background: #F6F1E9; color: #1A1410; border-radius: 9999px;
                        padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
                        transition: background 200ms ease; }
.sp-miniticket:hover .sp-miniticket__knopf { background: #FFFFFF; }
@media (max-width: 480px) {
  .sp-miniticket__haupt { padding: 1rem 1.125rem; }
  .sp-miniticket__abriss { min-width: 0; padding: 1rem 0.875rem; }
  .sp-miniticket__zeile { font-size: 0.9375rem; }
  .sp-miniticket__preis { font-size: 1.75rem; }
  .sp-miniticket__knopf { padding: 0.45rem 0.75rem; font-size: 0.75rem; }
}

/* Variante mit Bild und wenig Text (Kadir, 05.11.2026): Im Hauptteil nur
   Titel und drei Zeilen, daneben die Aufnahme aus der Academy. Der Abriss
   bleibt gleich, bekommt nur die drei Eckdaten als kleine Zeile. */
.sp-ticket--bild .sp-ticket__haupt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
                                      column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.sp-ticket--bild .sp-ticket__kopf { grid-column: 1 / -1; }
.sp-ticket--bild .sp-ticket__titel { margin-bottom: 1.25rem; }
.sp-ticket--bild .sp-ticket__liste { gap: 0.6rem; }
.sp-ticket--bild .sp-ticket__liste li { font-size: 1.0625rem; }
.sp-ticket--bild .sp-ticket__bild { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: center; }
.sp-ticket--bild .sp-ticket__bild img { width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); }
.sp-ticket .sp-ticket__eckdaten { margin: 1.25rem 0 0; font-size: 0.8125rem; letter-spacing: 0.08em;
                                  text-transform: uppercase; color: rgba(255,255,255,0.75) !important; }
@media (max-width: 860px) {
  .sp-ticket--bild .sp-ticket__haupt { grid-template-columns: minmax(0, 1fr); }
  .sp-ticket--bild .sp-ticket__bild { grid-column: 1; grid-row: auto; margin-top: 1.25rem; }
}