/* ==========================================================================
   PlasterOne® Produktpalette — putzmaschinen / plastering-machines
   Alles unter main.pm, Tokens kommen aus style.css.
   ========================================================================== */

main.pm {
  --kopf-h: calc(var(--ann-h, 0px) + var(--hdr-h, 84px));
  --leiste-h: 55px;
  display: block; background: var(--white); color: var(--ink);
}

/* ---------- Sprungleiste ---------- */
main.pm .pmleiste {
  position: sticky; top: var(--kopf-h); z-index: 58;
  display: flex; align-items: center; gap: 22px;
  padding: 0 clamp(16px, 4vw, 48px); height: var(--leiste-h);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
main.pm .pmleiste__marke { font-family: var(--display); font-weight: 800; font-size: 1.04rem; white-space: nowrap; }
main.pm .pmleiste__links { display: flex; gap: 22px; margin-left: auto; }
main.pm .pmleiste__links a {
  font-size: 14px; color: var(--muted); white-space: nowrap;
  transition: color 0.2s var(--ease);
}
@media (hover: hover) { main.pm .pmleiste__links a:hover { color: var(--ink); } }
@media (max-width: 1100px) { main.pm .pmleiste__links { display: none; } main.pm .pmleiste__marke { margin-right: auto; } }

/* ---------- Knöpfe ---------- */
main.pm .pmknopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 0.16s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
main.pm .pmknopf--voll { background: var(--petrol); color: #fff; }
main.pm .pmknopf--rand { background: transparent; color: var(--ink); border-color: var(--line); }
@media (hover: hover) {
  main.pm .pmknopf--voll:hover { background: var(--petrol-deep); }
  main.pm .pmknopf--rand:hover { border-color: var(--ink); }
}
main.pm .pmknopf:active { transform: scale(0.97); }
main.pm .pmaktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Held ---------- */
main.pm .pmheld {
  padding: clamp(68px, 10vw, 150px) clamp(16px, 4vw, 48px) clamp(56px, 7vw, 100px);
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(47, 207, 194, 0.16) 0%, transparent 65%), var(--paper);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
main.pm .pmheld__in { max-width: 920px; margin: 0 auto; }
main.pm .pmheld__marke {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--petrol); margin-bottom: 22px;
}
main.pm .pmheld h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.98; letter-spacing: -0.035em;
}
main.pm .pmheld h1 em { font-style: normal; display: block; color: var(--petrol); }
main.pm .pmheld__lede {
  margin: 24px auto 0; max-width: 58ch; font-size: 1.1rem; line-height: 1.6; color: var(--muted);
  text-wrap: pretty;
}
main.pm .pmheld__zahlen {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 40px;
}
main.pm .pmzahl { padding: 0 34px; border-right: 1px solid var(--line); }
main.pm .pmzahl:last-child { border-right: 0; }
main.pm .pmzahl b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.02em;
}
main.pm .pmzahl span {
  display: block; margin-top: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
main.pm .pmheld .pmaktion { justify-content: center; margin-top: 38px; }

/* ---------- Kategorie ---------- */
main.pm .pmkat { padding: clamp(60px, 8vw, 120px) clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); }
main.pm .pmkat:nth-of-type(even) { background: var(--paper); }
main.pm .pmkat__in { max-width: 1280px; margin: 0 auto; }
main.pm .pmkat__kopf { max-width: 60ch; }
main.pm .pmkat__kopf h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.03em;
}
main.pm .pmkat__kopf p { margin-top: 14px; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }

