/* AjujA® — understated editorial design. Static, self-hosted, no external requests. */
:root {
  color-scheme: dark;
  --background: #09090b;
  --foreground: #f6f5f4;
  --secondary: #b6b4b8;
  --subtle: #8d8b91;
  --red: #ff202b;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Century Gothic", Futura, "Avenir Next", "Trebuchet MS", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #ff777d; outline-offset: 6px; border-radius: 2px; }
::selection { background: #bd121b; color: white; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 50; padding: 12px 17px; background: var(--red); color: white; }
.skip-link:focus { top: 9px; }
.visually-hidden { position: absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.site {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(25px,3.2vw,52px) clamp(24px,7.3vw,118px) 36px;
  display: flex;
  flex-direction: column;
}
.background-glow {
  z-index: -2; pointer-events: none;
  position: absolute;
  right: -230px; top: 105px;
  width: 880px; height: 750px;
  background: radial-gradient(ellipse at center, rgba(110,11,25,.19) 0, rgba(66,12,21,.075) 44%, transparent 75%);
}
.city-art {
  z-index: -1; pointer-events: none;
  position: absolute;
  right: -145px; top: 235px;
  width: min(49vw, 665px); height: auto;
  opacity: .26;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28%), linear-gradient(to bottom, transparent, #000 28%, #000 83%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 28%), linear-gradient(to bottom, transparent, #000 28%, #000 83%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.site-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; position: relative; z-index: 2;
}
.brand { display: block; flex: none; width: clamp(210px,20vw,272px); }
.brand img { display: block; width: 100%; height: auto; }
.language {
  display: inline-flex; align-items: center; gap: 15px;
  padding-top: 13px;
  font-size: 13px; letter-spacing: .125em; font-weight: 600;
}
.language .lang-link { position: relative; color: #949098; padding-bottom: 9px; transition: color .18s; }
.language .lang-link[aria-current="page"], .language .lang-link:hover { color: #fff; }
.language .lang-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: 1px; width: 16px; height: 2px; background: var(--red);
}
.language .lang-divider { color: #59565d; font-weight: 300; }
.main-content { z-index: 1; position: relative; flex: 1; padding-top: clamp(66px, 6.2vw, 105px); }
.introduction { max-width: 1250px; }
.brand-claim {
  max-width: 1030px;
  margin: 0;
  font-size: clamp(32px, 3.7vw, 55px);
  font-weight: 500;
  line-height: 1.23;
  letter-spacing: -.049em;
  text-wrap: balance;
}
.brand-name { color: inherit; font-weight: inherit; white-space: nowrap; }
.brand-name sup { font-size: .43em; line-height: 0; vertical-align: super; position: relative; top: -.08em; }
.brand-claim em { color: inherit; font-weight: inherit; font-style: normal; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .085em; text-underline-offset: .13em; }
.introduction-details {
  max-width: 1200px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(38px,6.2vw,110px);
  margin-top: clamp(33px,3.8vw,60px);
}
.introduction-details p { margin:0; font-weight: 400; letter-spacing: -.014em; line-height: 1.64; }
.audience { color: #e4e1e3; font-size: clamp(18px,1.47vw,21px); }
.full-service { color: #aaa6ac; font-size: clamp(17px,1.37vw,20px); }
.get-in-touch {
  max-width: 930px;
  padding-top: clamp(46px,5vw,82px);
}
.maintenance {
  max-width: 850px;
  margin: 0;
  font-size: clamp(17px,1.35vw,20px);
  line-height: 1.75;
  letter-spacing: -.012em;
  color: #aaa7ae;
}
.maintenance-lead { color: #f0eef0; font-weight: 600; }
.contact-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: max-content; max-width: 100%;
  margin-top: 24px;
  padding: 13px 17px;
  background: #ef1824;
  border-radius: 3px;
  color: #fff;
  font-size: clamp(16px,1.3vw,18px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.1;
  transition: background .2s ease, transform .2s ease;
}
.contact-link:hover { background: #cc111c; transform: translateY(-2px); }
.contact-link span { font-weight: 400; }
.contact-link svg { width: 19px; height: 19px; flex: none; }
.products {
  margin: clamp(64px,7.2vw,112px) 0 clamp(42px,5vw,80px);
  max-width: 1290px;
}
.section-label {
  margin: 0 0 clamp(26px,3.1vw,48px);
  color: #918d96;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .155em;
  text-transform: uppercase;
}
.red-period { color: #ff2631; }
/* A compact, natural-looking typographic list. Middots are placed before products,
   so no punctuation can remain at the end of a line. JavaScript additionally hides
   middots at the beginning of wrapped rows. */
.service-flow {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.35em;
  row-gap: .25em;
  margin: 0;
  font-size: clamp(16px, 1.38vw, 19px);
  font-weight: 400;
  color: #d8d5da;
  letter-spacing: -.012em;
  line-height: 1.65;
}
.service-entry {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.service-entry:not(.row-start):not(:first-child)::before {
  content: "·";
  position: absolute;
  left: -.79em;
  top: 0;
  color: #f4212e;
  font-weight: 500;
}
.site-footer {
  display: flex; align-items: center; gap: 38px;
  position: relative; z-index: 2;
  margin-top: auto;
  font-size: 13px;
  letter-spacing: .035em;
  color: #aaa6ae;
}
.site-footer a { transition: color .18s ease; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: #fff; }
.site-footer .copyright { margin-left: auto; color: #77737b; font-size: 12px; }

/* Legal pages share the same brand language, while keeping text highly readable. */
.legal-page .site { overflow: visible; }
.legal-page .brand { width: 210px; }
.legal-page .main-content { max-width: 880px; padding-top: 40px; padding-bottom: 72px; }
.legal-page h1 {
  font-size: clamp(39px,5vw,62px); font-weight: 600;
  letter-spacing: -.045em; line-height: 1.08; margin: 0 0 37px;
  color: #fff;
}
.legal-page .legal-section { margin: 0 0 36px; }
.legal-page h2 { font-size: 21px; line-height: 1.4; font-weight:600; letter-spacing: -.026em; margin: 0 0 14px; color: #fff; }
.legal-page p, .legal-page address {
  font-size: 16px; line-height: 1.8; color: #b6b3bc;
  font-style: normal; margin: 0 0 17px;
}
.legal-page address { line-height: 1.95; }
.legal-page address strong { color: #b6b3bc; font-weight: 600; }
.legal-page .legal-section a, .legal-page .translation-note a { color: #c9c6ce; text-decoration: underline; text-decoration-color: #f72b37; text-underline-offset: 4px; }
.legal-page .placeholder { color: #ff9299; }
.legal-page .translation-note { margin: -11px 0 39px; max-width: 780px; font-size: 15px; line-height: 1.75; color: #bab6bd; }
.legal-page .translation-note strong { color: #c9c6ce; font-weight: 600; }
.legal-page .brand-legal { color: #b6b3bc; font-size: .96em; }
.legal-page .site-footer { margin-top: 20px; }

@media (max-width: 1050px) {
  .site { padding-inline: clamp(27px,5.4vw,65px); }
  .city-art { right: -22vw; width: 74vw; opacity:.16; }
  .brand-claim { max-width: 830px; }
  .service-flow { font-size: clamp(16px, 1.85vw, 18px); }
}
@media (max-width: 750px) {
  .site { padding: 24px 25px 30px; }
  .brand { width: min(53vw, 228px); }
  .language { padding-top: 10px; font-size: 12px; gap: 11px; }
  .main-content { padding-top: 65px; }
  .brand-claim { font-size: clamp(32px, 6.6vw, 44px); letter-spacing: -.048em; line-height: 1.27; }
  .introduction-details { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .audience { font-size: 18px; line-height: 1.62; }
  .full-service { font-size: 17px; line-height: 1.64; }
  .get-in-touch { padding-top: 42px; }
  .maintenance { font-size: 17px; line-height: 1.67; }
  .contact-link { margin-top: 23px; font-size: 18px; }
  .products { margin-top: 65px; margin-bottom: 53px; }
  .section-label { font-size: 11px; margin-bottom: 29px; }
  .service-flow { font-size: clamp(15px, 3.9vw, 17px); column-gap: 1.22em; row-gap: .22em; line-height: 1.7; }
  .city-art { width: 112vw; top: 360px; right: -60vw; opacity:.11; }
  .site-footer { flex-wrap: wrap; gap: 27px; }
  .legal-page .brand { width: 180px; }
  .legal-page .main-content { padding-top: 36px; }
}
@media (max-width: 380px) {
  .site { padding-inline: 19px; }
  .brand { width: 188px; }
  .language { font-size: 11px; gap: 9px; }
  .service-flow { font-size: 15px; line-height: 1.7; }
  .contact-link { width: max-content; max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none!important; }
}

/* Bilingual documents: show only the selected language, no duplicate HTML files.
   The German copy remains readable when JavaScript is disabled. */
html:not([data-lang="en"]) [data-language="en"],
html[data-lang="en"] [data-language="de"] { display: none !important; }
.site-footer .footer-links { display: flex; gap: 38px; flex-wrap: wrap; }
@media (max-width: 750px) { .site-footer .footer-links { gap: 27px; } }