* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: #fff;
  background: url("assets/verlauf.png") center center / auto no-repeat, url("assets/hintergrund.gif") center top repeat;
  font-family: "Copperplate Gothic Light", "Century Gothic", Tahoma, Arial, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
a:hover { text-decoration: underline; }
.site { width: 730px; min-height: 570px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.slogan { height: 40px; margin: 0 0 44px; border-bottom: 1px solid #d1d1d1; text-align: center; }
.slogan span, .contact span { padding: 0 .35em; }
.logo { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.content { display: flex; margin-top: 44px; }
.photo { display: block; width: 355px; height: 280px; object-fit: cover; }
.description { width: 355px; height: 280px; margin-left: auto; padding: 30px; display: flex; align-items: flex-end; background: #b3b3b3; box-shadow: inset 0 0 20px #9b9b9b; }
.description p, .contact p { margin: 0; }
.contact { margin-top: 45px; text-align: center; font-size: 14px; }
.legal-nav { position: fixed; right: 10px; bottom: 3px; display: flex; align-items: center; gap: 1.5em; font-size: 12px; }
.legal-nav img { display: block; }
.legal-content { margin-top: 50px; color: #222; font-family: "Century Gothic", Tahoma, Arial, sans-serif; font-size: 14px; text-transform: none; }
.legal-content h1, .legal-content h2 { font-weight: normal; border-bottom: 1px solid #222; }
.legal-content h1 { margin: 0 0 15px; font-size: 20px; }
.legal-content h2 { margin: 30px 0 15px; font-size: 16px; }
.legal-content p { margin: 0; }
.agency { display: flex; gap: 40px; }
.privacy-site { position: relative; top: auto; left: auto; transform: none; width: min(730px, calc(100% - 32px)); min-height: 0; margin: 70px auto 80px; }
.privacy-content { line-height: 1.55; overflow-wrap: anywhere; }
.privacy-content h2 { margin-top: 32px; }
.privacy-content h3 { margin: 24px 0 8px; font-size: 15px; }
.privacy-content p { margin: 0 0 1em; }
.privacy-content ul { padding-left: 1.5em; }
body:has(.privacy-site) .legal-nav { position: static; justify-content: flex-end; margin: 0 16px 12px; }
@media (max-width: 770px), (max-height: 620px) {
  body { min-height: 100vh; }
  .site { position: relative; top: auto; left: auto; transform: none; width: min(730px, calc(100% - 32px)); min-height: 0; margin: 35px auto 75px; }
  .legal-nav { position: static; justify-content: flex-end; margin: 0 16px 12px; }
}
@media (max-width: 600px) {
  .slogan { font-size: 14px; margin-bottom: 32px; }
  .content { flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
  .photo, .description { width: min(355px, 100%); }
  .photo { height: auto; }
  .description { margin: 0; min-height: 200px; height: auto; }
  .contact { margin-top: 32px; line-height: 1.5; font-size: 12px; }
  .agency { flex-wrap: wrap; gap: 16px; }
}