/* ==========================================================
   Produktseiten – gemeinsame Stile
   Ablegen unter:
   media/templates/site/pf_corporate/css/user.css

   Wird von pf_corporate automatisch geladen und bei
   Template-Updates nicht ueberschrieben. Die Beitraege
   enthalten nur Markup, kein eigenes CSS.
   ========================================================== */

.lp {
  /* --lp-accent        : Linien, Rahmen, Dekoration (HKS 53)
     --lp-accent-strong : Buttonflaechen und farbiger Kleintext
                          (abgedunkelt, damit weisse Schrift
                          den Kontrastwert 4,5:1 erreicht) */
  --lp-accent: #00a587;
  --lp-accent-strong: #00806a;
  --lp-accent-hover: #006654;
  --lp-line: #dcdcdc;
  --lp-muted: #666666;
  --lp-surface: #f5f6f7;

  line-height: 1.6;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp-hero,
.lp-section,
.lp-cta { margin: 56px 0; }

.lp > :first-child { margin-top: 0; }

/* ---------- Einstieg ---------- */

.lp-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lp-accent-strong);
}

.lp-claim {
  max-width: 46em;
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--lp-muted);
}

/* ---------- Bild links, Unterlagen rechts ---------- */

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}

.lp-figure { margin: 0; }

.lp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.lp-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--lp-muted);
}

/* Massskizze im Textfluss, gerahmt auf weissem Grund */
.lp-drawing {
  margin: 28px 0 0;
  padding: 16px;
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  background: #ffffff;
}

.lp-drawing img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.lp-drawing figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--lp-muted);
}

/* ---------- Unterlagenspalte ---------- */

.lp-group + .lp-group { margin-top: 28px; }

.lp-group-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--lp-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-col .lp-btn { width: 100%; }

/* ---------- Schaltflaechen ---------- */

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.lp-btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.lp-btn-primary {
  background: var(--lp-accent-strong);
  border-color: var(--lp-accent-strong);
  color: #ffffff;
}

.lp-btn-primary:hover,
.lp-btn-primary:focus {
  background: var(--lp-accent-hover);
  border-color: var(--lp-accent-hover);
  color: #ffffff;
  text-decoration: none;
}

/* Sekundaer: laeuft beim Hover komplett in die Akzentfarbe voll */
.lp-btn-secondary {
  background: #ffffff;
  border-color: var(--lp-line);
  color: #333333;
}

.lp-btn-secondary:hover,
.lp-btn-secondary:focus {
  background: var(--lp-accent-strong);
  border-color: var(--lp-accent-strong);
  color: #ffffff;
  text-decoration: none;
}

.lp-btn-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  font-size: 14px;
  text-align: left;
}

/* Alle Symbole sind Inline-SVG und nehmen ueber currentColor
   die Textfarbe an - sie faerben sich beim Hover automatisch mit. */
.lp-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- Abschnittsueberschriften ---------- */

.lp-section-title,
.lp-cta-title {
  margin: 0 0 28px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--lp-accent);
  font-size: 24px;
}

/* ---------- Karten ---------- */

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Kompaktes Raster fuer Merkmale ohne Beschreibungstext */
.lp-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.lp-card {
  padding: 24px;
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  background: var(--lp-surface);
}

.lp-card-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
}

.lp-card p {
  margin: 0;
  color: var(--lp-muted);
}

/* Merkmalskarte: eine Zeile mit Haken, ohne Beschreibungstext */
.lp-card-compact {
  display: flex;
  padding: 16px 18px;
}

.lp-card-compact p {
  position: relative;
  padding-left: 26px;
  font-weight: 500;
  color: #333333;
}

.lp-card-compact p::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 2px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--lp-accent-strong);
  border-bottom: 2px solid var(--lp-accent-strong);
  transform: rotate(-45deg);
}

/* ---------- Tabellen ---------- */

