/* ═══════════════════════════════════════════════════════════════════════════
   /tickets/ — [tp_tickets] · Sektionsdatei zum Fundament (neuaufbau.css)
   Stand: 2026-08-14 · Seiten-Agent tickets

   MATERIAL-RHYTHMUS (keine zwei gleichen hintereinander):
     Kopfleiste + Seiten-Hero   dunkel   (Fundament, .tp-phero)
     1 Die drei Tageskarten     --light  Papier mit Rasterlinien
     2 Wäller Helfen e.V.       --photo  randabfallendes Foto + Veil  ← Zäsur
     3 Einlass & Bedingungen    --sand   tieferes Papier
     4 Abgrenzung für Starter   --ink    fast schwarz

   ACHSE: Mitte. Kopf, Kartenreihe, Knopf und alle Blöcke stehen auf
   derselben Mittelachse. INNERHALB einer Karte gilt eine gemeinsame
   linke Kante — das ist die einzige zweite Kante der Seite und sie
   verläuft in allen drei Karten identisch.

   DAS EINE ARGUMENT DER SEITE: Vorverkauf ist 1 € billiger.
   Darum trägt jede Karte drei Preis-Ebenen in fester Reihenfolge:
     1. Vorverkaufspreis  groß, Anton, Tinte          (was du zahlst)
     2. Tageskasse        klein, durchgestrichen      (was du sparst)
     3. Ersparnis-Pille   rot auf Fläche, Weiß darauf (die Aussage)

   KLASSEN: einfacher Bindestrich, .tp-tk-* — KEIN BEM-Doppelunterstrich
   auf der Blockebene. Namen sind gebunden (Editor/Reveal), nur Regeln
   werden umgestaltet.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · KAPITEL 1 — DIE DREI TAGESKARTEN (Papier) ══════════ */

/* 1.1 Kopfgruppe — eine Achse, Etikett → Headline → rote Linie → Lead */
.tp-tk .tp-tk-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--tp-head-gap);
}
.tp-tk .tp-tk-head__eye{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  margin: 0 0 var(--tp-s3);
}
.tp-tk .tp-tk-head__dot{
  width: 7px; height: 7px;
  background: var(--tp-red);
  border-radius: 50%;
  flex: none;
}
.tp-tk .tp-tk-head__h{
  font-family: var(--tp-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(--tp-ink);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
  text-wrap: balance;
}
.tp-tk .tp-tk-head__h::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s4);
}
.tp-tk .tp-tk-head__lead{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ink-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
  text-wrap: pretty;
}
.tp-tk .tp-tk-head__lead strong{ color: var(--tp-ink); font-weight: 600; }

/* 1.2 Die Kartenreihe — drei gleich hohe Spalten, gleicher Steg.
   grid + stretch statt flex: gleiche Höhe entsteht aus dem Raster,
   nicht aus einer Mindesthöhe, die bei langem Programmtext bricht. */
.tp-tk .tp-tk-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tp-gap-lg);
  align-items: stretch;
}

/* 1.3 Die Karte — Fläche auf Papier, ein Innenraster, eine linke Kante.
   Die Zeilen liegen fest: Kopf · Preis · Ersparnis · Fakten.
   Die Fakten-Zeile bekommt 1fr, damit der Kartenboden bündig ist. */
.tp-tk .tp-tk-card{
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  padding: var(--tp-s5) var(--tp-s4) var(--tp-s4);
  box-shadow: var(--tp-shadow-card);
  text-align: left;
  position: relative;
  overflow: hidden;
}
/* Rote Kante oben — macht die Karte zum Ticket, ohne Bild-Kitsch */
.tp-tk .tp-tk-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tp-red);
}

.tp-tk .tp-tk-card__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tp-s2);
  padding-bottom: var(--tp-s3);
  border-bottom: 1px solid var(--tp-hair-l);
}
.tp-tk .tp-tk-card__day{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ink);
}
.tp-tk .tp-tk-card__date{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  white-space: nowrap;
}

/* 1.4 Der Preis — die lauteste Stelle der Seite.
   Vorverkauf groß links, Tageskasse klein und durchgestrichen daneben. */
