.svg-page{
   padding-bottom: 2rem;
}

.svg-showcase{
   display: grid;
   gap: 2rem;
}

.svg-intro,
.svg-toolbar,
.svg-stage{
   background: var(--white);
   border: var(--border);
   border-radius: var(--radius);
   box-shadow: var(--box-shadow);
}

.svg-intro{
   padding: 2.4rem;
}

.svg-intro .heading{
   text-align: left;
   margin-bottom: 1rem;
}

.svg-toolbar{
   padding: 2rem;
   display: grid;
   gap: 1.6rem;
}

.svg-selector{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
   gap: 1rem;
}

.svg-option{
   border: var(--border);
   border-radius: .9rem;
   background: var(--light-bg);
   color: var(--black);
   padding: 1.4rem;
   text-align: left;
   cursor: pointer;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.svg-option:hover,
.svg-option:focus-visible{
   transform: translateY(-2px);
   box-shadow: 0 .8rem 2rem rgba(15,27,45,.12);
   border-color: rgba(26,79,216,.35);
}

.svg-option.is-active{
   background: #eaf1ff;
   border-color: rgba(26,79,216,.35);
}

.svg-option-title{
   display: block;
   font-size: 1.8rem;
   font-weight: 600;
   margin-bottom: .6rem;
}

.svg-option-copy{
   display: block;
   font-size: 1.4rem;
   color: var(--light-color);
   line-height: 1.5;
}

.svg-actions{
   display: flex;
   justify-content: flex-end;
}

.svg-actions .inline-btn{
   margin-top: 0;
}

.svg-stage{
   padding: 2rem;
}

.svg-stage-head{
   display: flex;
   justify-content: space-between;
   gap: 1.2rem;
   align-items: start;
   margin-bottom: 1.5rem;
}

.svg-stage-head h2{
   font-size: 2.4rem;
   margin-bottom: .6rem;
}

.svg-stage-head p{
   color: var(--light-color);
   font-size: 1.6rem;
   padding: 0;
}

.svg-status{
   background: var(--light-bg);
   border: var(--border);
   border-radius: 999px;
   padding: .6rem 1.2rem;
   font-size: 1.3rem;
   color: var(--light-color);
   white-space: nowrap;
}

.svg-container{
   min-height: 32rem;
   display: grid;
   place-items: center;
   border-radius: var(--radius);
   background: #f5f5f5;
   overflow: hidden;
   padding: 1.5rem;
}

.svg-container svg{
   width: min(100%, 62rem);
   height: auto;
}

.svg-error{
   background: #fff1f0;
   border: .1rem solid rgba(231,76,60,.25);
   border-radius: var(--radius);
   color: var(--red);
   font-size: 1.6rem;
   padding: 1.4rem 1.6rem;
   margin-bottom: 1.5rem;
}

@keyframes stroke-draw{
   to{
      stroke-dashoffset: 0;
   }
}

@keyframes svg-fill-white{
   to{
      fill: hsl(0, 0%, 100%);
   }
}

@keyframes taube1{
   to{
      stroke-dashoffset: 0;
   }
}

@keyframes taube2{
   to{
      stroke-dashoffset: 0;
   }
}

@keyframes taube3{
   to{
      stroke-dashoffset: 0;
   }
}

@keyframes hase{
   to{
      stroke-dashoffset: 0;
   }
}

@keyframes hirsch{
   to{
      stroke-dashoffset: 0;
   }
}

#taube1{stroke-dasharray:296;stroke-dashoffset:296;}
.taube1{animation:taube1 5s 7s linear forwards, svg-fill-white 12s 5s forwards;}
#taube2{stroke-dasharray:387;stroke-dashoffset:387;}
.taube2{animation:taube2 5s 7s linear forwards, svg-fill-white 12s 5s forwards;}
#taube3{stroke-dasharray:387;stroke-dashoffset:387;}
.taube3{animation:taube3 5s 7s linear forwards, svg-fill-white 12s 5s forwards;}
#hase{stroke-dasharray:387;stroke-dashoffset:387;}
.hase{animation:hase 5s linear forwards, svg-fill-white 2s 3s forwards;}
#hirsch{stroke-dasharray:387;stroke-dashoffset:387;}
.hirsch{animation:hirsch 5s 2s linear forwards, svg-fill-white 6s 5s forwards;}

#raeder{
   animation: raeder 12s linear infinite;
   transform-origin: center;
   transform-box: fill-box;
}

@keyframes raeder{
   from{transform: rotateZ(360deg);}
   to{transform: rotateZ(0deg);}
}

#raeder:hover,
#raeder:focus{
   filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

#left-tree,
#baum{
   animation: trees 2s linear infinite;
   transform-origin: bottom;
   transform-box: fill-box;
}

@keyframes trees{
   0%,
   100%{transform: rotate(2deg);}
   50%{transform: rotateY(-8deg);}
}

#mond{
   animation: mond 2s linear infinite;
   transform-box: fill-box;
   transform-origin: bottom;
}

@keyframes mond{
   0%,
   100%{transform: scale(1.03) rotate(1deg);}
   50%{transform: scale(1) rotate(-1deg);}
}

#schwalbe{
   animation: schwalbe 5s linear;
   transform-box: fill-box;
}

@keyframes schwalbe{
   from{transform: translateX(1px);}
   to{transform: translateX(58px);}
}

#licht{
   animation: licht-pulse 5s linear infinite;
   transform-box: fill-box;
   transform-origin: bottom;
}

@keyframes licht-pulse{
   0%,
   100%{fill: inherit; transform: scale(1) rotate(0deg);}
   25%,
   50%{fill: rgb(255, 208, 0); transform: scale(1.08) rotate(2deg);}
}

#licht:hover,
#licht:focus{
   filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

#wolke1{stroke-dasharray:108;stroke-dashoffset:108;}
.wolke1{animation:stroke-draw 3s linear forwards, svg-fill-white 2s 3s forwards;}
#wolke2{stroke-dasharray:108;stroke-dashoffset:108;}
.wolke2{animation:stroke-draw 3s 2.5s linear forwards, svg-fill-white 2s 5s forwards;}

@media (max-width: 768px){
   .svg-stage-head{
      flex-direction: column;
   }

   .svg-actions{
      justify-content: stretch;
   }

   .svg-actions .inline-btn{
      width: 100%;
   }
}