/* ==========================================================================
   Produkt-Landingpages der Linie Teepapst Selected
   ==========================================================================

   Gilt für alle Seiten unterhalb von /teepapst-selected/ (Elternseite 9).
   Eingehängt über die Body-Klasse .tp-produktseite aus inc/product-landing.php,
   damit die Abschnitte im Editor eigenständige Blöcke auf oberster Ebene
   bleiben und alignfull/alignwide normal funktionieren. Ausnahme ist der
   Termin-Dialog am Ende: Er hängt an .tp-mit-termin und gilt damit auch auf
   der Elternseite selbst.

   Bewusst eine eigene Datei und nicht style.css: die Bestandsseiten sollen von
   diesen Regeln nicht berührt werden, und weitere Produkte der Serie bekommen
   dasselbe Niveau ohne Nacharbeit.

   Farben, Schriften und Größen ausschließlich aus theme.json. Die Abstände
   sind eigene Variablen, weil die Global Styles live deutlich enger sind als
   die Theme-Datei behauptet (CLAUDE.md Abschnitt 10).
   ========================================================================== */

.tp-produktseite {
  --pl-luft:       clamp(2.75rem, 6vw, 5rem);  /* Abstand zwischen Abschnitten */
  --pl-luft-klein: clamp(1.25rem, 3vw, 2rem);
  --pl-mass:       34rem;                       /* Lesebreite */
}

/* Jeder Abschnitt trägt seinen Abstand selbst. */
.tp-produktseite .tp-pl-abschnitt { padding-block: var(--pl-luft); }

/* ---------- Typografie ---------- */

.tp-produktseite .tp-pl-eyebrow {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--wp--preset--color--light-grey);
  margin-block: 0 var(--pl-luft-klein);
}

.tp-produktseite h1,
.tp-produktseite .tp-pl-gross {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin-block: 0;
}
.tp-produktseite h1        { font-size: clamp(2.5rem, 6.4vw, 4.5rem); }
.tp-produktseite .tp-pl-gross { font-size: clamp(2rem, 5vw, 3.5rem); }

.tp-produktseite .tp-pl-lead {
  max-width: var(--pl-mass);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--wp--preset--color--light-grey);
  text-align: left;
  hyphens: none;
}

.tp-produktseite .tp-pl-text {
  max-width: var(--pl-mass);
  text-align: left;
  hyphens: none;
}

/* Abstand zwischen großer Aussage und Fließtext */
/* Bewusst zwei Stufen: Überschrift zu Fließtext steht eng beieinander und
   liest sich als ein Block, Überschrift zu Raster oder Tabelle bekommt weiter
   unten mehr Luft. Gleiche Abstände überall würden den Rhythmus einebnen. */
.tp-produktseite .tp-pl-gross + .tp-pl-lead,
.tp-produktseite .tp-pl-gross + .tp-pl-text { margin-block-start: 1.1rem; }

/* ---------- Hero ---------- */

.tp-produktseite .tp-pl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--pl-luft);
}
.tp-produktseite .tp-pl-hero > * { margin-block: 0; }
.tp-produktseite .tp-pl-packshot { margin: 0; }
/* Das Produkt fuellt seine Spalte. Die Vorlage ist 1160x1400, wird also auch
   auf grossen Schirmen verkleinert und nie hochskaliert. Deshalb hier bewusst
   kein festes Pixelmass und kein Schlagschatten — den bringt das Foto mit. */
.tp-produktseite .tp-pl-packshot img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 860px) {
  .tp-produktseite .tp-pl-hero {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 4vw, 2rem);
  }
  /* Gestapelt steht das Produkt oben. Auf dem Telefon darf es die ganze
     Spalte einnehmen, auf dem Tablet nicht — dort füllte es sonst fast den
     ganzen ersten Screen, bevor eine Zeile Text zu sehen ist. */
  .tp-produktseite .tp-pl-packshot { order: -1; }
  .tp-produktseite .tp-pl-packshot img { max-width: 420px; }
}
/* Auf dem Telefon noch etwas kleiner: so stehen Faktenzeile und beide
   Handlungswege im ersten Screen, worauf es bei Kampagnen-Traffic ankommt.
   Das Produkt nimmt damit immer noch rund drei Viertel der Breite ein. */
