/* =======================================================================
   Pawfect Dogcare — landing components & sections
   Hero · pills · glass cards · pillars · timeline · team · preise ·
   partners · "Was die Hunde sagen" reviews · gallery · contact.
   ======================================================================= */

/* ── Buttons ───────────────────────────────────────────────────────── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-2);
  padding: var(--pf-3) var(--pf-5);
  border-radius: var(--pf-r-pill);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--pf-dur) var(--pf-ease),
    color var(--pf-dur) var(--pf-ease),
    transform var(--pf-dur-fast) var(--pf-ease),
    box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-btn--primary {
  background: var(--pf-rust-500);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(184, 90, 54, 0.6);
}
.pf-btn--primary:hover {
  background: var(--pf-rust-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(184, 90, 54, 0.75);
}
.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink-900);
  border-color: var(--pf-border-strong);
}
.pf-btn--ghost:hover {
  background: var(--pf-bg-soft);
  color: var(--pf-ink-900);
}
.pf-btn--glass {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.pf-btn--glass:hover { background: rgba(255,255,255,0.28); color: #fff; }
.pf-btn--lg { padding: var(--pf-4) var(--pf-6); font-size: var(--pf-text-md); }

/* ── Pill ──────────────────────────────────────────────────────────── */
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  padding: 6px 14px;
  border-radius: var(--pf-r-pill);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.pf-pill--rust   { background: var(--pf-rust-100);   color: var(--pf-rust-700); }
.pf-pill--forest { background: var(--pf-forest-100); color: var(--pf-forest-700); }
.pf-pill--glass {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .pf-pill--rust   { background: rgba(184, 90, 54, 0.2);   color: var(--pf-rust-200); }
[data-theme="dark"] .pf-pill--forest { background: rgba(74, 88, 60, 0.25); color: var(--pf-forest-200); }

/* ── Glass surfaces ────────────────────────────────────────────────── */
.pf-glass {
  background: var(--pf-glass-1);
  backdrop-filter: blur(var(--pf-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pf-blur)) saturate(140%);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
  border-radius: var(--pf-r-lg);
}
.pf-glass-strong {
  background: var(--pf-glass-2);
  backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
  border-radius: var(--pf-r-lg);
}

/* ── Section spacing primitives ────────────────────────────────────── */
.pf-section { padding-block: var(--pf-11); }
.pf-section--tight { padding-block: var(--pf-9); }
.pf-eyebrow {
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  margin-bottom: var(--pf-3);
}
[data-theme="dark"] .pf-eyebrow { color: var(--pf-rust-300); }
.pf-section__head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--pf-8);
}
.pf-section__head .pf-lede {
  font-size: var(--pf-text-md);
  color: var(--pf-ink-700);
  margin-top: var(--pf-3);
  line-height: 1.55;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.pf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Desktop: the Julia + dogs background should own the first
     viewport without tiling. min-height pinned to 100vh on wide
     screens (with a fallback for older browsers via the clamp).
     no-repeat is explicit so a hero shorter than its image never
     paints a second tile underneath. */
  /* 100svh pins the hero to the SMALL viewport height (the
     viewport as it is with the URL bar visible). 100dvh tracks
     the dynamic viewport, which grows as Safari hides the bar on
     scroll — that growth was re-scaling the cover background and
     reading as the photo expanding. svh keeps the box static, so
     the image stays static too. */
  min-height: clamp(520px, 100svh, 1200px);
  display: grid;
  align-items: center;
  color: #fff;
  /* Edge-to-edge: no side gutter, no bottom rounding. The Julia +
     dogs photo now fills the entire first viewport instead of
     stopping at the page gutter. */
  border-radius: 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pf-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,12,8,0.18) 0%, rgba(20,12,8,0.55) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(20,12,8,0.15), rgba(20,12,8,0));
}
.pf-hero__inner {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--pf-11) var(--pf-gutter);
  text-align: center;
}
/* Hero Mein Bereich pill — sits on top of the dark photo overlay
   on every page, in both themes. Pin the colour to white
   explicitly (with a [data-theme="dark"] selector at equal
   specificity to the global `[data-theme="dark"] a` rule, which
   would otherwise tint links rust-300 in dark mode and steal the
   white). */
.pf-hero__mein-bereich,
[data-theme="dark"] .pf-hero__mein-bereich,
.pf-hero__mein-bereich:hover,
[data-theme="dark"] .pf-hero__mein-bereich:hover {
  color: #fff;
  text-decoration: none;
}
.pf-hero__mein-bereich {
  /* Title case "Mein Bereich" instead of the all-caps the
     base .pf-pill applies (text-transform: uppercase). Julia
     wanted it to read as a proper noun, not a UI shout. */
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--pf-text-sm);
  transition: background var(--pf-dur) var(--pf-ease);
}
/* Hover lift only on real hover-capable devices. Mobile fires
   :hover on tap and freezes it, which made the background look
   like it was "growing". Gating the transform on (hover: hover)
   keeps phones static. */