.tp-tk .tp-tk-card__price{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tp-s2);
  margin-top: var(--tp-s4);
}
.tp-tk .tp-tk-card__vvk{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d1);
  line-height: 1;
  letter-spacing: var(--tp-ls-display);
  color: var(--tp-ink);
  font-variant-numeric: tabular-nums;
}
.tp-tk .tp-tk-card__compare{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Der durchgestrichene Wert: bewusst NICHT rot. Rot gehört der Ersparnis,
   nicht dem alten Preis — sonst konkurrieren zwei Signale um denselben Blick. */
.tp-tk .tp-tk-card__kasse{
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-lead);
  font-weight: 600;
  line-height: 1.1;
  color: var(--tp-ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tp-red);
  font-variant-numeric: tabular-nums;
}
.tp-tk .tp-tk-card__kasse-lbl{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tp-ink-3);
}

/* 1.5 Die Ersparnis — rote Fläche, weiße Schrift (gemessen 4.9:1) */
.tp-tk .tp-tk-card__save{
  justify-self: start;
  display: inline-block;
  margin-top: var(--tp-s3);
  padding: 6px 12px;
  background: var(--tp-red);
  border-radius: var(--tp-r-ui);
  color: #fff;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* 1.6 Einlass + Programm — Definitionsliste, damit die Etiketten auch
   ohne Farbe als Etiketten gelesen werden. */
.tp-tk .tp-tk-card__facts{
  margin: var(--tp-s4) 0 0;
  padding-top: var(--tp-s4);
  border-top: 1px solid var(--tp-hair-l);
}
.tp-tk .tp-tk-card__lbl{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  margin: 0 0 var(--tp-s1);
}
.tp-tk .tp-tk-card__facts dd{ margin: 0 0 var(--tp-s3); }
.tp-tk .tp-tk-card__facts dd:last-child{ margin-bottom: 0; }
.tp-tk .tp-tk-card__einlass{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  font-weight: 600;
  color: var(--tp-ink);
}
.tp-tk .tp-tk-card__prog{ display: flex; flex-direction: column; gap: 2px; }
.tp-tk .tp-tk-card__prog strong{
  font-size: var(--tp-fs-body);
  line-height: 1.4;
  font-weight: 600;
  color: var(--tp-ink);
}
.tp-tk .tp-tk-card__prog span{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
}

/* 1.7 Der Kauf — eine Handlung, mittig, mit Abstand zur Kartenreihe */
.tp-tk .tp-tk-buy{
  text-align: center;
  margin-top: var(--tp-s6);
}
.tp-tk .tp-tk-cta,
.tp-tk .tp-tk-cta:link,
.tp-tk .tp-tk-cta:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-s2);
  min-height: var(--tp-tap);
  padding: 23px 44px;
  background: var(--tp-red);
  border: 1px solid var(--tp-red);
  border-radius: var(--tp-r-ui);
  color: #fff;
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background var(--tp-dur) var(--tp-ease),
              border-color var(--tp-dur) var(--tp-ease),
              transform var(--tp-dur) var(--tp-ease);
}
.tp-tk .tp-tk-cta:hover{
  background: var(--tp-red-dark);
  border-color: var(--tp-red-dark);
  color: #fff;
  transform: translateY(-2px);
}
.tp-tk .tp-tk-cta:active{ transform: translateY(-1px); }
.tp-tk .tp-tk-cta:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 3px; }

.tp-tk .tp-tk-buy__hint{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  max-width: 46em;
  margin: var(--tp-s3) auto 0;
}


/* ═══════════════ 2 · KAPITEL 2 — WÄLLER HELFEN e.V. (Foto) ══════════════ */

/* 2.0 Der Schleier wird für DIESES Foto dichter gezogen.
   Das Standard-Veil des Fundaments öffnet auf halber Höhe bis 0.42 — genau
   dort steht die Headline, und genau dort liegt im Bild das beleuchtete
   Zelt. Gemessen ergab das über den hellsten 2 % der Fläche nur 3.57:1.
   Mit 0.72 in der Mitte bleibt die Szene erkennbar und die Schrift sicher. */
