/* wedenig.net — gemeinsames Stylesheet für index, vita, kontakt, fortbildung_supervision */

:root {
  --color-bg: rgb(218 165 32);
  --color-purple: rgba(77, 0, 139, .89);
  --color-cream: rgba(250, 235, 215, .89);
  --font-sans: Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-bg);
  margin: 0;
}

.bg-om {
  background-image: url('hintergrund.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Kopfzeile / Marquee */

.unter_unter {
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: .1em;
  word-spacing: .05em;
  padding: 2rem 1rem 0;
}

.unter_unter span {
  display: block;
  margin: auto;
  font-weight: 500;
}

.u_u {
  font-size: 1rem;
}

.since_a {
  font-size: 1rem;
  line-height: 1.3em;
  opacity: .63;
  margin-bottom: 1rem;
}

.since_s {
  font-size: .9rem;
  font-style: italic;
}

.since_h {
  display: inline-block;
  width: 1.3rem;
  height: 1rem;
  opacity: .63;
  margin-bottom: -.15em;
}

.box {
  display: flex;
}

.box .inner {
  width: 99vw;
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  color: var(--color-purple);
  transform-origin: right;
  transform: perspective(13.6rem) rotateY(-15deg);
}

.box .inner:last-child {
  color: var(--color-cream);
  transform-origin: left;
  transform: perspective(13.6rem) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 2.5s;
  left: -100%;
}

@keyframes marquee {
  from { left: 70%; }
  to   { left: -70%; }
}

@media (max-width: 679px) {
  .inner { font-size: 1.2rem; height: 2.6rem; line-height: 2.6rem; }
}

@media (min-width: 680px) {
  .inner { font-size: 2.9rem; height: 4.9rem; line-height: 4.9rem; }
}

/* Fließtext */

.under_unter {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .05em;
  word-spacing: .03em;
  padding: 1rem 2rem 2rem;
  line-height: 1.2em;
  text-align: center;
  margin: auto;
}

.under_under {
  font-size: 1rem;
}

.under_aet {
  font-size: .96rem;
}

/* Navigation */

nav {
  padding: 1.5rem 0 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  letter-spacing: .08em;
}

nav a {
  color: var(--color-purple);
  text-decoration: none;
  margin: 0 1rem;
  font-weight: 600;
}

nav a:hover {
  text-decoration: underline;
}

/* Porträtfoto (vita, fortbildung_supervision) */

.foto-wrap {
  margin: 1.5rem auto 0;
  max-width: 220px;
}

.foto-wrap img {
  width: 100%;
  border-radius: 3px;
  opacity: .93;
  display: block;
}

/* Vita-Weblinks */

.vita-links {
  font-size: .93rem;
  opacity: .8;
  margin-top: .5rem;
}

.vita-links a {
  color: var(--color-purple);
  text-decoration: none;
}

.vita-links a:hover {
  text-decoration: underline;
}

/* Impressum (kontakt) */

.impressum {
  font-size: .89rem;
  opacity: .6;
  margin-top: 2rem;
  padding: 0 2rem 2rem;
  line-height: 1.6em;
  font-family: var(--font-sans);
}