@media (hover: hover) {
  .pf-hero__mein-bereich {
    transition: transform var(--pf-dur-fast) var(--pf-ease), background var(--pf-dur) var(--pf-ease);
  }
  .pf-hero__mein-bereich:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.32);
  }
}
.pf-hero__title {
  font-size: var(--pf-text-hero);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.25);
  margin-top: var(--pf-5);
}
.pf-hero__title em {
  font-style: italic;
  color: var(--pf-rust-200);
  font-weight: 460;
}
.pf-hero__lede {
  margin-top: var(--pf-6);
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.92);
  max-width: 56ch;
  margin-inline: auto;
}
/* Hero CTA wrapper holds the rounded glass panel AND the "Zum
   ersten Mal hier? …" aside. Desktop: aside lives INSIDE the glass
   pill (same row as the button). Mobile (see media query): the
   aside drops below the panel so the button takes the full width.
   This is achieved by making the aside a child of the panel at
   markup-time, then on mobile pulling it out with order/grid
   reordering. */
.pf-hero__cta {
  margin-top: var(--pf-8);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pf-4);
}
.pf-hero__cta-panel {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-4);
  padding: var(--pf-3);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--pf-r-pill);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}
.pf-hero__cta-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  padding-right: var(--pf-3);
  font-size: var(--pf-text-sm);
  color: rgba(255,255,255,0.92);
}
.pf-hero__cta-aside a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Trust strip — desktop renders inline (photo stack ➜ text). Mobile
   flips to a column so the avatars sit above the copy and never
   squish the headline. */
.pf-hero__trust {
  margin-top: var(--pf-8);
  display: inline-flex;
  align-items: center;
  gap: var(--pf-4);
  padding: 10px 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--pf-r-pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: var(--pf-text-sm);
}
.pf-hero__trust-stack { display: inline-flex; }
.pf-hero__trust-stack img {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  margin-left: -10px;
  object-fit: cover;
}
.pf-hero__trust-stack img:first-child { margin-left: 0; }
.pf-hero__trust-text { line-height: 1.3; }

/* ── Pillars (Konzept teaser) ──────────────────────────────────────── */
.pf-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pf-5);
}
/* Each pillar is a two-row card: icon + title on a single top
   row, body copy below as the second row. Two-column grid
   (icon / heading) keeps the title baseline-aligned with the
   icon centre regardless of headline length. */
.pf-pillar {
  padding: var(--pf-6);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--pf-4);
  row-gap: var(--pf-3);
  align-items: center;
  transition: transform var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--pf-glass-shadow);
}
.pf-pillar__ico {
  grid-row: 1;
  grid-column: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--pf-r-md);
  background: var(--pf-rust-100);
  color: var(--pf-rust-700);
}
[data-theme="dark"] .pf-pillar__ico {
  background: rgba(184, 90, 54, 0.22);
  color: var(--pf-rust-200);
}
.pf-pillar h3 { grid-row: 1; grid-column: 2; margin: 0; }
.pf-pillar p  { grid-row: 2; grid-column: 1 / -1; color: var(--pf-ink-700); font-size: var(--pf-text-sm); line-height: 1.6; }

/* ── Timeline (Tagesablauf) ────────────────────────────────────────── */
.pf-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-7);
  position: relative;
}
.pf-timeline::before {
  content: "";
  position: absolute;
  top: 36px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pf-rust-200), transparent);
}
.pf-timeline__step {
  position: relative;
  text-align: center;
  /* Bigger gap between the time-circle and the heading so the
     two elements stop visually colliding — the line of dashes
     between 08:00 and "Morgenrunde" reads as breathing room
     rather than a squashed stack. */
  padding-top: 96px;
}
.pf-timeline__time {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pf-bg);
  border: 2px solid var(--pf-rust-300);
  color: var(--pf-rust-700);
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-sm);
  font-weight: 600;
}
.pf-timeline__step h3 { margin-bottom: var(--pf-3); }
.pf-timeline__step p { color: var(--pf-ink-700); font-size: var(--pf-text-sm); line-height: 1.55; }

/* Inline CTA below the timeline — icon + sentence + bolded
   clickable @-handle, all aligned on the same baseline so it
   doesn't read as two separate stacked items. */
.pf-instagram-cta {
  margin-top: var(--pf-8);
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
}
.pf-instagram-cta a {
  color: var(--pf-rust-700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--pf-dur) var(--pf-ease);
}
.pf-instagram-cta a:hover { color: var(--pf-rust-500); }
[data-theme="dark"] .pf-instagram-cta a { color: var(--pf-rust-200); }
[data-theme="dark"] .pf-instagram-cta a:hover { color: var(--pf-rust-100); }

/* ── Team ──────────────────────────────────────────────────────────── */
.pf-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-5);
}
.pf-team__card {
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg);
  overflow: hidden;
  transition: transform var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-team__card:hover { transform: translateY(-3px); box-shadow: var(--pf-glass-shadow); }
.pf-team__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pf-bg-strong);
}
.pf-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-team__photo--placeholder {
  display: grid; place-items: center;
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-3xl);
  color: var(--pf-rust-700);
  background: var(--pf-rust-50);
}
.pf-team__body { padding: var(--pf-5); }
.pf-team__role {
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  margin-bottom: var(--pf-2);
}
.pf-team__body h3 { margin-bottom: var(--pf-2); }
.pf-team__body p { color: var(--pf-ink-700); font-size: var(--pf-text-sm); line-height: 1.6; }
/* Card-wide click target: when a team card is wrapped in an
   <a> to its detail page, drop the underline and let the card
   keep its hover lift. */
a.pf-team__card { color: var(--pf-ink-900); text-decoration: none; display: block; }
a.pf-team__card:hover { color: var(--pf-ink-900); }
[data-theme="dark"] a.pf-team__card { color: var(--pf-ink-900); }
.pf-team__more {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  margin-top: var(--pf-3);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
}
[data-theme="dark"] .pf-team__more { color: var(--pf-rust-300); }

