/* ═══════════════════════════════════════════════════════════════════════════
   /full-pull/ — [tp_pulling] · Sektionsdatei zum Fundament (neuaufbau.css)
   Stand: 2026-08-13 · Seiten-Agent full-pull + mitpullen

   MATERIAL-RHYTHMUS (ein Kapitel = ein Material, nie zweimal dasselbe
   hintereinander, nach spätestens drei Kapiteln ein Foto als Zäsur):

     Kopfleiste + Hero   dunkel  (Fundament)
     1 Intro & Zahlen    --light   Papier mit Rasterlinien
     2 Die Bahn          --ink     fast schwarz, kurz und laut
     3 Die Klassen       --sand    tieferes Papier, Haarlinien-Kanten
     4 DM Garden Pulling --photo   randabfallendes Foto + Veil  ← Zäsur
     5 Zeitplan          --light   Papier
     6 Die vier Regeln   --sand    tieferes Papier
     7 Schluss-Handlung  --ink     fast schwarz

   ACHSE: Jedes Kapitel hat GENAU EINE Achse — die Mitte. Kopfgruppen kommen
   aus Abschnitt 4/4.1 des Fundaments. Innerhalb der Karten läuft alles auf
   der linken Kante der Karte; das Badge der Feature-Karte ist ein Stempel in
   der Ecke, keine zweite Textspalte.

   TOKENS: keine rohe Farbe, keine rohe Schriftgröße, kein roher Abstand.
   Rote SCHRIFT ist immer var(--tp-red-ink) — der schaltet in dunkler
   Umgebung automatisch auf --tp-red-lift um. var(--tp-red) bleibt Fläche.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · KAPITEL 1 — INTRO & ZAHLEN (Papier) ═══════════════ */

.tp-plc--intro .tp-pl-intro{ text-align: center; }
.tp-plc--intro .tp-pl-intro__text{ margin-inline: auto; }

/* Etikett — Mono, mittig, mit rotem Signalpunkt */
.tp-pulling .tp-pl-intro__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-pulling .tp-pl-intro__dot{
  width: 7px; height: 7px;
  background: var(--tp-red);
  border-radius: 50%;
  flex: none;
}

/* Headline — Anton, Stufe d2, mit der roten Linie des Systems darüber */
.tp-pulling .tp-pl-intro__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-pulling .tp-pl-intro__h::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s5);
}

/* Leads — eine Stufe über dem Fließtext, gekappte Zeilenlänge, mittig */
.tp-pulling .tp-pl-intro__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-pulling .tp-pl-intro__lead + .tp-pl-intro__lead{ margin-top: var(--tp-s3); }
.tp-pulling .tp-pl-intro__lead strong{ color: var(--tp-ink); font-weight: 600; }
.tp-pulling .tp-pl-intro__lead a{ color: var(--tp-red-ink); text-decoration: underline; text-underline-offset: 3px; }
.tp-pulling .tp-pl-intro__lead a:hover{ color: var(--tp-ink); }

/* Zahlen-Band — vier gleiche Spalten, Haarlinie oben/unten, Trenner dazwischen */
.tp-pl-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--tp-s7);
  border-block: 1px solid var(--tp-hair-l);
}
.tp-pulling .tp-pl-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s2);
  padding: var(--tp-s5) var(--tp-s3);
  border-left: 1px solid var(--tp-hair-l);
}
.tp-pulling .tp-pl-stat:first-child{ border-left: 0; }
.tp-pulling .tp-pl-stat strong{
  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);
}
.tp-pulling .tp-pl-stat span{
  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);
}
@media (max-width: 900px){
  .tp-pl-stats{ grid-template-columns: repeat(2, 1fr); }
  .tp-pulling .tp-pl-stat{ padding: var(--tp-s4) var(--tp-s2); }
  .tp-pulling .tp-pl-stat:nth-child(2n+1){ border-left: 0; }
  .tp-pulling .tp-pl-stat:nth-child(n+3){ border-top: 1px solid var(--tp-hair-l); }
}


