/*!
 * D&J Mitarbeiterseiten - Sektions-Styles
 *
 * Erzeugt aus source/lea-pelz-hero.html von build/scope_css.py.
 * Nicht von Hand aendern: bei Aenderungen am Entwurf neu generieren.
 *
 * Alle Selektoren sind unter #dj-ma gescopet, damit Theme- und
 * Elementor-Regeln nicht hineinregieren und umgekehrt nichts aus der Seite
 * nach aussen wirkt.
 */

/* ============ SCOPE-RESET ============
   Der Entwurf lief auf einer nackten Seite und hat sich auf die
   Browser-Defaults verlassen. hello-elementor und Elementor ueberschreiben
   genau diese Defaults, deshalb werden sie hier innerhalb der Sektion
   wiederhergestellt. Alles darunter ist unveraenderter Entwurfs-Code. */
#dj-ma h1,
#dj-ma h2,
#dj-ma h3,
#dj-ma h4,
#dj-ma h5,
#dj-ma h6 {
  font-family: inherit;
  font-weight: bold;
  font-style: normal;
  line-height: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
}
#dj-ma h1 { font-size: 2em; }
#dj-ma h2 { font-size: 1.5em; }
#dj-ma h3 { font-size: 1.17em; }
#dj-ma p {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: normal;
}
#dj-ma a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  background: none;
}
#dj-ma strong,
#dj-ma b { font-weight: 700; }
#dj-ma em,
#dj-ma i { font-style: italic; }
#dj-ma ul,
#dj-ma ol { list-style: none; }
#dj-ma img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* hello-elementor stellt figure und figcaption kursiv mit eigener Zeilenhoehe */
#dj-ma figure,
#dj-ma figcaption {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}
#dj-ma button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
  -webkit-appearance: none;
  appearance: none;
}
#dj-ma video {
  max-width: 100%;
}

/* ============ ENTWURF ============ */
#dj-ma {
  --orange: #F56700;
  --orange-dark: #B34A00;
  --orange-hover: #DA5C00;
  --orange-light: #FDEEDE;
  --warm-sand: #DFDCD9;
  --light-sand: #F5F3F0;
  --sand-warmer: #EBE7E1;
  --sand-border: #CBC8C4;
  --card-inner-border: #DFDCD9;
  --anthrazit: #1F1D1A;
  --text-muted: #5A5854;
  --text-soft: #7D7A75;
  --white: #FFFFFF;
  --whatsapp: #25D366;
  --whatsapp-hover: #1DB959;
  --font-head: "Inter Tight", sans-serif;
  --font-body: "Inter", sans-serif;
}
#dj-ma, #dj-ma *, #dj-ma *::before, #dj-ma *::after { margin: 0; padding: 0; box-sizing: border-box; }
#dj-ma ::selection { background: var(--orange-light); }
#dj-ma {
  font-family: var(--font-body);
  color: var(--anthrazit);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ---------- Hero ---------- */
#dj-ma .lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
#dj-ma .lp-hero__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 40px 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: 84px;
  row-gap: 52px;
  align-items: center;
}
/* ---------- Linke Spalte ---------- */
#dj-ma .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}
#dj-ma .lp-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
#dj-ma .lp-mobile-head { display: none; }
#dj-ma .lp-title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.027em;
  margin-bottom: 24px;
}
#dj-ma .lp-title em {
  font-style: italic;
  color: var(--orange);
}
#dj-ma .lp-intro {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 30em;
  margin-bottom: 24px;
  text-wrap: balance;
}
/* Typografie: ausgewogene Umbrüche, keine Einzelwörter in der letzten Zeile */
#dj-ma .lp-title,
#dj-ma .lp-objects__title,
#dj-ma .lp-method__title {
  text-wrap: balance;
}
#dj-ma .lp-objects__sub,
#dj-ma .lp-method__lead,
#dj-ma .lp-step__text {
  text-wrap: pretty;
}
/* ---------- Sprachen ---------- */
#dj-ma .lp-langs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
#dj-ma .lp-langs svg { flex: none; }
#dj-ma .lp-lang-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--light-sand);
  border: 1px solid var(--sand-border);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--anthrazit);
}
/* ---------- Aktionen ---------- */
#dj-ma .lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#dj-ma .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#dj-ma .lp-btn svg { flex: none; }
#dj-ma .lp-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
#dj-ma .lp-btn--primary {
  background: var(--orange);
  color: var(--white);
}
#dj-ma .lp-btn--primary:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 103, 0, 0.28);
}
#dj-ma .lp-btn--whatsapp {
  background: var(--whatsapp);
  color: var(--white);
}
#dj-ma .lp-btn--whatsapp:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32);
}
#dj-ma .lp-btn--secondary {
  background: var(--white);
  color: var(--anthrazit);
  border-color: var(--sand-border);
}
#dj-ma .lp-btn--secondary:hover {
  border-color: var(--text-soft);
  background: #FAF9F7;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 29, 26, 0.08);
}
/* ---------- Porträt ---------- */
#dj-ma .lp-portrait {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--sand-border);
  background: var(--light-sand);
  aspect-ratio: 4 / 5;
}
#dj-ma .lp-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* ---------- Kontaktleiste (volle Breite) ---------- */
#dj-ma .lp-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.2fr);
  background: var(--light-sand);
  border: 1px solid var(--sand-border);
  border-radius: 20px;
  overflow: hidden;
}
#dj-ma .lp-seg {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 24px;
  text-decoration: none;
  color: var(--anthrazit);
  border-left: 1px solid var(--card-inner-border);
  transition: background 0.15s ease;
}
#dj-ma .lp-seg:first-child { border-left: none; }
#dj-ma .lp-seg:hover { background: var(--sand-warmer); }
#dj-ma .lp-seg:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}
#dj-ma .lp-seg svg { flex: none; }
#dj-ma .lp-seg__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 3px;
}
#dj-ma .lp-seg__value {
  display: block;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}