/* ── Team member detail page ────────────────────────────────────────
   Two-column layout on desktop (portrait left, biography right),
   stacked on mobile. Lives on /team-<slug> pages. */
.pf-team__detail {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: var(--pf-9);
  align-items: start;
}
.pf-team__detail-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pf-r-xl);
  border: 1px solid var(--pf-border);
  background: var(--pf-bg-strong);
}
.pf-team__detail-photo img,
.pf-team__detail-photo .pf-team__photo--placeholder { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.pf-team__detail-body { display: flex; flex-direction: column; gap: var(--pf-5); }
.pf-team__detail-body h1 { font-size: var(--pf-text-3xl); }
.pf-team__detail-role {
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
}
[data-theme="dark"] .pf-team__detail-role { color: var(--pf-rust-300); }
.pf-team__detail-body p {
  color: var(--pf-ink-700);
  font-size: var(--pf-text-md);
  line-height: 1.75;
}
.pf-team__detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  margin-bottom: var(--pf-5);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
}
.pf-team__detail-back:hover { color: var(--pf-rust-700); }
@media (max-width: 880px) {
  .pf-team__detail { grid-template-columns: 1fr; gap: var(--pf-7); }
  .pf-team__detail-photo { max-width: 320px; margin-inline: auto; }
}

/* ── Preise ────────────────────────────────────────────────────────── */
.pf-preise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-4);
}
.pf-preise__card {
  position: relative;
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg);
  padding: var(--pf-6);
  text-align: left;
  display: flex; flex-direction: column; gap: var(--pf-3);
  transition: transform var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-preise__card:hover { transform: translateY(-3px); box-shadow: var(--pf-glass-shadow); }
.pf-preise__card--featured {
  background: linear-gradient(180deg, var(--pf-rust-50), var(--pf-bg-soft));
  border-color: var(--pf-rust-300);
  box-shadow: 0 12px 32px -16px rgba(184, 90, 54, 0.45);
  position: relative;
}
[data-theme="dark"] .pf-preise__card--featured {
  background: linear-gradient(180deg, rgba(184, 90, 54, 0.18), var(--pf-bg-soft));
}
.pf-preise__card--featured::after,
.pf-preise__card--required::after {
  content: attr(data-badge);
  position: absolute; top: -14px; right: 20px;
  padding: 4px 12px; border-radius: var(--pf-r-pill);
  font-size: 10px; letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase; font-weight: 600;
  color: #fff;
}
.pf-preise__card--featured::after { background: var(--pf-rust-500); }
/* Required tier uses the forest accent so the "Pflicht" badge
   reads as a fact ("you have to do this first") rather than a
   recommendation, distinct from the rust "Häufigste Stufe". */
.pf-preise__card--required::after { background: var(--pf-forest-500); }
.pf-preise__card--required {
  border-color: var(--pf-forest-300);
}
[data-theme="dark"] .pf-preise__card--required {
  border-color: color-mix(in srgb, var(--pf-forest-500) 60%, transparent);
}
.pf-preise__label {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-lg);
}
.pf-preise__price {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-3xl);
  letter-spacing: -0.02em;
  color: var(--pf-rust-700);
}
[data-theme="dark"] .pf-preise__price { color: var(--pf-rust-200); }
.pf-preise__sub {
  font-size: var(--pf-text-xs);
  color: var(--pf-ink-500);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
}
.pf-preise__note {
  margin-top: auto;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  line-height: 1.5;
}
.pf-preise__footnote {
  margin-top: var(--pf-6);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  text-align: center;
  max-width: 60ch; margin-inline: auto;
}

/* ── Partners ──────────────────────────────────────────────────────── */
.pf-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pf-5);
}
.pf-partner {
  display: flex;
  flex-direction: column;
  gap: var(--pf-3);
  padding: var(--pf-6);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg);
  text-decoration: none;
  color: var(--pf-ink-900);
  transition: transform var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-partner:hover {
  transform: translateY(-3px);
  box-shadow: var(--pf-glass-shadow);
  color: var(--pf-ink-900);
}
.pf-partner__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Logo box stays small (56×56). The change is that the image
   now fills the box edge-to-edge instead of sitting centred
   with ~10% padding around it — object-fit: cover crops to
   the box's aspect, so square-ish marks fill cleanly. */
.pf-partner__logo {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  overflow: hidden;
}
.pf-partner__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-partner__kind {
  display: inline-flex; align-items: center; gap: var(--pf-2);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-ink-500);
}
.pf-partner__name {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-lg);
  margin-top: var(--pf-2);
}
.pf-partner__body { color: var(--pf-ink-700); font-size: var(--pf-text-sm); line-height: 1.6; }

/* Visit CTA — sits at the bottom of every partner card with a
   kind-aware label ("Website besuchen", "Auf Spotify hören",
   "Shop besuchen"). Mirrors the size and style of the team
   detail "Zurück zum Team" link so the two read as the same
   affordance vocabulary across the site. */