/* ═══════════════ 2 · KAPITEL 2 — DIE BAHN (Tinte) ═══════════════ */

.tp-pl-track{ text-align: center; }

.tp-pl-track__label{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s3);
  margin-bottom: var(--tp-s6);
}
.tp-pl-track__eye{
  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);
}
.tp-pl-track__dist{
  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);
}
.tp-pl-track__dist::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: 0 auto var(--tp-s3);
}

/* Die Lane — dunkle Rinne, roter Lauf, Schlitten, Ziel */
.tp-pl-track__lane{
  position: relative;
  height: 56px;
  border-radius: var(--tp-r-ui);
  background: var(--tp-d2);
  border: 1px solid var(--tp-hair-d);
  overflow: hidden;
}
.tp-pl-track__lane::before{
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(243,239,232,.10) 0 1px, transparent 1px 10%);
}
.tp-pl-track__fill{
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(227,6,19,.28) 0%, var(--tp-red) 100%);
}
.tp-pl-track__sled{
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  color: var(--tp-ondark);
  display: grid; place-items: center;
  width: 44px; height: 44px;
}
.tp-pl-track__finish{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(0deg,
    var(--tp-ondark) 0 6px, var(--tp-d0) 6px 12px);
}
.tp-pl-track__finish span{
  position: absolute; right: calc(100% + var(--tp-s2)); top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-ondark);
  white-space: nowrap;
}
.tp-pl-track__ticks{
  display: flex;
  justify-content: space-between;
  margin-top: var(--tp-s2);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-ondark-3);
}

/* Entrance — hängt exakt an .is-live (Inline-Observer im Shortcode) */
html.tp-anim .tp-pl-track__fill{ transition: width 1.9s var(--tp-ease); }
html.tp-anim .tp-pl-track__sled{ transition: left 1.9s var(--tp-ease); }
html.tp-anim .tp-pl-track__finish span{ transition: opacity .4s var(--tp-ease) 1.7s; }
.tp-pl-track.is-live .tp-pl-track__fill{ width: calc(100% - 6px); }
.tp-pl-track.is-live .tp-pl-track__sled{ left: calc(100% - 6px); }
.tp-pl-track.is-live .tp-pl-track__finish span{ opacity: 1; }
/* Ohne Motion: Endzustand sofort — nie ein halbfertiges Bild */
html:not(.tp-anim) .tp-pl-track__fill{ width: calc(100% - 6px); }
html:not(.tp-anim) .tp-pl-track__sled{ left: calc(100% - 6px); }
html:not(.tp-anim) .tp-pl-track__finish span{ opacity: 1; }

@media (max-width: 560px){
  .tp-pl-track__lane{ height: 44px; }
  .tp-pl-track__ticks span:nth-child(2),
  .tp-pl-track__ticks span:nth-child(4){ display: none; }
}


/* ═══════════════ 3 · KAPITEL 3 — DIE KLASSEN (Sand) ═══════════════ */

.tp-pl-classes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tp-gap);
  align-items: stretch;
}
@media (max-width: 1000px){ .tp-pl-classes{ grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

.tp-pulling .tp-pl-class{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: var(--tp-s5) var(--tp-s4) var(--tp-s4);
  text-align: left;
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  color: var(--tp-ink);
  font: inherit;
  appearance: none;
  overflow: hidden;
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.tp-pulling .tp-pl-class::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tp-hair-l);
}
.tp-pulling .tp-pl-class--feature{ border-color: rgba(22,24,28,.24); }
.tp-pulling .tp-pl-class--feature::before{ background: var(--tp-red); }
.tp-pulling .tp-pl-class--clickable{ cursor: pointer; }
.tp-pulling .tp-pl-class:hover{ transform: translateY(-4px); box-shadow: var(--tp-shadow-card); }
.tp-pulling button.tp-pl-class:active{ transform: translateY(-2px); }
.tp-pulling button.tp-pl-class:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 3px; }

