/* =========================================================
   LEISTUNGEN – HERO (Overlay, Typo, Layout)
   Scope: nur innerhalb .pg-leistungen-hero
   ========================================================= */

/* Section-Offsets passend zur festen Headerhöhe */
.pg-leistungen-hero{
  padding-top: var(--header-h);
  scroll-margin-top: var(--header-h);
}

/* Overlay-Kachel (wie Startseite) */
.pg-leistungen-hero .uk-overlay-default{
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Falls YOOtheme die Position zentral setzt: sauber zentrieren */
.pg-leistungen-hero [class*="uk-position-center"]{
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Topline (el-meta) und H1 – Basis */
.pg-leistungen-hero .el-meta{
  color: #6e6b66;
  font-weight: 600;
  font-size: .95em;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .95;
}

.pg-leistungen-hero h1{
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--c-accent, #c9a66b); /* Gold wie auf der Startseite */
}

/* ---------- Content aus deinem HTML: Subline & Service ---------- */
/* Tipp: dein HTML-Wrapper heißt .start-leistungen-hero */
.pg-leistungen-hero .start-leistungen-hero .hero-subline,
.pg-leistungen-hero .start-leistungen-hero .hero-service{
  font-family: var(--ff-sans, "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  color: #1f2a38;
}

/* Abstände */
.pg-leistungen-hero .start-leistungen-hero .hero-subline{
  margin: 0 0 12px;
}
.pg-leistungen-hero .start-leistungen-hero .hero-service{
  margin: 0 0 24px;
}

/* ---------- Overlay-Padding & Breiten je Breakpoint ---------- */
@media (min-width:1600px){
  .pg-leistungen-hero .uk-overlay-default{ padding: 70px 72px 46px; }
}
@media (min-width:1200px) and (max-width:1599px){
  .pg-leistungen-hero .uk-overlay-default{ max-width: 920px; padding: 64px 64px 40px; }
}
@media (min-width:960px) and (max-width:1199px){
  .pg-leistungen-hero .uk-overlay-default{ max-width: 820px; padding: 56px 56px 36px; }
}
@media (min-width:640px) and (max-width:959px){
  .pg-leistungen-hero .uk-overlay-default{ max-width: 560px; padding: 48px 40px 28px; }
}
@media (max-width:639px){
  .pg-leistungen-hero .uk-overlay-default{ max-width: 92vw; padding: 22px 18px 22px; }
}

/* ---------- Typo-Skalierung (analog Startseite) ---------- */
/* XS */
@media (max-width:639px){
  .pg-leistungen-hero .el-meta{ font-size: 12.5px; line-height: 1.25; letter-spacing: .06em; font-weight: 600; }
  .pg-leistungen-hero h1{ font-size: 26px; line-height: 1.16; letter-spacing: .015em; }

  .pg-leistungen-hero .start-leistungen-hero .hero-subline{ font-size: 19px; line-height: 1.45; font-weight: 500; }
  .pg-leistungen-hero .start-leistungen-hero .hero-service{ font-size: 18px; line-height: 1.45; font-weight: 400; }
}

/* S */
@media (min-width:640px) and (max-width:959px){
  .pg-leistungen-hero .el-meta{ font-size: 13px; }
  .pg-leistungen-hero h1{ font-size: 28px; line-height: 1.16; }

  .pg-leistungen-hero .start-leistungen-hero .hero-subline{ font-size: 19px; }
  .pg-leistungen-hero .start-leistungen-hero .hero-service{ font-size: 18px; }
}

/* M */
@media (min-width:960px){
  .pg-leistungen-hero .el-meta{ font-size: 13.5px; }
  .pg-leistungen-hero h1{ font-size: 32px; line-height: 1.16; }

  .pg-leistungen-hero .start-leistungen-hero .hero-subline{ font-size: 24px; line-height: 1.4;  font-weight: 500; }
  .pg-leistungen-hero .start-leistungen-hero .hero-service{ font-size: 20px; line-height: 1.45; font-weight: 400; }
}

/* L */
@media (min-width:1200px){
  .pg-leistungen-hero .el-meta{ font-size: 14px; }
  .pg-leistungen-hero h1{ font-size: 38px; line-height: 1.16; }

  .pg-leistungen-hero .start-leistungen-hero .hero-subline{ font-size: 26px; }
  .pg-leistungen-hero .start-leistungen-hero .hero-service{ font-size: 22px; }
}

/* XL */
@media (min-width:1600px){
  .pg-leistungen-hero .el-meta{ font-size: 15.2px; }
  .pg-leistungen-hero h1{ font-size: 42px; line-height: 1.14; }

  .pg-leistungen-hero .start-leistungen-hero .hero-subline{ font-size: 28px; }
  .pg-leistungen-hero .start-leistungen-hero .hero-service{ font-size: 24px; }
}


/* ===================================================
   =========== Intro =============
   ===================================================*/
.pg-leistungen-intro .el-meta {
  color: #6e6b66;        /* leicht graugrün, harmonisch */
  font-weight: 600;
  font-size: 0.9rem;     /* nicht zu winzig */
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;    /* enger unter Titel */
  opacity: .95;
}

.pg-leistungen-intro .intro-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: #1f2a38;
  margin-bottom: 18px;
}

.pg-leistungen-intro .intro-note {
  font-size: .98rem;
  color: #415067;
  margin-top: 12px;
}
.pg-leistungen-intro .intro-note a {
  color: #0f2640;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-leistungen-intro .intro-note a:hover {
  text-decoration: none;
}


.pg-leistungen-sticky h2 {
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}


/* Basis-Button in den Kacheln */
.pg-leistungen-grid .uk-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:9px 22px;
  border-radius:999px; box-sizing:border-box;
  border:2px solid var(--c-accent, #c9a66b);
  background:transparent; color:#0f2640;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.pg-leistungen-grid .uk-button:hover,
.pg-leistungen-grid .uk-button:focus {
  background:var(--c-accent, #c9a66b);
  color:#0f2640;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
@media (min-width:960px){
  .pg-leistungen-grid .uk-button{ min-height:46px; padding:10px 26px; }
}


.pg-leistungen-grid .el-meta{
  color:#6e6b66;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:8px;
}



/* Karte füllt die Spaltenhöhe */
.pg-leistungen-grid .uk-card { 
  height:100%;
  display:flex; flex-direction:column;
  box-shadow:0 10px 34px rgba(0,0,0,.06);
}

/* Body wächst mit, Footer (Button) sitzt am Ende */
.pg-leistungen-grid .uk-card-body{ 
  flex:1 1 auto;
}
.pg-leistungen-grid .uk-card-footer{
  border-top:0; padding-top:0; margin-top:8px;
}



.pg-leistungen-grid h3{
  line-height:1.2; letter-spacing:.01em;
  margin:0 0 12px;
}
.pg-leistungen-grid .el-content p{
  margin:0 0 18px; color:#1f2a38;
}
@media (min-width:1200px){
  .pg-leistungen-grid h3{ font-size: clamp(1.4rem, 1.2vw, 1.75rem); }
  .pg-leistungen-grid .el-content p{ font-size:1.04rem; }
}



.pg-leistungen-grid .uk-card-media-top img{
  width:100%; height:auto;
  aspect-ratio:16/9;           /* sichert konsistente Höhe */
  object-fit:cover;
}
@media (max-width:639px){
  .pg-leistungen-grid .uk-card-media-top img{ aspect-ratio:4/3; }
}



.pg-leistungen-grid .uk-card-media-top{ position:relative; }
.pg-leistungen-grid .uk-card-media-top::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}


/* =========================================================
   LEISTUNGEN – Section-Headline
   ========================================================= */

  .pg-leistungen .uk-h2 {
  font-family: var(--ff-sans, "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(1.6rem, 2vw, 2rem);   /* responsive Größe */
  line-height: 1.25;
  font-weight: 600;
  color: #1f2a38;                        /* dunkel, gute Lesbarkeit */
  margin: 0 0 32px;
  text-align: center;                    /* zentriert über dem Grid */
  letter-spacing: 0.01em;
}

/* Optional: leichte Variante für Mobile enger setzen */
@media (max-width: 639px) {
  .pg-leistungen .uk-h2 {
    font-size: 1.4rem;
    margin-bottom: 24px;
  }
}


/* ========== LEISTUNGEN-GRID: konsistente Buttons & Swipe ========== */

/* =========================================================
   LEISTUNGEN-GRID: Buttons (Breite, Swipe, Weiß auf Hover)
   Greift auf Buttons aus dem Link-Feld: a.el-link.uk-button …
   ========================================================= */

/* Basis-Look (neutral) – funktioniert für default & primary */
.pg-leistungen-grid a.el-link.uk-button {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;

  border: 2px solid var(--c-accent, #c9a66b);
  background: transparent;
  color: #0f2640;

  /* leichte Elevation wie bei "primary" */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition:
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Wenn YOOtheme "primary" hinterlegt: neutralisieren (ohne BG) */
.pg-leistungen-grid a.el-link.uk-button.uk-button-primary {
  background: transparent !important;
  color: #0f2640 !important;
  border-color: var(--c-accent, #c9a66b) !important;
}


/* Mobile/Tablet: schmaler, aber konsistent */
@media (max-width: 959.98px) {
  .pg-leistungen-grid a.el-link.uk-button {
    min-height: 44px;
    padding: 10px 20px;
  }
}

/* Swipe-Layer */
.pg-leistungen-grid a.el-link.uk-button::before {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: var(--c-accent, #c9a66b);
  transition: transform .28s ease;
  z-index: 0;
}

/* Inhalt über dem Swipe */
.pg-leistungen-grid a.el-link.uk-button > * {
  position: relative;
  z-index: 1;
}

/* Hover/Focus: Swipe rein + Text sicher weiß */
.pg-leistungen-grid a.el-link.uk-button:hover,
.pg-leistungen-grid a.el-link.uk-button:focus {
  color: #fff !important;                 /* <- Weiß erzwingen */
  box-shadow: 0 8px 18px rgba(0,0,0,.12); /* kleine Elevation */
}
.pg-leistungen-grid a.el-link.uk-button:hover::before,
.pg-leistungen-grid a.el-link.uk-button:focus::before {
  transform: translateX(0);
}

/* Active-Feedback */
.pg-leistungen-grid a.el-link.uk-button:active {
  transform: translateY(1px);
}


/* --- Sichtbarkeit des Textes über dem Swipe sicherstellen --- */
.pg-leistungen-grid a.el-link.uk-button{
  position: relative;
  isolation: isolate;   /* eigener Stacking-Context */
  z-index: 0;
}

/* Swipe-Layer immer HINTER dem Inhalt */
.pg-leistungen-grid a.el-link.uk-button::before{
  z-index: -1;          /* statt 0 */
  pointer-events: none; /* sicherheitshalber */
}

/* YOOtheme-Overrides aushebeln: Weiß auf Hover ERZWINGEN */
.pg-leistungen-grid a.el-link.uk-button:hover,
.pg-leistungen-grid a.el-link.uk-button:focus,
.pg-leistungen-grid a.el-link.uk-button.uk-button-default:hover,
.pg-leistungen-grid a.el-link.uk-button.uk-button-primary:hover{
  color:#fff !important;
}

/* Buttons in den Kacheln: gleiche Höhe erzwingen */
.pg-leistungen-grid .uk-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* sorgt dafür, dass der Button unten bleibt */
  height: 100%;
}

.pg-leistungen-grid .uk-card-footer {
  margin-top: auto; /* Footer mit Button immer nach unten drücken */
}

/* ================================
   LEISTUNGEN – USP Timeline
   Wrapper: .pg-leistungen-usp
   Struktur pro Item (YOOtheme):
     h3.el-title
     .el-content > p...
     + im Textfeld ganz oben: <span class="usp-bullet"><img ...></span>
   ================================ */

/* ===========================
   USP-Timeline (ohne Dropcap)
   =========================== */
.pg-leistungen-usp{
  /* Farben */
  --usp-dark: #1f2a38;
  --usp-gold: #c9a66b;
  --usp-gold-soft: rgba(201,166,107,.12); /* zarter Gold-Hintergrund */
  --usp-line: rgba(31,42,56,.22);

  /* Größen/Abstände */
  --usp-bullet: 64px;   /* Kreis-Durchmesser (größer) */
  --usp-icon: 34px;     /* Icon-Größe im Kreis */
  --usp-left-pad: 50px;/* Abstand links für Kreis + Linie */
}

/* Grundlayout jedes USP-Items */
.pg-leistungen-usp .el-item{
  position: relative;
  padding-left: var(--usp-left-pad);
  margin: 0 0 32px;
}

/* Typo rechts */
.pg-leistungen-usp h3.el-title{
  margin: 0 0 10px;
  color: var(--usp-dark);
  font-weight: 700;
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
  line-height: 1.22;
}
.pg-leistungen-usp .el-content p{
  margin: 0;
  color: #2a3a4f;
  line-height: 1.6;
}

/* Mobile-Tuning */
@media (max-width: 639px){
  .pg-leistungen-usp{
    --usp-bullet: 56px;
    --usp-icon: 30px;
    --usp-left-pad: 128px;
  }
  .pg-leistungen-usp .usp-bullet{ top: -4px; }
}


/* =========================================================
   LEISTUNGEN – USP-Head (Titel + kurzer Text)
   Scope: nur innerhalb .pg-leistungen-usp-head
   ========================================================= */
 
  .pg-leistungen-usp-head{
  max-width: 1200px;
  margin: 28px auto 32px;
  padding: 0 12px;
  text-align: left;
}

.pg-leistungen-usp-head h2{
  /* selbe Typo-Logik wie deine H2s auf der Seite */
  font-family: var(--ff-sans, "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.2;
  color: #0f2640;               /* dunkles Blau-Grau (keine Gold-Überschrift hier) */
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  letter-spacing: .01em;
}
.pg-leistungen-usp-head p{
  font-size: clamp(1.02rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: #1f2a38;
  margin: 0;
}

/* kleiner Akzent, falls du <strong> nutzt */
.pg-leistungen-usp-head p strong{
  color: var(--c-accent, #c9a66b);
  font-weight: 600;
}

/* Abstände auf XS/S etwas bauchiger */
@media (max-width: 639px){
  .pg-leistungen-usp-head{ margin: 22px auto 26px; padding: 0 10px; }
}


/* =========================================================
   LEISTUNGEN – ABLAUF (Headline + Grid/Karten)
   Scope: nur innerhalb .pg-ablauf-head / .pg-ablauf-grid
   ========================================================= */


  .pg-ablauf-head .el-title {
  font-family: var(--ff-sans, "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(1.6rem, 2vw, 2rem);   /* responsive Größe */
  line-height: 1.25;
  font-weight: 600;
  color: #1f2a38;                        /* dunkel, gute Lesbarkeit */
  margin: 0 0 32px;
  text-align: center;                    /* zentriert über dem Grid */
  letter-spacing: 0.01em;
}

/* Optional: leichte Variante für Mobile enger setzen */
@media (max-width: 639px) {

  .pg-ablauf-head .el-title {
    font-size: 1.4rem;
    margin-bottom: 24px;
  }
}
/* ---------- Headline / Intro (Panel über den Karten) ---------- 
.pg-ablauf-head{
  margin: 28px auto 18px;
  max-width: 1100px;
  text-align: center;
}

.pg-ablauf-head h2{
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.18;
}
.pg-ablauf-head .el-content,
.pg-ablauf-head p{
  margin: 0;
  color: #415067;
  line-height: 1.55;
  font-size: clamp(.98rem, .9vw, 1.05rem);
}
  */

/* ---------- Grid / Karten – Grundlayout ---------- 
.pg-ablauf-grid{
  --ablauf-gap: 30px;
}
.pg-ablauf-grid [class*="uk-grid"]{
  margin-left: calc(-1 * var(--ablauf-gap)) !important;
}
.pg-ablauf-grid [class*="uk-grid"] > *{
  padding-left: var(--ablauf-gap) !important;
} */

.pg-ablauf-grid .uk-card{
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.06);
}

/* ---------- Icon-Zeile (Bild oben) ---------- */
.pg-ablauf-grid .uk-card-media-top{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding-top: 14px;        /* optische Luft nach oben */
}
.pg-ablauf-grid .uk-card-media-top img{
  width: 74px;              /* wie gewünscht */
  height: 74px;
  object-fit: contain;
  display: block;
}

/* ---------- Typo & Abstände in der Karte ---------- */
.pg-ablauf-grid .uk-card-body{ padding: 18px 20px 22px; }
.pg-ablauf-grid .el-title,
.pg-ablauf-grid h3{
  margin: 6px 0 8px;
  line-height: 1.22;
  letter-spacing: .01em;
}
.pg-ablauf-grid .el-content p{ margin: 0; line-height: 1.55; }

/* ---------- Synergie-Karte (mittig, breiter & ruhiger) ---------- 
.pg-ablauf-grid .pg-ablauf-synergy{
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
}
.pg-ablauf-grid .pg-ablauf-synergy .uk-card-body{
  padding: 18px 24px;
}
@media (min-width: 960px){
  /* volle Zeilenbreite im Grid – unabhängig von Spalten 
  .pg-ablauf-grid .pg-ablauf-synergy{ width: 100% !important; }
}
*/

/* ---------- Feintuning Breakpoints ---------- */
@media (max-width: 959.98px){
  .pg-ablauf-grid{ --ablauf-gap: 22px; }
  .pg-ablauf-grid .uk-card-body{ padding: 16px 18px 20px; }
  .pg-ablauf-head{ margin: 22px auto 14px; }
}
@media (max-width: 639.98px){
  .pg-ablauf-grid{ --ablauf-gap: 18px; }
  .pg-ablauf-grid .uk-card-media-top{ padding-top: 10px; }
  .pg-ablauf-grid .uk-card-media-top img{ width: 70px; height: 70px; }
}



/* Grundlayout für Testimonials */
.pg-testimonial {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #1d1d1d;
  position: relative;
  padding: 2rem 3rem;
}

/* Typo für den Zitattext (falls noch nicht gesetzt) */
.pg-testimonial .el-content,
.pg-testimonial .uk-panel,
.pg-testimonial blockquote {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.6;
  color: #1d1d1d;
  position: relative;
  z-index: 1; /* vor dem großen Hintergrund-Zitat */
}

/* Meta-Zeile (Autor) – dein Gold bleibt bestehen */
.pg-testimonial-meta {
  font-family: "Raleway", sans-serif;
  font-size: .9rem;
  font-weight: 600;
  margin-top: 1.35rem;
  color: #BFA05A;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .95;
}

/* Basis: Icon mittig über dem Text */
.pg-testimonial{
  position: relative;
  text-align: center;
  padding-top: 3.25rem;                              /* Platz fürs Icon */
  background-image: url('/wp-content/uploads/2025/09/icon-testimonial.svg');
  background-repeat: no-repeat;
  background-position: 50% 8px;                     /* zentriert, leicht nach unten */
  background-size: clamp(72px, 6.5vw, 120px) auto;  /* Desktop / große Screens */
}

/* ≤ 959px (Tablet & kleine Laptops) */
@media (max-width: 959px){
  .pg-testimonial{
    padding-top: 2.4rem;
    background-position: 50% 6px;
    background-size: clamp(56px, 8vw, 88px) auto;
  }
}

/* ≤ 639px (Mobile) */
@media (max-width: 639px){
  .pg-testimonial{
    padding-top: 1.8rem;
    background-position: 50% 4px;
    background-size: clamp(44px, 9vw, 64px) auto;
  }
}