@media (max-width: 600px) {
  .tp-produktseite .tp-pl-packshot img { max-width: 280px; }
}

/* Dezenter Hinweis nach unten, bewusst kein Sales-Button */
.tp-produktseite .tp-pl-scroll {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light-grey);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  padding-block-end: .4rem;
  min-height: 44px;          /* Touch-Ziel */
  box-sizing: border-box;
}
.tp-produktseite .tp-pl-scroll:hover,
.tp-produktseite .tp-pl-scroll:focus-visible {
  color: var(--wp--preset--color--dark-grey);
  border-bottom-color: currentColor;
}

/* ---------- Vollflächiges Bildband ---------- */

.tp-produktseite .tp-pl-band { margin-block: 0; }
.tp-produktseite .tp-pl-band img {
  display: block;
  width: 100%;
  height: clamp(7rem, 15vw, 11rem);
  object-fit: cover;
}

/* ---------- Bild und Text nebeneinander, abwechselnd ---------- */

.tp-produktseite .tp-pl-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.tp-produktseite .tp-pl-split > * { margin-block: 0; }
.tp-produktseite .tp-pl-split figure { margin: 0; }
.tp-produktseite .tp-pl-split img { display: block; width: 100%; height: auto; }
/* Bild rechts statt links */
.tp-produktseite .tp-pl-split-kehren > figure { order: 2; }
@media (max-width: 782px) {
  .tp-produktseite .tp-pl-split { grid-template-columns: 1fr; }
  .tp-produktseite .tp-pl-split-kehren > figure { order: 0; }
}

/* Trennlinie zwischen den Abschnitten.
   Die Linie gehört zum folgenden Abschnitt, nicht in die Mitte zwischen zwei
   Weißräume: darüber bleibt das volle --pl-luft des vorigen Abschnitts, darunter
   nur --pl-luft-klein bis zur Überschrift. Dadurch leitet sie ein, statt zu
   schweben. */
.tp-produktseite .tp-pl-aussage {
  border-block-start: 1px solid var(--wp--preset--color--hairline);
  padding-block-start: var(--pl-luft-klein);
}

/* Abschnitt, der mit einer kleinen Belegreihe endet statt mit Bild oder
   Fließtext („Qualität, die dokumentiert ist."). Unter Logos und
   Unterschriften stand sonst das volle --pl-luft plus der Blockabstand von
   WordPress: 104 px bei 1440 px, ein leerer Streifen. Hier -- und nur hier --
   der kleinere Abstand; alle übrigen Abschnittsübergänge bleiben, wie sie sind. */
.tp-produktseite .tp-pl-kompakt { padding-block-end: var(--pl-luft-klein); }

/* ---------- Anwendungen ---------- */

.tp-produktseite .tp-pl-apps {
  display: grid;
  grid-template-columns: 1fr;
  /* 3rem zwischen gestapelten Karten: genau der Abstand, den sie bisher
     hatten (Rasterabstand plus der Blockabstand von WordPress, siehe unten). */
  gap: 3rem clamp(1.5rem, 3vw, 2.5rem);
}
/* Das Flow-Layout von WordPress gibt jeder Folgekarte 24 px Abstand nach oben.
   Nebeneinander standen die zweite und dritte Karte dadurch tiefer als die
   erste -- mit Fotos deutlich sichtbar. */
.tp-produktseite .tp-pl-apps > * { margin: 0; }
/* Drei Karten: entweder alle nebeneinander oder alle untereinander.
   Ein automatisches Raster ergäbe bei 768 px 2+1 — eine Karte bliebe allein. */
@media (min-width: 700px) {
  .tp-produktseite .tp-pl-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tp-produktseite .tp-pl-app > * { margin-block: 0; }
.tp-produktseite .tp-pl-app figure { margin: 0 0 1.1rem; }
.tp-produktseite .tp-pl-app img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.tp-produktseite .tp-pl-app h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--l);
  margin-block: 0 .4rem;
}
.tp-produktseite .tp-pl-app p {
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--light-grey);
  margin-block: 0;
  text-align: left;
  hyphens: none;
}

/* Platzhalter für noch fehlendes Bildmaterial. Bewusst als Platzhalter
   erkennbar, damit er nie versehentlich veröffentlicht wird. */
