@font-face {
  font-family: 'StudioImpact';
  src: url('assets/Impact.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* StudioRE – ohne Framework und ohne JavaScript.
   Bilder: B02 links, B01 rechts. Alle Masse skalieren mit der Textfläche. */
:root {
  --studio-blue: #194d7e;
  --paper: #faf7f8;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-width: 280px; color: var(--studio-blue); font-family: Arial, Helvetica, sans-serif; }
.collage { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.collage__left { object-position: center; }
.collage__right { object-position: center; }
.stage { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 28.1svh 0 27svh; }
.studio { width: 39%; background: var(--paper); container-type: inline-size; }
.intro { margin: 0; padding: 0 .8cqw; font-size: 6.05cqw; line-height: 1.23; font-style: italic; letter-spacing: -.035cqw; }
/* Mitgelieferte Impact lokal eingebunden. */
.wordmark { margin: 0; height: 24cqw; font-family: 'StudioImpact', Impact, sans-serif; font-weight: 400; }
.wordmark svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.wordmark text { font-size: 270px; }
.principles { padding: 0 .5cqw; text-align: center; }
.principles p { margin: 0; font-size: 6.6cqw; line-height: 1.21; letter-spacing: -.13cqw; white-space: nowrap; }
.contact { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; padding: .8cqw .6cqw .5cqw; font-size: 2.7cqw; line-height: 1.25; font-weight: 700; font-style: normal; white-space: pre-wrap; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-aspect-ratio: 6/5) {
  .studio { width: 70%; }
  .stage { padding: 22svh 0; }
}
@media (max-width: 600px) {
  .studio { width: calc(100% - 32px); max-width: 470px; }
  .stage { padding: 23svh 0; }
  .intro { padding: 2cqw 2cqw 1cqw; }
  .contact { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 2cqw 1cqw 2.5cqw; font-size: 3.5cqw; white-space: normal; }
  .contact__separator { display: none; }
  .contact a { padding: .15em .3em; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .stage { padding-block: 40px; }
  .studio { width: min(55%, 620px); }
}