/* ===========================================================================
 * Hauptstadt-Entsorger — shared UI kit
 *
 * Design tokens plus the primitives built on them: section rhythm, container,
 * heading block, buttons, links and the scroll-reveal utility.
 *
 * Loaded by every template that uses the `hp-` design system (currently the
 * front page and the Standorte page) and declared as a dependency of
 * home.css / standorte.css, which hold the components specific to those pages.
 * Keeping the shared half in one file stops the two pages drifting apart.
 *
 * None of these class names exist in main.css, so this cannot collide with the
 * older templates still styled from there.
 * ========================================================================= */

/* ---------------------------------------------------------------- Tokens
 * Safe on :root because this file is only enqueued on pages that use the kit. */
:root {
  --hp-green: #276C03;
  --hp-green-deep: #1F5602;
  --hp-green-dark: #16300A;
  --hp-green-tint: #F1F6EC;
  --hp-orange: #FFA500;
  --hp-orange-dark: #E69500;
  --hp-ink: #16231B;
  --hp-body: #59635C;
  --hp-line: #E6E9E1;
  --hp-surface: #FFFFFF;
  --hp-tint: #FAF6F0;

  --hp-radius: 18px;
  --hp-radius-sm: 12px;
  --hp-shadow: 0 6px 24px rgba(22, 48, 10, 0.06);
  --hp-shadow-lg: 0 18px 48px rgba(22, 48, 10, 0.12);

  --hp-gap: clamp(20px, 2.4vw, 32px);
  --hp-pad: clamp(56px, 6.4vw, 104px);
}

/* ----------------------------------------------------- Layout primitives */
.hp-section {
  position: relative;
  padding: var(--hp-pad) 0;
  background-color: var(--hp-surface);
}

.hp-section--tint { background-color: var(--hp-tint); }
.hp-section--dark { background-color: var(--hp-green-dark); }

/* Two sections that share a surface colour double their padding where they
   meet — 104px + 104px, twice the rhythm used anywhere else on the page, with
   no change of background to justify the gap. Collapse the second one's top
   padding so the seam reads as a single continuous surface.
 *
 * [class="hp-section"] is an exact match on the attribute, so it fires only on
 * a genuinely plain section. Every component section (hp-cta, hp-promo,
 * hp-quote, hp-svc-cta, hp-city-contact, hp-video--feature) brings its own
 * dark background and keeps its padding. Erring toward an exact match is
 * deliberate: a miss costs some spacing, a false positive would run two
 * different backgrounds together. */
[class="hp-section"] + [class="hp-section"],
.hp-section--tint + .hp-section--tint,
.hp-section--dark + .hp-section--dark {
  padding-top: 0;
}

.hp-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heading block ---------------------------------------------------------- */
.hp-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 60px);
}

.hp-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* For a heading block followed by its own content (pillars, list, actions)
   rather than by a grid, so it contributes no bottom gap of its own. */
.hp-head--flush { margin-bottom: 0; }

.hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-green);
}

.hp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hp-orange);
}

.hp-head--center .hp-eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hp-orange);
}

.hp-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(27px, 3.1vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
}

.hp-title--sm { font-size: clamp(23px, 2.4vw, 31px); }

.hp-lede {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--hp-body);
}

/* Light-on-dark variant */
.hp-head--light .hp-title,
.hp-section--dark .hp-title { color: #fff; }
.hp-head--light .hp-lede,
.hp-section--dark .hp-lede { color: rgba(255, 255, 255, 0.76); }
.hp-head--light .hp-eyebrow,
.hp-section--dark .hp-eyebrow { color: #A8CE93; }

/* ------------------------------------------------------ Buttons and links */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1.5px solid transparent;
  border-radius: 36px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-btn .btn-arrow { transition: transform 0.25s ease; }
.hp-btn:hover .btn-arrow { transform: translateX(4px); }

.hp-btn--primary {
  background-color: var(--hp-orange);
  border-color: var(--hp-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.26);
}

.hp-btn--primary:hover {
  background-color: var(--hp-orange-dark);
  border-color: var(--hp-orange-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 165, 0, 0.34);
}

.hp-btn--ghost {
  background-color: transparent;
  border-color: var(--hp-green);
  color: var(--hp-green);
}

.hp-btn--ghost:hover {
  background-color: var(--hp-green);
  color: #fff;
  transform: translateY(-2px);
}

.hp-btn--light {
  background-color: #fff;
  border-color: #fff;
  color: var(--hp-green-deep);
}

.hp-btn--light:hover {
  background-color: var(--hp-orange);
  border-color: var(--hp-orange);
  color: #fff;
  transform: translateY(-2px);
}

/* Inline text link with arrow */
.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--hp-green);
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}