.lp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lp-specs,
.lp-order {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.lp-specs th,
.lp-specs td,
.lp-order th,
.lp-order td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lp-line);
  text-align: left;
  vertical-align: top;
}

.lp-specs th[scope="row"] {
  width: 42%;
  font-weight: 500;
  color: var(--lp-muted);
}

.lp-specs-group th,
.lp-order thead th {
  padding-top: 24px;
  border-bottom: 2px solid var(--lp-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lp-order thead th { padding-top: 10px; }

.lp-specs tbody tr:first-child th { padding-top: 0; }

.lp-order tbody td { font-variant-numeric: tabular-nums; }

.lp-order tbody td:first-child { font-weight: 500; }

.lp-order tbody td:last-child { white-space: nowrap; }

.lp-order td a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp-order td .lp-icon {
  width: 16px;
  height: 16px;
}

.lp-caption,
.lp-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--lp-muted);
}

/* ---------- Abschluss ---------- */

.lp-cta {
  padding: 40px;
  border-radius: 3px;
  background: var(--lp-surface);
}

.lp-cta > p:not(.lp-actions) {
  max-width: 52em;
  margin: 0;
  color: var(--lp-muted);
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 767px) {
  .lp-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .lp-claim { font-size: 17px; }
  .lp-section-title,
  .lp-cta-title { font-size: 21px; }
  .lp-cta { padding: 24px 20px; }
  .lp-actions .lp-btn { width: 100%; }
  .lp-drawing { padding: 12px; }

  /* Tabellen gestapelt statt nebeneinander - vermeidet
     horizontalen Ueberhang, den das Template abschneiden koennte */
  .lp-specs,
  .lp-specs tbody,
  .lp-specs tr,
  .lp-specs th,
  .lp-specs td,
  .lp-order,
  .lp-order tbody,
  .lp-order tr,
  .lp-order td {
    display: block;
    width: auto;
  }

  .lp-order thead { display: none; }

  .lp-specs th[scope="row"] {
    width: auto;
    padding: 14px 0 0;
    border-bottom: 0;
    font-size: 13px;
  }

  .lp-specs td {
    padding: 2px 0 12px;
    overflow-wrap: anywhere;
  }

  .lp-specs-group th { padding: 28px 0 8px; }

  .lp-specs tbody tr:first-child th { padding-top: 0; }

  .lp-order tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--lp-line);
  }

  .lp-order tbody td {
    padding: 2px 0;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lp-order td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 400;
    color: var(--lp-muted);
  }
}

/* Sprachauswahl: Einträge im Dropdown lesbar (Topbar-Linkfarbe nicht übernehmen) */
.pf-topbar .pf-lang .dropdown-item {
    color: #000;
}
.pf-topbar .pf-lang .dropdown-item:hover,
.pf-topbar .pf-lang .dropdown-item:focus,
.pf-topbar .pf-lang .dropdown-item.active,
.pf-topbar .pf-lang .dropdown-item[aria-current] {
    color: #fff;
    background-color: #00a587;
}

/* Footer: Social-Link mit Symbol */
.pf-footer .pf-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.pf-footer .pf-social .fa-youtube {
    font-size: 20px;
}
.pf-footer .pf-social a:hover,
.pf-footer .pf-social a:focus {
    text-decoration: underline;
}

/* Fließtext-Beiträge: mehr Luft vor Überschriften und um Listen */
.com-content-article__body > h2 {
    margin-top: 2.75rem;
    margin-bottom: 1rem;
}
.com-content-article__body > h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}
.com-content-article__body > :first-child {
    margin-top: 0;
}
.com-content-article__body > p,
.com-content-article__body > ul,
.com-content-article__body > ol {
    margin-bottom: 1.1rem;
}
.com-content-article__body > ul,
.com-content-article__body > ol {
    margin-top: .25rem;
}
.com-content-article__body > img,
.com-content-article__body > p > img {
    margin-bottom: 1.5rem;
}