/* ---------- Reveal-Animation ---------- */
@media (prefers-reduced-motion: no-preference) {
#dj-ma .lp-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: djMaReveal 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
#dj-ma .lp-d1 { animation-delay: 0.05s; }
#dj-ma .lp-d2 { animation-delay: 0.13s; }
#dj-ma .lp-d3 { animation-delay: 0.21s; }
#dj-ma .lp-d4 { animation-delay: 0.29s; }
#dj-ma .lp-d5 { animation-delay: 0.37s; }
@keyframes djMaReveal {
    to { opacity: 1; transform: translateY(0); }
  }
}
/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
#dj-ma .lp-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    column-gap: 48px;
    row-gap: 40px;
    padding: 56px 32px 72px;
  }
#dj-ma .lp-title { font-size: clamp(2.6rem, 5.2vw, 3.6rem); }
#dj-ma .lp-intro { font-size: 1.12rem; }
#dj-ma .lp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dj-ma .lp-seg { padding: 14px 20px; }
#dj-ma .lp-seg:nth-child(odd) { border-left: none; }
#dj-ma .lp-seg:nth-child(n+3) { border-top: 1px solid var(--card-inner-border); }
}
/* ---------- Mobil ---------- */
@media (max-width: 719px) {
#dj-ma .lp-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding: 32px 20px 48px;
  }
#dj-ma .lp-eyebrow { margin-bottom: 18px; }
/* Kopfzeile mit Avatar: Gesicht sofort sichtbar, ohne Scrollen */
#dj-ma .lp-mobile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
  }
#dj-ma .lp-mobile-head img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--white);
    outline: 1px solid var(--sand-border);
    box-shadow: 0 8px 20px rgba(31, 29, 26, 0.12);
    flex: none;
  }
#dj-ma .lp-title { font-size: 2.2rem; margin-bottom: 0; }
#dj-ma .lp-title--desktop { display: none; }
#dj-ma .lp-intro {
    font-size: 1.02rem;
    margin-bottom: 20px;
  }
#dj-ma .lp-langs { margin-bottom: 22px; }
#dj-ma .lp-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
#dj-ma .lp-btn { min-height: 52px; font-size: 0.94rem; padding: 12px 16px; }
#dj-ma .lp-btn--secondary { grid-column: 1 / -1; }
/* Reihenfolge: Inhalt, Kontaktleiste, großes Porträt */
#dj-ma .lp-bar { order: 2; grid-template-columns: 1fr; }
#dj-ma .lp-media { order: 3; }
#dj-ma .lp-seg { padding: 12px 16px; border-left: none; }
#dj-ma .lp-seg:nth-child(n+2) { border-top: 1px solid var(--card-inner-border); }
#dj-ma .lp-portrait { aspect-ratio: 4 / 4.4; }
}
/* Fallback für sehr schmale Screens: lieber umbrechen als abschneiden */
@media (max-width: 379px) {
#dj-ma .lp-seg__value { white-space: normal; overflow-wrap: anywhere; }
}
/* ==================== Objekte-Sektion ==================== */
#dj-ma .lp-objects {
  background: var(--light-sand);
  border-top: 1px solid var(--card-inner-border);
}
#dj-ma .lp-objects__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 40px 84px;
}
#dj-ma .lp-objects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}
#dj-ma .lp-objects__title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
#dj-ma .lp-objects__title em {
  font-style: italic;
  color: var(--orange);
}
#dj-ma .lp-objects__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34em;
}
#dj-ma .lp-objects__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--anthrazit);
  text-decoration: none;
  padding-bottom: 6px;
  transition: color 0.15s ease, gap 0.15s ease;
}
#dj-ma .lp-objects__all svg { flex: none; transition: transform 0.15s ease; }
#dj-ma .lp-objects__all:hover { color: var(--orange-dark); }
#dj-ma .lp-objects__all:hover svg { transform: translateX(3px); }
#dj-ma .lp-objects__all--mobile { display: none; }
#dj-ma .lp-objects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* ---------- Objekt-Card ---------- */
#dj-ma .lp-obj {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--anthrazit);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#dj-ma .lp-obj:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31, 29, 26, 0.12);
}
#dj-ma .lp-obj:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
#dj-ma .lp-obj__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand-warmer);
}
#dj-ma .lp-obj__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
#dj-ma .lp-obj:hover .lp-obj__media img { transform: scale(1.04); }
#dj-ma .lp-obj__loc {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(31, 29, 26, 0.78);
  color: var(--white);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
}
#dj-ma .lp-obj__loc svg { flex: none; }
#dj-ma .lp-obj__body {
  padding: 22px 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#dj-ma .lp-obj__type {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 9px;
}
/* Clamp-Element ohne eigenes Padding/Border: sonst scheint die
   abgeschnittene dritte Zeile im Padding-Bereich durch */