.hp-link:hover { color: var(--hp-orange); gap: 11px; }

.hp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.hp-actions--center { justify-content: center; }

/* --------------------------------------------------- Scroll reveal: REMOVED
 *
 * There used to be a `.hp-anim .hp-reveal { opacity: 0 }` start state here,
 * cleared by assets/js/ui.js as each section scrolled into view, with an inline
 * 2.5s timer in every template as a safety net.
 *
 * The safety net was doing all the work. ui.js is not reliably present, and
 * when it is missing NOTHING clears the start state until that timer fires — so
 * every section below the fold stayed blank for two and a half seconds and the
 * page felt broken while scrolling. A caching plugin that defers JS produces
 * the same result even when ui.js is there.
 *
 * An effect that hides content until a script says otherwise is only ever as
 * reliable as that script. The markup still carries .hp-reveal and data-delay
 * so the animation can be reinstated deliberately, but nothing hides content
 * any more: sections paint with the page.
 */

@media (prefers-reduced-motion: reduce) {
  [class^="hp-"],
  [class*=" hp-"],
  [class^="hp-"]::before,
  [class*=" hp-"]::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================ Hero banner ===
 * Full-bleed photograph with a solid green card anchored to its bottom-left,
 * carrying the title, kicker, breadcrumb and calls to action.
 *
 * The card is why this works: the text sits on flat colour, so it needs no
 * darkening overlay and the photograph stays completely clean. Only a gentle
 * gradient at the very bottom of the image grounds the card against it.
 *
 * The card's bottom corners are square so it reads as continuous with the
 * trust bar directly beneath it.
 * ========================================================================= */
.hp-hero {
  position: relative;
  background-color: var(--hp-green-dark);
}

.hp-hero__figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hp-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Light touch only — enough to seat the card, not enough to dull the photo. */
.hp-hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 26, 5, 0.30) 0%,
    rgba(10, 26, 5, 0.05) 30%,
    rgba(10, 26, 5, 0.42) 100%
  );
}

.hp-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 40vw, 540px);
  padding-top: clamp(70px, 9vw, 130px);
}

.hp-hero__card {
  width: 100%;
  max-width: 720px;
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3.4vw, 48px) clamp(24px, 2.8vw, 36px);
  border-radius: var(--hp-radius) var(--hp-radius) 0 0;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(58, 122, 12, 0.6), transparent 62%),
    linear-gradient(145deg, #1E5602 0%, #14300A 100%);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
}

/* A <div>, not an <h1>: these templates take their <h1> from page content. */
.hp-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.hp-hero__title span { color: var(--hp-orange); }

.hp-hero__crumbs {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.hp-hero__crumbs a {
  color: var(--hp-orange);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hp-hero__crumbs a:hover { color: #fff; }
.hp-hero__crumbs .breadcrumb_last { color: rgba(255, 255, 255, 0.82); }

.hp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Primary action as an underlined link rather than a filled pill. */
.hp-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
  text-decoration: none;
}

.hp-hero__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hp-orange);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hp-hero__cta:hover { color: var(--hp-orange); }
.hp-hero__cta:hover::after { transform: scaleX(1.06); }
.hp-hero__cta svg { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hp-hero__cta:hover svg { transform: translateX(5px); }

.hp-hero__divider {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.22);
}

.hp-hero__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease;
}

.hp-hero__tel svg { color: var(--hp-orange); flex-shrink: 0; }
.hp-hero__tel:hover { color: var(--hp-orange); }

@media (max-width: 900px) {
  .hp-hero__inner {
    min-height: clamp(300px, 56vw, 420px);
    padding-top: clamp(56px, 22vw, 110px);
  }
  .hp-hero__card { max-width: none; }
}

@media (max-width: 600px) {
  .hp-hero__inner { padding-inline: 0; }

  .hp-hero__card {
    border-radius: 0;
    padding-inline: 24px;
  }

  .hp-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hp-hero__divider { width: 34px; height: 1px; }
  .hp-hero__tel { font-size: 20px; }
}

/* ============================================================== Trust bar ===
 * Slim strip directly under the hero. Carries the guarantees (and the Google
 * rating) that used to sit as cards inside the banner — the banner reads
 * cleaner without them and they are more scannable in a row. */
/* Warm sand rather than green: the card above it is already deep green and the
   page below is cream, so a third green band flattened the whole top of the
   page. This is drawn from the orange family without being orange itself. */
.hp-trustbar {
  background-color: #FBEFDC;
  border-bottom: 1px solid rgba(255, 165, 0, 0.28);
  padding: 15px 0;
}