.pf-partner__visit {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  align-self: flex-start;
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  transition: gap var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
[data-theme="dark"] .pf-partner__visit { color: var(--pf-rust-300); }
.pf-partner:hover .pf-partner__visit { gap: var(--pf-3); color: var(--pf-rust-500); }
[data-theme="dark"] .pf-partner:hover .pf-partner__visit { color: var(--pf-rust-200); }
/* Footer block — wraps the code chip (if any) and the visit CTA
   in a single flex column anchored to the bottom of the card via
   margin-top: auto. Without this wrapper the visit CTA sat right
   after the body text on cards without a code, breaking the
   visual rhythm across the grid. */
.pf-partner__foot {
  display: flex;
  flex-direction: column;
  gap: var(--pf-3);
  margin-top: auto;
}

/* Click-to-copy discount chip. Two text spans (label / "Kopiert!")
   share the same slot via absolute positioning; CSS cross-fades
   them when [data-copied="true"]. Icon swaps from copy → check on
   the same trigger, with a brief scale pulse for tactile feedback. */
.pf-partner__code {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--pf-2);
  padding: 6px 12px;
  background: var(--pf-rust-50);
  color: var(--pf-rust-700);
  border: 1px solid transparent;
  border-radius: var(--pf-r-pill);
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  align-self: flex-start;
  cursor: pointer;
  transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease);
}
.pf-partner__code:hover {
  background: var(--pf-rust-100);
  border-color: var(--pf-rust-200);
}
[data-theme="dark"] .pf-partner__code {
  background: rgba(184, 90, 54, 0.18);
  color: var(--pf-rust-200);
}
[data-theme="dark"] .pf-partner__code:hover {
  background: rgba(184, 90, 54, 0.28);
  border-color: rgba(184, 90, 54, 0.5);
}
/* Label + Kopiert! occupy the same slot. JS toggles
   [data-copied] and CSS cross-fades them with a subtle slide so
   the swap reads as a confirmation, not a layout shift. */
.pf-partner__code-label,
.pf-partner__code-done {
  transition: opacity 160ms var(--pf-ease), transform 160ms var(--pf-ease);
}
.pf-partner__code-done {
  position: absolute;
  left: 12px;
  opacity: 0;
  transform: translateY(4px);
  color: var(--pf-forest-600);
  font-weight: 600;
}
[data-theme="dark"] .pf-partner__code-done { color: var(--pf-forest-200); }
.pf-partner__code-ico {
  display: inline-flex;
  transition: opacity 160ms var(--pf-ease), transform 220ms var(--pf-ease-out);
}
.pf-partner__code-ico--check { position: absolute; right: 12px; opacity: 0; transform: scale(0.6); color: var(--pf-forest-600); }
[data-theme="dark"] .pf-partner__code-ico--check { color: var(--pf-forest-200); }
.pf-partner__code[data-copied="true"] {
  background: color-mix(in srgb, var(--pf-forest-100) 80%, transparent);
  border-color: color-mix(in srgb, var(--pf-forest-300) 70%, transparent);
}
[data-theme="dark"] .pf-partner__code[data-copied="true"] {
  background: color-mix(in srgb, var(--pf-forest-700) 50%, transparent);
  border-color: color-mix(in srgb, var(--pf-forest-500) 60%, transparent);
}
.pf-partner__code[data-copied="true"] .pf-partner__code-label,
.pf-partner__code[data-copied="true"] .pf-partner__code-ico--copy {
  opacity: 0;
  transform: translateY(-4px);
}
.pf-partner__code[data-copied="true"] .pf-partner__code-done {
  opacity: 1;
  transform: translateY(0);
}
.pf-partner__code[data-copied="true"] .pf-partner__code-ico--check {
  opacity: 1;
  transform: scale(1);
  animation: pf-copy-pulse 320ms var(--pf-ease-out) 1;
}
@keyframes pf-copy-pulse {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── Reviews ("Was die Hunde sagen") ──────────────────────────────────
   Horizontal scroll-snap carousel. Desktop shows three to four
   cards at once; mobile shows roughly one centred card. The first
   card snaps to the visual centre on phones via scroll-padding.
   The active dot + scroll hint live below the track. */
.pf-reviews {
  list-style: none;
  margin: var(--pf-3) 0 0;
  /* Extra bottom padding lets the hover lift (translateY -3px) +
     softened shadow breathe without painting a line at the
     container's clip edge. */
  padding: var(--pf-3) 0 var(--pf-7);
  display: flex;
  gap: var(--pf-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed the rail past the container gutter so cards can scroll
     beyond the visible frame on desktop, giving the carousel a
     real edge to "march into". */
  margin-inline: calc(var(--pf-gutter) * -1);
  padding-inline: var(--pf-gutter);
  scroll-padding-inline: var(--pf-gutter);
  /* Let the browser handle both axes — `pan-y pinch-zoom` was
     blocking native horizontal swiping inside the carousel,
     which is exactly what we need here. */
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.pf-reviews::-webkit-scrollbar { display: none; }
.pf-review {
  flex: 0 0 280px;
  /* Fixed min-height keeps the layout steady; tuned to fit
     avatar + name + a single voice slot (woof / quote swap) +
     toggle + "Ganze Geschichte lesen" link. Smaller now that
     the woof and quote share one slot via the absolute-positioned
     .pf-review__voice container instead of stacking. */
  min-height: 460px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--pf-6) var(--pf-5);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-xl);
  box-shadow: 0 6px 14px -10px rgba(58, 32, 18, 0.18);
  transition: transform var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
/* Hover shadow tuned to stay inside the carousel's bottom padding
   so it never paints a horizontal line where it gets clipped.
   Smaller blur radius, shallower offset. */
.pf-review:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -12px rgba(58, 32, 18, 0.22);
}

/* Dots row below the carousel. One dot per card, the active one
   widens into a pill — a "where am I" signal that costs less
   visual space than numbers and stays passive (not clickable, so
   no extra logic to teach). */
.pf-reviews-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pf-3);
  margin-top: var(--pf-5);
}
.pf-reviews-dots {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.pf-reviews-dots li {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--pf-border-strong);
  transition: width var(--pf-dur) var(--pf-ease), background var(--pf-dur) var(--pf-ease);
}
.pf-reviews-dots li[data-active="true"] {
  width: 26px;
  background: var(--pf-rust-500);
}


