@font-face { font-family: Raleway; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/raleway-latin-300.woff2") format("woff2"); }
@font-face { font-family: Raleway; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/raleway-latin-700.woff2") format("woff2"); }
* { box-sizing: border-box; }
html { background: var(--background); color-scheme: dark; scrollbar-color: var(--text-legal) var(--background); }
body { margin: 0; font-family: var(--font-family); font-weight: var(--weight-light); color: var(--text); background: var(--background); -webkit-font-smoothing: antialiased; }
::selection { color: var(--background); background: var(--text); }
a { color: inherit; }
a:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.stage { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.frame { position: relative; width: 100%; max-width: calc(var(--max-content) + 2 * var(--gutter)); padding-inline: var(--gutter); margin-inline: auto; }
.art { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.art img { position: absolute; top: -5rem; right: -2rem; width: min(112vw, 134rem); height: auto; max-width: none; opacity: .98; }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--background) 0%, transparent 64%), linear-gradient(180deg, transparent 20%, rgb(5 5 5 / .12) 42%, var(--background) 82%); }
.brand { padding-top: var(--header-top); flex: none; }
.brand-logo { display: block; width: var(--logo-width); max-width: 100%; height: auto; }
.statement { flex: 1; display: flex; align-items: flex-end; padding-top: 5rem; padding-bottom: var(--main-bottom); }
.statement-content { width: 100%; }
h1 { font-size: clamp(var(--h1-min), var(--h1-fluid), var(--h1-max)); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); overflow-wrap: anywhere; font-weight: var(--weight-light); margin: 0; max-width: var(--headline-max); }
h1 span { display: block; }
.statement-light { font-weight: var(--weight-light); }
.statement-bold { font-weight: var(--weight-bold); }
p { margin: 0; }
.subline { max-width: var(--subline-max); margin-top: 1.75rem; font-size: var(--subline-size); line-height: var(--subline-leading); color: var(--text); }
.body-copy { max-width: var(--body-max); margin-top: 1.125rem; font-size: var(--body-size); line-height: var(--body-leading); color: var(--text-secondary); }
.contact { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--action-gap); min-width: min(var(--action-width), 100%); max-width: 100%; min-height: var(--action-height); padding: .75rem var(--action-padding); margin-top: 1.75rem; border-radius: var(--action-radius); background: var(--action-background); color: var(--action-text); font-size: var(--cta-size); font-weight: var(--weight-bold); letter-spacing: var(--cta-tracking); text-decoration: none; transition: background-color var(--feedback-time) ease; }
.contact span { min-width: 0; overflow-wrap: anywhere; }
.contact svg { width: var(--action-icon); height: var(--action-icon); flex: none; transition: transform var(--feedback-time) ease; }
@media (hover: hover) { .contact:hover { background: var(--action-hover); } .contact:hover svg { transform: translateX(var(--arrow-shift)); } .legal a:hover { text-decoration: underline; } }
.contact:active { background: var(--action-hover); }
.legal { flex: none; padding-bottom: var(--footer-bottom); font-size: var(--legal-size); line-height: var(--legal-leading); color: var(--text-legal); }
.legal nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.legal a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; text-underline-offset: .3em; }
@media (min-width: 1680px) { .brand-logo { width: var(--logo-wide-width); } .subline { font-size: var(--subline-wide-size); } .body-copy { font-size: var(--body-wide-size); } }
@media (min-width: 768px) and (max-width: 1023px) { .frame { padding-inline: var(--gutter-tablet); } h1 { font-size: clamp(4.25rem, 9vw, 4.75rem); } .art img { right: -20rem; width: 95rem; top: -2rem; } }
@media (max-width: 767px) {
  .frame { padding-inline: var(--gutter-mobile); }
  .brand { padding-top: var(--header-mobile-top); }
  .brand-logo { width: var(--logo-mobile-width); }
  .statement { padding-top: 10rem; padding-bottom: var(--main-mobile-bottom); }
  h1 { font-size: clamp(var(--h1-mobile-min), var(--h1-mobile-fluid), var(--h1-mobile-max)); line-height: var(--h1-mobile-leading); }
  .subline { margin-top: 1.375rem; font-size: var(--subline-mobile-size); }
  .body-copy { margin-top: 1.125rem; font-size: var(--body-mobile-size); }
  .contact { min-height: var(--action-mobile-height); margin-top: 1.5rem; }
  .legal { padding-bottom: var(--footer-mobile-bottom); }
  .art img { width: 70rem; top: -3rem; right: -24rem; }
  .art::after { background: linear-gradient(90deg, rgb(5 5 5 / .55), transparent 85%), linear-gradient(180deg, transparent 8%, rgb(5 5 5 / .22) 30%, var(--background) 60%); }
}
@media (max-width: 359px) { .frame { padding-inline: var(--gutter-small); } }
@media (prefers-reduced-motion: reduce) { .contact, .contact svg { transition: none; } .contact:hover svg { transform: none; } }
/* Welle2 contact */
.brand-home { display: block; width: fit-content; max-width: 100%; }
.brand-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; text-decoration: none; color: var(--text-secondary); }
.back:hover { text-decoration: underline; text-underline-offset: .3em; }
.contact-main { flex: 1; padding-top: 8rem; padding-bottom: var(--main-bottom); }
.contact-intro { margin-top: 2rem; }
.contact-data { max-width: 1140px; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 400px); gap: 128px; margin-top: 2.5rem; }
.contact-method + .contact-method { margin-top: 24px; }
.method-label { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
.email-link, .phone-link { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; }
.email-link { font-size: 2.25rem; }
.phone-link { font-size: 1.75rem; }
.email-link:hover, .phone-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.address-group h2 { margin: 0 0 8px; font-size: 1rem; line-height: 1.6; font-weight: var(--weight-bold); }
.address-group p, .address-group address { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.6; font-style: normal; }
.address-group + .address-group { margin-top: 28px; }
@media (max-width: 1023px) { .contact-data { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767px) { .contact-main { padding-top: 7rem; padding-bottom: var(--main-mobile-bottom); } .contact-main h1 { font-size: clamp(3.25rem, 16vw, 4rem); } .contact-data { margin-top: 2rem; } .email-link { font-size: clamp(1.375rem, 6.7vw, 1.75rem); } .phone-link { font-size: 1.5rem; } .address-group p, .address-group address { font-size: 1rem; } .address-group + .address-group { margin-top: 24px; } }