.tp-produktseite .tp-pl-platzhalter {
  display: grid;
  place-content: center;
  gap: .35rem;
  aspect-ratio: 4 / 5;
  text-align: center;
  padding: 1.5rem;
  background: var(--wp--preset--color--paper);
  border: 1px dashed var(--wp--preset--color--light-grey);
  color: var(--wp--preset--color--light-grey);
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-block-end: 1.1rem;
}

/* ---------- Zielgruppen ---------- */

.tp-produktseite .tp-pl-felder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--wp--preset--color--hairline);
  border: 1px solid var(--wp--preset--color--hairline);
}
.tp-produktseite .tp-pl-feld {
  background: var(--wp--preset--color--white);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.tp-produktseite .tp-pl-feld > * { margin-block: 0; }
.tp-produktseite .tp-pl-feld h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--l);
  margin-block: 0 .35rem;
}
.tp-produktseite .tp-pl-feld p {
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--light-grey);
  text-align: left;
  hyphens: none;
}

/* Vier Felder: 1 / 2x2 / 4. Vier Spalten erst, wenn sie wirklich Platz haben —
   bei 1024 px wären sie zu schmal und 2x2 wirkt ruhiger. */
@media (min-width: 620px) {
  .tp-produktseite .tp-pl-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .tp-produktseite .tp-pl-felder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Produktdaten ---------- */

/* Ein Datenblatt, keine Tabellenkalkulation: begrenzte Breite, links am
   Inhaltsraster, schmale Label-Spalte, und der Wert trägt mehr Gewicht als
   sein Label. Die Tabelle bleibt semantisch eine Tabelle. */
.tp-produktseite .tp-pl-daten {
  margin-block: 0;
  max-width: 60rem;
}
.tp-produktseite .tp-pl-daten table { width: 100%; border-collapse: collapse; }
.tp-produktseite .tp-pl-daten td {
  text-align: left;
  /* Unten etwas mehr als oben: bei Grundlinien-Ausrichtung wirkt der
     Raum unter der Schrift sonst kleiner als der darüber. */
  padding-block: 1.05rem 1.15rem;
  /* Alle Zellränder in derselben feinen Linie, der Rahmen ist rundum
     geschlossen, auch unter der letzten Zeile. Der Tabellenblock von
     WordPress gibt jeder Zelle `border: 1px solid` in der Textfarbe -- ohne
     diese Zeile hätte das Raster drei Farben: helle Zeilenlinien, graue
     Mittellinie, dunkler Außenrand. Doppelte Linien entstehen nicht, weil
     die Tabelle ihre Ränder zusammenlegt (border-collapse). */
  border: 1px solid var(--wp--preset--color--hairline);
  vertical-align: baseline;
  font-size: var(--wp--preset--font-size--s);
  word-break: normal;
  overflow-wrap: anywhere;
}
/* Label: klein, zurückhaltend, schmal. */
.tp-produktseite .tp-pl-daten td:first-child {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light-grey);
  /* Spalte bleibt insgesamt 13rem (208 px) breit wie bisher: Breite plus
     Innenabstand. Nur verteilt er sich jetzt auf beide Seiten. */
  width: 11.125rem;
  padding-inline: 1rem .875rem;
}
/* Wert: die eigentliche Information, deshalb dunkler. Etwas mehr Abstand
   zur Mittellinie als das Label, damit der Wert nicht an der Linie klebt. */
.tp-produktseite .tp-pl-daten td:last-child {
  color: var(--wp--preset--color--dark-grey);
  padding-inline: 1.25rem 1rem;
}

@media (max-width: 600px) {
  /* Untereinander statt nebeneinander, dabei bewusst knapper als auf dem
     Desktop, damit die elf Angaben nicht auseinanderfallen. */
  /* Gestapelte Zellen legen ihre Ränder nicht zusammen. Deshalb hier von
     Hand: keine Linie zwischen Label und zugehörigem Wert, keine doppelte
     zwischen zwei Paaren -- die Trennung übernimmt die Unterkante des Werts.
     Beim letzten Paar „Preis" ist genau diese Unterkante der Abschluss. */
  .tp-produktseite .tp-pl-daten td:first-child {
    width: auto;
    display: block;
    border-block: 0;
    padding: .9rem 1rem .2rem;
  }
  .tp-produktseite .tp-pl-daten td:last-child {
    display: block;
    border-block-start: 0;
    padding: 0 1rem .9rem;
  }
  /* Den Rahmen oben schließen. */
  .tp-produktseite .tp-pl-daten tr:first-child td:first-child {
    border-block-start: 1px solid var(--wp--preset--color--hairline);
  }
}
.tp-produktseite .tp-pl-hinweis {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--light-grey);
  max-width: 46rem;
  text-align: left;
  hyphens: none;
}

