/* ==========================================================================
   PfotenMedia – Landingpage Stylesheet
   Bootstrap 5.3 wird per CDN geladen (siehe index.html) – dieses File
   ergänzt nur Brand-Tokens, Typografie und Komponenten, die Bootstrap
   nicht von Haus aus liefert. Bootstrap-Utilities (py-5, gap-3, g-4 etc.)
   werden bevorzugt direkt im HTML genutzt statt hier dupliziert.
   ========================================================================== */

/* ---- Brand Tokens (1:1 aus den Brand Guidelines) ---- */
:root {
  --pm-pink: #E12C57;      /* Primärfarbe – Pfoten Pink */
  --pm-orange: #F4503C;    /* Sekundärfarbe – Pfoten Orange */
  --pm-gradient: linear-gradient(45deg, var(--pm-pink), var(--pm-orange));

  --pm-ink: #000000;       /* Ink */
  --pm-cloud: #FFFFFF;     /* Cloud */
  --pm-bone: #F8F5F2;      /* Bone – Hero-/Flächenhintergrund */
  --pm-fog: #EDE7E3;       /* Fog */
  --pm-stone: #A8A09B;     /* Stone – gedämpfter Text auf Farbflächen */
  --pm-sand: #E3D2C2;      /* Sand */
  --pm-subtle: #999999;    /* Subtle – Fließtext sekundär */
  --pm-mute: #F4F4F4;      /* Mute */

  --pm-pink-rgb: 225, 44, 87;

  /* Radien: jede Farbfläche bekommt nur unten runde Ecken (Layout-Konvention) */
  --pm-radius-section: 3rem;
  --pm-radius-card: 1.75rem;
  --pm-radius-sm: 1rem;

  --pm-font: 'Poppins', sans-serif;
}

/* ---- Basis ---- */
html { overflow-x: hidden; }
body {
  font-family: var(--pm-font);
  color: var(--pm-ink);
  font-weight: 300;
  background-color: var(--pm-cloud);
  overflow-x: hidden;
}

/* ---- Typo-Skala lt. Brand Guidelines (Desktop-Werte, fluid via clamp) ---- */
h1, .pm-h1 {
  font-weight: 500;
  line-height: 1.2;
  font-size: 3.75rem; /* 60px */
  color: var(--pm-ink);
  letter-spacing: -0.01em;
}
h2, .pm-h2 {
  font-weight: 500;
  line-height: 1.2;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.8125rem); /* bis 45px */
}
.pm-subheader {
  font-weight: 400;
  line-height: 1.2;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); /* bis 32px */
}
.pm-subheader2 {
  font-weight: 400;
  line-height: 1.2;
  font-size: 1.5rem; /* 24px */
}
.pm-subheader-sm {
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.125rem; /* 18px */
}
.pm-text {
  font-weight: 300;
  line-height: 1.5;
  font-size: 1.25rem; /* 20px */
}
.pm-text-sm {
  font-weight: 400;
  line-height: 1.4;
  font-size: 1rem; /* 16px */
} 
.pm-eyebrow {
  display: inline-block;
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--pm-pink);
  margin-bottom: .5rem;
}
.pm-text-stone { color: var(--pm-ink); }
.pm-text-subtle { color: var(--pm-subtle); }

/* ---- Container-Override: Wunschbreite ca. 1200px ----
   Bootstrap kennt ab xl (1140px) und xxl (1320px) – wir kappen beide
   auf 1200px statt Sass neu zu kompilieren. */
@media (min-width: 1200px) {
  .container, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: 1310px;
  }
}
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1200px;
  }
}

/* ---- Section Spacing: Increased vertical spacing ---- */
section.py-5.py-lg-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
@media (min-width: 992px) {
  section.py-5.py-lg-6 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* ---- Buttons ---- */
.btn-pm-primary {
  background: var(--pm-gradient);
  color: var(--pm-cloud);
  border: none;
  font-weight: 500;
  transition: filter .2s ease, transform .2s ease;
  min-width: 200px;
}
.btn-pm-primary:hover,
.btn-pm-primary:focus-visible {
  filter: brightness(1.06);
  color: var(--pm-cloud);
  transform: translateY(-1px);
}
.btn-pm-outline {
  background: transparent;
  border: 1px solid var(--pm-pink);
  color: var(--pm-pink);
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.btn-pm-outline:hover,
.btn-pm-outline:focus-visible {
  background: var(--pm-gradient);
  border-color: transparent;
  color: var(--pm-cloud);
}
.btn-pm-white {
  background: var(--pm-cloud);
  color: var(--pm-pink);
  border: none;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-pm-white:hover,
.btn-pm-white:focus-visible {
  background: var(--pm-cloud);
  color: var(--pm-pink);
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18);
}
.btn-pm-ghost-white {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: 50rem;
  font-weight: 500;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-pm-ghost-white:hover,
.btn-pm-ghost-white:focus-visible {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.9);
  color: #fff;
  transform: translateY(-2px);
}
.btn-pm-primary, .btn-pm-outline, .btn-pm-white {
  border-radius: 50rem;
  padding: 1rem 2rem;
}

/* Sichtbarer Fokus-Ring für Tastaturbedienung (Quality-Floor) */
.btn-pm-primary:focus-visible,
.btn-pm-outline:focus-visible,
.btn-pm-white:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--pm-pink);
  outline-offset: 3px;
}

