/* ==========================================================================
   Produktseiten – Content Blocks template-htm/product-*
   (Produkte: Highlight, Produkte: Produktlinie). Baut auf treatment.css auf.

   Herstellerbilder (Craith Lab) dürfen nicht verändert werden: keine Beschnitte,
   keine Filter, keine Mischmodi – Fotos immer in voller Höhe (height: auto).
   Animationen nur mit html.tb-motion (früh gesetzt) und ohne „reduzierte Bewegung“;
   product.js setzt .is-in am Abschnitt, sobald er ins Bild kommt.
   ========================================================================== */

body { counter-reset: tbpline; }

.tb-ph, .tb-pline {
  --tb-ease: cubic-bezier(.2, .7, .2, 1);
  --tb-ease-curtain: cubic-bezier(.77, 0, .18, 1);
  --acc: #e3c27a;
  --acc-grad: linear-gradient(100deg, #d4b061 0%, #e6c987 22%, #fff3cf 50%, #e6c987 78%, #d4b061 100%);
  --acc-bar: linear-gradient(90deg, #8a6a2f, #e9cf8f 50%, #8a6a2f);
  --acc-glow: rgba(237, 212, 144, .14);
  background: var(--mc-d);
  overflow: hidden;
}

/* ---------------------------------------------------------------- Highlight */
.tb-ph__glow, .tb-pline__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 30%, var(--acc-glow), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(237, 212, 144, .05), transparent 70%);
}
.tb-ph .tb__inner { padding-top: 2.25rem; }

.tb-ph__brand { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 2.5rem auto 5.5rem; text-align: center; }
.tb-ph__title { margin: 0 !important; font-family: var(--tb-serif); font-weight: 500; font-size: clamp(2.8rem, 6vw, 4.5rem) !important; letter-spacing: .08em; text-transform: uppercase; }
.tb-ph__title--logo { line-height: 0; }
.tb-ph__logo { display: block; width: clamp(200px, 26vw, 320px); height: auto; }
.tb-ph__hair { display: block; width: 7rem; height: 1px; background: var(--acc-bar); }
.tb-ph__intro { max-width: 62ch; text-align: center; margin: 0 auto; }