.pf-review__face {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--pf-rust-100);
  box-shadow: var(--pf-glass-shadow);
  background: var(--pf-bg-strong);
  cursor: pointer;
  padding: 0;
  transition: transform var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease);
}
.pf-review__face:hover { transform: scale(1.04); border-color: var(--pf-rust-300); }
.pf-review__face img { width: 100%; height: 100%; object-fit: cover; }
.pf-review__name {
  margin-top: var(--pf-3);
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-lg);
  letter-spacing: var(--pf-tracking-display);
}
/* Voice slot — shared container for woof and quote. Fixed height
   so the toggle is a cross-fade, not a layout shift. The two
   children stack absolutely inside; CSS swaps opacity based on
   the parent card's [data-open]. */
.pf-review__voice {
  position: relative;
  width: 100%;
  height: 96px;
  margin-top: var(--pf-3);
}
.pf-review__woof,
.pf-review__quote {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: opacity 220ms var(--pf-ease);
}
.pf-review__woof {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  color: var(--pf-rust-600);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 1;
}
[data-theme="dark"] .pf-review__woof { color: var(--pf-rust-300); }
.pf-review[data-open="true"] .pf-review__woof { opacity: 0; }
/* Visible "Übersetzung für Menschen" CTA below "woof woof" — the
   face is also a button, but having a textual affordance makes the
   interaction discoverable to anyone who doesn't think to click a
   dog photo. */
.pf-review__open {
  margin-top: var(--pf-2);
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  background: transparent;
  border: none;
  color: var(--pf-rust-700);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--pf-r-pill);
  transition: color var(--pf-dur) var(--pf-ease);
}
.pf-review__open:hover { color: var(--pf-rust-500); }
[data-theme="dark"] .pf-review__open { color: var(--pf-rust-200); }
/* Human translation — same absolute slot as the woof, hidden by
   default. Opacity cross-fades with the woof when the toggle
   flips [data-open]. */
.pf-review__quote {
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  line-height: 1.5;
  opacity: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-review[data-open="true"] .pf-review__quote { opacity: 1; }

/* Toggle button labels — two siblings, CSS picks one based on
   the card's open state so the button reads as a true bi-state
   switch ("In Hundesprache" ↔ "Übersetzung für Menschen"). */
.pf-review__open-label--to-dog { display: none; }
.pf-review[data-open="true"] .pf-review__open-label--to-human { display: none; }
.pf-review[data-open="true"] .pf-review__open-label--to-dog { display: inline; }

/* Always-visible link to the dog's detail page. Sits at the
   bottom of the card via margin-top: auto so cards align even
   when the quote isn't open. */
.pf-review__more {
  margin-top: auto;
  padding-top: var(--pf-4);
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  text-decoration: none;
  transition: gap var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
[data-theme="dark"] .pf-review__more { color: var(--pf-rust-300); }
.pf-review__more:hover { gap: var(--pf-3); color: var(--pf-rust-500); }
[data-theme="dark"] .pf-review__more:hover { color: var(--pf-rust-200); }

/* ── Review detail page ──────────────────────────────────────────────
   Per-dog landing reached from the home carousel via "Ganze
   Geschichte lesen". Two-column on desktop (circle portrait left,
   prose right), stacked on mobile. Reuses .pf-team__detail-back
   for the breadcrumb so the back affordance reads identically. */
.pf-review__detail {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--pf-9);
  align-items: start;
}
/* Same crop and chrome as .pf-team__detail-photo so the two
   detail layouts share a vocabulary (4:5 portrait, soft border,
   rounded corners — no circle). */
.pf-review__detail-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pf-r-xl);
  border: 1px solid var(--pf-border);
  background: var(--pf-bg-strong);
}
.pf-review__detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-review__detail-body { display: flex; flex-direction: column; gap: var(--pf-7); }
.pf-review__detail-body h1 { font-size: var(--pf-text-3xl); margin-bottom: var(--pf-2); }
.pf-review__detail-woof {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-sm);
  color: var(--pf-rust-600);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
[data-theme="dark"] .pf-review__detail-woof { color: var(--pf-rust-300); }
.pf-review__detail-section { display: flex; flex-direction: column; gap: var(--pf-3); }
.pf-review__detail-dog {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-lg);
  font-style: italic;
  line-height: var(--pf-leading-snug);
  color: var(--pf-ink-900);
  padding: var(--pf-5) var(--pf-6);
  margin: 0;
  background: var(--pf-bg-soft);
  border-left: 4px solid var(--pf-rust-400);
  border-radius: 0 var(--pf-r-md) var(--pf-r-md) 0;
}
.pf-review__detail-section p {
  color: var(--pf-ink-700);
  font-size: var(--pf-text-md);
  line-height: 1.75;
}
@media (max-width: 880px) {
  .pf-review__detail { grid-template-columns: 1fr; gap: var(--pf-7); }
  .pf-review__detail-photo { max-width: 320px; margin-inline: auto; }
}