#dj-ma .lp-obj__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
  min-height: 2.64em;
  max-height: 2.64em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}
#dj-ma .lp-obj__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--anthrazit);
  padding: 15px 0 17px;
}
#dj-ma .lp-obj__stat {
  padding-left: 16px;
  border-left: 1px solid var(--card-inner-border);
}
#dj-ma .lp-obj__stat:first-child {
  padding-left: 0;
  border-left: none;
}
#dj-ma .lp-obj__stat-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
#dj-ma .lp-obj__stat-value {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
}
#dj-ma .lp-obj__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--light-sand);
  border-top: 1px solid var(--card-inner-border);
  padding: 14px 22px;
}
#dj-ma .lp-obj__price-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 3px;
}
#dj-ma .lp-obj__price {
  display: block;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#dj-ma .lp-obj__go {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 50%;
  color: var(--anthrazit);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#dj-ma .lp-obj:hover .lp-obj__go {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
/* Vermerk unter dem Grid: es gibt mehr Objekte als die drei gezeigten */
#dj-ma .lp-objects__more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
#dj-ma .lp-objects__more-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}
#dj-ma .lp-objects__more-pill svg { flex: none; }
#dj-ma .lp-objects__more-pill strong {
  font-weight: 700;
  color: var(--anthrazit);
}
/* Scroll-Reveal der Sektion (nur wenn JS läuft, sonst bleibt alles sichtbar) */
@media (prefers-reduced-motion: no-preference) {
.js #dj-ma .lp-fadein {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
.js #dj-ma .lp-fadein.is-in {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1023px) {
#dj-ma .lp-objects__inner { padding: 56px 32px 64px; }
#dj-ma .lp-objects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
#dj-ma .lp-objects__inner { padding: 44px 20px 52px; }
#dj-ma .lp-objects__head {
    display: block;
    margin-bottom: 26px;
  }
#dj-ma .lp-objects__all--top { display: none; }
#dj-ma .lp-objects__all--mobile {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    min-height: 54px;
    background: var(--white);
    border: 1px solid var(--sand-border);
    border-radius: 999px;
    padding: 14px 22px;
  }
#dj-ma .lp-objects__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* ==================== Wie-ich-arbeite-Sektion ==================== */
#dj-ma .lp-method {
  background: var(--white);
}
#dj-ma .lp-method__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 40px 92px;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  column-gap: 84px;
  row-gap: 36px;
  align-items: start;
}
#dj-ma .lp-method__media {
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 400px;
}
#dj-ma .lp-video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--sand-border);
  background: var(--sand-warmer);
}
#dj-ma .lp-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#dj-ma .lp-video__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(31, 29, 26, 0) 55%, rgba(31, 29, 26, 0.5) 100%);
  transition: background 0.2s ease;
}
#dj-ma .lp-video__play {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 14px 36px rgba(31, 29, 26, 0.3);
  transition: transform 0.18s ease, background 0.18s ease;
}
#dj-ma .lp-video__cover:hover .lp-video__play {
  transform: scale(1.07);
  background: var(--orange-hover);
}
#dj-ma .lp-video__cover:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}
#dj-ma .lp-video__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--white);
}
#dj-ma .lp-method__eyebrow-wrap { margin-bottom: 16px; }
#dj-ma .lp-method__title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 15em;
}
#dj-ma .lp-method__title em {
  font-style: italic;
  color: var(--orange);
}
#dj-ma .lp-method__lead {
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 33em;
}
/* ---------- Schritte ---------- */
#dj-ma .lp-steps {
  display: flex;
  flex-direction: column;
}
#dj-ma .lp-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 26px;
}
#dj-ma .lp-step:last-child { padding-bottom: 0; }
/* verbindende Linie zwischen den Nummern */
#dj-ma .lp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 4px;
  width: 1px;
  background: var(--card-inner-border);
}
#dj-ma .lp-step__num {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
}
#dj-ma .lp-step__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
  margin-bottom: 5px;
  padding-top: 5px;
}
#dj-ma .lp-step__text {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 34em;
}
@media (max-width: 1023px) {
#dj-ma .lp-method__inner {
    padding: 60px 32px 68px;
    column-gap: 44px;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
#dj-ma .lp-method__media { max-width: 340px; }
}
@media (max-width: 719px) {
#dj-ma .lp-method__inner {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 44px 20px 52px;
  }
#dj-ma .lp-method__media {
    grid-row: auto;
    order: 2;
    max-width: 420px;
  }
