/* ============================================================
   P/W Consulting GmbH — Unterseiten
   Seitenkopf, Leistungs-Kachelraster, Icon-System, Ablauf,
   Fließtext der Leistungsseiten, "weitere Leistungen",
   Produktfinder.
   ============================================================ */

/* --- Seitenkopf (dunkel, kompakt, ohne Foto) ---------------- */
.pw-seitenkopf {
  max-width: 62ch;
  padding-block: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 64px);
}
.pw-seitenkopf h1 {
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3rem);
  color: var(--pw-white);
}
.pw-seitenkopf__intro {
  margin-top: 18px;
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  color: var(--pw-on-dark-1);
}
.pw-seitenkopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* --- Brotkrume ---------------------------------------------- */
.pw-brotkrume { margin-bottom: 22px; }
.pw-brotkrume ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .8125rem;
  color: var(--pw-on-dark-3);
}
.pw-brotkrume li { display: flex; align-items: center; gap: 10px; }
.pw-brotkrume li + li::before {
  content: '/';
  color: rgba(0, 235, 166, .4);
}
.pw-brotkrume a {
  border-bottom: 1px solid transparent;
  transition: color var(--pw-dauer) var(--pw-kurve),
              border-color var(--pw-dauer) var(--pw-kurve);
}
.pw-brotkrume a:hover { color: var(--pw-mint); border-bottom-color: currentColor; }
.pw-brotkrume [aria-current='page'] { color: var(--pw-on-dark-1); }

/* --- Icon-Kacheln ------------------------------------------- */
.pw-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--pw-mint-tint);
  border-radius: var(--pw-radius-kachel);
}
.pw-icon svg { width: 30px; height: 30px; }
.pw-icon__strich {
  stroke: var(--pw-petrol);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.pw-icon__akzent { fill: var(--pw-mint); }

/* --- Leistungs-Kachelraster --------------------------------- */
.pw-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pw-kachel {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-border-strong);
  border-radius: var(--pw-radius-kachel);
  transition: border-color var(--pw-dauer) var(--pw-kurve),
              transform var(--pw-dauer) var(--pw-kurve),
              box-shadow var(--pw-dauer) var(--pw-kurve);
}
.pw-kachel:hover {
  border-top-color: var(--pw-mint-ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(1, 44, 41, .55);
}
.pw-kachel:hover .pw-icon { background: var(--pw-mint); }

.pw-kachel__kicker {
  margin-top: 18px;
  font-family: var(--pw-font-display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pw-mint-ink);
}
.pw-kachel__titel {
  margin-top: 8px;
  font-size: 1.25rem;
  color: var(--pw-ink);
}
.pw-kachel__zusatz {
  margin-top: 4px;
  font-size: .8125rem;
  color: var(--pw-muted);
}
.pw-kachel__text {
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--pw-ink-soft);
}
.pw-kachel__go {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-mint-ink);
}

/* --- Ablauf in Schritten ------------------------------------ */
.pw-ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  counter-reset: none;
}
.pw-ablauf__schritt {
  padding-top: 18px;
  border-top: var(--pw-linie-stark) solid var(--pw-mint-ink);
}
.pw-ablauf__nr {
  font-family: var(--pw-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--pw-muted);
}
.pw-ablauf__titel {
  margin-top: 8px;
  font-size: 1.0625rem;
  color: var(--pw-ink);
}
.pw-ablauf__text {
  margin-top: 8px;
  font-size: .9375rem;
  color: var(--pw-ink-soft);
}

/* --- Fließtext der Leistungsseiten -------------------------- */
.pw-artikel {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--pw-ink-soft);
}
.pw-artikel > * + * { margin-top: 20px; }
.pw-artikel { overflow-wrap: break-word; }
.pw-artikel strong { color: var(--pw-ink); font-weight: 700; }

.pw-artikel > h2 {
  margin-top: 34px;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  color: var(--pw-ink);
}
.pw-artikel > h3 {
  margin-top: 26px;
  font-size: 1.0625rem;
  color: var(--pw-ink);
}