.tp-tk.tp-tk--gut{
  --tp-veil: linear-gradient(180deg,
              rgba(15,17,21,.93) 0%,
              rgba(15,17,21,.72) 38%,
              rgba(15,17,21,.80) 72%,
              rgba(15,17,21,.96) 100%);
}

.tp-tk .tp-tk-gut{
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.tp-tk .tp-tk-gut__eye{
  display: inline-block;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-3);
  margin: 0 0 var(--tp-s3);
}
.tp-tk .tp-tk-gut__h{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
  text-wrap: balance;
}
.tp-tk .tp-tk-gut__h::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s3) auto var(--tp-s3);
}
.tp-tk .tp-tk-gut__text{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure);
  margin: 0 auto;
  text-wrap: pretty;
}
.tp-tk .tp-tk-gut__text strong{ color: var(--tp-ondark); font-weight: 600; }


/* ═══════════════ 3 · KAPITEL 3 — EINLASS & BEDINGUNGEN (Sand) ═══════════ */

.tp-tk .tp-tk-info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tp-gap-lg);
  align-items: start;
}
.tp-tk .tp-tk-info__col{
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  padding: var(--tp-s5) var(--tp-s4);
}
.tp-tk .tp-tk-info__h{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  margin: 0 0 var(--tp-s4);
  padding-bottom: var(--tp-s3);
  border-bottom: 1px solid var(--tp-hair-l);
}

/* 3.1 Einlasszeiten — Tag links, Zeit rechts, Punktlinie dazwischen */
.tp-tk .tp-tk-times{ list-style: none; margin: 0; padding: 0; }
.tp-tk .tp-tk-times li{
  display: flex;
  align-items: baseline;
  gap: var(--tp-s2);
  padding: var(--tp-s2) 0;
}
.tp-tk .tp-tk-times li + li{ border-top: 1px solid var(--tp-hair-l); }
.tp-tk .tp-tk-times__day{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  font-weight: 600;
  color: var(--tp-ink);
  flex: none;
}
.tp-tk .tp-tk-times__dots{
  flex: 1 1 auto;
  height: 1px;
  min-width: var(--tp-s3);
  background-image: linear-gradient(90deg, var(--tp-hair-l) 0 3px, transparent 3px 7px);
  background-size: 7px 1px;
  transform: translateY(-3px);
}
.tp-tk .tp-tk-times__time{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* 3.2 Bedingungen — Aufzählung mit roter Marke statt Punkt */
.tp-tk .tp-tk-terms{ list-style: none; margin: 0; padding: 0; }
.tp-tk .tp-tk-terms li{
  position: relative;
  padding: 0 0 0 calc(var(--tp-s3) + 4px);
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
  max-width: var(--tp-measure);
}
.tp-tk .tp-tk-terms li + li{ margin-top: var(--tp-s3); }
.tp-tk .tp-tk-terms li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 2px;
  background: var(--tp-red);
}
.tp-tk .tp-tk-terms strong{ color: var(--tp-ink); font-weight: 600; }


/* ═══════════════ 4 · KAPITEL 4 — ABGRENZUNG STARTER (Tinte) ═════════════ */

.tp-tk .tp-tk-starter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tp-s5);
  padding: var(--tp-s5);
  background: var(--tp-d2);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
}
.tp-tk .tp-tk-starter__text{ flex: 1 1 420px; }
.tp-tk .tp-tk-starter__eye{
  display: inline-block;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin: 0 0 var(--tp-s2);
}
.tp-tk .tp-tk-starter__h{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  margin: 0 0 var(--tp-s2);
}
.tp-tk .tp-tk-starter__p{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure);
  margin: 0;
}
.tp-tk .tp-tk-starter__p strong{ color: var(--tp-ondark); font-weight: 600; }

/* Sekundäre Handlung — Kontur statt Fläche. Der rote Kauf-Knopf oben
   bleibt damit die einzige laute Handlung der Seite. */