.tb-ph__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.tb-ph__stage--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.tb-ph__copy { display: flex; flex-direction: column; gap: 1.35rem; }
.tb-ph__rule { display: block; width: 4.5rem; height: 1px; background: var(--acc-bar); transform-origin: left center; }
.tb-ph__h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem) !important; line-height: 1.04 !important; }
.tb-ph__lead { color: var(--tb-gold); max-width: 30ch; }
.tb-ph__note { padding-top: 1.1rem; border-top: 1px solid rgba(237, 212, 144, .28); font-size: .95rem; line-height: 1.65; color: rgba(241, 232, 229, .72); max-width: 52ch; }
.tb-ph__note p + p { margin-top: .6rem; }
.tb-ph .tb__actions { margin-top: .6rem; }
.tb-ph a.btn.tb-btn-cta {
  background-image: linear-gradient(120deg, #fff6dc, #e9cf8f, #c9a45c, #e9cf8f, #fff6dc) !important;
  border-color: rgba(237, 212, 144, .7) !important; color: var(--mc-d) !important;
}

.tb-ph__media { position: relative; }
.tb-ph__media--duo { padding: 0 0 4.5rem 2.5rem; }
.tb-ph__main { position: relative; margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.tb-ph__main img { display: block; width: 100%; height: auto; }
/* Rahmenlinie im Gold, leicht versetzt hinter dem Foto */
.tb-ph__media::before {
  content: ""; position: absolute; top: -1.25rem; right: -1.25rem; width: 62%; height: 70%;
  border: 1px solid rgba(237, 212, 144, .38); border-radius: 4px; pointer-events: none;
}
.tb-ph__sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 205, .32) 50%, transparent 62%);
  transform: translateX(-120%);
}
.tb-ph__detail {
  position: absolute; left: 0; bottom: 0; width: 34%; margin: 0;
  border: 6px solid var(--mc-d); border-radius: 4px; box-shadow: 0 25px 60px rgba(0, 0, 0, .55);
  background: var(--mc-d);
}
.tb-ph__detail img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* Kennzahlen */
.tb-ph__stats { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2.75rem; border-top: 1px solid var(--tb-line); }
.tb .tb-ph__stats ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 0; list-style: none; margin: 0; padding: 0; }
.tb .tb-ph__stats li {
  position: relative; padding: 0 1.75rem !important; margin: 0;
  font-size: .98rem; line-height: 1.5; color: var(--tb-muted);
}
.tb .tb-ph__stats li + li { border-left: 1px solid rgba(237, 212, 144, .25); }
.tb .tb-ph__stats li::before { display: none !important; }
.tb .tb-ph__stats li strong {
  display: block; margin-bottom: .5rem;
  font-family: var(--tb-serif); font-weight: 500; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1;
  color: var(--tb-gold); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tb .tb-ph__stats li strong, .tb-pline__h2 {
    background: var(--acc-grad); background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
}
.tb-ph__foot { margin-top: 2.75rem !important; max-width: 90ch; font-size: .8rem; }

/* ---------------------------------------------------------------- Produktlinie */
.tb-pline { counter-increment: tbpline; border-top: 1px solid rgba(241, 232, 229, .06); }
.tb-pline--black {
  --acc: #d6d6d6;
  --acc-grad: linear-gradient(100deg, #cfcfcf 0%, #e6e6e6 22%, #ffffff 50%, #e6e6e6 78%, #cfcfcf 100%);
  --acc-bar: linear-gradient(90deg, #0d0d0d, #5a5a5a 50%, #0d0d0d);
  --acc-glow: rgba(255, 255, 255, .07);
}
.tb-pline--blue {
  --acc: #9db2f2;
  --acc-grad: linear-gradient(100deg, #8ea6f0 0%, #b3c4f6 22%, #eef2ff 50%, #b3c4f6 78%, #8ea6f0 100%);
  --acc-bar: linear-gradient(90deg, #142a73, #3d5fd0 50%, #142a73);
  --acc-glow: rgba(110, 140, 230, .12);
}
.tb-pline--grey {
  --acc: #cbc6c0;
  --acc-grad: linear-gradient(100deg, #cbc6c0 0%, #ddd8d2 22%, #f7f4f1 50%, #ddd8d2 78%, #cbc6c0 100%);
  --acc-bar: linear-gradient(90deg, #6f6a64, #c9c4be 50%, #6f6a64);
  --acc-glow: rgba(241, 232, 229, .07);
}
.tb-pline__glow { background: radial-gradient(45% 60% at 28% 50%, var(--acc-glow), transparent 72%); }
.tb-pline--flip .tb-pline__glow { background: radial-gradient(45% 60% at 72% 50%, var(--acc-glow), transparent 72%); }

.tb-pline__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.tb-pline--flip .tb-pline__vitrine { order: 2; }
.tb-pline__grid--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* Vitrine: Hintergrund = Hintergrund der Produktfotos */
.tb-pline__vitrine {
  position: relative; overflow: hidden; padding: 2rem 1.5rem 2.25rem; border-radius: 4px; background: #f6f6f6;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.tb .tb-pline__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.tb .tb-pline__products--1 { grid-template-columns: minmax(0, 1fr); }
.tb .tb-pline__products--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb .tb-pline__product {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: 0 !important; margin: 0; text-align: center;
}
.tb .tb-pline__product::before { display: none !important; }
/* Fotos größer als ihre Spalte: der helle Rand der Nachbarn überlappt unsichtbar, die Flaschen rücken zusammen */
.tb-pline__shot { display: block; width: 176%; margin: -1.5rem -38% -1rem; transition: transform .7s var(--tb-ease); }
.tb-pline__products--1 .tb-pline__shot { width: 100%; margin: 0; }
.tb-pline__product:nth-child(2) { z-index: 2; }
.tb-pline__shot img { display: block; width: 100%; height: auto; }
.tb-pline__product:hover .tb-pline__shot { transform: translateY(-6px); }
.tb-pline__pname { position: relative; z-index: 3; font-family: var(--tb-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.15; color: #1e1a17; }
.tb-pline__pdesc { position: relative; z-index: 3; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #77706a; }
.tb-pline__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acc-bar); border-radius: 0 0 4px 4px; transform-origin: center; }

.tb-pline__copy { display: flex; flex-direction: column; gap: 1.25rem; }
/* große Konturziffer 01, 02, 03 – zählt die Produktlinien der Seite */
.tb-pline__num { display: block; margin-bottom: -.6rem; font-family: var(--tb-serif); font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; color: transparent; -webkit-text-stroke: 1px var(--acc); opacity: .55; }
.tb-pline__num::before { content: counter(tbpline, decimal-leading-zero); }
.tb-pline__eyebrow { color: var(--acc); }
.tb-pline__h2 { font-size: clamp(2.6rem, 5vw, 4.25rem) !important; line-height: 1 !important; color: var(--acc) !important; padding-bottom: .08em; }
.tb-pline__formula { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .35rem 1rem; padding: 1.1rem 0; border-top: 1px solid var(--tb-line); border-bottom: 1px solid var(--tb-line); }
.tb-pline__formula-label { font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(241, 232, 229, .55); }
.tb-pline__formula-name { font-family: var(--tb-serif); font-size: 1.6rem; line-height: 1; color: var(--acc); font-feature-settings: "lnum" 1; }
.tb-pline__formula-text { grid-column: 1 / -1; margin: .25rem 0 0 !important; font-size: .98rem; line-height: 1.6; color: var(--tb-muted); }
.tb-pline__note { font-size: .95rem; color: rgba(241, 232, 229, .72); }
.tb a.tb-pline__link {
  display: inline-flex; align-items: center; gap: .2rem; padding-bottom: .3rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--sc-l); background: linear-gradient(var(--acc), var(--acc)) left bottom / 100% 1px no-repeat;
  transition: background-size .5s var(--tb-ease), color .3s ease;
}
.tb a.tb-pline__link:hover, .tb a.tb-pline__link:focus { color: var(--acc); background-size: 35% 1px; }

/* ---------------------------------------------------------------- Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .tb-ph__glow { animation: tb-breathe 11s ease-in-out infinite alternate; }

  .tb-motion [data-tb-reveal] [data-tb-step] { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--tb-ease), transform 1.1s var(--tb-ease); }
  .tb-motion [data-tb-reveal] [data-tb-step="1"] { transition-delay: .12s; }
  .tb-motion [data-tb-reveal] [data-tb-step="2"] { transition-delay: .24s; }
  .tb-motion [data-tb-reveal] [data-tb-step="3"] { transition-delay: .36s; }
  .tb-motion [data-tb-reveal] [data-tb-step="4"] { transition-delay: .48s; }
  .tb-motion [data-tb-reveal] [data-tb-step="5"] { transition-delay: .6s; }
  .tb-motion [data-tb-reveal].is-in [data-tb-step] { opacity: 1; transform: none; }

  /* Logo: aus leichter Unschärfe scharf stellen */
  .tb-motion .tb-ph__title--logo[data-tb-step] { filter: blur(8px); transform: scale(.96); transition: opacity 1.6s var(--tb-ease), transform 1.8s var(--tb-ease), filter 1.6s var(--tb-ease); }
  .tb-motion .is-in .tb-ph__title--logo[data-tb-step] { filter: none; transform: none; }

  /* Goldlinien zeichnen sich */
  .tb-motion .tb-ph__rule, .tb-motion .tb-ph__hair { transform: scaleX(0); transition: transform 1.4s var(--tb-ease-curtain) .2s; }
  .tb-motion .tb-ph__hair { transform-origin: center; }
  .tb-motion .is-in .tb-ph__rule, .tb-motion .is-in .tb-ph__hair { transform: scaleX(1); }

  /* Hauptfoto: Vorhang von rechts, Foto setzt sich langsam */
  .tb-motion .tb-ph__main { clip-path: inset(-140px -140px -140px 100%); transition: clip-path 1.6s var(--tb-ease-curtain) .15s; }
  .tb-motion .tb-ph__main img { transform: scale(1.1); transition: transform 2.8s var(--tb-ease) .15s; }
  .tb-motion .is-in .tb-ph__main { clip-path: inset(-140px); }
  .tb-motion .is-in .tb-ph__main img { transform: none; }
  .tb-motion .is-in .tb-ph__sheen { animation: tb-sheen 2.2s ease-in-out 1.5s 1 both; }
  .tb-motion .tb-ph__media::before { opacity: 0; transform: translate(-1rem, 1rem); transition: opacity 1.4s ease 1.1s, transform 1.6s var(--tb-ease) 1.1s; }
  .tb-motion .is-in .tb-ph__media::before { opacity: 1; transform: none; }
  .tb-motion .tb-ph__detail { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--tb-ease) .9s, transform 1.4s var(--tb-ease) .9s; }
  .tb-motion .is-in .tb-ph__detail { opacity: 1; transform: none; }

  /* Kennzahlen: nacheinander, Zahlen zählen hoch (product.js), Goldglanz läuft einmal durch */
  .tb-motion .tb-ph__stats li { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--tb-ease), transform 1s var(--tb-ease); }
  .tb-motion .tb-ph__stats li:nth-child(2) { transition-delay: .15s; }
  .tb-motion .tb-ph__stats li:nth-child(3) { transition-delay: .3s; }
  .tb-motion .tb-ph__stats li:nth-child(4) { transition-delay: .45s; }
  .tb-motion .tb-ph__stats.is-in li { opacity: 1; transform: none; }
  .tb-motion .tb-ph__stats.is-in li strong { animation: tb-shine 2.6s ease-in-out .6s 1 both; }

  /* Produktlinie: Vitrine hebt sich, Produkte steigen nacheinander auf, Farbleiste zeichnet sich */
  .tb-motion .tb-pline__vitrine { clip-path: inset(100% -140px -140px -140px); transition: clip-path 1.4s var(--tb-ease-curtain); }
  .tb-motion .is-in .tb-pline__vitrine { clip-path: inset(-140px); }
  .tb-motion .tb-pline__product { opacity: 0; transform: translateY(46px); transition: opacity 1.2s var(--tb-ease), transform 1.4s var(--tb-ease); transition-delay: calc(.55s + var(--i, 0) * .16s); }
  .tb-motion .is-in .tb-pline__product { opacity: 1; transform: none; }
  .tb-motion .tb-pline__bar { transform: scaleX(0); transition: transform 1.2s var(--tb-ease-curtain) 1.1s; }
  .tb-motion .is-in .tb-pline__bar { transform: scaleX(1); }
  .tb-motion .tb-pline__num[data-tb-step] { letter-spacing: .5em; transition: opacity 1.4s var(--tb-ease), letter-spacing 1.8s var(--tb-ease), transform 1.2s var(--tb-ease); }
  .tb-motion .is-in .tb-pline__num[data-tb-step] { letter-spacing: 0; opacity: .55; }
  .tb-motion .is-in .tb-pline__h2 { animation: tb-shine 2.4s ease-in-out .5s 1 both; }

  /* Ohne laufendes Skript nach 4 s alles zeigen (tb-motion-js setzt product.js) */
  .tb-motion-safe:not(.tb-motion-js) [data-tb-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
}

@keyframes tb-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes tb-sheen { 0% { opacity: 0; transform: translateX(-120%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }
@keyframes tb-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 991.98px) {
  .tb-ph__brand { margin: 1.5rem auto 3.5rem; }
  .tb-ph__stage, .tb-pline__grid { grid-template-columns: minmax(0, 1fr); }
  .tb-ph__media { order: -1; }
  .tb-pline--flip .tb-pline__vitrine { order: 0; }
  .tb .tb-ph__stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb .tb-ph__stats li:nth-child(3) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .tb-ph__media--duo { padding: 0 0 3rem 1.25rem; }
  .tb-ph__media::before { top: -.75rem; right: -.75rem; }
  .tb-ph__detail { width: 38%; border-width: 4px; }
  .tb .tb-ph__stats li { padding: 0 1rem !important; }
  .tb-pline__vitrine { padding: 1.75rem .75rem 1.5rem; }
  .tb-pline__pname { font-size: 1rem; }
  .tb-pline__pdesc { font-size: .62rem; letter-spacing: .08em; }
  .tb-pline__formula { grid-template-columns: minmax(0, 1fr); }
}