#svgWrapper {
  display: inline-block;
  width: 90%;
  height: auto;
  cursor: pointer;
  padding: 5px; }
  #svgWrapper svg {
    stroke-width: 7;
    width: 90%;
    height: auto;
    transition: transform .5s ease-out;
    padding: 5px; }
    #svgWrapper svg #stroke-c .c {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      stroke-width: 7;
      animation: christoph-c 2s linear forwards .5s; }
    #svgWrapper svg #stroke-air .air1 {
      opacity: 0;
      stroke-width: 30;
      stroke-linecap: round;
      animation: christoph-air1 .175s linear forwards 3.5s; }
    #svgWrapper svg #stroke-air .air2 {
      opacity: 0;
      stroke-width: 30;
      stroke-linecap: round;
      animation: christoph-air2 .175s linear forwards 5s; }
    #svgWrapper svg #stroke-pair .pair {
      opacity: 0;
      stroke-width: 30;
      stroke-linecap: round;
      animation: christoph-pair .175s linear forwards 8.25s; }
    #svgWrapper svg #stroke .hri {
      stroke-dasharray: 3600;
      stroke-dashoffset: 3600;
      stroke-width: 7;
      animation: christoph-hri 6s linear forwards 2.5s; }
    #svgWrapper svg #stroke .s {
      stroke-dasharray: 3600;
      stroke-dashoffset: 3600;
      stroke-width: 7;
      animation: christoph-s 6s linear forwards 3.25s; }
    #svgWrapper svg #stroke .t {
      stroke-dasharray: 3600;
      stroke-dashoffset: 3600;
      stroke-width: 7;
      animation: christoph-t 6s linear forwards 3.5s; }
    #svgWrapper svg #stroke .o {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      stroke-width: 7;
      animation: christoph-o 6s linear forwards 4.5s; }
    #svgWrapper svg #stroke .ph {
      stroke-dasharray: 3600;
      stroke-dashoffset: 3600;
      stroke-width: 7;
      animation: christoph-ph 6s linear forwards 5s; }
    #svgWrapper svg #stroke .ipunkt {
      stroke-dasharray: 3600;
      stroke-dashoffset: 3600;
      stroke-width: 7;
      animation: christoph-ipunkt 4s linear forwards 7s; }
    #svgWrapper svg #stroke-physiotherapie .physiotherapie {
      stroke-dasharray: 2400;
      stroke-dashoffset: 2400;
      stroke-width: 30;
      animation: christoph-physiotherapie 4s linear forwards 8s; }
  #svgWrapper:not(.clicked):hover svg {
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.3, 0.86, 0.61, 1.63); }

@keyframes christoph-c {
  0% {
    stroke-dashoffset: 1200; }
  33% {
    stroke-width: 5; }
  90% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-hri {
  0% {
    stroke-dashoffset: 3600; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-s {
  0% {
    stroke-dashoffset: 3600; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-t {
  0% {
    stroke-dashoffset: 3600; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-o {
  0% {
    stroke-dashoffset: 1200; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-ph {
  0% {
    stroke-dashoffset: 3600; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-ipunkt {
  0% {
    stroke-dashoffset: 3600; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 7; } }
@keyframes christoph-air1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes christoph-air2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes christoph-pair {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes christoph-physiotherapie {
  0% {
    stroke-dashoffset: 2400; }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 30; } }