/* ── Gallery (Wohnraum) ────────────────────────────────────────────── */
.pf-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pf-3);
}
.pf-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pf-r-md);
  border: 1px solid var(--pf-border);
}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.pf-kontakt {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--pf-8);
  align-items: center;
  padding: var(--pf-9);
  background: linear-gradient(135deg, var(--pf-rust-50) 0%, var(--pf-cream-100) 100%);
  border-radius: var(--pf-r-xl);
  border: 1px solid var(--pf-border);
}
[data-theme="dark"] .pf-kontakt {
  background: linear-gradient(135deg, rgba(184, 90, 54, 0.18) 0%, var(--pf-bg-soft) 100%);
}
.pf-kontakt__channels {
  display: flex;
  flex-direction: column;
  gap: var(--pf-3);
}
.pf-channel {
  display: flex;
  align-items: center;
  gap: var(--pf-4);
  padding: var(--pf-4) var(--pf-5);
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  color: var(--pf-ink-900);
  transition: transform var(--pf-dur) var(--pf-ease);
}
.pf-channel:hover { transform: translateY(-2px); color: var(--pf-ink-900); }
.pf-channel__ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--pf-rust-100);
  color: var(--pf-rust-700);
  border-radius: var(--pf-r-md);
}
[data-theme="dark"] .pf-channel__ico { background: rgba(184, 90, 54, 0.22); color: var(--pf-rust-200); }
.pf-channel__label { font-weight: 500; }
.pf-channel__value { font-size: var(--pf-text-sm); color: var(--pf-ink-700); }

/* ── Audio narration player ──────────────────────────────────────────
   Compact rust-tinted player that sits above each Konzept
   section. JS (initSectionAudio in pawfect.js) wires play/pause,
   progress + an IntersectionObserver that auto-plays the
   current section as the visitor scrolls — once they've kicked
   off any audio manually first (browsers block cold autoplay
   with sound). When the .m4a is missing the JS flips
   data-state="missing" and the [data-audio-missing] hint takes
   over the layout slot. */
.pf-audio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--pf-4);
  padding: 10px var(--pf-4);
  margin: 0 auto var(--pf-6);
  /* Cap the bar width on desktop so it reads as a "now playing"
     chip, not a header spanning the full container. Mobile gets
     the full width — the chip is the only chrome there. */
  max-width: 480px;
  background: color-mix(in srgb, var(--pf-rust-50) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-rust-300) 40%, transparent);
  border-radius: var(--pf-r-pill);
  transition: background var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease);
}
[data-theme="dark"] .pf-audio {
  background: color-mix(in srgb, var(--pf-rust-700) 25%, transparent);
  border-color: color-mix(in srgb, var(--pf-rust-500) 40%, transparent);
}
.pf-audio[data-state="playing"] {
  background: color-mix(in srgb, var(--pf-rust-100) 80%, transparent);
  border-color: var(--pf-rust-400);
}
[data-theme="dark"] .pf-audio[data-state="playing"] {
  background: color-mix(in srgb, var(--pf-rust-600) 38%, transparent);
}
.pf-audio__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pf-rust-500);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--pf-dur) var(--pf-ease), transform var(--pf-dur-fast) var(--pf-ease);
}
.pf-audio__btn:hover { background: var(--pf-rust-600); transform: scale(1.05); }
.pf-audio__icon { display: grid; place-items: center; }
.pf-audio__icon--pause { display: none; }
.pf-audio[data-state="playing"] .pf-audio__icon--play  { display: none; }
.pf-audio[data-state="playing"] .pf-audio__icon--pause { display: grid; }

.pf-audio__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-audio__title {
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  font-weight: 600;
}
[data-theme="dark"] .pf-audio__title { color: var(--pf-rust-200); }
.pf-audio__bar {
  position: relative;
  height: 4px;
  background: color-mix(in srgb, var(--pf-rust-300) 30%, transparent);
  border-radius: var(--pf-r-pill);
  overflow: hidden;
}
.pf-audio__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--pf-rust-500);
  transition: width 120ms linear;
}
.pf-audio__time {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  color: var(--pf-ink-500);
  white-space: nowrap;
}

/* Missing-state: the .m4a 404'd. JS flips data-state to "missing"
   and CSS swaps the body for a single "in Vorbereitung" line. */
.pf-audio__missing {
  display: none;
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-ink-500);
}
.pf-audio[data-state="missing"] { grid-template-columns: auto 1fr; }
.pf-audio[data-state="missing"] .pf-audio__btn { opacity: 0.5; cursor: not-allowed; }
.pf-audio[data-state="missing"] .pf-audio__body,
.pf-audio[data-state="missing"] .pf-audio__time { display: none; }
.pf-audio[data-state="missing"] .pf-audio__missing { display: block; }

@media (max-width: 540px) {
  .pf-audio { gap: var(--pf-3); padding: 8px 10px; max-width: none; }
  .pf-audio__title { font-size: 11px; }
}

/* ── Podcast: consent placeholder (shown when media not granted) ─── */
.pf-podcast__consent {
  display: none;
  flex-direction: column;
  gap: var(--pf-3);
  padding: var(--pf-4);
  background: var(--pf-bg-soft);
  border: 1px dashed var(--pf-border-strong);
  border-radius: var(--pf-r-md);
  text-align: center;
}
.pf-podcast__consent-title {
  font-weight: 600;
  color: var(--pf-ink-900);
}
.pf-podcast__consent-body {
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  line-height: 1.5;
}
.pf-podcast[data-media-consent="false"] .pf-podcast__consent { display: flex; }
.pf-podcast[data-media-consent="false"] .pf-podcast__frame { display: none !important; }