/* Ecken-Stempel — bewusst KEINE zweite Textspalte, sondern eine Marke */
.tp-pulling .tp-pl-class__badge{
  position: absolute;
  top: var(--tp-s4); right: var(--tp-s4);
  padding: 4px var(--tp-s2);
  background: var(--tp-red);
  color: #fff;
  border-radius: var(--tp-r-ui);
  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;
}
.tp-pulling .tp-pl-class__num{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
  margin-bottom: var(--tp-s3);
}
.tp-pulling .tp-pl-class h3{
  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);
  margin: 0;
}
.tp-pulling .tp-pl-class__tag{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.5;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  margin: var(--tp-s2) 0 0;
  max-width: none;
}
.tp-pulling .tp-pl-class p:not(.tp-pl-class__tag){
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
  margin: var(--tp-s3) 0 0;
  max-width: none;
}
.tp-pulling .tp-pl-class p strong{ color: var(--tp-ink); font-weight: 600; }
.tp-pulling .tp-pl-class p a{ color: var(--tp-red-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Bullets folgen dem Text, der Foto-Hinweis sitzt in allen Karten auf
   derselben Unterkante (margin-top:auto weiter unten) */
.tp-pulling .tp-pl-class ul{
  list-style: none;
  margin: var(--tp-s5) 0 var(--tp-s2);
  padding: var(--tp-s4) 0 0;
  border-top: 1px solid var(--tp-hair-l);
}
.tp-pulling .tp-pl-class li{
  position: relative;
  padding-left: var(--tp-s3);
  font-size: var(--tp-fs-body);
  line-height: 1.5;
  color: var(--tp-ink-2);
}
.tp-pulling .tp-pl-class li + li{ margin-top: var(--tp-s2); }
.tp-pulling .tp-pl-class li::before{
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 2px;
  background: var(--tp-red);
}

/* Foto-Hinweis der klickbaren Karten */
.tp-pulling .tp-pl-class__photos{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  margin-top: auto;
  padding-top: var(--tp-s4);
  border-top: 1px solid var(--tp-hair-l);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-ink);
}
.tp-pl-class__arrow{ transition: transform var(--tp-dur) var(--tp-ease); }
.tp-pulling .tp-pl-class--clickable:hover .tp-pl-class__arrow{ transform: translateX(4px); }


/* ═══════════════ 4 · KAPITEL 4 — DM GARDEN PULLING (Foto) ═══════════════ */

/* Das Foto-Kapitel wird bewusst tiefer verschleiert als der Standard-Veil:
   darüber liegt Fließtext, gemessen gegen die dunkelste Stelle des Fotos. */
.tp-plc--dm{
  background-image:
    linear-gradient(180deg, rgba(15,17,21,.92) 0%, rgba(15,17,21,.87) 45%, rgba(15,17,21,.94) 100%),
    var(--tp-photo, none);
  background-size: auto, cover;
  background-position: center, center 40%;
}
.tp-pl-dm{ text-align: center; }
.tp-pl-dm__inner{ max-width: 760px; margin-inline: auto; }

.tp-pulling .tp-pl-dm__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-ondark-2);
  margin-bottom: var(--tp-s3);
}
.tp-pulling .tp-pl-dm h2{
  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-ondark);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
}
.tp-pulling .tp-pl-dm h2 span{ display: block; color: var(--tp-red-lift); }
.tp-pulling .tp-pl-dm h2::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s5);
}
.tp-pulling .tp-pl-dm p{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
  text-wrap: pretty;
}
.tp-pulling .tp-pl-dm p strong{ color: var(--tp-ondark); font-weight: 600; }

/* Sekundärer Button — Ghost auf hellem Rand */
.tp-pulling .tp-pl-dm__link{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  margin-top: var(--tp-s5);
  padding: 15px 28px;
  min-height: var(--tp-tap);
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--tp-r-ui);
  background: transparent;
  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), transform var(--tp-dur) var(--tp-ease);
}
.tp-pulling .tp-pl-dm__link:hover{
  background: rgba(243,239,232,.08);
  border-color: var(--tp-ondark);
  color: var(--tp-ondark);
  transform: translateY(-2px);
}
.tp-pulling .tp-pl-dm__link:active{ transform: translateY(-1px); }