/* ---------- Conversion ---------- */

.tp-produktseite .tp-pl-cta { background: var(--wp--preset--color--paper); }
.tp-produktseite .tp-pl-cta .tp-pl-gross { max-width: 20ch; }

/* ---------- Scroll-Reveal ----------
   Ohne JavaScript bleibt alles sichtbar: die Regeln hängen an .tp-js-reveal,
   und diese Klasse setzt erst das Skript. Bei reduzierter Bewegung greift sie
   gar nicht, zusätzlich zur Abfrage im Skript selbst. */
.tp-js-reveal .tp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.tp-js-reveal .tp-reveal.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tp-js-reveal .tp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Feinabstände ----------
   Ergänzungen, die sich erst am gerenderten Ergebnis zeigen. */

.tp-produktseite .tp-pl-hero .tp-pl-lead { margin-block: 1.5rem 0; }
.tp-produktseite .tp-pl-scroll-wrap { margin-block: var(--pl-luft-klein) 0; }

/* Überschrift zu Raster, Tabelle oder Kartenreihe */
.tp-produktseite .tp-pl-abschnitt > .tp-pl-gross + * { margin-block-start: var(--pl-luft-klein); }

/* Hinweis unter Tabelle und Buttons */
.tp-produktseite .tp-pl-daten + .tp-pl-hinweis,
.tp-produktseite .wp-block-buttons + .tp-pl-hinweis { margin-block-start: 1.25rem; }
.tp-produktseite .tp-pl-cta .wp-block-buttons { margin-block-start: var(--pl-luft-klein); }

/* Platzhalterzeilen untereinander */
.tp-produktseite .tp-pl-platzhalter span { display: block; }
.tp-produktseite .tp-pl-platzhalter span:last-child {
  color: var(--wp--preset--color--dark-grey);
  font-weight: 500;
}

/* ==========================================================================
   Ergänzungen 05.10.2026 — Kampagnen-Tauglichkeit
   ========================================================================== */

/* ---------- Faktenzeile im Hero ----------
   Vier belegte Eckdaten direkt unter dem Einleitungstext. Bewusst als
   Textzeile mit Trennpunkten, nicht als Badge-Sammlung. */

.tp-produktseite .tp-pl-fakten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 0;
  margin-block: 1.4rem 0;
  padding: 1.1rem 0 0;
  border-block-start: 1px solid var(--wp--preset--color--hairline);
  list-style: none;
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light-grey);
}
/* Trennpunkte, die nie am Zeilenanfang stehen. Jeder Eintrag trägt seinen
   Punkt vorne -- auch der erste -- und bleibt mit ihm zusammen (nowrap).
   Die Liste ist um genau die Breite eines Trenners nach links verschoben und
   an der ursprünglichen Kante abgeschnitten (clip-path). Der Punkt des ersten
   Eintrags jeder Zeile fällt damit in den abgeschnittenen Streifen, auch nach
   einem Umbruch auf dem Telefon. Die Linie darüber beginnt durch denselben
   Schnitt weiterhin bündig an der Spalte. */
.tp-produktseite .tp-pl-fakten {
  --pl-trenner: 1.9rem;
  margin-inline-start: calc(-1 * var(--pl-trenner));
  -webkit-clip-path: inset(0 0 0 var(--pl-trenner));
  clip-path: inset(0 0 0 var(--pl-trenner));
}
.tp-produktseite .tp-pl-fakten li { margin: 0; white-space: nowrap; }
.tp-produktseite .tp-pl-fakten li::before {
  content: "·";
  display: inline-block;
  width: var(--pl-trenner);
  text-align: center;
  color: var(--wp--preset--color--hairline);
}

/* Handlungswege im Hero */
.tp-produktseite .tp-pl-hero .wp-block-buttons { margin-block-start: var(--pl-luft-klein); }