#dj-ma .lp-method__head { order: 1; }
#dj-ma .lp-method__steps { order: 3; }
#dj-ma .lp-video__play { width: 64px; height: 64px; }
}
/* ==================== Proof-Sektion: Referenzen & Kundenstimmen ==================== */
#dj-ma .lp-proof {
  background: var(--light-sand);
  border-top: 1px solid var(--card-inner-border);
}
#dj-ma .lp-proof__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 40px 84px;
}
#dj-ma .lp-proof__head {
  max-width: 44em;
  margin-bottom: 40px;
}
#dj-ma .lp-proof__title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  text-wrap: balance;
}
#dj-ma .lp-proof__title em {
  font-style: italic;
  color: var(--orange);
}
#dj-ma .lp-proof__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 38em;
  text-wrap: pretty;
}
/* ---------- Featured Deal ---------- */
#dj-ma .lp-deal {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}
#dj-ma .lp-deal__media {
  position: relative;
  min-height: 420px;
}
/* ---------- Bildwechsel (Notartisch/Objekt) ---------- */
#dj-ma .lp-flip {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
#dj-ma .lp-flip__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#dj-ma .lp-flip__img.is-on {
  opacity: 1;
  transform: scale(1);
}
#dj-ma .lp-flip__img--people { object-position: center 30%; }
#dj-ma .lp-flip:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
#dj-ma .lp-flip__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--anthrazit);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  pointer-events: none;
}
#dj-ma .lp-flip__dots {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  pointer-events: none;
}
#dj-ma .lp-flip__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease;
}
#dj-ma .lp-flip__dots i.is-a { background: var(--white); }
/* "Just sold!" als Zusatz hinter dem Titel */
#dj-ma .lp-deal__sold {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 0.78em;
  color: var(--orange);
  white-space: nowrap;
  vertical-align: 2px;
}
#dj-ma .lp-deal__sold-check {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: var(--white);
  flex: none;
}
#dj-ma .lp-deal__body {
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#dj-ma .lp-deal__eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
#dj-ma .lp-deal__title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
#dj-ma .lp-deal__meta {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}
#dj-ma .lp-deal__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin-bottom: 22px;
}
#dj-ma .lp-deal__stat {
  border-top: 1px solid var(--card-inner-border);
  padding: 12px 2px 14px;
}
#dj-ma .lp-deal__stat-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
#dj-ma .lp-deal__stat-value {
  display: block;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
#dj-ma .lp-deal__stat-value--hero {
  color: var(--orange);
  font-size: 1.9rem;
}
#dj-ma .lp-deal__story {
  background: var(--orange-light);
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--anthrazit);
  text-wrap: pretty;
}
#dj-ma .lp-deal__story strong { font-weight: 700; }
/* ---------- Mini-Deals ---------- */
#dj-ma .lp-minideals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
#dj-ma .lp-minideal {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 20px;
  padding: 20px;
}
#dj-ma .lp-minideal__thumb {
  flex: none;
  width: 104px;
  height: 118px;
  border-radius: 14px;
}
#dj-ma .lp-minideal__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.04rem;
  margin-bottom: 6px;
}
#dj-ma .lp-minideal__text {
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-wrap: pretty;
}
#dj-ma .lp-minideal__stats {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--anthrazit);
}
#dj-ma .lp-minideal__stats span { color: var(--sand-border); padding: 0 7px; }
/* ---------- Kundenstimmen ---------- */
#dj-ma .lp-proof__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
#dj-ma .lp-proof__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
#dj-ma .lp-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
#dj-ma .lp-review {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 20px;
  padding: 26px 26px 22px;
}
#dj-ma .lp-review__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#dj-ma .lp-review__stars {
  display: flex;
  gap: 3px;
}
#dj-ma .lp-review__quote {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--anthrazit);
  margin-bottom: 20px;
  text-wrap: pretty;
  flex: 1;
}
#dj-ma .lp-review__person {
  display: flex;
  align-items: center;
  gap: 12px;
}
#dj-ma .lp-review__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--orange-light);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--orange-dark);
}
#dj-ma .lp-review__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
}
#dj-ma .lp-review__meta {
  font-size: 0.8rem;
  color: var(--text-soft);
}
/* ---------- Google-Anker ---------- */
#dj-ma .lp-proof__google {
  display: flex;
  justify-content: center;
}
#dj-ma .lp-google-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 999px;
  padding: 12px 24px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#dj-ma .lp-google-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 29, 26, 0.1);
}
#dj-ma .lp-google-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
#dj-ma .lp-google-card > svg { flex: none; }
#dj-ma .lp-google-card__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--anthrazit);
}
#dj-ma .lp-google-card__score span { display: flex; gap: 2px; }
#dj-ma .lp-google-card__count {
  font-size: 0.86rem;
  color: var(--text-soft);
  border-left: 1px solid var(--card-inner-border);
  padding-left: 14px;
}
#dj-ma .lp-google-card__count strong {
  font-weight: 600;
  color: var(--anthrazit);
}
@media (max-width: 1023px) {
#dj-ma .lp-proof__inner { padding: 56px 32px 64px; }
#dj-ma .lp-deal { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
#dj-ma .lp-deal__body { padding: 26px 28px; }
#dj-ma .lp-minideals { grid-template-columns: 1fr; }
#dj-ma .lp-reviews { grid-template-columns: 1fr; }
#dj-ma .lp-review__quote { margin-bottom: 16px; }
}
@media (max-width: 719px) {
#dj-ma .lp-proof__inner { padding: 44px 20px 52px; }
#dj-ma .lp-proof__head { margin-bottom: 26px; }
#dj-ma .lp-deal { grid-template-columns: 1fr; }
#dj-ma .lp-deal__media { min-height: 0; aspect-ratio: 4 / 3; }
#dj-ma .lp-deal__body { padding: 22px 20px; }
#dj-ma .lp-deal__stats { column-gap: 18px; }
#dj-ma .lp-deal__stat-value { font-size: 1.15rem; }
#dj-ma .lp-deal__stat-value--hero { font-size: 1.6rem; }
#dj-ma .lp-minideals { margin-bottom: 44px; gap: 14px; }
#dj-ma .lp-minideal { padding: 16px; gap: 14px; }
#dj-ma .lp-minideal__thumb { width: 84px; height: 100px; }
#dj-ma .lp-reviews { gap: 14px; margin-bottom: 30px; }
#dj-ma .lp-review { padding: 20px 20px 18px; }
#dj-ma .lp-google-card {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
    padding: 12px 18px;
    gap: 10px;
  }
