/* ============================================================
   holz4home · "Ueber uns" Section mit Rounded-Tiles-Grid
   Scope: .h4h-amb-about
   ============================================================ */

.h4h-amb-about{
  --bg:#fdfcf8;
  --tile-bg:#f0ebe0;
  --tile-bg-2:#e8dfc8;
  --ink:#1f2624;
  --ink-2:#444e4f;
  --text:#677279;
  --muted:#8a9297;
  --sage:#98aca0;
  --sage-deep:#3d4a44;
  --gold:#e8b25a;
  --line:rgba(31,38,36,.1);
  --line-2:rgba(31,38,36,.16);

  background:var(--bg);
  font-family:'Ubuntu',system-ui,sans-serif;
  font-weight:300;
  color:var(--text);
  padding:110px 0;
  -webkit-font-smoothing:antialiased;

  &, & *, & *::before, & *::after{box-sizing:border-box}

  & .h4h-amb-about__wrap{max-width:1320px;margin:0 auto;padding:0 32px}

  & .h4h-amb-about__head{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:end;margin-bottom:50px}
  & .h4h-amb-about__eyebrow{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:var(--sage-deep);font-weight:500;display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
  & .h4h-amb-about__eyebrow::before{content:"";width:18px;height:1px;background:var(--sage-deep)}
  & .h4h-amb-about__head h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.6px;line-height:1.15;color:var(--ink-2);font-weight:500;margin:0}
  & .h4h-amb-about__head h2 em{font-style:normal;color:var(--sage-deep);font-weight:500}
  & .h4h-amb-about__head p{font-size:16px;color:var(--ink-2);max-width:440px;line-height:1.6;justify-self:end;margin:0}

  & .h4h-amb-about__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto);gap:14px}

  & .h4h-amb-about__tile{
    position:relative;overflow:hidden;border-radius:18px;
    background:var(--tile-bg);
    padding:26px 28px;
    display:flex;flex-direction:column;justify-content:flex-end;
    color:var(--ink-2);
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:220px;
  }
  & .h4h-amb-about__tile:hover{transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(31,38,36,.18)}
  & .h4h-amb-about__tile--large{grid-column:span 2;grid-row:span 2;min-height:0}
  & .h4h-amb-about__tile--tall{grid-row:span 2;min-height:0}

  & .h4h-amb-about__tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  & .h4h-amb-about__tile.has-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72));z-index:1;pointer-events:none}
  & .h4h-amb-about__tile.has-image{color:#fff}

  & .h4h-amb-about__tile-content{position:relative;z-index:2}
  & .h4h-amb-about__tile-eyebrow{
    font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
    color:var(--muted);font-weight:500;display:block;margin-bottom:7px;
  }
  & .h4h-amb-about__tile.has-image .h4h-amb-about__tile-eyebrow{color:rgba(255,255,255,.72)}
  & .h4h-amb-about__tile-value{
    font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.5px;
    color:var(--ink);margin-bottom:6px;
  }
  & .h4h-amb-about__tile.has-image .h4h-amb-about__tile-value{color:#fff;font-size:32px}
  & .h4h-amb-about__tile-sub{
    font-size:13.5px;color:var(--text);line-height:1.55;
    max-width:340px;
  }
  & .h4h-amb-about__tile.has-image .h4h-amb-about__tile-sub{color:rgba(255,255,255,.88)}
}

@media (max-width:1000px){
  .h4h-amb-about{
    padding:70px 0;
    & .h4h-amb-about__wrap{padding:0 28px}
    & .h4h-amb-about__head{grid-template-columns:1fr;gap:18px}
    & .h4h-amb-about__head p{justify-self:start;max-width:none}
    & .h4h-amb-about__grid{grid-template-columns:repeat(2,1fr)}
    & .h4h-amb-about__tile--large, & .h4h-amb-about__tile--tall{grid-row:auto;grid-column:span 2}
    & .h4h-amb-about__tile-value{font-size:26px}
    & .h4h-amb-about__tile.has-image .h4h-amb-about__tile-value{font-size:28px}
  }
}
@media (max-width:560px){
  .h4h-amb-about{
    & .h4h-amb-about__grid{grid-template-columns:1fr;gap:12px}
    & .h4h-amb-about__tile--large{grid-column:auto}
    & .h4h-amb-about__tile{min-height:180px;padding:24px 24px}
  }
}