/* ---- Pills / Tags (Ehrlich, Fair, Transparent, bessere Vergütung …) ---- */
.pm-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(var(--pm-pink-rgb), .1);
  color: var(--pm-ink);
  border-radius: 50rem;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
.pm-tag img { width: 16px; height: 16px; flex: none; }

/* ---- Eyebrow-Pill (Für Marken & Unternehmen) ---- */
.pm-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.6);
  color: var(--pm-cloud);
  border-radius: 50rem;
  padding: .4rem 1rem;
  font-size: .95rem;
}
.pm-pill-outline .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pm-cloud);
}

/* ---- Navbar ---- */
.pm-navbar {
  background: transparent;
  border-radius: var(--pm-radius-card);
  box-shadow: none;
  border: 1px solid rgba(var(--pm-pink-rgb), .15);
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 1050;
  width: 90%;
  max-width: 1310px;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease, transform .4s ease, opacity .4s ease;
}
.pm-navbar.pm-nav-hidden {
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
  pointer-events: none;
}
.pm-navbar.pm-scrolled {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(var(--pm-pink-rgb), .35);
  backdrop-filter: blur(10px);
}
.pm-navbar .nav-link {
  color: var(--pm-ink);
  font-weight: 400;
  font-size: 1.125rem;
  padding: .5rem 1rem;
}
.pm-navbar .nav-link:hover { color: var(--pm-orange); }

/* ---- Hamburger Icon ---- */
.pm-hamburger { padding: .25rem; display: flex; align-items: center; justify-content: center; }
.pm-hamburger-box {
  width: 26px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pm-hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pm-pink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.23,1,.32,1), opacity .2s ease, width .35s ease;
}
/* Offen: X-Animation */
.pm-hamburger[aria-expanded="true"] .pm-hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.pm-hamburger[aria-expanded="true"] .pm-hamburger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.pm-hamburger[aria-expanded="true"] .pm-hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
.pm-logo-text { font-weight: 600; font-size: 1.25rem; color: var(--pm-ink); }
.pm-logo-text span { color: var(--pm-pink); }

/* ---- Sections: voller Anschlag, nur unten abgerundet ---- */
.pm-section-bone {
  background: var(--pm-bone);
  border-bottom-left-radius: var(--pm-radius-section);
  border-bottom-right-radius: var(--pm-radius-section);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: visible;
}
.pm-section-bone.pm-header-sm {
  min-height: 0;
}
.pm-section-bone > .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pm-section-red {
  background: var(--pm-gradient);
  position: relative;
  overflow: visible;
}
.pm-section-red.pm-rounded {
  border-top-left-radius: var(--pm-radius-section);
  border-top-right-radius: var(--pm-radius-section);
  border-bottom-left-radius: var(--pm-radius-section);
  border-bottom-right-radius: var(--pm-radius-section);
}

/* Dekorative Pfotenabdrücke im roten Band (reines CSS/SVG, keine Bilddatei) */
.pm-paw-deco {
  position: absolute;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

/* ---- Card ---- */
.pm-card {
  background: var(--pm-cloud);
  border-radius: var(--pm-radius-card);
  box-shadow: 0 1.5rem 3rem -0.5rem rgba(225,44,87,.2);
}

/* ---- Partner Brands Trust Section ---- */
.pm-partner-trust {
  background: #FAF8F6;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 992px) {
  .pm-partner-trust { padding-top: 8rem; padding-bottom: 8rem; }
}
.pm-brand-card {
  background: var(--pm-cloud);
  border: 1.5px solid var(--pm-fog);
  border-radius: var(--pm-radius-card);
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  transition: transform .25s ease, border-color .25s ease;
}
.pm-brand-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pm-pink-rgb), .4);
}
.pm-brand-card img {
  max-width: 100%;
}

