/* Plakat-Optik nach Heikos Modellplakaten: geknittertes Papier, riesiges Wort in Anton mit
   Verlauf nach unten, die freigestellte Maschine davor, darunter Titel, ein Satz und eine
   Kennzahlenleiste. Alles echter Text – nur Papier und Maschine sind Bilder. */

.paper { background: #ececea url('bilder/papier.webp') center / 900px auto; }

/* ---------- Plakat-Kachel ---------- */
.posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.poster {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 16px 18px; color: var(--ink); text-decoration: none; overflow: hidden;
  border: 1px solid #dcdad3; container-type: inline-size;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.poster:hover { border-color: var(--ink); box-shadow: 0 18px 40px rgba(20, 24, 22, .12); }
.p-kick { margin: 0; font: 500 11px/1 var(--text); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; }
.p-stage {
  --fs: calc(100cqw / (var(--chars, 6) * .5)); --stretch: 2.05;
  position: relative; width: 100%; display: grid; justify-items: center; margin-top: 8px;
}
.p-giant {
  display: block; width: 100%; text-align: center; white-space: nowrap;
  font: 400 var(--fs) / .86 var(--display); letter-spacing: -.01em;
  transform: scaleY(var(--stretch)); transform-origin: top center;
  margin-bottom: calc(var(--fs) * .86 * (var(--stretch) - 1));
  background: linear-gradient(180deg, #1b1e1d 0%, #2a2e2c 38%, rgba(42, 46, 44, .35) 72%, rgba(42, 46, 44, 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-machine {
  width: 92%; height: auto; margin-top: calc(var(--fs) * .86 * var(--stretch) * -.52);
  filter: drop-shadow(0 18px 14px rgba(20, 24, 22, .28)) drop-shadow(0 4px 4px rgba(20, 24, 22, .2));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.poster:hover .p-machine { transform: translateY(-4px) scale(1.03); }
.p-title { margin: 12px 0 6px; font: 800 clamp(20px, 2vw, 26px)/1.1 'Montserrat', var(--text); letter-spacing: -.01em; }
.p-desc { position: relative; margin: 0 0 12px; padding: 0 30px; font-size: 13.5px; line-height: 1.45; color: #4b504d; }
.p-desc::before, .p-desc::after { content: ''; position: absolute; top: .7em; width: 20px; border-top: 1px solid #8d918e; }
.p-desc::before { left: 0; } .p-desc::after { right: 0; }
.p-specs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: auto 0 0; }
.p-specs div { padding: 4px 4px; }
.p-specs div + div { border-left: 1px solid #b9bbb6; }
.p-specs dt { font: 700 9.5px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.p-specs dd { margin: 3px 0 0; font: 400 12.5px/1.25 var(--text); color: #3b3f3d; white-space: nowrap; }
.p-cta { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid #cfd0cb; font: 700 13.5px/1 var(--text); }
.p-cta b { font: 400 18px/1 var(--display); }

/* ---------- Startseite: dreigeteilter Hero ---------- */
.tri-head { padding: 18px 0 14px; text-align: center; border-bottom: 1px solid #d6d4cd; }
.tri-head h1 { margin: 0; font: 500 12px/1.3 var(--text); letter-spacing: .38em; text-transform: uppercase; margin-right: -.38em; }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); min-height: calc(100svh - 72px - 48px); }
.tri-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(18px, 3vh, 34px) clamp(14px, 2vw, 28px) clamp(20px, 3vh, 32px);
  color: var(--ink); text-decoration: none; overflow: hidden; container-type: inline-size;
}
.tri-panel + .tri-panel { border-left: 1px solid #d6d4cd; }
.tri-panel .p-kick { font-size: 11.5px; }
.tri-panel .p-giant { margin-top: clamp(6px, 2vh, 20px); }
.tri-panel .p-machine { width: 96%; }
.tri-panel .p-title { font-size: clamp(22px, 2.2vw, 32px); margin-top: auto; padding-top: 12px; }
.tri-panel .p-desc { max-width: 34ch; font-size: 14.5px; }
.tri-go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: #fff; font: 700 14.5px/1 var(--text); border-radius: 2px;
  transition: background-color .2s ease;
}
.tri-panel:hover .tri-go { background: var(--brand); }
.tri-panel:hover .p-machine { transform: translateY(-6px) scale(1.03); }
.tri-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.tri-panel:hover::after { transform: scaleX(1); }

/* ---------- Produkt-Hero als Plakat ---------- */
.pp { padding: clamp(24px, 4vh, 44px) 0 clamp(28px, 4vh, 48px); container-type: inline-size; }
.pp-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp .crumbs { align-self: flex-start; }
.pp .p-kick { font-size: clamp(12px, 1.2vw, 15px); }
.pp .p-stage { max-width: 1100px; }
.pp .p-stage { --fs: min(calc(100cqw / (var(--chars, 6) * .5)), 300px); --stretch: 1.9; }
.pp .p-machine { width: min(76%, 860px); }
.pp h1.pp-title { margin: 18px 0 8px; font: 800 clamp(32px, 4.2vw, 58px)/1.05 'Montserrat', var(--text); letter-spacing: -.015em; text-transform: uppercase; }
.pp .p-desc { max-width: 70ch; font-size: clamp(15px, 1.2vw, 17px); padding: 0 56px; }
.pp .p-desc::before, .pp .p-desc::after { width: 44px; }
.pp-specs { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 1040px; margin: 18px 0 0; }
.pp-specs div { padding: 6px 10px; }
.pp-specs div + div { border-left: 1px solid #b9bbb6; }
.pp-specs dt { font: 700 11.5px/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.pp-specs dd { margin: 5px 0 0; font: 400 15.5px/1.25 var(--text); color: #3b3f3d; }
.pp .btn-row { justify-content: center; margin-top: 26px; }
.pp-price { margin-top: 18px; font: 400 clamp(26px, 2.6vw, 36px)/1 var(--display); }
.pp-price small { font: 500 12.5px/1 var(--mono); color: var(--muted); margin-left: 10px; }

@media (max-width: 1100px) { .posters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .tri { grid-template-columns: 1fr; min-height: 0; }
  .tri-panel + .tri-panel { border-left: 0; border-top: 1px solid #d6d4cd; }
  .tri-panel { padding-bottom: 28px; }
  .pp-specs { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .pp-specs div:nth-child(4) { border-left: 0; }
}
@media (max-width: 600px) {
  .posters { grid-template-columns: 1fr; }
  .pp .p-desc { padding: 0 26px; }
  .pp .p-desc::before, .pp .p-desc::after { width: 16px; }
  .pp-specs { grid-template-columns: repeat(2, 1fr); }
  .pp-specs div:nth-child(n) { border-left: 0; }
  .pp-specs div:nth-child(2n) { border-left: 1px solid #b9bbb6; }
}
@media (prefers-reduced-motion: reduce) { .p-machine, .tri-panel::after { transition: none; } }
.pp-parts { width: 100%; max-width: 900px; margin-top: 28px; }
.pp .hp-parts li { background: rgba(255, 255, 255, .7); }
.tri-panel .p-stage { --stretch: 2.6; }
@media (max-width: 900px) { .tri-panel .p-stage { --stretch: 2.05; } }
/* gleiche Bildhöhe in allen Kacheln, damit Titel und Daten auf einer Linie stehen */
.poster .p-machine { width: auto; height: 60cqw; max-width: 96%; object-fit: contain; }
.poster .p-desc { min-height: 3.2em; }
.tri-wrap, .poster, .pp { overflow: hidden; }
.tri-head h1 { padding: 0 12px; }
/* Produkt-Hero: Riesenwort immer mittig, auch wenn es breiter als die Bühne ist */
.pp .p-stage { grid-template-columns: minmax(0, 1fr); }
.pp .p-giant { justify-self: center; width: max-content; max-width: none; }