/* ---------- Bildpaar in einer Spalte ----------
   Trägt den zusammengeführten Abschnitt zu Geschmack, Farbe und Herkunft:
   zwei Aufnahmen nebeneinander statt zweier getrennter Abschnitte. */

.tp-produktseite .tp-pl-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, .9rem);
  align-items: start;
}
.tp-produktseite .tp-pl-paar figure { margin: 0; }
.tp-produktseite .tp-pl-paar img { display: block; width: 100%; height: auto; }

/* Das Bildpaar muss dieselbe Seitenwahl beherrschen wie eine einzelne Figur. */
.tp-produktseite .tp-pl-split-kehren > .tp-pl-paar { order: 2; }
@media (max-width: 782px) {
  .tp-produktseite .tp-pl-split-kehren > .tp-pl-paar { order: 0; }
}

/* ---------- Vertrauenspunkte ----------
   Drei Belege unter dem Fließtext, eingeleitet von der einen Haarlinie. Zwei
   davon tragen das zugehörige Zeichen über ihrer Unterschrift: EU-Bio zur
   Zertifizierung, Eurofins zur Analyse. Keine Rahmen, keine Schatten.

   Die Unterschriften stehen auf einer Linie, auch wenn der dritte Punkt kein
   Logo hat -- dafür sorgt align-items: end. Die Logos sind nicht gleich hoch,
   sondern optisch gleich schwer: die breite Eurofins-Wortmarke wäre bei
   gleicher Höhe mehr als dreimal so breit wie das EU-Bio-Zeichen. */

.tp-produktseite .tp-pl-vertrauen {
  display: grid;
  /* Immer drei Spalten, auf jeder Breite -- wie bei den Anwendungskarten.
     Das frühere automatische Raster brach unter 630 px um: zwischen 414 und
     629 px in 2+1, darunter alle drei untereinander. Dann hatte die Reihe
     keine gemeinsame Unterkante mehr, und der Abstand zur nächsten Linie hing
     davon ab, unter welchem Punkt man misst (bei 430 px 68 oder 114 px).
     min-content: keine Spalte wird schmaler als ihr Logo. */
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
  column-gap: 2.5rem;
  align-items: end;
  /* Nach unten trägt die Reihe nichts bei. Der Abstand zur nächsten Linie
     ist derselbe wie an jeder Abschnittslinie: --pl-luft als Polster dieses
     Abschnitts plus der Blockabstand, den WordPress jedem Abschnitt gibt. */
  margin-block: var(--pl-luft-klein) 0;
  /* 1.5rem wie überall zwischen Linie und folgendem Inhalt. */
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--wp--preset--color--hairline);
}
/* Das Flow-Layout von WordPress gibt jedem Folgeelement einen Block-Abstand
   nach oben -- im Raster versetzt das die Spalten gegeneinander. */
.tp-produktseite .tp-pl-vertrauen > *,
.tp-produktseite .tp-pl-beleg > * { margin: 0; }

.tp-produktseite .tp-pl-beleg-logo {
  display: flex;
  align-items: flex-end;
  height: 2.25rem;
  margin: 0 0 .8rem;
}
.tp-produktseite .tp-pl-beleg-logo img {
  display: block;
  height: 100%;
  width: auto;
  /* Sonst gilt das Logo dem Raster als stauchbar: in einer schmalen Spalte
     würde die Eurofins-Wortmarke verkleinert statt die Spalte verbreitert. */
  max-width: none;
}
.tp-produktseite .tp-pl-beleg-wortmarke img { height: 1.375rem; }

.tp-produktseite .tp-pl-beleg-text {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--dark-grey);
  /* Bricht eine Unterschrift auf dem Telefon um, dann am Wortende --
     nicht im Blocksatz und nicht mit Trennstrich. */
  text-align: left;
  hyphens: none;
}
@media (max-width: 600px) {
  /* Schmalerer Spaltenabstand, damit die Unterschriften Platz behalten. */
  .tp-produktseite .tp-pl-vertrauen { column-gap: 1.25rem; }
}
/* Schmale Telefone: drei Spalten passen dort nicht mehr. Die Label-Schrift ist
   für Besucher Jost, nicht Kaneda Gothic -- die Lizenzschrift steht nur dort
   zur Verfügung, wo sie lokal installiert ist, und Jost läuft fast doppelt so
   breit. Unter 421 px ragte „Dokumentierte Herstellung" sonst über den Rand.
   Deshalb hier eine Liste: Zeichen links in fester Spalte, Unterschrift rechts,
   alle Unterschriften auf derselben Einzugslinie -- auch die ohne Zeichen. */