/* ---- Tabs ("Warum Pfotenmedia") ---- */
.pm-tabs {
  border: 1px solid rgba(var(--pm-pink-rgb), .15);
  border-radius: 50rem;
  padding: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}
.pm-tabs .nav-link {
  border-radius: 50rem;
  color: var(--pm-subtle);
  font-weight: 500;
  font-size: 1.125rem;
  padding: .65rem 1.25rem;
  border: none;
  background: transparent;
  transition: color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.pm-tabs .nav-link:hover:not(.active) {
  color: var(--pm-pink);
  transform: translateY(-1px);
}
.pm-tabs .nav-link.active {
  background: var(--pm-gradient);
  color: var(--pm-cloud);
  box-shadow: 0 .5rem 1.25rem -0.25rem rgba(var(--pm-pink-rgb), .45);
}

/* Tab-Content: Einblend-Animation */
.tab-content > .tab-pane.fade {
  transition: opacity .35s ease, transform .35s ease;
  transform: translateY(10px);
}
.tab-content > .tab-pane.fade.show {
  transform: translateY(0);
}

.tab-pane .pm-h2 {
  font-size: 1.75rem;
}

/* ---- Bild-Platzhalter -----------------------------------------------
   Konvention: <img src="img/<name>.jpg" onerror="this.remove()">
   in einer .pm-ph-Box. Fehlt die Datei (404), verschwindet das <img> und
   das Label bleibt sichtbar. Sobald eine echte Datei unter exakt diesem
   Pfad liegt, wird sie automatisch angezeigt – kein Code-Eingriff nötig.
   ----------------------------------------------------------------------*/
.pm-ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--pm-sand), var(--pm-fog));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pm-ph img {
  inset: 0;
  height: 100%;
  width: 100%;
}

.pm-ph-dark { background: linear-gradient(160deg, #d8d2cc, #b9b2aa); }

/* ---- Hero-Bildkomposition ---- */
.pm-hero-images {
  position: relative;
  padding-bottom: 5rem;
  padding-left: 2.5rem;
}
.pm-hero-img-main {
  border-radius: var(--pm-radius-card);
  aspect-ratio: 1 / 1;
  width: 85%;
  margin-left: auto;
  margin-top: 7rem;
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(var(--pm-pink-rgb), .30);
}
.pm-hero-img-secondary {
  border-radius: var(--pm-radius-card);
  aspect-ratio: 1 / 1;
  width: 55%;
  max-width: 320px;
  position: absolute;
  left: -8%;
  top: 68%;
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(var(--pm-pink-rgb), .30);
  z-index: 2;
}
.pm-paw-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}


/* ---- Wachstums-Illustration (reines CSS, Tab "Mehr Einnahmen") ---- */
.pm-chart {
  position: relative;
  background: var(--pm-fog);
  border-radius: var(--pm-radius-card);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .9rem;
  padding: 2.5rem 2rem 2rem;
  overflow: visible;
}
.pm-chart-bar {
  width: 14%;
  border-radius: .5rem .5rem 0 0;
  background: var(--pm-gradient);
}
.pm-chart-icon {
  position: absolute;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--pm-cloud);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1rem 2rem -0.75rem rgba(0,0,0,.3);
  font-size: 1.25rem;
  color: var(--pm-pink);
}

/* ---- Partner-Logo-Leiste ---- */
.pm-logo-strip {
  margin-top: -4.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.pm-logo-slot {
  background: var(--pm-mute);
  border-radius: var(--pm-radius-sm);
  aspect-ratio: 3 / 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pm-stone);
  font-size: .95rem;
  font-weight: 500;
}

/* ---- Phone-Mockup (Brands-Sektion) ---- */
.pm-phone {
  background: #f0eeec;
  border: 3px solid #e2ddd9;
  border-radius: 2.5rem;
  padding: .5rem;
  max-width: 280px;
  margin-inline: auto;
  box-shadow: 0 2.5rem 5rem -2rem rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04);
  position: relative;
  margin-bottom: -10rem;
  z-index: 20;
}
.pm-phone-screen {
  border-radius: 2rem;
  aspect-ratio: 9 / 18.5;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--pm-sand), #c98f78);
}
.pm-phone-notch {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 1.1rem;
  background: var(--pm-ink);
  border-radius: 1rem;
  z-index: 2;
}
.pm-phone-icon {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  opacity: .95;
  z-index: 3;
}

/* ---- Petfluencer-Karten ---- */
.pm-pf-card {
  border-radius: var(--pm-radius-card);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}
