.logo {
  position:relative;
  text-align:center;
  width:100%; /* an maximal vorhanden Platz anpassen */
}

/* = h1 */

h1.site-name {
  display:block;
  padding-top:1rem;
  line-height:1.2;
  font-family: Traub, sans-serif;
  font-size:2.8rem;
  color:white;
  atext-shadow:1px 1px 5px #00001e; /* nicht nötig und stört bei Animation */
  text-decoration:none;
  text-align:center;
}
/* Animation hier gesehen: https://www.drupal8-w3css-theme.flashwebcenter.com/ */
@-webkit-keyframes site-name {
  0% {background-position: 200% 50%;} /* war 250% 50% */
  100% {background-position: 0% 50%;} /* war 0% 50% */
}
@keyframes site-name {
  0% {background-position: 200% 50%;} /* war 250% 50% */
  100% {background-position: 0% 50%;} /* war 0% 50% */
}

.user-logged-in h1.site-name {
  atransition: 0.4s; /* oder evtl nur Link Animation? */
  display:block;
  padding-top:1rem;
  line-height:1.2;
  font-family: Traub, sans-serif;
  font-size:2.8rem;
  atext-shadow:1px 1px 5px #00001e; /* nicht nötig und stört bei Animation */
  text-shadow:none;
  color: white;
  background-color: white;
  /* ohne Hintergrundfarbei und nur der Gradient bis 100% interessanter Bannerverlauf */
  background-size: 160% 200%; /* war 200% 200% */
  animation: site-name 12s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* einfacher Gradient erstmal, falls Animation nicht geht: */
  background-image: -webkit-linear-gradient(45deg, #ffffff, #dddddd 100%);
  background-image: -moz-linear-gradient(to top right, #ffffff 0, #dddddd 100%);
  background-image: linear-gradient(to top right, #ffffff 0, #dddddd 100%);


  background-image: linear-gradient(to top right, transparent 0, white 30%, #eeeeee 80%, #dddddd 90%, transparent 100%);
  /* Regenbogen - Rot am Ende mehrmals wegen Animation */
  background-color: #f44336;
  background-image: linear-gradient(45deg,#f44336,#f44336,#f44336,#f44336,#f44336,#e91e63,#9037af,#9c27b0,#673ab7,#3f51b5,#2196f3,#87ceeb,#00bcd4,#00ffff,#009688,#4caf50,#8bc34a,#8bc34a,#8bc34a,#8bc34a,#4caf50,#009688,#00ffff,#00bcd4,#87ceeb,#2196f3,#3f51b5,#673ab7,#9037af,#9c27b0,#e91e63,#f44336);
}

small.site-slogan {
/* alt: 
  font-size:80%;
  font-variant:small-caps;
  font-family:inherit;
  font-weight:bold;
  letter-spacing: 4px;
  border-top:5px solid rgba(255,255,255,0.6);
  border-bottom:5px solid rgba(255,255,255,0.6);
  text-shadow:0 0 1px #00001e;
*/
  /* background-color:rgba(0, 0, 30, 0.5);*/
  font-size:70%;
  font-variant: initial;
  font-family:var(--text-font-family-bildbeschriftung), 'Kite One', 'Open Sans Condensed', sans-serif;
  font-style:normal;
  font-weight:bold;
  letter-spacing: 1px;
  display:block;
  padding:0.5rem 2%;
  color:white;
  background-color:rgba(0, 0, 30, 0.2);
  text-shadow: 1px 1px 3px #00001e;
  text-transform: none;
  text-align: center;
  margin-top:0.5rem;
  margin-bottom:1rem;
  border-top:1px solid white;
  border-bottom:1px solid white;
}
.auser-logged-in small.site-slogan {
  border:0;
}

a.IVD {
  display:block;
  padding:0;
  background-repeat:no-repeat;
  box-shadow: 1px 1px 3px #00001e;
  background-color:transparent;
  background-position:top right;
  background-size: contain;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F576F', endColorstr='#00001e',GradientType=1 );
}
a.IVD {
  position:absolute;
  top:3px;
  right:0;
  /* gleiche Höhe wie Schließen-Button im Menü */
  width: 2.6rem; /* war 2.0rem */
  height: 2.6rem; /* war 2.0rem */
}

a.IVD img {
  /* Rahmen aufheben */
  padding:0;
}

/* bei einspaltiger Darstellung Platz für Sandwich-Icon: */
@media only screen and (min-width:40em) {
  a.IVD {
    top:-1.5rem; /* Blockversatz*/
    right:-7%; /* siehe Layout blockversatz */
    right:-1.2rem; /* durch Ausprobieren */
    left:auto;
    height:2rem;
    width:2rem;
  }
}