/* Zwei Slots — gleiche Breite, gleiche Achse (Mitte) */
.tp-pl-dm__schedule{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tp-gap);
  margin-top: var(--tp-s6);
  text-align: center;
}
@media (max-width: 700px){ .tp-pl-dm__schedule{ grid-template-columns: 1fr; } }

.tp-pl-dm__slot{
  --tp-red-ink: var(--tp-red-lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s2);
  padding: var(--tp-s4);
  background: rgba(15,17,21,.72);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
}
.tp-pl-dm__slot--final{ border-color: var(--tp-red); }
.tp-pulling .tp-pl-dm__slot-day{
  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);
}
.tp-pulling .tp-pl-dm__slot-time{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--tp-ondark);
}
.tp-pulling .tp-pl-dm__slot-title{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: 26em;
}


/* ═══════════════ 5 · KAPITEL 5 — ZEITPLAN (Papier) ═══════════════ */

.tp-pl-schedule{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tp-gap-lg);
}
@media (max-width: 860px){ .tp-pl-schedule{ grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

.tp-pl-sched-day{
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  overflow: hidden;
}
.tp-pl-sched-day__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s1);
  padding: var(--tp-s4);
  border-bottom: 1px solid var(--tp-hair-l);
  background: var(--tp-paper);
}
.tp-pulling .tp-pl-sched-day__name{
  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-pulling .tp-pl-sched-day__date{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
}
.tp-pl-sched-acts{ list-style: none; margin: 0; padding: 0; }
.tp-pulling .tp-pl-sched-acts li{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: var(--tp-s3);
  padding: var(--tp-s3) var(--tp-s4);
  border-top: 1px solid var(--tp-hair-l);
}
.tp-pulling .tp-pl-sched-acts li:first-child{ border-top: 0; }
.tp-pulling .tp-pl-sched-act__time{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--tp-ink-3);
}
.tp-pulling .tp-pl-sched-act__name{
  font-size: var(--tp-fs-body);
  line-height: 1.5;
  color: var(--tp-ink);
}
.tp-pulling .tp-pl-sched-act__tag{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.5;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  white-space: nowrap;
}
@media (max-width: 520px){
  .tp-pulling .tp-pl-sched-acts li{ grid-template-columns: 56px 1fr; }
  .tp-pulling .tp-pl-sched-act__tag{ grid-column: 2; }
}

.tp-pulling .tp-pl-schedule__note{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-3);
  max-width: var(--tp-measure);
  margin: var(--tp-s5) auto 0;
  text-align: center;
}
.tp-pulling .tp-pl-schedule__note a{ color: var(--tp-red-ink); text-decoration: underline; text-underline-offset: 3px; }


/* ═══════════════ 6 · KAPITEL 6 — DIE VIER REGELN (Sand) ═══════════════ */

.tp-pl-rules{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tp-gap);
}
@media (max-width: 1000px){ .tp-pl-rules{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tp-pl-rules{ grid-template-columns: 1fr; } }

.tp-pl-rule{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--tp-s5) var(--tp-s4) var(--tp-s4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  overflow: hidden;
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-pl-rule::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tp-hair-l);
}
.tp-pl-rule:hover{ transform: translateY(-4px); box-shadow: var(--tp-shadow-card); }
.tp-pulling .tp-pl-rule__num{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
  margin-bottom: var(--tp-s3);
}
.tp-pulling .tp-pl-rule h4{
  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);
  margin: 0 0 var(--tp-s3);
}
.tp-pulling .tp-pl-rule p{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
  margin: 0;
  max-width: none;
}


/* ═══════════════ 7 · KAPITEL 7 — SCHLUSS-HANDLUNG (Tinte) ═══════════════ */