/* ── Cookie banner ───────────────────────────────────────────────────
   Slide-up from the bottom on first visit. Two categories
   (Notwendig + Externe Medien); reject/accept are siblings of
   equal weight per EU guidance — no dark-pattern "X to dismiss".
   Persists choice in localStorage 'pf-cookies'. */
.pf-cookies {
  position: fixed;
  left: var(--pf-4);
  right: var(--pf-4);
  bottom: max(env(safe-area-inset-bottom, 0px), var(--pf-4));
  z-index: 80;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-r-xl);
  box-shadow:
    0 24px 48px -16px rgba(58, 32, 18, 0.35),
    0 2px 0 0 rgba(255,255,255,0.6) inset;
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 360ms var(--pf-ease-out),
    opacity 280ms var(--pf-ease),
    visibility 0s linear 360ms;
}
[data-theme="dark"] .pf-cookies {
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.6),
    0 1px 0 0 rgba(255,255,255,0.05) inset;
}
.pf-cookies[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 360ms var(--pf-ease-out),
    opacity 280ms var(--pf-ease),
    visibility 0s linear 0s;
}
.pf-cookies__inner {
  padding: var(--pf-6);
  max-width: 720px;
  margin: 0 auto;
}
.pf-cookies__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
  margin-bottom: var(--pf-2);
}
[data-theme="dark"] .pf-cookies__eyebrow { color: var(--pf-rust-300); }
.pf-cookies__title {
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-xl);
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-tight);
  margin-bottom: var(--pf-3);
}
.pf-cookies__body {
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  line-height: 1.6;
}
.pf-cookies__body a { color: var(--pf-rust-700); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .pf-cookies__body a { color: var(--pf-rust-300); }
/* Categories list — hidden until [data-expanded="true"]. */
.pf-cookies__cats {
  display: none;
  flex-direction: column;
  gap: var(--pf-3);
  margin-top: var(--pf-5);
  padding-top: var(--pf-5);
  border-top: 1px solid var(--pf-border);
}
.pf-cookies[data-expanded="true"] .pf-cookies__cats { display: flex; }
.pf-cookies__cat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pf-4);
  padding: var(--pf-4);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  cursor: pointer;
}
.pf-cookies__cat[data-locked="true"] { opacity: 0.85; cursor: not-allowed; }
.pf-cookies__cat input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--pf-rust-500); }
.pf-cookies__cat-body { display: flex; flex-direction: column; gap: 4px; }
.pf-cookies__cat-title { font-weight: 600; color: var(--pf-ink-900); }
.pf-cookies__cat-desc { font-size: var(--pf-text-sm); color: var(--pf-ink-700); line-height: 1.5; }
.pf-cookies__cat-note {
  font-size: 11px;
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-700);
}
[data-theme="dark"] .pf-cookies__cat-note { color: var(--pf-rust-300); }
.pf-cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-3);
  margin-top: var(--pf-5);
  justify-content: flex-end;
}
.pf-cookies[data-expanded="true"] [data-cookies-customize] { display: none; }
.pf-cookies[data-expanded="true"] [data-cookies-accept] { display: none; }
.pf-cookies[data-expanded="true"] [data-cookies-save] { display: inline-flex !important; }
@media (max-width: 540px) {
  .pf-cookies__actions { justify-content: stretch; }
  .pf-cookies__actions .pf-btn { flex: 1 1 calc(50% - var(--pf-3)); justify-content: center; }
}

/* ── Construction / 404 pages ────────────────────────────────────────
   The backdrop photo is a separate full-viewport fixed element
   (.pf-edge-bg) so it reaches behind the footer too — making the
   page feel like one continuous photo card rather than a section
   stacked on a separate footer band. CSS :has() then tints the
   footer to white-on-warm so it stays readable on top of the
   photo. */
.pf-edge {
  position: relative;
  min-height: clamp(540px, 88svh, 1000px);
  display: grid;
  place-items: center;
  padding: var(--pf-11) var(--pf-gutter);
  color: #fff;
  margin: 0;
}
.pf-edge-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-color: #14100c;
}
.pf-edge-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,0.40) 0%, rgba(20,12,8,0.82) 100%);
}
/* Footer over the photo: drop the cream background, lift text to
   a warm white. Brand wordmark, links, social icons all swapped
   into a "on-dark" variant. */
