/* ============================================================
   Bausteinlager „Deine neue Webseite" — ticket.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-ticket-20261029
   Eintrittskarte mit Lochung und Abriss. Man kann den Abschnitt mit dem Finger abreißen; danach erscheint,
   was der Kunde will (z. B. „Platz anfragen" oder die WhatsApp-Anmeldung). Am PC kippt das Ticket leicht.
   Für: Events, Fortbildungen, Konzerte, Webinare, Live-Shopping, Gutscheine.
   EINBAU:
     <div class="ticket" data-ticket>
       <div class="tkt-haupt"> … Titel, Ort, Beschreibung … </div>
       <div class="tkt-abriss" tabindex="0" role="button" aria-label="Abschnitt abreißen"> … Datum, Einlass, Nr. … </div>
       <div class="tkt-danach" hidden> … was nach dem Abreißen erscheint (Knopf, Text) … </div>
     </div>
   Farben: --tkt-papier, --tkt-tinte, --tkt-akzent (Standard aus glas.css: --tinte, --signal-tief)
   Unter 560 px Breite steht der Abschnitt unten (Lochung waagrecht), sonst rechts.
   ============================================================ */
.ticket{
  --tkt-papier:#FFFDF8;--tkt-papier-2:#F6F1E6;
  --tkt-tinte:var(--tinte,#14213A);--tkt-tinte-2:var(--tinte-2,#4A5568);
  --tkt-akzent:var(--signal-tief,#245A9F);
  --tkt-kerbe:13px;--tkt-r:16px;--tkt-abriss:30%;
  position:relative;display:flex;align-items:stretch;max-width:760px;color:var(--tkt-tinte);
  -webkit-tap-highlight-color:transparent
}
/* Schatten als eigene Ebene (kein filter auf Text), folgt grob der Kartenform */
/* Zwei Schatten (Hauptteil, Abschnitt) mit Lücke an der Lochung, damit durch die Kerben kein Schatten scheint.
   --tkt-trenn (Lage der Lochung) setzt ticket.js. */
.ticket::before,.ticket::after{content:"";position:absolute;z-index:0;bottom:-5px;height:42%;border-radius:30px;
  background:rgba(10,18,30,.3);filter:blur(16px);transition:opacity .4s,bottom .45s ease}
.ticket::before{left:4%;right:calc(100% - var(--tkt-trenn,70%) + var(--tkt-kerbe) + 10px)}
.ticket::after{left:calc(var(--tkt-trenn,70%) + var(--tkt-kerbe) + 10px);right:4%}
.ticket.-ab::after{opacity:0}
.tkt-haupt,.tkt-abriss{position:relative;z-index:1;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--tkt-papier),var(--tkt-papier-2));
  background-color:var(--tkt-papier)}
.tkt-haupt{flex:1 1 auto;min-width:0;padding:26px 26px 24px 32px;border-radius:var(--tkt-r) 0 0 var(--tkt-r);box-shadow:inset 6px 0 0 var(--tkt-akzent);
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.tkt-abriss{flex:0 0 var(--tkt-abriss);min-width:150px;padding:22px 20px 22px 24px;border-radius:0 var(--tkt-r) var(--tkt-r) 0;
  display:flex;flex-direction:column;justify-content:center;gap:10px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) top/100% 51% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
/* Lochung: Punkte entlang der Kante des Abschnitts */
.tkt-abriss::before{content:"";position:absolute;left:0;top:calc(var(--tkt-kerbe) + 6px);bottom:calc(var(--tkt-kerbe) + 6px);width:2px;
  background:radial-gradient(circle,rgba(20,33,58,.32) 0 1.2px,transparent 1.6px) 0 0/2px 9px repeat-y}
.tkt-abriss.-zieht{cursor:grabbing}
.tkt-abriss:focus-visible{outline:3px solid var(--tkt-akzent);outline-offset:-6px}
.tkt-griff{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tkt-akzent)}
.tkt-griff svg{width:16px;height:16px}
/* Nach dem Abreißen: Inhalt erscheint an der Stelle des Abschnitts */
.tkt-danach{position:absolute;z-index:0;top:0;bottom:0;right:0;width:var(--tkt-abriss);min-width:150px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 16px 18px 22px;
  opacity:0;transition:opacity .45s .15s ease}
.ticket.-ab .tkt-danach{opacity:1;z-index:2}
.ticket.-ab .tkt-haupt{border-radius:var(--tkt-r) 6px 6px var(--tkt-r)}
.tkt-danach[hidden]{display:flex}
.ticket:not(.-ab) .tkt-danach{visibility:hidden}
/* Hochkant: Abschnitt unten */
.ticket.-hoch{flex-direction:column}
.ticket.-hoch::before{left:calc(var(--tkt-kerbe) + 7%);right:calc(var(--tkt-kerbe) + 7%);height:30%}
.ticket.-hoch::after{display:none}
.ticket.-hoch.-ab::before{bottom:calc(100% - var(--tkt-trenn,70%) - 5px)}
.ticket.-hoch .tkt-haupt{border-radius:var(--tkt-r) var(--tkt-r) 0 0;padding:26px 20px 22px;box-shadow:inset 0 6px 0 var(--tkt-akzent);
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket.-hoch .tkt-abriss{flex:0 0 auto;min-width:0;border-radius:0 0 var(--tkt-r) var(--tkt-r);padding:20px 20px 18px;touch-action:pan-y;
  -webkit-mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--tkt-kerbe) at 0 0,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--tkt-kerbe) at 100% 0,transparent 98%,#000) right/51% 100% no-repeat}
.ticket.-hoch .tkt-abriss::before{left:calc(var(--tkt-kerbe) + 6px);right:calc(var(--tkt-kerbe) + 6px);top:0;bottom:auto;width:auto;height:2px;
  background:radial-gradient(circle,rgba(20,33,58,.32) 0 1.2px,transparent 1.6px) 0 0/9px 2px repeat-x}
.ticket.-hoch .tkt-danach{top:auto;left:0;right:0;bottom:0;width:auto;min-width:0;height:var(--tkt-danach-h,120px);padding:16px 20px}
.ticket.-hoch.-ab .tkt-haupt{border-radius:var(--tkt-r) var(--tkt-r) 6px 6px}
/* Kleine Hilfen für den Inhalt */
.tkt-ober{margin:0 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tkt-akzent)}
.tkt-titel{margin:0 0 8px;font-size:clamp(24px,3.2vw,34px);line-height:1.08;font-weight:800;letter-spacing:-.01em}
.tkt-text{margin:0;color:var(--tkt-tinte-2);font-size:15.5px;line-height:1.5}
.tkt-feld{display:flex;flex-direction:column;gap:2px}
.tkt-feld small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tkt-tinte-2)}
.tkt-feld b{font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.tkt-felder{display:flex;flex-wrap:wrap;gap:12px 22px}
.ticket.-hoch .tkt-abriss .tkt-felder{gap:10px 26px}
.tkt-nochmal{align-self:flex-start;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--tkt-tinte-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.tkt-danach{transition:none}}