/* perlach digital – Ergänzungen: Referenzen als horizontaler Slider
   Das aktive Projekt steht in der Mitte, links und rechts schauen das vorherige
   und das nächste Projekt abgedunkelt herein, damit man das Karussell erkennt. */
#referenzen { overflow: hidden; }
#referenzen .pd-carousel { position: relative; margin-top: clamp(28px, 3.5vw, 44px); --pd-item: min(1000px, 84vw); --pd-side: calc((100vw - var(--pd-item)) / 2); }
#referenzen .pd-carousel:has(.lp-refs) { --pd-item: min(440px, 80vw); }
#referenzen .v4-cases,
#referenzen .lp-refs {
  display: flex;
  grid-template-columns: none;
  gap: clamp(16px, 3vw, 48px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--pd-side) 6px;
  scroll-padding-inline: var(--pd-side);
  margin-top: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0, #000 var(--pd-side), #000 calc(100% - var(--pd-side)), rgba(0,0,0,.18) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0, #000 var(--pd-side), #000 calc(100% - var(--pd-side)), rgba(0,0,0,.18) 100%);
}
@media (max-width: 640px) {
  #referenzen .pd-carousel { --pd-item: 80vw; }
  #referenzen .pd-carousel:has(.lp-refs) { --pd-item: 78vw; }
}
#referenzen .v4-cases::-webkit-scrollbar,
#referenzen .lp-refs::-webkit-scrollbar { display: none; }
#referenzen .v4-cases > article,
#referenzen .lp-refs > .lp-ref {
  flex: 0 0 var(--pd-item);
  min-width: 0;
  scroll-snap-align: center;
  transition: opacity .35s ease, transform .35s ease;
}
#referenzen [data-pd-carousel].pd-ready > :not(.is-active) { opacity: 0.4; transform: scale(0.97); }
#referenzen [data-pd-carousel].pd-ready > :not(.is-active):hover { opacity: 0.6; }
#referenzen [data-pd-carousel] > :not(.is-active) { cursor: pointer; }
#referenzen [data-pd-carousel]:focus-visible { outline: 2px solid var(--pk-sage); outline-offset: 6px; border-radius: 12px; }
.pd-ref-btn {
  position: absolute; top: var(--pd-arrow-top, 50%); z-index: 3; transform: translate(-50%, -50%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}
.pd-ref-btn.pd-prev { left: calc(50% - 50vw + 52px); }
.pd-ref-btn.pd-next { left: calc(50% + 50vw - 52px); }
.pd-ref-btn { width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.85); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.lp-dark .pd-ref-btn { background: rgba(19, 42, 58, 0.7); border-color: rgba(255, 255, 255, 0.28); color: #ffffff; }
.pd-ref-btn:hover:not(:disabled) { background: #ffffff; border-color: var(--ink); color: var(--ink); }
.lp-dark .pd-ref-btn:hover:not(:disabled) { background: rgba(19, 42, 58, 0.92); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; }
.pd-ref-btn:disabled { opacity: 0.35; cursor: default; }
.pd-ref-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pd-ref-did { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-dark-2); }
@media (prefers-reduced-motion: reduce) {
  #referenzen .v4-cases > article, #referenzen .lp-refs > .lp-ref { transition: none; }
}
@media (max-width: 640px) {
  .pd-ref-btn { width: 40px; height: 40px; }
  .pd-ref-btn.pd-prev { left: calc(50% - 50vw + 22px); }
  .pd-ref-btn.pd-next { left: calc(50% + 50vw - 22px); }
}
/* Alle Desktop-Screenshots im Karussell gleich hoch (Format 1200 × 689), längere Seiten werden unten abgeschnitten */
#referenzen .v4-browser img { display: block; width: 100%; height: auto !important; aspect-ratio: 1200 / 689; object-fit: cover; object-position: top center; }
/* Ziehen mit der Maus */
#referenzen [data-pd-carousel] { cursor: grab; touch-action: pan-x pan-y; }
#referenzen [data-pd-carousel].is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
#referenzen [data-pd-carousel].is-dragging * { pointer-events: none; }
#referenzen [data-pd-carousel] img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Mobil ragt das Smartphone über den Screenshot nach oben – Platz schaffen, damit nichts abgeschnitten wird */
#referenzen .v4-cases { padding-top: max(12px, calc(235px - 45.5vw)); }
/* Mobil keine Browser-Leiste mit URL über dem Desktop-Screenshot – spart Platz für die Vorschau */
@media (max-width: 640px) {
  #referenzen .v4-browser .v4-bar { display: none; }
  #referenzen .v4-cases { padding-top: max(12px, calc(292px - 45.5vw)); }
}

/* Leistungen: 5 Karten (3 oben, 2 unten breiter) */
.pd-svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: clamp(36px, 4vw, 56px); }
.pd-svc { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); }
.pd-svc:nth-child(4), .pd-svc:nth-child(5) { grid-column: span 3; }
.pd-svc-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #10d48e, #28efa8); color: #132a3a; }
.pd-svc h3 { margin: 6px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.pd-svc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lp-dark .pd-svc { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.11); }
.lp-dark .pd-svc-icon { background: rgba(16, 212, 142, 0.15); color: #28efa8; }
.lp-dark .pd-svc h3 { color: #ffffff; }
.lp-dark .pd-svc p { color: var(--ink-dark-2); }
@media (max-width: 900px) { .pd-svc-grid { grid-template-columns: 1fr 1fr; } .pd-svc, .pd-svc:nth-child(4), .pd-svc:nth-child(5) { grid-column: span 1; } .pd-svc:nth-child(5) { grid-column: span 2; } }
@media (max-width: 600px) { .pd-svc-grid { grid-template-columns: 1fr; } .pd-svc:nth-child(5) { grid-column: span 1; } }

/* Preise: ein Block „individuell“ */
.pd-price-box { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(26px, 3.4vw, 40px); border-radius: 18px; background: #ffffff; border: 1.5px solid #132a3a; box-shadow: 0 0 0 6px rgba(16, 212, 142, 0.18), 0 40px 70px -30px rgba(19, 42, 58, 0.4); }
.pd-price-label { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.pd-price-amount { margin: 10px 0 0; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.pd-price-amount small { display: block; margin-top: 10px; font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.pd-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pd-price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.pd-price-list svg { flex: none; margin-top: 3px; color: #132a3a; }
.pd-price-cta { margin: 0; }
.pd-price-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 14px; background: #10d48e; color: #060e14; font-weight: 500; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
.pd-price-cta a:hover { background: #28efa8; transform: translateY(-1px); }
.lp-dark .pd-price-box { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }
.lp-dark .pd-price-label, .lp-dark .pd-price-amount small { color: var(--ink-dark-2); }
.lp-dark .pd-price-amount, .lp-dark .pd-price-list li { color: #ffffff; }
.lp-dark .pd-price-list svg { color: #28efa8; }
@media (max-width: 900px) { .pd-price-box { grid-template-columns: 1fr; } .pd-price-cta a { white-space: normal; } }

/* Leistungskarten: Link zur Detailseite */
.pd-svc-link { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--pk-accent-text, #132a3a); text-decoration: none; }
.pd-svc-link:hover { text-decoration: underline; }
.lp-dark .pd-svc-link { color: #28efa8; }
/* Feature-Karten mit h3 statt h4 (richtige Überschriften-Reihenfolge) */
.feat h3.pd-feat-h { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; margin: 0; }
@media (min-width: 861px) { .lp-benefits.pd-benefits-4 { grid-template-columns: repeat(2, 1fr); } }

/* Gewerke-Liste (KI für Handwerker) */
.pd-trades { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pd-trades li { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #ffffff; font-size: 14.5px; }