/* Seite „Über uns" – Kopfblock und die beiden Personenporträts. */

/* --- Kopfblock: Überschrift links, Text rechts ---------------------------- */
.about-intro {display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.about-intro h2 {font-size:clamp(30px,3.1vw,44px);line-height:1.14}
.about-text p {margin-bottom:26px}
.about-text p:last-child {margin-bottom:0}

/* --- Personen: Foto und Text nebeneinander, abwechselnd seitenverkehrt ---- */
.person-block {display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start;
  padding-top:40px;padding-bottom:105px}
.person-foto img {width:100%;aspect-ratio:.86;object-fit:cover;object-position:center 22%}
/* Beim zweiten Porträt wechseln die Seiten. Die Reihenfolge im Quelltext bleibt
   gleich (Foto zuerst), damit die Vorlesereihenfolge überall dieselbe ist.
   Die Spaltenbreiten müssen mitwandern – sonst landet das Foto in der breiteren
   Spalte und die beiden Porträts werden unterschiedlich groß. */
.person-block--gedreht {grid-template-columns:1.1fr .9fr}
.person-block--gedreht .person-foto {order:2}

.person-text h2 {font-size:clamp(30px,3.1vw,44px);line-height:1.14}
.person-motto {font-size:19px;color:var(--deep);margin:18px 0 30px;max-width:none}
.person-text p {margin-bottom:24px;max-width:none}
.person-claim {border-left:3px solid var(--green);padding-left:20px;font-size:17px;
  margin:34px 0 32px;color:var(--ink)}
.person-text .button {margin-top:4px}
.person-text .button .lnr {font-size:19px}
/* Zwei Schaltflächen nebeneinander (Durchwahl und „E-Mail senden").
   Umbricht auf schmalen Bildschirmen von selbst; margin-bottom:0, weil
   .person-text p sonst 24 px darunter setzt. */
.person-aktionen {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:0}

/* --- Schmalere Bildschirme ----------------------------------------------- */
@media(max-width:1100px) {
  .about-intro,
  .person-block {gap:45px}
  .person-block {padding-bottom:85px}
  .person-motto {font-size:18px;margin-bottom:26px}
}
@media(max-width:760px) {
  .about-intro,
  .person-block {display:flex;flex-direction:column;gap:32px;align-items:stretch}
  .person-block {padding-top:20px;padding-bottom:64px}
  /* Mobil steht das Foto immer oben – die Umkehrung ergibt einspaltig keinen Sinn */
  .person-block--gedreht .person-foto {order:0}
  .person-foto img {aspect-ratio:1.05;object-position:center 20%}
  .person-motto {font-size:17px;margin:14px 0 24px}
  .person-claim {margin:28px 0;font-size:16px}
}

/* --- Partnerschaft mit der Hermann-Josef Lürwer GmbH ----------------------
   Eigene Marke in eigener Farbwelt: Das blaue Partnerlogo steht auf weißer
   Karte, damit es nicht mit dem Grün der Seite kollidiert. */
.partnerschaft {background:var(--soft)}
.partner-raster {display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:start}
.partner-text h2 {font-size:clamp(30px,3.1vw,44px);line-height:1.14}
.partner-text > p {margin-top:24px}
.partner-vorteile {list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px;max-width:620px}
.partner-vorteile li {position:relative;padding-left:32px;font-size:16px;line-height:1.65}
.partner-vorteile li:before {content:'';position:absolute;left:0;top:.62em;width:11px;height:11px;
  border-radius:50%;background:var(--green)}

.partner-karte {background:#fff;padding:38px 36px 34px;box-shadow:0 12px 34px rgba(32,44,30,.07)}
.partner-logo {width:100%;max-width:290px;height:auto;margin-bottom:28px}
.partner-adresse {font-size:15px;line-height:1.75;margin:0;max-width:none}
.partner-firma {display:block;font-weight:700;font-size:16px;margin-bottom:4px;color:var(--ink)}
.partner-draht {display:grid;gap:12px;margin:24px 0 0;padding-top:22px;
  border-top:1px solid var(--line);max-width:none}
.partner-draht a {display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--deep);
  overflow-wrap:anywhere}
.partner-draht a:hover {text-decoration:underline;text-underline-offset:4px}
.partner-draht .lnr {font-size:18px;flex-shrink:0}

@media(max-width:1100px) {
  .partner-raster {gap:45px}
  .partner-karte {padding:30px 28px 28px}
  .partner-logo {max-width:240px;margin-bottom:22px}
}
@media(max-width:760px) {
  .partner-raster {grid-template-columns:1fr;gap:34px}
  .partner-vorteile {gap:15px}
  .partner-vorteile li {font-size:15px;padding-left:28px}
  .partner-vorteile li:before {width:10px;height:10px}
  .partner-karte {padding:28px 24px 26px}
}