@media (max-width: 420px) {
  .tp-produktseite .tp-pl-vertrauen {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .9rem;
  }
  .tp-produktseite .tp-pl-beleg {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
  }
  .tp-produktseite .tp-pl-beleg-logo {
    margin: 0;
    align-items: center;
  }
  .tp-produktseite .tp-pl-beleg-text { grid-column: 2; }
}

/* Abstand von der Einleitungszeile zum Kartenraster */
.tp-produktseite .tp-pl-abschnitt > .tp-pl-lead + .tp-pl-apps { margin-block-start: var(--pl-luft-klein); }


/* ---------- Produktdetails im Abschlussbereich ----------
   Die Produktdetails stehen jetzt unter der Conversion, im selben
   papierfarbenen Abschnitt. Sie sollen erkennbar nachgeordnet sein: eigene
   Trennlinie, deutlich kleinere Überschrift, keine eigene Fläche. */

.tp-produktseite .tp-pl-datenblatt {
  margin-block-start: var(--pl-luft);
  padding-block-start: var(--pl-luft-klein);
  border-block-start: 1px solid var(--wp--preset--color--hairline);
}
.tp-produktseite .tp-pl-klein {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.008em;
  margin-block: 0;
}
.tp-produktseite .tp-pl-datenblatt .tp-pl-daten { margin-block-start: 1.5rem; }
.tp-produktseite .tp-pl-datenblatt .tp-pl-hinweis { margin-block-start: 1.25rem; }


/* ---------- Handlungswege: beide Varianten exakt gleich hoch ----------
   Ursache der ungleichen Höhe: die Block-Bibliothek gibt der Outline-Variante
   `border: 2px solid` und eigene Polster -- in :where(), also mit Spezifität
   null. Ob das greift, hängt davon ab, welches Stylesheet zuletzt lädt. Der
   gefüllte Button hat keinen Rahmen; die Outline-Variante war dadurch je nach
   Ladezusammenhang 4 px höher.

   Deshalb hier für beide dieselben Maße, explizit: gleicher 2-px-Rahmen (beim
   gefüllten Button transparent, sein Hintergrund läuft darunter durch),
   dieselben Polster abzüglich dieses Rahmens, dieselbe Zeilenhöhe. Die äußere
   Größe bleibt damit exakt wie zuvor (55,7 px). Kein festes Pixelmaß:
   stretch gleicht zusätzlich aus, falls ein Text einmal umbricht.

   Alles hier nur im Seiteninhalt (main). Die Buttons im Header (Masterclass,
   Zum Shop) sind ebenfalls eine Buttongruppe und bekamen diese Regeln bis
   07.10.2026 mit: Masterclass ohne sichtbaren Rahmen, beide höher und
   ungleich breit -- nur auf den Produktseiten. */

.tp-produktseite main .wp-block-buttons { align-items: stretch; }
.tp-produktseite main .wp-block-buttons > .wp-block-button { display: flex; }
.tp-produktseite main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  padding: calc(1.05rem - 2px) calc(2.25rem - 2px);
  line-height: 1.7;
}
/* Die Outline-Variante bekommt ihr Aussehen ausdrücklich, statt es dem
   Zufall der Ladereihenfolge zu überlassen. */
.tp-produktseite main .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--dark-grey);
  border-color: currentColor;
}

/* Ab 521 px stehen beide Handlungswege nebeneinander. Der erste darf
   schrumpfen und umbrechen, der zweite behält seine Breite. Wachsen darf
   keiner -- auf breiten Schirmen sollen sie nicht über die Spalte gezogen
   werden. Durch stretch bleiben beide gleich hoch, auch wenn der erste
   zweizeilig wird. Darunter stehen sie untereinander, siehe unten. */