.tp-tk .tp-tk-starter__btn,
.tp-tk .tp-tk-starter__btn:link,
.tp-tk .tp-tk-starter__btn:visited{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s2);
  flex: none;
  min-height: var(--tp-tap);
  padding: 16px 28px;
  background: transparent;
  border: 1px solid var(--tp-ondark-2);
  border-radius: var(--tp-r-ui);
  color: var(--tp-ondark);
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tp-dur) var(--tp-ease),
              border-color var(--tp-dur) var(--tp-ease),
              color var(--tp-dur) var(--tp-ease);
}
.tp-tk .tp-tk-starter__btn:hover{
  background: var(--tp-ondark);
  border-color: var(--tp-ondark);
  color: var(--tp-d0);
}
.tp-tk .tp-tk-starter__arrow{ transition: transform var(--tp-dur) var(--tp-ease); }
.tp-tk .tp-tk-starter__btn:hover .tp-tk-starter__arrow{ transform: translateX(3px); }


/* ═══════════════ 5 · SCHMALE FENSTER ════════════════════════════════════ */

/* 5.1 Unter 1080 px passen drei Preisspalten nicht mehr nebeneinander,
   ohne dass die Programmzeile in Silben zerfällt → zwei, dann eine. */
@media (max-width: 1080px){
  .tp-tk .tp-tk-cards{ grid-template-columns: repeat(2, 1fr); }
  .tp-tk .tp-tk-cards > :last-child{ grid-column: 1 / -1; }
}

@media (max-width: 760px){
  .tp-tk .tp-tk-cards{ grid-template-columns: 1fr; gap: var(--tp-s3); }
  .tp-tk .tp-tk-cards > :last-child{ grid-column: auto; }
  .tp-tk .tp-tk-info{ grid-template-columns: 1fr; gap: var(--tp-s3); }
  .tp-tk .tp-tk-card{ padding: var(--tp-s4) var(--tp-s3) var(--tp-s3); }
  .tp-tk .tp-tk-info__col{ padding: var(--tp-s4) var(--tp-s3); }

  /* Die Spenden-Headline lief bei 390 px in EINER Zeile bis an beide
     Bildränder. 12em erzwingt den Umbruch auf zwei ruhige Zeilen. */
  .tp-tk .tp-tk-gut__h{ max-width: 12em; }

  /* Der Kauf-Knopf wird zur vollen Breite — Daumenfläche statt Ziel-Suche.
     Seitliches Polster klein halten: bei 34 px je Seite brach die
     Beschriftung „Tickets im Vorverkauf sichern" gemessen in zwei Zeilen
     und das Icon stand allein rechts. */
  /* :link/:visited MUSS mitstehen — die Grundregel oben führt beide auf
     und schlägt sonst mit höherer Spezifität (0,3,1 gegen 0,2,1) zurück.
     Gemessen: ohne diese Zeile blieb das Polster bei 44 px und die
     Beschriftung brach in zwei Zeilen. */
  .tp-tk .tp-tk-cta,
  .tp-tk .tp-tk-cta:link,
  .tp-tk .tp-tk-cta:visited{
    display: flex;
    width: 100%;
    padding: 21px var(--tp-s2);
    gap: var(--tp-s1);
  }

  .tp-tk .tp-tk-starter{
    flex-direction: column;
    align-items: flex-start;
    padding: var(--tp-s4) var(--tp-s3);
  }
  /* In der Spalte wird aus flex-basis eine HÖHE — 420px erzeugten ein
     leeres Loch zwischen Text und Knopf. Basis hier zurücknehmen. */
  .tp-tk .tp-tk-starter__text{ flex: 0 1 auto; }
  .tp-tk .tp-tk-starter__btn,
  .tp-tk .tp-tk-starter__btn:link,
  .tp-tk .tp-tk-starter__btn:visited{ width: 100%; justify-content: center; }
}

/* 5.2 Sehr schmal: der Vergleichspreis rutscht unter den Vorverkaufspreis,
   statt die Zeile zu sprengen. */
@media (max-width: 380px){
  .tp-tk .tp-tk-card__price{ flex-direction: column; gap: var(--tp-s2); }
}