/* aergon.de - Startseite (DE und EN) */

/* Hero: Porträt vor Messing */
.hero { position: relative; isolation: isolate; background: #1E1A16; color: #F4EFEA; overflow: hidden; min-height: min(calc(100svh - var(--header-h)), 880px); display: flex; align-items: center; }
.hero__img { position: absolute; inset: 0 0 0 auto; width: 70%; z-index: -1; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
.hero .wrap { padding-block: 80px; }
.hero__text { max-width: 660px; }
.hero h1 { font-size: clamp(48px, 6.6vw, 98px); line-height: .98; margin-bottom: 34px; }
.hero .lead { color: #E2D9D2; max-width: 40ch; margin-bottom: 40px; }
.hero__by { margin-top: 46px; font-size: 16px; color: #BFB2A6; display: flex; gap: 14px; align-items: center; }
.hero__by::before { content: ""; width: 36px; height: 1.5px; background: var(--altrosa); flex: none; }
.hero__by strong { color: #fff; }
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__img { position: relative; width: 100%; height: 66vw; }
  .hero__img img { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .hero .wrap { padding-block: 0 56px; margin-top: -40px; }
}

/* Was keine Transformation ist */
.cosmetics { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 110px); align-items: end; }
.cosmetics h2 { margin-bottom: 36px; }
.strike { list-style: none; padding: 0; margin: 0; }
.strike li { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; padding: 10px 0; color: var(--text-leise); }
.strike li span { background: linear-gradient(var(--brombeer), var(--brombeer)) no-repeat 0 58% / 0% 3px; transition: background-size .7s cubic-bezier(.6, .1, .2, 1); transition-delay: calc(var(--n) * 140ms); }
.strike.in li span { background-size: 100% 3px; }
.reduce .strike li span { background-size: 100% 3px; }
.verdict p.big { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; margin-bottom: 26px; }
.verdict blockquote { margin: 0; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.45; font-style: italic; color: var(--text); }
@media (max-width: 860px) { .cosmetics { grid-template-columns: 1fr; } }

/* Default-Modus */
.default { background: var(--brombeer); color: #fff; padding-block: clamp(80px, 11vw, 160px); }
.default p.big { font-size: clamp(38px, 5.6vw, 84px); line-height: 1.04; max-width: 18ch; margin-bottom: 44px; }
.default p.big strong { font-style: italic; }
.default .cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); max-width: 1000px; }
.default .cols p { color: #fff; margin: 0; }
@media (max-width: 640px) { .default .cols { grid-template-columns: 1fr; } }

/* Herausforderungen unserer Zeit */
.forces { list-style: none; padding: 0; margin: 0 0 clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 6px 26px; }
.forces li { font-size: clamp(26px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -0.02em; color: var(--blau); }
.forces li:nth-child(even) { color: var(--anthrazit); }
.forces li::after { content: " ·"; color: var(--taupe); }
.forces li:last-child::after { content: ""; }
.challenge { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.challenge .lede { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--anthrazit); position: sticky; top: calc(var(--header-h) + 32px); }
.challenge .body p { color: var(--text-leise); }
.challenge .body p.need { color: var(--anthrazit); font-size: clamp(20px, 1.7vw, 23px); line-height: 1.45; border-left: 3px solid var(--brombeer); padding-left: 24px; margin-top: 36px; }
.challenge .body .punch { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--brombeer); margin-top: 36px; }
@media (max-width: 860px) { .challenge { grid-template-columns: 1fr; } .challenge .lede { position: static; } }

/* Zwei Wege */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); margin-top: 64px; }
.pillar h3 { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 10px; color: #fff; }
.pillar > p { margin-bottom: 28px; }
.svc { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--linie-dunkel); text-decoration: none; transition: padding .35s var(--ease); }
.svc:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.svc::before { content: ""; position: absolute; inset: 0 -16px; z-index: -1; background: rgba(193, 122, 118, .12); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.svc:hover, .svc:focus-visible { padding-left: 14px; }
.svc:hover::before, .svc:focus-visible::before { transform: scaleX(1); }
.svc strong { font-size: 24px; font-weight: 400; color: #fff; }
.svc span { grid-column: 1; color: var(--text-auf-dunkel-leise); font-size: 16px; }
.svc em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 15px; color: var(--taupe); align-self: center; transition: transform .35s; }
.svc:hover em { transform: translateX(6px); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* Stimmen */
.home-voices { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); margin-top: 56px; }
.home-voices .stack { display: grid; gap: 44px; align-content: start; }
.home-voices .stack .quote blockquote { font-size: 20px; }
@media (max-width: 860px) { .home-voices { grid-template-columns: 1fr; } }

/* Bühne */
.stage { display: grid; grid-template-columns: 7fr 5fr; min-height: 560px; background: var(--anthrazit); color: #E9EEF0; }
.stage .parallax { min-height: 360px; }
.stage .parallax img { width: 100%; height: 100%; object-fit: cover; }
.stage__text { padding: clamp(48px, 6vw, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.stage__text h2 { color: #fff; margin-bottom: 24px; }
.stage__text p { color: var(--text-auf-dunkel); }
.stage__text .actions { margin: 6px 0 26px; }
.stage__text .media-note { font-size: 16px; color: var(--text-auf-dunkel-leise); border-top: 1px solid var(--linie-dunkel); padding-top: 20px; margin-top: 12px; }
@media (max-width: 860px) { .stage { grid-template-columns: 1fr; } .stage .parallax { height: 62vw; min-height: 0; } }

/* Gründerin */
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.founder__img { position: sticky; top: calc(var(--header-h) + 24px); isolation: isolate; }
.founder__img img { width: 100%; max-width: 480px; margin-inline: auto; }
.founder h2 { margin-bottom: 30px; }
.founder .first { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.45; color: var(--anthrazit); }
.founder .body p { color: var(--text-leise); }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder__img { position: relative; top: 0; max-width: 420px; } }

/* Zwischen Tablet und Desktop: Text bleibt links neben dem Porträt */
@media (min-width: 861px) and (max-width: 1060px) { .hero__text { max-width: 52%; } }