#dj-ma .lp-google-card__count { border-left: none; padding-left: 0; }
}
/* ==================== Abschluss-CTA ==================== */
#dj-ma .lp-cta {
  background: var(--white);
}
#dj-ma .lp-cta__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 40px 100px;
}
#dj-ma .lp-cta__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange), #FF8A3D);
  border-radius: 32px;
  padding: 68px 60px;
  color: var(--white);
}
#dj-ma .lp-cta__card::after {
  content: "&";
  position: absolute;
  right: -26px;
  bottom: -110px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 700;
  font-size: 360px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}
#dj-ma .lp-cta__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
#dj-ma .lp-cta__eyebrow {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 18px;
}
#dj-ma .lp-cta__title {
  font-family: var(--font-head);
  font-weight: 750;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}
#dj-ma .lp-cta__text {
  font-size: 1.08rem;
  line-height: 1.65;
  opacity: 0.96;
  margin-bottom: 34px;
  text-wrap: pretty;
}
#dj-ma .lp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
#dj-ma .lp-cta__btn-main {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--white);
  color: var(--anthrazit);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(31, 29, 26, 0.5);
  transition: transform 0.2s ease;
}
#dj-ma .lp-cta__btn-main:hover { transform: translateY(-3px); }
#dj-ma .lp-cta__btn-main svg { flex: none; }
#dj-ma .lp-cta__btn-alt {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 16px 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
#dj-ma .lp-cta__btn-alt:hover { background: rgba(255, 255, 255, 0.16); }
#dj-ma .lp-cta__btn-main:focus-visible,
#dj-ma .lp-cta__btn-alt:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
#dj-ma .lp-cta__micro {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  font-size: 0.84rem;
  opacity: 0.85;
}
@media (max-width: 1023px) {
#dj-ma .lp-cta__inner { padding: 60px 32px 76px; }
#dj-ma .lp-cta__card { padding: 52px 44px; }
}
@media (max-width: 719px) {
#dj-ma .lp-cta__inner { padding: 44px 20px 56px; }
#dj-ma .lp-cta__card { padding: 40px 24px; border-radius: 24px; }
#dj-ma .lp-cta__card::after { font-size: 240px; right: -20px; bottom: -70px; }
#dj-ma .lp-cta__buttons { flex-direction: column; align-items: stretch; }
#dj-ma .lp-cta__btn-main,
#dj-ma .lp-cta__btn-alt { justify-content: center; text-align: center; }
}


/* ============ ERGAENZUNGEN DES PLUGINS ============ */

/* Kontaktmodul ueber dem Footer ausblenden.
   Diese Regeln stehen bewusst NICHT unter #dj-ma: sie greifen im Footer,
   also ausserhalb unserer Sektion. Der Body-Klassen-Praefix begrenzt sie
   trotzdem sauber auf Personenseiten, sonst waere das Modul ueberall weg.

   Zwei Wege, absichtlich:
   1. Ueber den Marker, den das Plugin anstelle des Moduls ausgibt. Damit
      verschwindet der umgebende Elementor-Container unabhaengig davon, wie
      er gerade heisst. Ein neu gebauter Footer bekommt eine neue ID, diese
      Regel ueberlebt das.
   2. Die konkrete ID als Rueckfall fuer Browser ohne :has() und fuer den
      Fall, dass das Modul einmal nicht ueber den Shortcode kommt. */