.tp-produktseite main .wp-block-buttons { flex-wrap: nowrap; }
.tp-produktseite main .wp-block-buttons > .wp-block-button:first-child { flex: 0 1 auto; min-width: 0; }
.tp-produktseite main .wp-block-buttons > .wp-block-button:last-child { flex: 0 0 auto; }
.tp-produktseite main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
  width: 100%;
  /* Bricht ein Text um, dann in gleich lange Zeilen statt mit einem
     verwaisten letzten Wort. Ohne Unterstützung bleibt es beim normalen Umbruch. */
  text-wrap: balance;
}

@media (max-width: 600px) {
  /* Schmaleres Seitenpolster, damit beide in eine Zeile passen. */
  .tp-produktseite main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
    padding-inline: calc(1rem - 2px);
  }
}

/* Kleine Telefone: untereinander, volle Breite, der primäre Weg zuerst.
   Nebeneinander brach „Termin vereinbaren & Muster erhalten" für Besucher
   (Label-Schrift Jost, nicht Kaneda) bei 375 px in vier Zeilen um und wurde
   122 px hoch. Gilt für Hero und Abschluss gleichermaßen. */
@media (max-width: 520px) {
  .tp-produktseite main .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .tp-produktseite main .wp-block-buttons > .wp-block-button,
  .tp-produktseite main .wp-block-buttons > .wp-block-button:first-child,
  .tp-produktseite main .wp-block-buttons > .wp-block-button:last-child {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* ==========================================================================
   Terminbuchung im Dialog (Microsoft Bookings)
   ==========================================================================
   Markup aus tp_bookings_dialog(), Verhalten in product-landing.js. Der Dialog
   liegt in der obersten Ebene des Browsers (showModal) und damit über Header,
   Cookie-Hinweis und FAQ-Button. Auf dem Telefon füllt er den Bildschirm.

   Hängt an der Body-Klasse tp-mit-termin, nicht an tp-produktseite: Seit
   07.10.2026 öffnet auch die Übersichtsseite /teepapst-selected/ diesen
   Dialog („Beratung & Muster buchen"), ohne Produktseite zu sein. */

.tp-mit-termin .tp-termin {
  box-sizing: border-box;
  width: min(60rem, calc(100vw - 2rem));
  height: min(52rem, calc(100vh - 2rem));
  height: min(52rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-grey);
  box-shadow: 0 1.5rem 4rem rgba(46, 45, 44, .2);
  /* Scrollen im Dialog nicht an die Seite dahinter weiterreichen. */
  overscroll-behavior: contain;
}
.tp-mit-termin .tp-termin::backdrop { background: rgba(46, 45, 44, .55); }

/* Der Rahmen füllt den Dialog vollständig. Nur so landet ein Klick auf dem
   Dialog selbst ausschließlich auf dem Hintergrund -- und schließt ihn. */
.tp-mit-termin .tp-termin-rahmen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tp-mit-termin .tp-termin-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem .5rem .5rem 1.5rem;
  border-block-end: 1px solid var(--wp--preset--color--hairline);
}
.tp-mit-termin .tp-termin-titel {
  margin: 0 auto 0 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.15;
}
.tp-mit-termin .tp-termin-extern {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light-grey);
}
.tp-mit-termin .tp-termin-schliessen {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;               /* Touch-Ziel */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--dark-grey);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.tp-mit-termin .tp-termin-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.tp-mit-termin .tp-termin-hinweis {
  margin: auto;
  max-width: 32rem;
  padding: 2rem 1.5rem;
}
.tp-mit-termin .tp-termin-hinweis p {
  margin: 0 0 1.5rem;
  color: var(--wp--preset--color--light-grey);
  text-align: left;
  hyphens: none;
}
.tp-mit-termin .tp-termin-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--wp--preset--color--white);
}
.tp-mit-termin .tp-termin.ist-geladen .tp-termin-hinweis { display: none; }

/* Hintergrund nicht mitscrollen, solange der Dialog offen ist. */
html.tp-termin-offen { overflow: hidden; }

@media (max-width: 600px) {
  .tp-mit-termin .tp-termin {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  .tp-mit-termin .tp-termin-kopf { padding-inline-start: 1rem; }
  /* Kopfzeile bleibt einzeilig: Titel und Schließen reichen auf dem Telefon. */
  .tp-mit-termin .tp-termin-extern { display: none; }
}