:root{--about-night:#101322;--about-navy:#071a2d;--about-petrol:#0d4551;--about-gold:#FFD64F;--about-paper:#f5f1e8;--about-ink:#152435}
html{scroll-behavior:smooth}.about-progress{position:fixed;z-index:1300;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--about-gold),#f3d89d);box-shadow:0 0 14px rgba(201,157,74,.5)}
.about-hero{min-height:92vh;position:relative;display:grid;align-items:end;overflow:hidden;color:#fff}.about-hero__image{position:absolute;inset:0;width:100%;height:115%;object-fit:cover;object-position:center 42%;will-change:transform}.about-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,45,.94),rgba(7,26,45,.65) 52%,rgba(7,26,45,.18)),linear-gradient(0deg,rgba(7,26,45,.78),transparent 52%)}.about-hero__inner{position:relative;z-index:2;padding-block:clamp(9rem,17vh,13rem) clamp(5rem,10vh,8rem);max-width:900px}.about-kicker{color:var(--about-gold);font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase}.about-hero h1{font-family:var(--ff-serif);font-size:clamp(4.5rem,11vw,10rem);line-height:.82;letter-spacing:-.055em;margin:.18em 0 .28em}.about-hero__inner>p:not(.about-kicker){max-width:650px;font-size:clamp(1.08rem,1.8vw,1.35rem);line-height:1.7;color:rgba(255,255,255,.84)}.about-scroll{display:inline-flex;align-items:center;gap:14px;margin-top:2rem;color:#fff;text-decoration:none;font-weight:600}.about-scroll span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:var(--about-gold)}
.about-section{padding-block:clamp(6rem,11vw,10rem);background:var(--about-paper);color:var(--about-ink)}.about-heading{max-width:850px;margin-bottom:clamp(4rem,7vw,7rem)}.about-heading h2,.statement-lead h2,.questions-copy h2,.institute-copy h2{font-family:var(--ff-serif);font-size:clamp(3rem,6vw,6rem);line-height:.94;letter-spacing:-.04em;margin:.15em 0 .45em}.about-heading>p:not(.about-kicker){max-width:760px;line-height:1.8;color:#536273}
.story-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(3rem,7vw,8rem);align-items:center;margin-bottom:clamp(7rem,12vw,12rem)}.story-row--reverse .story-media{order:2}.story-row--reverse .story-copy{order:1}.story-media{overflow:hidden;border-radius:28px;box-shadow:0 30px 80px rgba(7,26,45,.15);clip-path:inset(0)}.story-row--reverse .story-media{clip-path:inset(0)}.story-media img{display:block;width:100%;aspect-ratio:1/1.03;object-fit:cover;transform:none}.story-number{display:block;color:var(--about-gold);font:700 .82rem var(--ff-sans);letter-spacing:.15em}.story-copy h3{font-family:var(--ff-serif);font-size:clamp(2.2rem,4vw,4rem);line-height:1;margin:.32em 0 .6em}.story-copy p{line-height:1.85;color:#435466}.story-copy blockquote{margin:2rem 0;padding:1.4rem 0 1.4rem 1.8rem;border-left:3px solid var(--about-gold);font-family:var(--ff-serif);font-size:1.35rem;line-height:1.55;color:var(--about-petrol)}.story-copy cite{display:block;margin-top:.6rem;font:600 .76rem var(--ff-sans);letter-spacing:.12em;text-transform:uppercase}
.statement-section{background:var(--about-night);color:#fff;padding-block:clamp(6rem,12vw,11rem)}.statement-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(4rem,8vw,9rem);align-items:start}.statement-lead{position:sticky;top:120px}.statement-lead p:not(.about-kicker){line-height:1.85;color:rgba(255,255,255,.72)}.statement-cards{display:grid;gap:1.5rem}.reason-card{padding:clamp(2rem,4vw,3.3rem);border:1px solid rgba(255,255,255,.11);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));backdrop-filter:blur(12px)}.reason-card span{color:var(--about-gold);font-weight:700}.reason-card h3{font-family:var(--ff-serif);font-size:clamp(1.8rem,3vw,2.8rem);margin:.4em 0}.reason-card p{line-height:1.8;color:rgba(255,255,255,.7)}
.team-section{background:#ece6da}.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem)}.team-card{display:grid;grid-template-columns:minmax(150px,.8fr) 1fr;gap:2rem;align-items:end}.team-photo{overflow:hidden;border-radius:24px;background:#d9d2c6}.team-photo img{display:block;width:100%;aspect-ratio:.92/1;object-fit:cover;filter:saturate(.92);transition:transform .6s ease}.team-card:hover img{transform:scale(1.035)}.team-card p{margin:0 0 .6rem;color:var(--about-gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}.team-card h3{font-family:var(--ff-serif);font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.05;margin:0}
.questions-section{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;background:var(--about-petrol);color:#fff}.questions-image{overflow:hidden}.questions-image img{width:100%;height:100%;object-fit:cover;display:block}.questions-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(4rem,8vw,9rem)}.questions-copy p:not(.about-kicker){line-height:1.85;color:rgba(255,255,255,.75)}.questions-copy .btn{align-self:flex-start;margin-top:1.5rem}
.institute-section{padding-block:clamp(6rem,11vw,10rem);background:linear-gradient(135deg,#e9e2d6,#f8f5ef)}.institute-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(4rem,8vw,9rem);align-items:center}.institute-copy p:not(.about-kicker){line-height:1.85;color:#536273}.institute-mark{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6c77e,var(--about-gold) 45%,#7e5d24);box-shadow:0 35px 90px rgba(75,54,20,.25);font-family:var(--ff-serif);font-size:clamp(3.5rem,8vw,8rem);color:#fff;letter-spacing:-.05em}
.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(45px)}
@media(max-width:900px){.story-row,.statement-grid,.questions-section,.institute-grid{grid-template-columns:1fr}.story-row--reverse .story-media,.story-row--reverse .story-copy{order:initial}.statement-lead{position:static}.questions-image{min-height:480px}.team-card{grid-template-columns:1fr}.institute-mark{max-width:420px}.about-hero{min-height:82vh}}
@media(max-width:680px){.about-hero__inner{padding-block:8rem 4rem}.story-row{margin-bottom:6rem}.story-media,.story-row--reverse .story-media{clip-path:inset(0)}.team-grid{grid-template-columns:1fr}.questions-image{min-height:340px}.questions-copy{padding:4rem 24px}.institute-mark{width:78vw}.about-heading h2,.statement-lead h2,.questions-copy h2,.institute-copy h2{font-size:clamp(2.8rem,13vw,4.2rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none}.story-media,.story-row--reverse .story-media{clip-path:inset(0)}.story-media img,.about-hero__image{transform:none!important}}

/* Ruhigere Typografie und kompaktere Inhaltsdramaturgie */
.about-hero h1,
.about-heading h2,
.statement-lead h2,
.questions-copy h2,
.institute-copy h2,
.story-copy h3,
.reason-card h3,
.team-card h3,
.story-copy blockquote,
.institute-mark{
  font-family:var(--ff-display);
  letter-spacing:-.012em;
}
.about-hero h1{
  line-height:.9;
  margin:0 0 .28em;
}
.about-hero .about-kicker{
  margin:0 0 clamp(1.15rem,2.2vw,1.8rem);
}
.about-section{
  padding-block:clamp(4.75rem,8vw,7.5rem);
}
.about-heading{
  margin-bottom:clamp(2.75rem,4.5vw,4.5rem);
}
.story-row{
  gap:clamp(2.5rem,5vw,6rem);
  margin-bottom:clamp(4.5rem,8vw,8rem);
}
.story-row:last-child{margin-bottom:0}
.statement-section{
  padding-block:clamp(4.75rem,8.5vw,8rem);
}
.statement-grid{
  gap:clamp(3rem,6vw,7rem);
}
.institute-section{
  padding-block:clamp(4.75rem,8vw,7.5rem);
}
.institute-image{
  overflow:hidden;
  border:3px solid #fff;
  border-radius:28px;
  background:#fff;
  box-shadow:0 30px 80px rgba(7,26,45,.18);
}
.institute-image img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:65% center;
  transition:transform .7s cubic-bezier(.2,.75,.25,1);
}
.institute-image:hover img{transform:scale(1.025)}

/* Der zweite Geschichtsabschnitt „02 · Danach“ in Lavendelgrau. */
.story-row--reverse{
  background:#ECECF8;
  border-radius:28px;
}

/* Zuverlaessiges Hereingleiten des zweiten Bildes von rechts. */
.js .story-row--reverse .story-media.story-media--slide-right{
  opacity:0;
  transform:translateX(72px);
  clip-path:inset(0);
  transition:opacity .72s ease,transform .78s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.js .story-row--reverse .story-media.story-media--slide-right.is-visible{
  opacity:1;
  transform:translateX(0);
  will-change:auto;
}
.js .story-row--reverse .story-media.story-media--slide-right img{
  transform:none;
}

@media(prefers-reduced-motion:reduce){
  .js .story-row--reverse .story-media.story-media--slide-right{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Gewuenschte schwarze Akzente auf den hellen Bereichen. */
.story .about-kicker,
.story-number,
.team-section .about-kicker,
.team-card p{
  color:#000;
}

/* Bibelzitat im Statementbereich. */
.statement-lead .statement-quote{
  margin:2rem 0;
  padding:1.4rem 1.6rem;
  border-left:4px solid #FFD64F;
  background:#F5F1E8;
  color:#152435;
  font-family:var(--ff-sans);
  font-size:1.06rem;
  line-height:1.82;
}

@media(max-width:680px){
  .about-hero .about-kicker{margin-bottom:1rem}
  .story-row{margin-bottom:4.25rem}
  .institute-image{border-radius:20px}
  .institute-image img{aspect-ratio:16/11;object-position:68% center}
}

/* Kompakterer Fragenbereich mit kleinerem Bild und ruhigerer Überschrift. */
.questions-section{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:68vh}
.questions-image{align-self:center;height:min(62vh,620px);border-radius:0 28px 28px 0}
.questions-copy h2{font-size:clamp(2.4rem,4.2vw,4.6rem)}

/* Etwas mehr Luft zwischen Institutstext und Handlungsbutton. */
.institute-copy .btn{margin-top:1.25rem}

/* Institut-Eyebrow auf der hellen Flaeche schwarz. */
.institute-copy>.about-kicker{color:#000}

@media(max-width:900px){
  .questions-section{grid-template-columns:1fr;min-height:0;padding-top:2rem}
  .questions-image{width:min(88%,720px);height:min(52vh,460px);min-height:0;border-radius:0 24px 24px 0}
}
@media(max-width:680px){
  .questions-image{width:calc(100% - 24px);height:min(46vh,380px);border-radius:0 20px 20px 0}
  .questions-copy h2{font-size:clamp(2.35rem,10.5vw,3.55rem)}
}

/* Einheitliche Größe der Haupttitel wie auf der Startseite. */
.about-hero h1{font-size:clamp(3rem,8.5vw,7rem)}

/* Haupttitel-Raster wie auf der Israel-Reisen-Seite. */
.about-hero>.about-hero__inner{width:min(calc(100% - 44px),1200px);max-width:1200px;padding-inline:0}
@media(max-width:680px){.about-hero>.about-hero__inner{width:min(calc(100% - 28px),1200px)}}
