/* ===== Über-mich-Seite – baut auf style.css und innerwise.css auf ===== */
.um-hero { position: relative; min-height: 520px; display: flex; align-items: center; background: #eceae4 url("../img/um-banner-pferd.jpg") right 18% / cover no-repeat; }
.um-hero__inner { position: relative; width: 100%; max-width: 1265px; margin: 0 auto; padding: 80px 20px 60px 150px; }
.um-hero__inner > * { max-width: 470px; }
.um-hero h1 { font-size: 44px; line-height: 1.12; margin-bottom: 16px; }
.um-lead { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--braun); }
.um-zeile { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--blau); margin: 18px 0; }
.um-hero p { font-size: 14px; }
.um-hero .um-lead, .um-hero .um-zeile { font-size: 18px; }

.um-block { padding: 80px 0; }
.um-block--creme { background: var(--creme); }
.um-block--salbei { background: var(--salbei); }
.um-block .container { max-width: 1100px; }
.um-block p { font-size: 14.5px; }
.um-zwei { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.um-zwei--umgekehrt { grid-template-columns: 1.1fr .9fr; }
.um-foto { width: 100%; height: auto; border-radius: 4px; }
.um-betont { font-family: var(--serif); font-size: 21px !important; color: var(--braun); line-height: 1.4; margin-top: 18px; }
.um-zwei .strich { width: 160px; height: auto; margin-top: 6px; }
.um-mitte { text-align: center; }

.um-bildtext { min-height: 460px; border-radius: 4px; background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; color: #fff; }
.um-bildtext::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(to top, rgba(20,18,15,.6), rgba(20,18,15,0) 60%); }
.um-bildtext p { position: relative; margin: 0; font-family: var(--serif); font-size: 24px !important; line-height: 1.35; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.um-bildtext p.klein { font-size: 16px !important; margin-top: 12px; opacity: .95; }

.um-leitet h2 { font-size: 32px; text-align: center; margin: 4px auto 30px; max-width: 760px; }
.um-leitet .eyebrow { text-align: center; }
.um-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 12px; }

.um-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.um-karten > div { background: var(--weiss); border-radius: 6px; padding: 22px 20px; border-top: 3px solid var(--blau); }
.um-karten h3 { font-size: 17px; margin-bottom: 6px; }
.um-karten p { font-size: 13px !important; color: var(--grau); margin: 0; }

.um-hinweisbox { margin-top: 26px; background: var(--salbei); border-radius: 6px; padding: 24px 26px; }
.um-hinweisbox p { font-family: var(--serif); font-size: 20px !important; color: var(--braun); margin: 0 0 14px; line-height: 1.4; }

.um-abschluss-text { color: #fff; font-size: 15px; margin: 0 0 18px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

@media (max-width: 1100px) { .um-hero__inner { padding-left: 40px; } .um-karten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .um-hero { min-height: 0; background-position: 75% center; }
  .um-hero::before { content: ""; position: absolute; inset: 0; background: rgba(246,245,241,.85); }
  .um-hero__inner { padding: 50px 20px 44px; }
  .um-hero h1 { font-size: 34px; }
  .um-block { padding: 54px 0; }
  .um-zwei, .um-zwei--umgekehrt, .um-spalten { grid-template-columns: 1fr; gap: 26px; }
  .um-leitet h2 { font-size: 25px; }
  .um-karten { grid-template-columns: 1fr; }
  .um-bildtext { min-height: 360px; }
}
.um-bildtext::before { background: linear-gradient(to top, rgba(20,18,15,.72), rgba(20,18,15,.15) 70%); }

/* Handschrift im Banner neben dem Gesicht (24.10.) */
.um-hs { position: absolute; left: 53%; top: 7%; width: 225px; height: auto; transform: rotate(-9deg); pointer-events: none; filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
@media (max-width: 1100px) { .um-hs { left: 50%; width: 190px; } }
@media (max-width: 720px) {
  .um-hero { flex-direction: column; align-items: stretch; }
  .um-hs { position: relative; left: auto; top: auto; width: 220px; margin: -20px auto 34px; transform: rotate(-6deg); filter: none; content: url("../img/um-neugierig.png"); }
}
@media (min-width: 1400px) { .um-hero { min-height: min(36vw, 720px); } }