.pm-pf-card .pm-ph { width: 100%; height: 100%; }
.pm-pf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
  z-index: 1;
}
.pm-pf-meta {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  color: var(--pm-cloud);
}
.pm-pf-meta h3 {
  font-size: 1.5rem;
  margin: 0;
}
.pm-pf-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pm-cloud);
  flex: none;
}
.pm-pf-social {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}
.pm-pf-social .pm-social {
  width: 3rem;
  height: 3rem;
}
.pm-pf-social .pm-social img {
  width: 100%;
  height: 100%;
}
.pm-pf-cta {
  border-radius: var(--pm-radius-card);
  background: var(--pm-gradient);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--pm-cloud);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.pm-pf-cta .pm-h2 {
  font-size: 1.75rem;
}

/* ---- Kontaktformular ---- */
.pm-form-control {
  border: 1px solid var(--pm-fog);
  border-radius: .75rem;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: var(--pm-cloud);
}
.pm-form-control:focus {
  border-color: var(--pm-pink);
  box-shadow: 0 0 0 .2rem rgba(var(--pm-pink-rgb), .15);
}
.pm-form-label {
  font-size: .9rem;
  color: var(--pm-subtle);
  margin-bottom: .35rem;
}
.btn-check:checked + .pm-toggle-label {
  background: var(--pm-gradient);
  color: var(--pm-cloud);
  border-color: transparent;
}
.pm-toggle-label {
  border-radius: 50rem;
  border: 1.5px solid var(--pm-pink);
  color: var(--pm-pink);
  padding: .5rem 1.25rem;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* ---- Footer ---- */
.pm-footer {
  padding: 3rem 0 2rem;
  color: var(--pm-cloud);
}
.pm-footer a {
  color: var(--pm-cloud);
  text-decoration: none;
  opacity: .9;
}
.pm-footer a:hover { opacity: 1; text-decoration: underline; }
.pm-footer hr { border-color: rgba(255,255,255,.25); opacity: 1; }
.pm-footer p, .pm-footer span, .pm-footer li {
  color: var(--pm-cloud);
}
.pm-social {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--pm-cloud);
  color: var(--pm-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.pm-social:hover { transform: translateY(-2px); opacity: 1; }

/* ---- Motion: Scroll Reveal ---- */
.pm-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}
.pm-reveal.pm-visible {
  opacity: 1;
  transform: none;
}
.pm-reveal[data-delay="1"] { transition-delay: .12s; }
.pm-reveal[data-delay="2"] { transition-delay: .24s; }
.pm-reveal[data-delay="3"] { transition-delay: .36s; }
.pm-reveal[data-delay="4"] { transition-delay: .48s; }

/* ---- Reduced Motion (Quality-Floor) ---- */
@media (prefers-reduced-motion: reduce) {
  .btn-pm-primary, .pm-social, .pm-toggle-label { transition: none; }
  .btn-pm-primary:hover, .pm-social:hover { transform: none; }
  .pm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Responsive Feinschliff ---- */
@media (min-width: 992px) {
  #petfluencer { padding-top: 14rem !important; }
}
/* ---- Mobile Akkordeon (Warum Pfotenmedia) ---- */
.pm-accordion .accordion-item {
  border: 1px solid rgba(var(--pm-pink-rgb), .15);
  border-radius: var(--pm-radius-sm) !important;
  margin-bottom: .5rem;
  overflow: hidden;
}
.pm-accordion .accordion-button {
  background: var(--pm-bone);
  color: var(--pm-ink);
  font-weight: 500;
  font-size: 1rem;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
  border-radius: var(--pm-radius-sm) !important;
}
.pm-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(45deg, rgba(225,44,87,.08), rgba(244,80,60,.06));
  color: var(--pm-pink);
  border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0 !important;
}
.pm-accordion .accordion-body {
  padding: 1.25rem;
  text-align: left;
  background: var(--pm-cloud);
}
.pm-accordion .accordion-body .pm-h2 { font-size: 1.3rem; }

@media (max-width: 991.98px) {
  .pm-hero-images { margin-top: 0rem; padding-left: 1.5rem; }
  .pm-logo-strip { margin-bottom: -3rem; }
  .pm-phone { margin-bottom: 2rem !important; }
  .pm-hero-text-col { margin-top: 2.5rem !important; }

  /* Navbar immer sichtbar auf Mobile */
  .pm-navbar.pm-nav-hidden {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Navbar: Dropdown absolut positioniert */
  .pm-navbar {
    width: calc(100% - 2rem);
    z-index: 1050;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .pm-navbar .navbar-collapse {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--pm-radius-sm);
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.12);
    border: 1px solid rgba(var(--pm-pink-rgb),.12);
    z-index: 1050;
  }
  .pm-navbar .navbar-nav .nav-link {
    padding: .65rem .5rem;
    border-bottom: 1px solid rgba(var(--pm-pink-rgb),.08);
    font-size: 1rem;
  }
  .pm-navbar .btn-pm-primary {
    min-width: auto !important;
    width: 100%;
    margin-top: .75rem;
    text-align: center;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
  .pm-hero-text-col { margin-top: 7.5rem !important; }
  .pm-hero-intro { font-size: 1.15rem !important; }
  .pm-hero-tags { margin-top: 1.5rem !important; }
  .pm-hero-tags .pm-tag { font-size: 1.15rem !important; }
}

@media (max-width: 767.98px) {
  .pm-logo-strip { margin-bottom: -2rem; }
  .pm-section-bone, .pm-section-red.pm-rounded { border-bottom-left-radius: 1.75rem; border-bottom-right-radius: 1.75rem; }

  /* Typografie */
  h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  h2, .pm-h2 { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* Hero */
  .pm-hero-text-col { margin-top: 7.5rem !important; }
  .pm-hero-img-col { margin-top: 0 !important; }
  header .row { --bs-gutter-y: 0 !important; }
  .pm-hero-intro { font-size: 1rem !important; }
  .pm-hero-tags { margin-top: 1.25rem !important; }
  .pm-hero-tags .pm-tag { font-size: 1rem !important; }

  /* Buttons */
  .btn-pm-primary { min-width: auto !important; }
  .pm-tag { white-space: normal; }

  /* Akkordeon */
  .pm-accordion .accordion-button { font-size: 1.125rem; color: var(--pm-pink); font-weight: 400; }
  .pm-accordion .accordion-button:not(.collapsed) { color: var(--pm-pink); }
  .pm-accordion .accordion-body .pm-eyebrow { display: none !important; }

  /* Hero-Bilder: Container kleiner, Bilder weiter oben */
  .pm-hero-images { padding-bottom: 2rem; padding-left: 1rem; }
  .pm-hero-img-main { margin-top: 1.5rem; }

  /* Marken & Kontakt: alles zentriert */
  #brands .col-lg-7,
  #kontakt .col-lg-5 { text-align: center; }
  #brands .col-lg-7 .d-flex { justify-content: center; }
  #kontakt .col-lg-5 .d-flex { align-items: center !important; }

  /* Marken & Kontakt: mehr horizontales Padding */
  #brands .container,
  #kontakt .container { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }

  /* Footer mobile: alles zentriert */
  .pm-footer .footer-nav { justify-content: center !important; }
  .pm-footer .footer-social { justify-content: center !important; }
  .pm-footer .footer-bottom-row > * { text-align: center !important; justify-content: center !important; }
}

/* ---- Custom Cursor: Pfote ---- */
a, button, .btn, [role="button"], label, input[type="submit"], input[type="button"], input[type="radio"] + label, .pm-toggle-label, .nav-link,
[type=submit]:not(:disabled), [type=button]:not(:disabled), button:not(:disabled) {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 413 343' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M323.486 243.812C319.262 255.839 310.984 266.047 300.594 273.693L206.532 343L112.471 273.693C102.081 266.047 93.8024 255.797 89.5787 243.812C72.3038 194.466 123.157 137.516 179.585 162.396C180.895 162.974 182.204 163.594 183.471 164.255L206.532 175.91L229.594 164.255C230.903 163.594 232.17 162.974 233.479 162.396C289.908 137.557 340.761 194.466 323.486 243.812ZM20.3526 86.1863C2.73987 91.5176 -4.90498 116.852 3.28895 142.723C11.4829 168.595 32.4323 185.25 50.0451 179.877C67.6578 174.546 75.3027 149.212 67.1087 123.34C58.9148 97.4689 37.9653 80.8136 20.3526 86.1863ZM396.471 88.0874C379.576 80.8549 356.853 95.1132 345.745 119.91C334.636 144.748 339.367 170.703 356.262 177.976C373.156 185.209 395.88 170.951 406.988 146.154C418.096 121.315 413.366 95.3612 396.471 88.0874ZM253.795 121.398C276.519 126.068 300.72 102.759 307.858 69.407C314.996 36.0551 302.325 5.22426 279.602 0.595492C256.879 -4.0746 232.677 19.2345 225.539 52.5864C218.401 85.9383 231.072 116.769 253.795 121.398ZM159.185 121.398C181.908 116.728 194.579 85.9383 187.441 52.5864C180.303 19.2345 156.102 -4.03327 133.378 0.595492C110.655 5.26558 97.9838 36.0551 105.122 69.407C112.26 102.759 136.462 126.027 159.185 121.398Z' fill='%23111111'/%3E%3C/svg%3E") 12 12, pointer;
}