.tp-pl-cta{ text-align: center; }
.tp-pl-cta__head{ max-width: 760px; margin: 0 auto var(--tp-s6); }
.tp-pulling .tp-pl-cta__head h2{
  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-ondark);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
}
.tp-pulling .tp-pl-cta__head h2::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s5);
}
.tp-pulling .tp-pl-cta__head p{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
}
.tp-pl-cta__btns{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tp-s3);
}

/* Buttons in der Sprache des Fundaments (.tp-btn), aber auf den vorhandenen
   Klassennamen — die dürfen sich nicht ändern. */
.tp-pulling .tp-pl-cta__btn,
.tp-pulling .tp-pl-cta__btn:link,
.tp-pulling .tp-pl-cta__btn:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-s1);
  min-height: var(--tp-tap);
  padding: 19px 34px;
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--tp-r-ui);
  background: transparent;
  color: var(--tp-ondark);
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: 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-pulling .tp-pl-cta__btn:hover{
  background: rgba(243,239,232,.08);
  border-color: var(--tp-ondark);
  color: var(--tp-ondark);
  transform: translateY(-2px);
}
.tp-pulling .tp-pl-cta__btn--primary,
.tp-pulling .tp-pl-cta__btn--primary:link,
.tp-pulling .tp-pl-cta__btn--primary:visited{
  background: var(--tp-red);
  border-color: var(--tp-red);
  color: #fff;
}
.tp-pulling .tp-pl-cta__btn--primary:hover{
  background: var(--tp-red-dark);
  border-color: var(--tp-red-dark);
  color: #fff;
}
.tp-pulling .tp-pl-cta__btn:active{ transform: translateY(-1px); }
.tp-pulling .tp-pl-cta__btn:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 3px; }
@media (max-width: 560px){
  .tp-pl-cta__btns{ flex-direction: column; }
  .tp-pulling .tp-pl-cta__btn{ width: 100%; }
}


/* ═══════════════ 8 · KLASSEN-GALERIE-MODAL ═══════════════
   Zwei Stufen: Karte → Galerie-Fenster → Einzelbild-Lightbox.
   [hidden], IDs und data-Attribute sind Funktionsträger und bleiben. */

@keyframes nbPlFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes nbPlRise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes nbPlZoom{ from{ opacity: 0; transform: scale(.97); } to{ opacity: 1; transform: none; } }

.tp-pl-gm{
  position: fixed; inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: var(--tp-s4);
  animation: nbPlFade .18s var(--tp-ease);
}
.tp-pl-gm[hidden]{ display: none; }
.tp-pl-gm__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,11,14,.88);
  cursor: pointer;
}
.tp-pl-gm__panel{
  --tp-ink: var(--tp-ondark);
  --tp-ink-2: var(--tp-ondark-2);
  --tp-ink-3: var(--tp-ondark-3);
  --tp-red-ink: var(--tp-red-lift);
  position: relative;
  width: min(100%, 1040px);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--tp-d1);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
  overflow: hidden;
  animation: nbPlRise .22s var(--tp-ease);
}
.tp-pl-gm__head{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--tp-s3);
  padding: var(--tp-s4);
  border-bottom: 1px solid var(--tp-hair-d);
}
.tp-pulling .tp-pl-gm__eye,
.tp-pl-gm__eye{
  display: 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-bottom: var(--tp-s1);
}
.tp-pl-gm__title{
  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;
}
.tp-pl-gm__count{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-3);
}
.tp-pl-gm__close{
  width: var(--tp-tap); height: var(--tp-tap);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-ui);
  color: var(--tp-ondark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.tp-pl-gm__close:hover{ background: var(--tp-red); border-color: var(--tp-red); color: #fff; }
.tp-pl-gm__close:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 2px; }

.tp-pl-gm__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--tp-s2);
  padding: var(--tp-s4);
  overflow-y: auto;
}
.tp-pl-gm__grid::-webkit-scrollbar{ width: 8px; }
.tp-pl-gm__grid::-webkit-scrollbar-track{ background: var(--tp-d0); }
.tp-pl-gm__grid::-webkit-scrollbar-thumb{ background: var(--tp-d3); border-radius: 4px; }
.tp-pl-gm__grid::-webkit-scrollbar-thumb:hover{ background: var(--tp-red); }