/* Zwischenstands-Hinweis auf noch nicht final belegten Seiten */
.pw-artikel__vorlaeufig {
  padding: clamp(16px, 2vw, 22px);
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
  border-radius: var(--pw-radius-kachel);
  font-size: .9375rem;
  line-height: 1.6;
  color: #6b4e07;
}
.pw-artikel__vorlaeufig a { border-bottom: 1px solid currentColor; font-weight: 600; }

/* Hervorgehobener Absatz — im Quelltext die fett eingeleiteten
   Kernaussagen ("Wir prüfen auch selbst." usw.). */
.pw-artikel__kern {
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  border-radius: var(--pw-radius-kachel);
  color: var(--pw-ink-soft);
}

/* Sachlicher Zusatz (Umfang, Normen, Abgrenzung) */
.pw-artikel__umfang {
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-kachel);
  font-size: 1rem;
}
.pw-artikel__umfang h3 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--pw-ink);
}

/* Zeitlich befristeter Aktualitätshinweis */
.pw-artikel__aktuell {
  padding: clamp(16px, 2vw, 20px);
  background: var(--pw-surface-2);
  border-left: var(--pw-linie-stark) solid var(--pw-muted);
  border-radius: var(--pw-radius-kachel);
  font-size: .9375rem;
  line-height: 1.6;
}

/* --- Abschluss-CTA einer Leistungsseite --------------------- */
.pw-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--pw-petrol);
  border-left: var(--pw-linie-stark) solid var(--pw-mint);
  border-radius: var(--pw-radius-kachel);
  color: var(--pw-on-dark-1);
}
.pw-cta h2 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  color: var(--pw-white);
}
.pw-cta p { margin-top: 8px; font-size: .9375rem; }
.pw-cta__aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Weitere Leistungen ------------------------------------- */
.pw-weitere {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pw-weitere__eintrag {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-kachel);
  transition: border-color var(--pw-dauer) var(--pw-kurve),
              background-color var(--pw-dauer) var(--pw-kurve);
}
.pw-weitere__eintrag:hover { border-color: var(--pw-mint-ink); background: var(--pw-mint-tint); }
.pw-weitere__eintrag .pw-icon { width: 38px; height: 38px; flex: 0 0 auto; }
.pw-weitere__eintrag .pw-icon svg { width: 24px; height: 24px; }
.pw-weitere__name {
  flex: 1 1 auto;
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pw-ink);
}
.pw-weitere__pfeil { color: var(--pw-mint-ink); }
.pw-weitere__zurueck { margin-top: 26px; }

/* --- Produktfinder ------------------------------------------ */
.pw-produktfinder__box {
  max-width: 760px;
  padding: clamp(22px, 2.8vw, 34px);
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
}

.pf_question {
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  padding: 0;
  border: 0;
}
.pf_question:last-of-type { margin-bottom: 0; }
.pf_question_title {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  font-family: var(--pw-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pw-ink);
}
.pf_question_note {
  font-weight: 400;
  font-size: .8125rem;
  color: var(--pw-muted);
}
.pf_question_enter { animation: pw-einblenden 260ms var(--pw-kurve); }
@keyframes pw-einblenden {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.pf_options { display: grid; gap: 8px; }
.pf_option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: .9375rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--pw-dauer) var(--pw-kurve),
              background-color var(--pw-dauer) var(--pw-kurve);
}
.pf_option:hover { border-color: var(--pw-petrol-500); }
.pf_option input { margin-top: 2px; accent-color: var(--pw-petrol); }
.pf_option:has(input:checked) {
  border-color: var(--pw-petrol);
  background: var(--pw-mint-tint);
}