body.single-dj_mitarbeiter .e-con:has(> .e-con-inner .dj-ma-suppressed),
body.single-dj_mitarbeiter .e-con:has(.dj-ma-suppressed),
body.single-dj_mitarbeiter .elementor-element-c56b52f {
  display: none !important;
}

body.single-dj_mitarbeiter .dj-ma-suppressed {
  display: none !important;
}

/* Der Entwurf hatte an dieser Stelle eine tote Pille ("+4 weitere Objekte").
   Im Plugin ist daraus ein Button geworden, der die restlichen Objekte
   nachlaedt. Er sieht aus wie die Pille, verhaelt sich aber sichtbar
   anklickbar: Cursor, Hover, Fokusring und ein Chevron als Affordanz. */
#dj-ma .lp-objects__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--sand-border);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#dj-ma .lp-objects__more-btn svg { flex: none; }

#dj-ma .lp-objects__more-btn strong {
  font-weight: 700;
  color: var(--anthrazit);
}

#dj-ma .lp-objects__more-btn:hover {
  border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(31, 29, 26, 0.08);
  transform: translateY(-1px);
}

#dj-ma .lp-objects__more-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

#dj-ma .lp-objects__more-chevron {
  display: inline-flex;
  color: var(--text-soft);
  transition: transform 0.15s ease;
}

#dj-ma .lp-objects__more-btn:hover .lp-objects__more-chevron {
  transform: translateY(2px);
  color: var(--orange);
}

#dj-ma .lp-objects__more-btn.is-loading {
  cursor: progress;
  opacity: 0.75;
}

#dj-ma .lp-objects__more-btn.is-loading .lp-objects__more-chevron {
  animation: djMaSpin 0.9s linear infinite;
}

@keyframes djMaSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Vierte Karte und die zwei Zahlen im Button ----------
   Serverseitig stehen immer vier Karten im HTML. Auf dem Desktop ist die
   vierte versteckt, mobil ist sie sichtbar. Nach einem Klick auf den Button
   wird sie ueberall gezeigt, deshalb die Ausnahme ueber .is-open. */
#dj-ma .lp-obj--extra {
  display: none;
}

#dj-ma .lp-objects__grid.is-open .lp-obj--extra {
  display: flex;
}

/* Im Button steht die Desktop-Zahl und daneben die mobile. Sichtbar ist
   immer nur eine. Ohne das muesste JavaScript die Zahl nachtragen, und bis
   dahin stuende dort kurz die falsche. */
#dj-ma .lp-objects__more-mobil {
  display: none;
}

/* Objekt ohne Bild: gleiche Kachelgroesse wie eine Karte mit Foto, damit das
   Raster nicht springt. */
#dj-ma .lp-obj__img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  background: var(--light-sand);
  color: var(--text-soft);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

#dj-ma .lp-obj__img-empty span::before {
  content: "&";
  color: var(--orange);
  font-style: italic;
  margin: 0 2px;
}

/* ---------- Objekte mobil: zwei Karten pro Zeile ----------
   Einspaltig sind vier Objekte eine sehr lange Scrollstrecke. Zweispaltig
   ist eine Karte auf einem 375er Display nur noch rund 160 px breit, und
   damit passt der Innenaufbau der Desktop-Karte nicht mehr: drei Kennzahlen
   nebeneinander werden zu drei abgeschnittenen Spalten, der Kaufpreis
   sprengt die Zeile. Deshalb hier eine bewusst reduzierte Fassung derselben
   Karte statt einer verkleinerten Kopie. */
@media (max-width: 719px) {
  #dj-ma .lp-objects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #dj-ma .lp-obj--extra {
    display: flex;
  }

  #dj-ma .lp-obj__body {
    padding: 12px 12px 0;
  }

  #dj-ma .lp-obj__type {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
  }

  #dj-ma .lp-obj__title {
    font-size: 0.94rem;
    line-height: 1.25;
    margin-bottom: 10px;
    padding-bottom: 10px;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Zwei Kennzahlen statt drei. Zimmer und Wohnflaeche sind die beiden,
     nach denen tatsaechlich gesucht wird; Grundstueck und Baujahr stehen
     im Exposé. */
  #dj-ma .lp-obj__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 0 12px;
  }

  #dj-ma .lp-obj__stat:nth-child(3) {
    display: none;
  }

  #dj-ma .lp-obj__stat {
    padding-left: 10px;
  }

  #dj-ma .lp-obj__stat-label {
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    margin-bottom: 2px;
  }

  #dj-ma .lp-obj__stat-value {
    font-size: 0.86rem;
  }

  #dj-ma .lp-obj__foot {
    padding: 10px 12px;
    gap: 8px;
  }

  #dj-ma .lp-obj__price-label {
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    margin-bottom: 1px;
  }

  #dj-ma .lp-obj__price {
    font-size: 0.98rem;
  }

  #dj-ma .lp-obj__go {
    width: 32px;
    height: 32px;
  }

  #dj-ma .lp-obj__go svg {
    width: 14px;
    height: 14px;
  }

  #dj-ma .lp-obj__loc {
    font-size: 0.62rem;
    padding: 4px 9px;
    gap: 4px;
  }

  /* Im Button gilt mobil die andere Zahl */
  #dj-ma .lp-objects__more-desktop {
    display: none;
  }

  #dj-ma .lp-objects__more-mobil {
    display: inline;
  }

  /* Sind mobil schon alle Objekte zu sehen, faellt der Button hier weg,
     bleibt auf dem Desktop aber noetig. */
  #dj-ma .lp-objects__more--nur-desktop {
    display: none;
  }

  #dj-ma .lp-objects__more-btn {
    padding: 10px 16px;
    font-size: 0.82rem;
  }
}

