/* ============================================================
   mycoyouco — Über-uns-Seite (/ueber-uns)
   Same family as vergleich.css / loesungen.css — builds on
   styles.css tokens. Class convention: .ueber-*
   ============================================================ */

/* ---- Hero ---- */
.ueber-hero{
  background:var(--surface-2);
  border-bottom:1px solid var(--outline-variant);
  padding:60px 0 56px;
}
.ueber-hero-inner{max-width:780px}
.ueber-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--lavender-deep);background:var(--tertiary-container);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.ueber-h1{
  font-family:var(--display);font-weight:400;
  font-size:48px;line-height:1.03;letter-spacing:-.8px;text-transform:uppercase;
  color:var(--primary);margin:0 0 18px;text-wrap:balance;
}
.ueber-lead{font-size:19px;line-height:1.6;color:var(--on-surface-variant);margin:0;max-width:660px;text-wrap:pretty}

/* ---- Generic content wrapper ---- */
.ueber-body{max-width:880px;padding:48px 0 0}
.ueber-block{margin-bottom:52px}
.ueber-kicker{
  font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--sage-deep);margin:0 0 12px;
}
.ueber-h2{
  font-family:var(--display);font-weight:400;
  font-size:30px;line-height:1.08;letter-spacing:-.4px;text-transform:uppercase;
  color:var(--primary);margin:0 0 20px;text-wrap:balance;
}

/* ---- Mission ---- */
.ueber-mission p{font-size:18px;line-height:1.72;color:var(--on-surface-variant);margin:0;max-width:760px;text-wrap:pretty}
.ueber-mission p b{color:var(--primary);font-weight:700}

/* ---- Team ---- */
.ueber-team{scroll-margin-top:88px}
.ut-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ut-card{
  background:var(--surface);border:1px solid var(--outline-variant);
  border-radius:var(--radius-xl);overflow:hidden;
  display:flex;flex-direction:column;
}
.ut-photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface-3);
}
.ut-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  /* Warm duotone via filter only — robust, no blend-mode dependency.
     grayscale neutralises each photo's own cast, sepia adds a shared
     warm tone so both portraits read as one consistent team. */
  filter:grayscale(1) sepia(.4) saturate(1.18) contrast(1.05) brightness(1.04);
}
/* Subtle forest tint + bottom anchor (enhancement where blend is supported) */
.ut-photo::after{
  content:"";position:absolute;inset:0;
  background:var(--forest);
  mix-blend-mode:color;opacity:.22;
}
.ut-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 60%,rgba(15,42,26,.28) 100%);
}
.ut-info{padding:24px 26px 26px}
.ut-name{
  font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.2px;
  text-transform:uppercase;color:var(--primary);margin:0;line-height:1.1;
}
.ut-role{
  display:inline-block;margin:8px 0 14px;
  font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--sage-deep);
}
.ut-bio{font-size:15.5px;line-height:1.65;color:var(--on-surface-variant);margin:0;text-wrap:pretty}

/* ---- Standort / Made in Germany ---- */
.ueber-standort{
  background:var(--secondary-container);
  border-radius:var(--radius-xl);
  padding:34px 36px;
  display:flex;gap:22px;align-items:flex-start;
  position:relative;overflow:hidden;
}
.us-ico{
  flex:none;width:54px;height:54px;border-radius:16px;
  background:rgba(255,255,255,.5);color:var(--sage-deep);display:grid;place-items:center;
}
.us-body{min-width:0}
.us-h{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.2px;text-transform:uppercase;color:var(--on-secondary-container);margin:0 0 10px}
.us-text{margin:0;font-size:16.5px;line-height:1.68;color:var(--on-secondary-container);max-width:640px;text-wrap:pretty}

/* ---- Was uns ausmacht — 4 value cards ---- */
.ueber-werte{scroll-margin-top:88px}
.uw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.uw-card{
  background:var(--surface-2);border:1px solid var(--outline-variant);
  border-radius:var(--radius-md);padding:26px 28px;
}
.uw-ico{
  width:40px;height:40px;border-radius:12px;margin-bottom:16px;
  background:var(--tertiary-container);color:var(--lavender-deep);
  display:grid;place-items:center;
}
.uw-card:nth-child(2) .uw-ico{background:var(--primary-container);color:var(--primary)}
.uw-card:nth-child(3) .uw-ico{background:#FBEFC2;color:#7A5B00}
.uw-card:nth-child(4) .uw-ico{background:var(--secondary-container);color:var(--sage-deep)}
.uw-h{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.2px;text-transform:uppercase;color:var(--primary);margin:0 0 8px;line-height:1.1}
.uw-text{font-size:15px;line-height:1.6;color:var(--on-surface-variant);margin:0;text-wrap:pretty}

/* ---- Final CTA (same family as vergleich/loesungen) ---- */
.ueber-cta{
  background:var(--primary);color:#fff;border-radius:var(--radius-xl);
  padding:48px;margin:8px 0 80px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  position:relative;overflow:hidden;
}
.ueber-cta::before{
  content:"";position:absolute;right:-60px;bottom:-80px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,220,248,.16),transparent 70%);
}
.ueber-cta-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:999px;
}
.ueber-cta h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.4px;text-transform:uppercase;color:#fff;margin:14px 0 10px}
.ueber-cta p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.74);max-width:440px}
.ueber-cta-actions{display:flex;flex-direction:column;gap:10px;position:relative}
.ueber-cta .btn-light{background:#fff;color:var(--primary)}
.ueber-cta .btn-light:hover{background:var(--cream)}
.ueber-cta .btn-ghost-light{background:rgba(255,255,255,.12);color:#fff}
.ueber-cta .btn-ghost-light:hover{background:rgba(255,255,255,.2)}

/* ============================================================
   Responsive — breakpoints mirror the family (@980, @620)
   ============================================================ */
@media (max-width:980px){
  .ueber-hero{padding:44px 0 40px}
  .ueber-h1{font-size:38px}
  .ueber-lead{font-size:18px}
  .ueber-body{padding:34px 0 0}
  .ueber-block{margin-bottom:44px}
}

@media (max-width:620px){
  .ueber-h1{font-size:31px}
  .ueber-h2{font-size:25px}
  .ueber-mission p{font-size:17px}

  .ut-grid{grid-template-columns:1fr;gap:18px}
  .ut-photo{aspect-ratio:3/2}

  .ueber-standort{flex-direction:column;gap:16px;padding:28px 24px}

  .uw-grid{grid-template-columns:1fr}

  .ueber-cta{grid-template-columns:1fr;padding:32px 24px;border-radius:28px}
  .ueber-cta-actions .btn{width:100%}
}