.pf_result { display: none; }
.pf_result.is_active {
  display: block;
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(22px, 2.6vw, 28px);
  border-top: 1px solid var(--pw-border);
}
.pf_result_lead {
  font-family: var(--pw-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pw-ink);
}
.pf_result_list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.pf_result_list a {
  display: block;
  padding: 12px 14px;
  background: var(--pw-surface);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  border-radius: var(--pw-radius-chip);
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pw-petrol);
  transition: background-color var(--pw-dauer) var(--pw-kurve);
}
.pf_result_list a:hover { background: var(--pw-mint-tint); }

.pf_result_overflow,
.pf_hint {
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pw-ink-mid);
}
.pf_hint a { border-bottom: 1px solid currentColor; color: var(--pw-mint-ink); }

.pf_sondertext {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
  border-radius: var(--pw-radius-chip);
  font-size: .9375rem;
  line-height: 1.6;
  color: #6b4e07;
}
.pf_result_cta { margin-top: 22px; }

/* ============================================================
   Preistabelle und Vertrauens-Chips (Für Eigentümer)
   ============================================================ */
.pw-angebot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.pw-preise {
  width: 100%;
  border-collapse: collapse;
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
  overflow: hidden;
}
.pw-preise caption {
  padding: 16px clamp(16px, 2vw, 20px) 0;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--pw-ink-mid);
}
.pw-preise th,
.pw-preise td {
  padding: 13px clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--pw-border);
  font-size: .9375rem;
  text-align: left;
}
.pw-preise thead th { border-top: 0; }
.pw-preise tbody tr:first-child th,
.pw-preise tbody tr:first-child td { border-top: 0; }
.pw-preise th { font-weight: 400; color: var(--pw-ink-soft); }
.pw-preise td {
  font-family: var(--pw-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  color: var(--pw-petrol);
}
/* Zuschläge optisch von den Grundpreisen absetzen */
.pw-preise__zuschlag th,
.pw-preise__zuschlag td { background: var(--pw-surface); }
.pw-preise__zuschlag td { font-size: .9375rem; color: var(--pw-ink-soft); }
.pw-preise__erste-zuschlagszeile th,
.pw-preise__erste-zuschlagszeile td { border-top: 1px solid var(--pw-border-strong); }

.pw-preise__fussnote {
  margin-top: 12px;
  font-size: .8125rem;
  color: var(--pw-muted);
}

.pw-chips {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
.pw-chip {
  padding: 13px 16px;
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  border-radius: var(--pw-radius-chip);
}
.pw-chip__wert {
  display: block;
  font-family: var(--pw-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pw-petrol);
}
.pw-chip__text {
  display: block;
  margin-top: 2px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--pw-ink-soft);
}

.pw-angebot__aktion { margin-top: clamp(20px, 2.6vw, 28px); }
.pw-angebot__nebenlink {
  margin-top: 14px;
  font-size: .875rem;
  color: var(--pw-ink-mid);
}
.pw-angebot__nebenlink a {
  border-bottom: 1px solid var(--pw-mint-ink);
  color: var(--pw-mint-ink);
  font-weight: 600;
}
.pw-angebot__nebenlink a:hover { color: var(--pw-petrol); border-bottom-color: var(--pw-petrol); }

/* --- Referenzen (noch keine Kundenfreigaben) ---------------- */
/* Bewusst keine sichtbare Platzhalterfläche — siehe LIESMICH.md. */

/* --- Breakpoints -------------------------------------------- */
@media (max-width: 1000px) {
  .pw-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .pw-angebot { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pw-kacheln { grid-template-columns: 1fr; }
  .pw-angebot__aktion .pw-btn { width: 100%; }
  .pw-ablauf { grid-template-columns: 1fr; gap: 22px; }
  .pw-weitere { grid-template-columns: 1fr; }
  .pw-seitenkopf__aktionen .pw-btn { width: 100%; }
  .pw-cta { flex-direction: column; align-items: flex-start; }
  .pw-cta__aktionen { width: 100%; }
  .pw-cta__aktionen .pw-btn { width: 100%; }
}