/* Sehr schmale Geraete: zwei Spalten bleiben, aber die Kennzahlen
   untereinander, sonst stehen dort zwei abgeschnittene Woerter. */
@media (max-width: 359px) {
  #dj-ma .lp-obj__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #dj-ma .lp-obj__stat {
    padding-left: 0;
    border-left: none;
  }
}

/* Echte Google-Bewertungen sind unterschiedlich lang. Im Entwurf standen drei
   gleich lange Platzhalter. Ohne Begrenzung reisst die laengste Bewertung die
   ganze Reihe auf. Sechs Zeilen sind der Punkt, an dem auch lange Texte noch
   vollstaendig wirken. */
#dj-ma .lp-review__quote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Mobile Kopfzeile, nachgeschaerft am Geraet ----------
   Der Entwurf hatte oben einen kleinen runden Avatar und unten das grosse
   Portraet. Auf dem Handy sieht man zuerst den kleinen, und der war zu klein,
   um ein Gesicht zu transportieren. Deshalb: runder Avatar deutlich groesser,
   der Jobtitel rutscht unter den Namen statt darueber zu stehen, und das
   grosse Portraet bekommt mehr Abstand nach oben. */
@media (max-width: 719px) {
  /* Mobil steht der Kopf mittig, nach dem Vorbild der Ilyas-Seite:
     Bild und Name als zentrierte Gruppe, darunter Introtext und Sprachen
     ebenfalls zentriert. Auf dem Desktop bleibt alles linksbuendig. */
  #dj-ma .lp-mobile-head {
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
  }

  /* Die Bildgroesse waechst mit dem Geraet, statt fest zu stehen. Fest
     gesetzte 164px passten auf einem 375er Display gerade noch neben den
     Namen; bei einem laengeren Namen oder einem schmaleren Geraet waere die
     zentrierte Gruppe aus der Zeile gelaufen. */
  #dj-ma .lp-mobile-head img {
    width: clamp(132px, 40vw, 168px);
    height: clamp(132px, 40vw, 168px);
    border-width: 4px;
  }

  #dj-ma .lp-mobile-head > div {
    text-align: center;
  }

  #dj-ma .lp-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #dj-ma .lp-langs {
    justify-content: center;
  }

  /* Der Jobtitel steht im Markup als Eyebrow ueber dem Namen. Auf dem Handy
     wird die Kopie in der Kopfzeile gezeigt und das Original ausgeblendet,
     damit er unter dem Namen sitzt, wo ihn Artur haben will. */
  #dj-ma .lp-content > .lp-eyebrow {
    display: none;
  }

  #dj-ma .lp-mobile-head__role {
    margin-top: 6px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Auf dem Handy zeigt der runde Avatar oben die Person. Das grosse
     Portraet darunter war dieselbe Aufnahme ein zweites Mal und hat nur
     Scrollstrecke gekostet. Es faellt mobil ganz weg, auf dem Desktop
     bleibt es unveraendert. */
  #dj-ma .lp-media {
    display: none;
  }
}

/* Auf dem Desktop gibt es die Kopfzeile nicht, also auch ihre Kopie nicht. */
#dj-ma .lp-mobile-head__role {
  display: none;
}

@media (max-width: 719px) {
  #dj-ma .lp-mobile-head__role {
    display: block;
  }
}

/* Personen ohne Video.
   Der Entwurf ist zweispaltig gedacht: links das Reel, rechts der Text. Faellt
   das Video weg, bliebe die halbe Sektion leer. Die Spalte aufzuloesen reicht
   nicht, weil Lauftext und Schritte aus Lesbarkeitsgruenden eine begrenzte
   Zeilenlaenge behalten. Deshalb wird der Block als Ganzes zentriert und auf
   Lesebreite gehalten, statt ihn linksbuendig an einer leeren Flaeche kleben
   zu lassen. */
#dj-ma .lp-method--novideo .lp-method__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

#dj-ma .lp-method--novideo .lp-method__head,
#dj-ma .lp-method--novideo .lp-method__steps {
  grid-column: 1 / -1;
}

#dj-ma .lp-method--novideo .lp-method__lead,
#dj-ma .lp-method--novideo .lp-step__text {
  max-width: none;
}