.tp-pl-gm__item{
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-ui);
  background: var(--tp-d2);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.tp-pl-gm__item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--tp-ease); }
.tp-pl-gm__item:hover{ transform: translateY(-3px); border-color: var(--tp-red); }
.tp-pl-gm__item:hover img{ transform: scale(1.05); }
.tp-pl-gm__item:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 2px; }
.tp-pl-gm__item-zoom{
  position: absolute; right: var(--tp-s1); bottom: var(--tp-s1);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(15,17,21,.8);
  border-radius: var(--tp-r-ui);
  color: var(--tp-ondark);
  opacity: 0;
  transition: opacity var(--tp-dur) var(--tp-ease);
}
.tp-pl-gm__item:hover .tp-pl-gm__item-zoom{ opacity: 1; }

@media (max-width: 640px){
  .tp-pl-gm{ padding: 0; }
  .tp-pl-gm__panel{ width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .tp-pl-gm__grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tp-pl-gm__head{ grid-template-columns: 1fr auto; }
  .tp-pl-gm__count{ grid-row: 2; grid-column: 1; }
}


/* ═══════════════ 9 · EINZELBILD-LIGHTBOX ═══════════════ */

.tp-pl-lb{
  position: fixed; inset: 0;
  z-index: 9100;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(10,11,14,.96);
  animation: nbPlFade .18s var(--tp-ease);
}
.tp-pl-lb[hidden]{ display: none; }
.tp-pl-lb__stage{
  display: grid;
  place-items: center;
  padding: var(--tp-s7) var(--tp-s6) var(--tp-s4);
  overflow: hidden;
}
.tp-pl-lb__img{
  max-width: min(100%, 1400px);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--tp-r-ui);
  animation: nbPlZoom .22s var(--tp-ease);
}
.tp-pl-lb__meta{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tp-s3);
  padding: var(--tp-s4);
  border-top: 1px solid var(--tp-hair-d);
}
.tp-pl-lb__class{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-2);
}
.tp-pl-lb__counter{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-lift);
}

.tp-pl-lb__close,
.tp-pl-lb__prev,
.tp-pl-lb__next{
  position: absolute;
  z-index: 2;
  width: var(--tp-tap); height: var(--tp-tap);
  display: grid; place-items: center;
  background: rgba(23,26,32,.86);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-ui);
  color: var(--tp-ondark);
  line-height: 1;
  cursor: pointer;
  transition: background var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.tp-pl-lb__close{ top: var(--tp-s3); right: var(--tp-s3); font-size: 1.6rem; }
.tp-pl-lb__prev,
.tp-pl-lb__next{ top: 50%; transform: translateY(-50%); font-size: 2rem; }
.tp-pl-lb__prev{ left: var(--tp-s3); }
.tp-pl-lb__next{ right: var(--tp-s3); }
.tp-pl-lb__close:hover,
.tp-pl-lb__prev:hover,
.tp-pl-lb__next:hover{ background: var(--tp-red); border-color: var(--tp-red); color: #fff; }
.tp-pl-lb__close:focus-visible,
.tp-pl-lb__prev:focus-visible,
.tp-pl-lb__next:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 2px; }

@media (max-width: 640px){
  .tp-pl-lb__stage{ padding: calc(var(--tp-tap) + var(--tp-s4)) var(--tp-s2) var(--tp-s2); }
  .tp-pl-lb__prev{ left: var(--tp-s2); }
  .tp-pl-lb__next{ right: var(--tp-s2); }
  .tp-pl-lb__meta{ flex-direction: column; gap: var(--tp-s1); }
}