body:has(.pf-edge-bg) {
  background: transparent;
}
body:has(.pf-edge-bg) .pf-footer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.18);
}
body:has(.pf-edge-bg) .pf-footer__col h4 { color: rgba(255,255,255,0.55); }
body:has(.pf-edge-bg) .pf-footer__col a,
body:has(.pf-edge-bg) .pf-footer__lede,
body:has(.pf-edge-bg) .pf-footer__bottom p,
body:has(.pf-edge-bg) .hb-trademark,
body:has(.pf-edge-bg) .hb-trademark__name,
body:has(.pf-edge-bg) .pf-brand,
body:has(.pf-edge-bg) .pf-nav__trademark {
  color: rgba(255,255,255,0.88);
}
body:has(.pf-edge-bg) .pf-brand__text small { color: rgba(255,255,255,0.6); }
body:has(.pf-edge-bg) .pf-footer__bottom { border-top-color: rgba(255,255,255,0.18); }
body:has(.pf-edge-bg) .pf-social a {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.88);
}
body:has(.pf-edge-bg) .pf-social a:hover {
  background: var(--pf-rust-500);
  color: #fff;
}
.pf-edge__card {
  width: 100%;
  max-width: 640px;
  padding: var(--pf-9) var(--pf-8);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--pf-r-2xl);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  text-align: center;
  box-shadow: 0 24px 56px -16px rgba(0,0,0,0.45);
}
.pf-edge__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-rust-200);
  margin-bottom: var(--pf-3);
}
.pf-edge__num {
  font-family: var(--pf-font-display);
  font-size: clamp(80px, 18vw, 160px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--pf-rust-200);
  margin-bottom: var(--pf-3);
}
.pf-edge__card h1 {
  color: #fff;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: var(--pf-tracking-display);
  margin-bottom: var(--pf-5);
}
.pf-edge__body {
  color: rgba(255,255,255,0.92);
  font-size: var(--pf-text-md);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto var(--pf-5);
}
.pf-edge__hb {
  margin-top: var(--pf-5);
  padding-top: var(--pf-5);
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: var(--pf-text-sm);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.pf-edge__hb a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pf-edge__hb a:hover { color: #fff; }
.pf-edge__hb-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  margin-top: var(--pf-3);
  font-family: var(--hb-font-sans);
  font-size: var(--pf-text-xs);
  letter-spacing: 0.04em;
  color: #fff;
}
.pf-edge__hb-mark img { height: 16px; width: auto; }
.pf-edge__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pf-3);
  margin-top: var(--pf-6);
}

/* Mobile: dial down the card padding + body type so the
   construction / 404 cards don't feel like billboard posters
   on a phone. Title (h1) keeps its weight but loses a few
   px; body and HB Labs blurb shrink one step. */
@media (max-width: 540px) {
  .pf-edge__card { padding: var(--pf-7) var(--pf-6); }
  .pf-edge__card h1 {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.1;
    margin-bottom: var(--pf-4);
  }
  .pf-edge__body {
    font-size: var(--pf-text-sm);
    line-height: 1.55;
  }
  .pf-edge__hb {
    font-size: var(--pf-text-xs);
    line-height: 1.55;
  }
  .pf-edge__num { font-size: clamp(64px, 18vw, 96px); }
}

/* ── Legal pages ──────────────────────────────────────────────────── */
.pf-prose {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--pf-ink-900);
}
.pf-prose h1 { font-size: var(--pf-text-3xl); margin-bottom: var(--pf-7); }
.pf-prose h2 { font-size: var(--pf-text-xl); margin-top: var(--pf-8); margin-bottom: var(--pf-4); }
.pf-prose p, .pf-prose li { font-size: var(--pf-text-md); line-height: 1.7; color: var(--pf-ink-700); margin-bottom: var(--pf-4); }
.pf-prose ul { padding-left: 1.25em; }

/* ── Mobile responsive ────────────────────────────────────────────── */
@media (max-width: 880px) {
  .pf-pillars   { grid-template-columns: 1fr; }
  .pf-timeline  { grid-template-columns: repeat(2, 1fr); gap: var(--pf-8); }
  .pf-timeline::before { display: none; }
  .pf-team      { grid-template-columns: repeat(2, 1fr); }
  .pf-preise    { grid-template-columns: 1fr 1fr; }
  .pf-gallery   { grid-template-columns: 1fr 1fr; }
  .pf-kontakt   { grid-template-columns: 1fr; padding: var(--pf-7); }
  .pf-section   { padding-block: var(--pf-9); }
  .pf-hero      { margin: 0; border-radius: 0; min-height: 88svh; }
  .pf-hero__inner { padding-block: var(--pf-9); }
  /* Mobile hero CTA: strip the glass pill so the panel acts like
     a transparent stack. The button keeps its rounded shape on its
     own, and the aside falls beneath it as plain text. */
  .pf-hero__cta-panel {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    gap: var(--pf-3);
  }
  .pf-hero__cta-panel .pf-btn { width: 100%; justify-content: center; }
  .pf-hero__cta-aside { padding-right: 0; text-align: center; flex-wrap: wrap; justify-content: center; }
  /* Smaller eyebrow pill so the long "Familiäre Hundebetreuung in
     Hagen" no longer pushes the title down on a narrow screen. */
  .pf-hero .pf-pill { font-size: 10px; padding: 4px 10px; }
  /* Trust strip flips to a column with avatars on top so the
     dog photos never get squeezed inline with the copy. */
  .pf-hero__trust { flex-direction: column; gap: var(--pf-2); padding: var(--pf-3) var(--pf-5); border-radius: var(--pf-r-xl); }
  .pf-hero__trust-text { text-align: center; }
}
@media (max-width: 880px) {
  /* Phones: one card per snap. Centre the first card so it
     doesn't cling to the left edge. The card itself sizes to
     ~88vw so it fills the frame without touching the gutters. */
  .pf-reviews {
    scroll-padding-inline: max(var(--pf-gutter), calc(50vw - 44vw));
    padding-inline: max(var(--pf-gutter), calc(50vw - 44vw));
  }
  .pf-review {
    flex-basis: 88vw;
    scroll-snap-align: center;
  }
}
@media (max-width: 540px) {
  .pf-timeline  { grid-template-columns: 1fr; }
  .pf-team      { grid-template-columns: 1fr; }
  .pf-preise    { grid-template-columns: 1fr; }
  .pf-gallery   { grid-template-columns: 1fr; }
  .pf-review__face { width: 180px; height: 180px; }
}