:root {
  --ink: #11110f;
  --paper: #fbfbf9;
  --line: rgba(17, 17, 15, 0.86);
  --card-width: clamp(18rem, 31vw, 26.5rem);
  --page-gutter: clamp(1rem, 4vw, 3rem);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  /* Gleicher Ton wie theme-color: sichtbar beim Ueberscrollen und
     als Rueckfall fuer Browser, die die Leiste daraus ableiten. */
  background: #fbfbf9;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Helvetica Neue", "Nimbus Sans L", "Avenir Next", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Beide Ebenen liegen ueber dem Foto und muessen exakt gleich hoch
   sein wie dieses - sonst entsteht dort, wo sie enden, eine
   sichtbare Helligkeitskante hinter der Browserleiste. */
body::before {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    rgba(16, 14, 11, 0.08),
    rgba(16, 14, 11, 0.16)
  );
}

body::after {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.page-background {
  position: fixed;
  inset: 0;
  z-index: -3;
  display: block;
  overflow: hidden;
  pointer-events: none;
  /* Durchschnittsfarbe des Fotos: der Uebergang Farbe -> Foto faellt
     dadurch kaum auf. */
  background: #7b7a75;
  /* Ein fixer Bereich ist auf dem Handy nur so hoch wie das Fenster
     mit ausgefahrener Browserleiste. 100lvh zieht das Foto auch
     dahinter, damit unten kein Farbstreifen stehen bleibt.
     100vh ist der Rueckfall fuer aeltere Browser. */
  height: 100vh;
  height: 100lvh;
}

.page-background picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

/* Weiches Einblenden statt hartem Schnitt. Greift nur mit JS, weil
   erst das load-Event die Klasse setzt - sonst bliebe das Foto
   unsichtbar. */
.js .page-background img {
  opacity: 0;
  transition: opacity 600ms ease;
}

.js .page-background img.is-loaded {
  opacity: 1;
}

main {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  /* Durch viewport-fit=cover reicht die Seite bis in die Geraeteecken.
     env() haelt den Inhalt aus Notch und Home-Indikator heraus. */
  padding: calc(clamp(2.5rem, 7vh, 5.5rem) + env(safe-area-inset-top, 0px))
    calc(var(--page-gutter) + env(safe-area-inset-right, 0px))
    calc(clamp(8.5rem, 16vh, 10.5rem) + env(safe-area-inset-bottom, 0px))
    calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
}

.card {
  display: grid;
  width: min(100%, var(--card-width));
  aspect-ratio: 0.75;
  padding: clamp(2.75rem, 5.2vw, 4.6rem) clamp(1.6rem, 3.2vw, 3.1rem)
    clamp(2rem, 3.5vw, 3rem);
  background: var(--paper);
  grid-template-rows: auto 1fr auto;
  animation: card-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.contact {
  justify-self: center;
  color: var(--ink);
  font-size: clamp(1.12rem, 1.85vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-decoration: none;
  text-transform: uppercase;
}

.contact::after {
  display: block;
  width: 0;
  height: 0.08em;
  margin-top: 0.17em;
  margin-inline: auto;
  background: currentColor;
  content: "";
  transition: width 220ms ease;
}

.contact:is(:hover, :focus-visible)::after {
  width: 100%;
}

.contact:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0.35rem;
}

.services {
  align-self: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services li {
  display: grid;
  min-height: clamp(1.65rem, 2.6vw, 2.05rem);
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: clamp(0.58rem, 1vw, 0.8rem);
  font-weight: 400;
  grid-template-columns: 2.2em 1fr;
  letter-spacing: -0.026em;
  line-height: 1.1;
  transition: padding-left 180ms ease;
}

.services li:last-child {
  border-bottom: 1px solid var(--line);
}

.services li:hover {
  padding-left: 0.22rem;
}

.services .number {
  font-variant-numeric: tabular-nums;
}

.services li > span:last-child {
  white-space: nowrap;
}

.motto {
  display: grid;
  justify-self: center;
  margin: 0;
  font-size: clamp(1.35rem, 2.35vw, 1.9rem);
  font-weight: 700;
  justify-items: center;
  letter-spacing: -0.065em;
  line-height: 0.88;
  text-align: center;
  text-transform: uppercase;
}

.motto span {
  display: block;
  white-space: nowrap;
}

.site-footer {
  position: absolute;
  bottom: calc(
    clamp(1.15rem, 3.2vh, 2.25rem) + env(safe-area-inset-bottom, 0px)
  );
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min-content;
  transform: translateX(-50%);
  animation: footer-in 700ms 500ms ease both;
}

.studio-logo {
  display: block;
  margin: 0;
  color: var(--paper);
  text-decoration: none;
  font-size: clamp(0.62rem, 0.95vw, 0.8rem);
  font-weight: 400;
  /* Gleiche Laufweite wie die Services-Liste. */
  letter-spacing: -0.026em;
  line-height: 1;
  text-transform: uppercase;
  /* Der Footer ist width: min-content - ohne nowrap bricht der
     Schriftzug auf zwei Zeilen um. */
  white-space: nowrap;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Die Fläche ist grösser als das Icon: so bricht der Hover beim
   Wandern zwischen den Icons nicht ab und das Wachsen kann den
   Zielbereich nie verlassen. */
.social-links a {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  color: var(--paper);
  background: transparent;
  box-shadow: none;
  opacity: 0.84;
  text-decoration: none;
  transform: translateY(0) scale(1);
  transform-origin: center;
  /* Hebt das Icon auf eine eigene GPU-Ebene: die Linien werden
     beim Skalieren nicht neu gerastert und flimmern dadurch nicht. */
  will-change: transform, opacity;
  transition:
    opacity 260ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

.social-icon {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.social-links a:is(:hover, :focus-visible) {
  opacity: 1;
  transform: translateY(-0.09rem) scale(1.09);
}

.social-links a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.92);
  outline-offset: 0.14rem;
}

/* Dritte Footer-Zeile: Links zu Impressum und Datenschutz, auf der
   Landingpage englisch beschriftet ("Contact", "Privacy Policy"),
   weil dort alles englisch ist. Ton und Laufweite wie die Wortmarke. */
.legal-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--paper);
  font-size: clamp(0.58rem, 0.9vw, 0.74rem);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.legal-links a {
  color: inherit;
  opacity: 0.84;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.legal-links a:is(:hover, :focus-visible) {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.legal-links a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.92);
  outline-offset: 0.2rem;
}

/* Vierte Footer-Zeile, nur auf der Startseite: Copyright, kleiner und
   zurueckhaltender als die Links darueber. */
.footer-copyright {
  margin: -0.25rem 0 0;
  color: var(--paper);
  font-size: clamp(0.5rem, 0.75vw, 0.62rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.6;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Unterseiten (Impressum, Datenschutz): dieselbe Papierkarte, aber als
   Textspalte mit Hoehe nach Inhalt. Der Footer steht im Fluss unter der
   Karte statt fix am Fensterrand, weil diese Seiten scrollen. */
main.legal {
  gap: clamp(2rem, 5vh, 3.5rem);
  align-content: start;
  padding-bottom: calc(clamp(1.5rem, 4vh, 2.5rem) + env(safe-area-inset-bottom, 0px));
  place-items: start center;
}

.legal-card {
  width: min(100%, 38rem);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.4rem, 3.5vw, 3rem)
    clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  animation: card-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.back-link {
  display: inline-block;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--ink);
  font-size: clamp(0.58rem, 0.9vw, 0.74rem);
  letter-spacing: -0.026em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.legal-card h1 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

/* Abschnittstitel im Stil der Services-Liste: klein, Versalien, Linie. */
.legal-card h2 {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: clamp(0.62rem, 0.95vw, 0.78rem);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.1;
  text-transform: uppercase;
}

.legal-card h1 + h2 {
  margin-top: 0;
}

.legal-card p,
.legal-card address,
.legal-card ul {
  margin: 0 0 0.9rem;
  font-size: clamp(0.88rem, 1.05vw, 0.97rem);
  line-height: 1.55;
}

.legal-card address {
  font-style: normal;
}

.legal-card ul {
  padding-left: 1.1rem;
}

.legal-card li {
  margin-bottom: 0.2rem;
}

.legal-card a:not(.back-link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.legal-card a:not(.back-link):is(:hover, :focus-visible) {
  text-decoration-thickness: 2px;
}

.legal-card a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0.2rem;
}

.legal .site-footer {
  position: static;
  transform: none;
  animation-name: footer-in-flow;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes footer-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.35rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes footer-in-flow {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 36rem) {
  :root {
    --card-width: min(19rem, 79vw);
  }

  main {
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  }

  .card {
    padding-inline: clamp(1.55rem, 8vw, 2rem);
  }

  .services li {
    min-height: 1.58rem;
  }

  main.legal {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .legal-card {
    padding-inline: 1.35rem;
  }
}

@media (max-width: 22rem) {
  .services li {
    font-size: 0.52rem;
    grid-template-columns: 2em 1fr;
    letter-spacing: -0.04em;
  }

  .social-links {
    gap: 0.17rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --card-width: 25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}