.hp-trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hp-trustbar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #6B5A3E;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.hp-trustbar__item:hover { color: var(--hp-orange-dark); }

.hp-trustbar__item + .hp-trustbar__item {
  border-left: 1px solid rgba(255, 165, 0, 0.3);
}

.hp-trustbar__item > svg { flex-shrink: 0; color: var(--hp-orange-dark); }

.hp-trustbar__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--hp-orange);
  line-height: 0;
  flex-shrink: 0;
}

.hp-trustbar__item strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #3D3323;
}

@media (max-width: 900px) {
  .hp-trustbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-trustbar__item + .hp-trustbar__item { border-left: none; }
  .hp-trustbar__item:nth-child(2n) { border-left: 1px solid rgba(255, 165, 0, 0.3); }
}

@media (max-width: 560px) {
  .hp-trustbar__grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hp-trustbar__item,
  .hp-trustbar__item:nth-child(2n) {
    border-left: none;
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------- Editor content ---
 * Output of the [page_section] shortcodes, used by the City and Service
 * Details templates. The editor supplies raw <h2>/<p>/<ul>, so this is styled
 * by element rather than by class. */
.hp-rte > :first-child { margin-top: 0; }
.hp-rte > :last-child { margin-bottom: 0; }

.hp-rte h1,
.hp-rte h2,
.hp-rte h3 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.25;
  color: var(--hp-ink);
}

/* The page's real <h1> comes through this shortcode on service pages. */
.hp-rte h1 { font-size: clamp(27px, 3.1vw, 38px); }
.hp-rte h3 { font-size: clamp(19px, 1.9vw, 22px); }

.hp-rte p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hp-body);
}

.hp-rte a { color: var(--hp-green); }

/* A heading that follows a paragraph or list needs air above it; without this
   the sections ran together as one undifferentiated block of text. */
.hp-rte :is(p, ul, ol) + :is(h2, h3) { margin-top: 30px; }

.hp-rte ul,
.hp-rte ol {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.hp-rte li {
  position: relative;
  padding-left: 32px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--hp-body);
}

.hp-rte li strong { color: var(--hp-ink); font-weight: 600; }

.hp-rte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--hp-green-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* On a dark band the ink/body colours and the green check disappear. */
.hp-rte--light h1,
.hp-rte--light h2,
.hp-rte--light h3 { color: #fff; }
.hp-rte--light p,
.hp-rte--light li { color: rgba(255, 255, 255, 0.8); }
.hp-rte--light li strong { color: #fff; }

.hp-rte--light li::before {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Legacy .page-section guard --------------------------------------------
 * [page_section] does not print bare HTML: it wraps its output in
 * <div class="page-section page-section-N">. main.css still styles those
 * wrappers for the previous design — `display: grid`, white list text, and
 * (until now) a white section-2 heading, all written when those sections sat
 * on dark bands. Inside .hp-rte the surface is always light, so the wrapper
 * has to be neutralised or the text disappears into the background.
 *
 * Specificity is matched on purpose — two classes plus one element, the same
 * weight as the main.css rules — so these win on load order (ui.css is
 * enqueued after main.css) instead of escalating into an !important war.
 * !important appears only where main.css already uses it on the same
 * property. */
.hp-rte .page-section {
  display: block;
  gap: 0;
}

.hp-rte .page-section h1,
.hp-rte .page-section h2,
.hp-rte .page-section h3 { color: var(--hp-ink); }

.hp-rte .page-section p { color: var(--hp-body); }

.hp-rte .page-section li {
  display: block;
  gap: 0;
  margin-bottom: 0;
  padding-left: 32px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--hp-body) !important;
}

/* main.css also gives sections 1 and 3 their own bare check mark, which left
   those two lists with a different bullet from every other list on the page. */
.hp-rte .page-section li::before {
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--hp-green-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: auto;
  background-position: center;
}

.hp-rte--light .page-section li::before {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* And the same for the dark bands, where the wrapper must not undo --light. */
.hp-rte--light .page-section h1,
.hp-rte--light .page-section h2,
.hp-rte--light .page-section h3 { color: #fff; }

.hp-rte--light .page-section p,
.hp-rte--light .page-section li { color: rgba(255, 255, 255, 0.8) !important; }

/* ------------------------------------------------------- Location tiles ---
 * Shared by the Standorte overview and the "nearby areas" block on city pages.
 * auto-fill keeps the tiles an even width at every viewport without a stack of
 * breakpoints, and never strands one on its own row. 270px is sized off the
 * longest Berlin district names. */
.hp-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.hp-loc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--hp-radius-sm);
  background-color: #fff;
  border: 1px solid var(--hp-line);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Green wash that slides in from the left on hover */
.hp-loc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hp-green-tint), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hp-loc-card:hover {
  border-color: var(--hp-green);
  transform: translateY(-3px);
  box-shadow: var(--hp-shadow);
}

.hp-loc-card:hover::before { opacity: 1; }

.hp-loc-card__pin {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background-color: var(--hp-green-tint);
  color: var(--hp-green);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hp-loc-card:hover .hp-loc-card__pin {
  background-color: var(--hp-green);
  color: #fff;
}

.hp-loc-card__name {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--hp-ink);
  /* Break only at spaces and hyphens — never inside a word. `overflow-wrap:
     anywhere` was splitting "Baumschulenweg" into "Baumschulenw / eg".
     Two-word names such as "Märkisches Viertel" wrap normally. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  transition: color 0.25s ease;
}

.hp-loc-card:hover .hp-loc-card__name { color: var(--hp-green); }

.hp-loc-card__arrow {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--hp-orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hp-loc-card:hover .hp-loc-card__arrow { opacity: 1; transform: none; }

@media (max-width: 680px) {
  .hp-actions .hp-btn { width: 100%; }
  .hp-loc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ WhatsApp block ---
 * template-parts/whatsapp.php, used on the front page, both service detail
 * templates and the city pages. Lives here rather than in home.css because
 * every one of those templates loads ui.css and only some load home.css.
 *
 * WhatsApp green is used for the button and the outgoing bubbles only — the
 * two places a user reads as "this is WhatsApp". Everything else stays on the
 * brand palette, so the block does not turn into someone else's advert. */
.hp-wa {
  background-color: #F1FAF3;
  border-top: 1px solid rgba(37, 211, 102, 0.16);
  border-bottom: 1px solid rgba(37, 211, 102, 0.16);
}

.hp-wa__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

/* Grid items default to min-content width; without this a long compound like
   "Wunschtermin" can widen the column past its track. */
.hp-wa__body { min-width: 0; }

.hp-wa__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  background-color: rgba(37, 211, 102, 0.14);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #0F7A3D;
}

.hp-wa__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  text-wrap: balance;
}

.hp-wa__text {
  margin: 0 0 18px;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hp-body);
}