/* ---------- Hauptmaschine ---------- */
main.pm .pmhaupt {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
@media (max-width: 860px) { main.pm .pmhaupt { grid-template-columns: 1fr; } }
main.pm .pmhaupt__bild {
  border-radius: var(--radius); overflow: hidden; background: var(--white);
  display: grid; place-items: center; padding: 20px;
}
main.pm .pmkat:nth-of-type(even) .pmhaupt__bild { background: var(--white); }
main.pm .pmhaupt__bild img { display: block; width: 100%; height: auto; max-width: 520px; }
main.pm .pmhaupt__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
main.pm .pmhaupt__text h3 {
  margin-top: 12px; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.06;
}
main.pm .pmhaupt__claim { margin-top: 10px; font-size: 1.14rem; color: var(--petrol); font-weight: 600; }
main.pm .pmhaupt__daten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line);
}
main.pm .pmhaupt__daten b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.22rem; letter-spacing: -0.015em; line-height: 1.2;
}
main.pm .pmhaupt__daten span {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Varianten ---------- */
main.pm .pmvar__titel {
  margin-top: clamp(40px, 5vw, 70px); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
main.pm .pmvarliste { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
main.pm .pmvar {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: 18px 36px; padding: 24px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { main.pm .pmvar { grid-template-columns: 1fr; gap: 12px; } }
main.pm .pmvar__kopf b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.14rem; }
main.pm .pmvar__kopf span { display: block; margin-top: 5px; color: var(--petrol); font-size: 14.5px; }
main.pm .pmvar__dl { display: grid; gap: 8px; }
main.pm .pmvar__dl > div { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); gap: 16px; font-size: 14.5px; }
main.pm .pmvar__dl dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
main.pm .pmvar__dl dd { line-height: 1.5; }

/* ---------- Abschnitte ---------- */
main.pm .pmsec { padding: clamp(60px, 8vw, 112px) clamp(16px, 4vw, 48px); }
main.pm .pmsec--grau { background: var(--paper); }
main.pm .pmsec__in { max-width: 1280px; margin: 0 auto; }
main.pm .pmsec__in--schmal { max-width: 760px; }
main.pm .pmsec h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.03em;
}
main.pm .pmsec__lede { margin-top: 14px; max-width: 62ch; color: var(--muted); font-size: 1.02rem; line-height: 1.62; }

/* ---------- Vergleichstabelle ---------- */
main.pm .pmtab { margin-top: 38px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
main.pm table.pmvergleich { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14.5px; }
main.pm table.pmvergleich thead th {
  text-align: left; padding: 0 18px 12px 0; vertical-align: bottom;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  border-bottom: 1px solid var(--ink);
}
main.pm table.pmvergleich td { padding: 15px 18px 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
main.pm table.pmvergleich tbody tr { transition: background-color 0.15s var(--ease); }
@media (hover: hover) { main.pm table.pmvergleich tbody tr:hover { background: rgba(47, 207, 194, 0.07); } }
main.pm .pmname { font-weight: 700; white-space: nowrap; }

/* ---------- Warum ---------- */
main.pm .pmwarum {
  margin-top: 40px; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 760px) { main.pm .pmwarum { grid-template-columns: repeat(2, 1fr); } }
main.pm .pmwarum__p { background: var(--white); padding: 30px 28px 32px; }
main.pm .pmwarum__p h3 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
main.pm .pmwarum__p p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Anfrage ---------- */
main.pm .pmsec--dunkel { background: var(--petrol-ink); color: #fff; isolation: isolate; }
main.pm .pmsec--dunkel h2 { color: #fff; }
main.pm .pmsec--dunkel .pmsec__lede { color: rgba(255, 255, 255, 0.76); }
main.pm .pmsec--dunkel .xform { margin-top: 34px; }
main.pm .pmsec--dunkel .xf__field span { color: rgba(255, 255, 255, 0.62); }
main.pm .pmsec--dunkel .xf__field input,
main.pm .pmsec--dunkel .xf__field select,
main.pm .pmsec--dunkel .xf__field textarea {
  background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: #fff;
}
main.pm .pmsec--dunkel .xf__field input::placeholder,
main.pm .pmsec--dunkel .xf__field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
main.pm .pmsec--dunkel .xf__hint { color: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  main.pm * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}