/* ---------- Vorstellungsvideo im Hero ----------
   Manche Personen haben zwei Videos: eines, in dem sie sich vorstellen, und
   eines aus der Arbeit. Das zweite laeuft unten in "Wie ich arbeite", das
   erste gehoert nach oben. Als Pille oben links auf dem Portraet, weil auf
   den Studioaufnahmen dort die ruhigste Flaeche liegt: die Person sitzt
   rechts im Bild. Weiss mit Schlagschatten funktioniert auf jedem
   Hintergrund, unabhaengig davon, welche Wandfarbe hinter wem steht.

   Oben und nicht unten, obwohl unten typografisch schoener waere: das
   Portraet ist 4:5 hoch und reicht auf einem Notebook mit 720 px Hoehe unter
   den Sichtrand. Unten links stand die Pille damit halb im Anschnitt und
   ausserdem genau dort, wo der schwebende Bewertungs-Button sitzt. Oben ist
   sie im ersten Blick vollstaendig da.

   Mobil faellt das grosse Portraet ganz weg. Dort steht dieselbe Pille
   zentriert direkt unter dem Namen, also an der ersten Stelle, an der man
   ueberhaupt etwas ueber die Person liest. */
#dj-ma .lp-portrait {
  position: relative;
}

#dj-ma .lp-vidbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 26px rgba(31, 29, 26, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--anthrazit);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#dj-ma .lp-vidbtn__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  /* Ein Dreieck sitzt geometrisch mittig, wirkt aber nach links gerueckt */
  padding-left: 2px;
  transition: transform 0.15s ease;
}

#dj-ma .lp-vidbtn:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31, 29, 26, 0.24);
}

#dj-ma .lp-vidbtn:hover .lp-vidbtn__play {
  transform: scale(1.06);
}

#dj-ma .lp-vidbtn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

#dj-ma .lp-vidbtn--auf-foto {
  position: absolute;
  left: 16px;
  top: 16px;
}

#dj-ma .lp-vidbtn--mobil {
  display: none;
}

/* Auf dem Tablet ist das Portraet nur noch rund 270 px breit. Die Pille
   muesste dort sonst umbrechen und wuerde am Bildrand abgeschnitten. */
@media (max-width: 1023px) {
  #dj-ma .lp-vidbtn {
    gap: 8px;
    padding: 6px 15px 6px 6px;
    font-size: 0.8rem;
  }

  #dj-ma .lp-vidbtn__play {
    width: 28px;
    height: 28px;
  }

  #dj-ma .lp-vidbtn--auf-foto {
    left: 12px;
    top: 12px;
  }
}

/* Mobil steht die Pille nicht auf einem Foto, sondern auf Weiss. Der kraeftige
   Schlagschatten, der sie auf dem Bild abhebt, laesst sie hier schweben.
   Stattdessen dieselbe Hairline wie bei den Sprach-Pillen und dem
   E-Mail-Button. */
@media (max-width: 719px) {
  #dj-ma .lp-vidbtn--mobil {
    display: flex;
    width: fit-content;
    margin: 0 auto 22px;
    font-size: 0.86rem;
    padding: 7px 17px 7px 7px;
    border-color: var(--sand-border);
    box-shadow: 0 6px 16px rgba(31, 29, 26, 0.08);
  }

  #dj-ma .lp-vidbtn--mobil .lp-vidbtn__play {
    width: 31px;
    height: 31px;
  }
}

/* ---------- Das Overlay ----------
   Bewusst klein: es soll das Video zeigen, nicht die Seite ersetzen. Die
   Hoehe fuehrt, die Breite ergibt sich aus dem Seitenverhaeltnis, sonst
   waere ein Hochkantvideo bei fester Breite hoeher als der Bildschirm.

   dvh statt vh, weil auf dem Handy die Adressleiste mitzaehlt: mit vh sitzt
   der untere Rand des Videos unter der Leiste und man kommt an die
   Bedienelemente des Players nicht heran. */
html.dj-ma-modal-offen {
  overflow: hidden;
}

#dj-ma .lp-vidbox {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--white);
}

#dj-ma .lp-vidbox[open] {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 24px;
}

#dj-ma .lp-vidbox::backdrop {
  background: rgba(24, 22, 20, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Rueckfall fuer Browser ohne showModal: dort gibt es kein ::backdrop, der
   dunkle Grund muss am Element selbst haengen. */
#dj-ma .lp-vidbox.is-open {
  background: rgba(24, 22, 20, 0.82);
}

#dj-ma .lp-vidbox__inner {
  position: relative;
  aspect-ratio: var(--lp-vid-ratio, 9 / 16);
  height: min(78vh, 720px);
  height: min(78dvh, 720px);
  width: auto;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

#dj-ma .lp-vidbox__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#dj-ma .lp-vidbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(24, 22, 20, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

#dj-ma .lp-vidbox__close:hover {
  background: rgba(24, 22, 20, 0.85);
}

#dj-ma .lp-vidbox__close:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

@media (max-width: 719px) {
  #dj-ma .lp-vidbox[open] {
    padding: 14px;
  }

  #dj-ma .lp-vidbox__inner {
    height: min(76vh, 720px);
    height: min(76dvh, 720px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #dj-ma .lp-vidbox[open] .lp-vidbox__inner {
    animation: djMaVidIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @keyframes djMaVidIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
  }
}