.hp-wa__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.hp-wa__list li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--hp-ink);
}

.hp-wa__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(37, 211, 102, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%230F7A3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.hp-wa__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.hp-wa__btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px;
  border-radius: 999px;
  background-color: #25D366;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: #06331A;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-wa__btn:hover {
  background-color: #1FBA5A;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.4);
}

.hp-wa__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--hp-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hp-wa__tel strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--hp-ink);
}

.hp-wa__tel svg { color: var(--hp-green); }
.hp-wa__tel:hover,
.hp-wa__tel:hover strong { color: var(--hp-green); }

.hp-wa__note {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--hp-body);
}

/* ---- the chat illustration ---- */
.hp-wa__chat {
  border-radius: var(--hp-radius);
  overflow: hidden;
  background-color: #ECE5DD;
  box-shadow: var(--hp-shadow-lg);
}

.hp-wa__chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-color: #075E54;
}

/* Either the profile photo or the initials disc — see template-parts/whatsapp.php.
   The background colour stays on the image too: it shows through as the same
   translucent circle if the photo ever fails to load, instead of a broken-image
   glyph on the dark chat header. */
.hp-wa__avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.18);
}

.hp-wa__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.hp-wa__chat-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hp-wa__chat-who strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #fff;
}

.hp-wa__chat-who em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.hp-wa__chat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
}

.hp-wa__bubble {
  position: relative;
  max-width: 84%;
  margin: 0;
  padding: 10px 58px 10px 13px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #10221A;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

/* Padding-right above reserves the timestamp's gutter so it can sit on the
   last line without the text ever running underneath it. */
.hp-wa__bubble span {
  position: absolute;
  right: 11px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(16, 34, 26, 0.45);
}

.hp-wa__bubble--in {
  align-self: flex-start;
  background-color: #fff;
  border-top-left-radius: 2px;
}

.hp-wa__bubble--out {
  align-self: flex-end;
  background-color: #DCF8C6;
  border-top-right-radius: 2px;
}

@media (max-width: 900px) {
  .hp-wa__inner { grid-template-columns: minmax(0, 1fr); }
  .hp-wa__chat { max-width: 460px; }
}

@media (max-width: 680px) {
  .hp-wa__actions { flex-direction: column; align-items: stretch; }
  .hp-wa__btn { justify-content: center; }
  .hp-wa__tel { justify-content: center; }
  .hp-wa__bubble { max-width: 92%; }
}