/* =========================================================
   knipsmi Version 7: Ergänzungen nur für /ueber-uns/
   (Grundbausteine kommen aus style.css, photos.css, pages.css)
   ========================================================= */

/* ---------- Bildausschnitte ---------- */

.phero__frame img { object-position: 38% 50%; }
.uu-cta-photo img { object-position: 44% 50%; }

/* ---------- Überschrift links, Text rechts ---------- */

.uu-split { display: grid; gap: .5rem; }
.uu-split__body p { max-width: 34em; text-wrap: pretty; }
.uu-split__body p:last-child { margin-bottom: 0; }
.uu-split__body p.uu-lead {
  font: 300 clamp(1.18rem, 1.5vw, 1.32rem)/1.6 var(--display);
  letter-spacing: -.005em;
  color: var(--espresso);
}
@media (min-width: 900px) {
  .uu-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .uu-split .sec__head { margin-bottom: 0; }
  .uu-split__body { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
}

/* ---------- Wie wir arbeiten: drei kleine Schritte ---------- */

.uu-flow {
  list-style: none;
  margin: .5rem 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 34em;
  counter-reset: uu-step;
}
.uu-flow li {
  position: relative;
  padding-left: 3rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  counter-increment: uu-step;
}
.uu-flow li::before {
  content: counter(uu-step);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--apricot-pale);
  font: italic 400 1rem/1 var(--body);
  color: var(--poppy-ink);
}
.uu-flow strong { font-weight: 600; color: var(--espresso); }

.uu-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(.75rem, 2vw, 1.5rem); }

/* ---------- Was wir fotografieren: vier Karten, ganz klickbar ---------- */

.uu-what__list .incl__item { position: relative; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.uu-what__list .incl__title a {
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-color: var(--apricot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
.uu-what__list .incl__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.uu-what__list .incl__item:hover .incl__title a { color: var(--poppy-ink); }
@media (hover: hover) {
  .uu-what__list .incl__item:has(a):hover { transform: translateY(-4px); box-shadow: 0 40px 64px -44px rgba(96, 52, 26, .5), 0 1px 3px rgba(96, 52, 26, .06); }
}
.uu-what__list .incl__title a:focus-visible { outline: none; }
.uu-what__list .incl__title a:focus-visible::after { outline: 2px solid var(--poppy-ink); outline-offset: 4px; }
@media (min-width: 1100px) { .uu-what__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.uu-coda {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font: 300 clamp(1.6rem, 3vw, 2.6rem)/1.2 var(--display);
  letter-spacing: -.025em;
  color: var(--espresso);
  text-wrap: balance;
}
.uu-coda em {
  font-family: var(--body);
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--poppy-ink);
}

/* ---------- Was uns wichtig ist: Kopf mit Bild ---------- */

.uu-values__head { display: grid; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.uu-values__head .sec__head { margin-bottom: 0; }
.uu-values__shot {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: var(--shadow-img);
}
.uu-values__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
@media (min-width: 900px) {
  .uu-values__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 5.5vw, 6rem); align-items: end; }
  .uu-values__shot { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .uu-what__list .incl__item:hover { transform: none !important; }
}