/* Unterseiten im selben Spaltenraster wie die Startseite. Kein Wasserzeichen. */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--forest-900);
  border-bottom:1px solid rgba(247,246,236,.18);
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.site-header.is-hidden{transform:translateY(-110%);pointer-events:none}

.hero-mark{display:none}

.hero{
  min-height:0;
  overflow:visible;
  background:var(--forest-900);
  color:var(--cream-100);
  border-bottom:1px solid rgba(247,246,236,.14);
}
.hero-body{
  align-items:stretch;
  padding:clamp(132px,16vh,176px) 0 clamp(64px,8vh,96px);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);
  column-gap:clamp(28px,4vw,88px);
  row-gap:clamp(16px,2vh,28px);
  align-items:end;
}
.hero-copy{
  display:contents;
  border:0;
  padding:0;
  max-width:none;
}
.hero .label{
  grid-column:1;
  grid-row:1;
  align-self:end;
  margin:0 0 .4em;
  max-width:14ch;
  color:rgba(247,246,236,.62);
}
.hero h1{
  grid-column:2;
  grid-row:1;
  margin:0;
  max-width:12em;
  min-height:0;
  font-size:clamp(2.8rem,.8rem + 4.2vw,5.15rem);
  line-height:.94;
  letter-spacing:-.032em;
}
.hero-lead{
  grid-column:2;
  grid-row:2;
  margin:0;
  max-width:38ch;
  color:rgba(247,246,236,.72);
}
.hero-actions{
  grid-column:2;
  grid-row:3;
  margin-top:4px;
}
.hero .btn--primary{display:none}
.hero .link-arrow{color:var(--cream-100)}

.section{padding-block:clamp(112px,12vh,160px)}

.topic,
.vms,
.person,
.tier{
  column-gap:clamp(28px,4vw,88px);
}
.topic{
  grid-template-columns:1fr;
  align-items:start;
}
.topic-key{position:static;max-width:40rem}
.topic-key h2{
  text-wrap:pretty;
  font-size:clamp(2rem,1.1rem + 1.8vw,2.95rem);
  line-height:1.12;
  letter-spacing:-.024em;
}
.svc2 > li{grid-template-columns:minmax(17rem,.42fr) minmax(0,1fr)}
.svc2 h3,.wz-step legend{text-wrap:pretty;hyphens:manual;overflow-wrap:normal}

.paths{
  grid-template-columns:1fr;
  border-top:1px solid var(--cream-300);
}
.path{
  display:grid;
  grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);
  gap:12px clamp(28px,4vw,72px);
  padding:clamp(28px,4vh,44px) 0;
  border-right:0;
  border-bottom:1px solid var(--cream-300);
}
.path:not(:first-child){padding-left:0}
.path:last-child{border-right:0}

/* Erster Screen, Unternehmen im Wandel.
   Eine Gruppe am unteren Rand. Die Luft liegt darüber, nicht zwischen den Zeilen. */
.hero.hero-field{
  min-height:100dvh;
  height:100dvh;
  background:var(--forest-900);
  border-bottom:0;
}
.hero.hero-field .hero-body{
  flex:1;
  display:flex;
  align-items:stretch;
  padding:0;
  min-height:0;
}
.hero.hero-field .hero-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:1fr auto auto auto;
  column-gap:24px;
  row-gap:28px;
  align-items:end;
  padding-bottom:36px;
  background-image:none;
}
.hero.hero-field .label{
  grid-column:1 / 4;
  grid-row:2 / 4;
  align-self:center;
  margin:0;
  max-width:14ch;
}
.hero.hero-field h1{
  grid-column:4 / 13;
  grid-row:2;
  align-self:end;
  margin:0;
  max-width:none;
  font-size:clamp(3.1rem, 1rem + 4vw, 5.25rem);
  line-height:.94;
  letter-spacing:-.034em;
}
.hero.hero-field .hero-lead{
  grid-column:4 / 9;
  grid-row:3;
  align-self:start;
  margin:0;
  max-width:36ch;
}
.hero.hero-field .hero-actions{
  grid-column:4 / 9;
  grid-row:4;
  align-self:start;
  margin:0;
}

@media (max-width:860px){
  .hero.hero-field{height:auto;min-height:0}
  .hero.hero-field .hero-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    background-image:none;
    row-gap:20px;
    padding-block:112px 64px;
  }
  .hero.hero-field .label,
  .hero.hero-field h1,
  .hero.hero-field .hero-lead,
  .hero.hero-field .hero-actions{
    grid-column:1;
    grid-row:auto;
  }
  .hero.hero-field h1{font-size:clamp(2.2rem, 9vw, 3rem)}
}

@media (max-width:860px){
  .hero-grid,.topic,.path,.tier,.svc2 > li{grid-template-columns:1fr}
  .hero .label,.hero h1,.hero-lead,.hero-actions{grid-column:1}
  .hero h1{font-size:clamp(2.4rem,10vw,3.4rem)}
}
