/* ===== INCRAST – PAGE: Über uns ======================================
   Präfix: .pg-about
   Sektionen: .pg-about-hero / -mission / -team / -werte / -cta
   ===================================================================== */

.pg-about-hero h1{ font-size: clamp(28px, 3.2vw + 10px, 46px); }
.pg-about-mission{ max-width: 980px; margin: 0 auto; }
.pg-about-werte .uk-card{ border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.06); }
.pg-about-cta .uk-button{ border-radius:999px; }


/* ===== Über uns (INCRAST) ===== */
.pg-about{
  --ink:#0e1a28;
  --text:#1b2430;
  --muted:#6a7380;
  --gold:#F8D6AB;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 clamp(16px, 4vw, 28px);
  color: var(--text);
}

/* Feinbar hast du ja global – hier nur falls benötigt */
.pg-about .pg-pakete-head .el-title{
  position: relative;
  padding-bottom: 12px;
  margin: 26px 0 14px;
  color: var(--ink);
  font-weight: 800;
}
.pg-about .pg-pakete-head .el-title::after{
  content:"";
  position:absolute; left:0; bottom:0; height:2px; width:72px;
  background: linear-gradient(90deg, var(--gold), rgba(248,214,171,0));
  border-radius: 2px;
}

/* Intro / Outro */
.pg-about-intro, .pg-about-outro{
  max-width: 78ch;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 18px;
}
.pg-about-intro em{ font-style: normal; color: var(--ink); }

/* USP-Panels – links Titel, rechts Text */
.pg-about-values{
  display: grid;
  gap: 12px;
  margin: 18px 0 28px;
}
.pg-about .pg-usp{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(14,26,40,.08);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(14,26,40,.05);
}
.pg-about .pg-usp h3{
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 800;
}
.pg-about .pg-usp p{
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 720px){
  .pg-about .pg-usp{
    grid-template-columns: 1fr;
  }
}



/* === About: Feinschliff === */
.pg-about{
  --ink:#0e1a28;
  --text:#1c2430;
  --muted:#6c7380;
  --gold:#F8D6AB;
}

/* Headline spacet besser zum Text */
.pg-about .pg-pakete-head .el-title{
  margin: 30px 0 10px;
}

/* Intro/Outro ruhiger */
.pg-about-intro, .pg-about-outro{
  max-width: 70ch;               /* etwas schmaler = besser lesbar */
  line-height: 1.68;
  font-size: 1.03rem;
  color: var(--text);
}
.pg-about-intro{ margin-bottom: 18px; }

/* Werte-Bereich: 1-spaltig -> 2-spaltig ab 900px */
.pg-about-values{
  display: grid;
  gap: 12px;
  margin: 20px 0 30px;
}
@media (min-width: 900px){
  .pg-about-values{ grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* USP-Panel kompakter & softer */
.pg-about .pg-usp{
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 14px;
  background: linear-gradient(0deg,#fff, #fff) padding-box,
              radial-gradient(40% 140% at 0 0, rgba(248,214,171,.25), rgba(248,214,171,0)) border-box;
  border: 1px solid rgba(14,26,40,.08);
  border-left: 6px solid transparent;   /* optisch Goldschimmer links */
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 18px rgba(14,26,40,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pg-about .pg-usp:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(14,26,40,.07);
}

.pg-about .pg-usp h3{
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .1px;
}
.pg-about .pg-usp p{
  margin: 0;
  color: #253041;
  line-height: 1.6;
}

/* 1-spaltig auf schmalen Screens */
@media (max-width: 720px){
  .pg-about .pg-usp{ grid-template-columns: 1fr; }
}

/* Abstand vor "Warum INCRAST?" etwas größer */
.pg-about .pg-about-outro,
.pg-about .pg-about-values + .pg-pakete-head{ margin-top: 8px; }
.pg-about .pg-about-values + .pg-pakete-head .el-title{ margin-top: 22px; }


/* Werte-Panels: untereinander statt nebeneinander */
.pg-about-values {
  display: grid;
  grid-template-columns: 1fr;  /* immer nur eine Spalte */
  gap: 16px;
  max-width: 720px;           /* angenehme Breite, nicht full-width */
  margin: 0 auto 30px;        /* zentriert */
}

/* Panels selbst leicht anpassen */
.pg-about .pg-usp {
  grid-template-columns: 160px 1fr; /* Titel links, Text rechts */
}

@media (max-width: 600px) {
  .pg-about .pg-usp {
    grid-template-columns: 1fr; /* mobil: untereinander */
  }
}


.incrast-claim {
  text-align: center; /* mittig */
  padding: 40px 20px;
  background: #f2f2f2; /* hellgrau */
}

.incrast-claim .uk-text-lead {
  color: #a46c3b; /* Gold */
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.incrast-claim .uk-text-meta {
  color: #0a1f44; /* dunkleres Grau für bessere Lesbarkeit */
  font-size: 0.95rem;
  letter-spacing: 0.5px; /* dezente Eleganz */
  margin: 0;
}