/* AERO MATERIALS: Team & contact, Imprint, Privacy Policy.
   Rebuilt from aero-materials.com (Squarespace), measured 2 Nov 2026 at 390px and 1440px. */

:root {
  --fs-body: clamp(17.08px, 16.857px + 0.0571vw, 17.68px);    /* move to tokens.css: Squarespace "normal" paragraph */
  --fs-page-small: clamp(14.272px, 15.161px - 0.0617vw, 14.92px);  /* move to tokens.css: Squarespace "small" paragraph (larger on mobile, as live) */
  --site-grey: #E6E5E5;                                         /* move to tokens.css: contact section, section divider */
  --form-card: rgba(255, 255, 255, 0.3);                        /* move to tokens.css: contact card on --site-grey (renders #EEEDED) */
  --radius-xl: 20px;                                            /* move to tokens.css: contact card */
}

/* Shared: 24-column Squarespace grid (column gap 11px) */
.grid24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 11px; }
.text-body { font-size: var(--fs-body); line-height: 1.8; }
.text-body p { margin: 0 0 16px; }
.text-body p:last-child { margin-bottom: 0; }

/* Squarespace image shape ("system" squircle) */
.shape { -webkit-mask: url("/assets/img/about-us/squircle.svg") center / 100% 100% no-repeat; mask: url("/assets/img/about-us/squircle.svg") center / 100% 100% no-repeat; object-fit: cover; }

/* ---------- Team & contact ---------- */
.about-hero { padding-block: 110px 112px; }
.about-hero .grid24 { align-items: start; }
.about-hero h1 { grid-column: 1 / 10; }
.about-hero p { grid-column: 14 / 23; margin: 0; font-size: var(--fs-large); line-height: 1.8; }

.about-bg { padding-block: 108px 95px; border-bottom: 6px solid var(--site-grey); color: var(--site-navy); }
.about-bg h2 { grid-column: 1 / 13; margin-bottom: 23px; }
.about-bg .text-body { grid-column: 1 / 13; grid-row: 2; }
.about-bg-img { grid-column: 14 / 25; grid-row: 2; justify-self: center; width: 597px; aspect-ratio: 1; }

.about-team { padding-block: 55px 48px; color: var(--site-navy); }
.about-team > .container > h2 { margin-bottom: 102px; }
.team-grid { row-gap: 64px; margin: 0; padding: 0; list-style: none; }
.person { display: grid; grid-template-columns: subgrid; align-items: center; }
.person:nth-child(odd) { grid-column: 1 / 13; }
.person:nth-child(even) { grid-column: 14 / 25; }
.person-img { grid-column: 1 / 6; width: 100%; aspect-ratio: 1; }
.person-text { grid-column: 7 / 12; min-width: 0; overflow-wrap: break-word; hyphens: auto; }   /* long German words in the narrow column at tablet width */
.person h3 { margin-bottom: 32px; }
.person-role { margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.8; }
.person-text .small { margin: 0 0 16px; font-size: var(--fs-page-small); line-height: 1.8; }
.person-text .small:last-child { margin-bottom: 0; }

.contact { padding-block: 95px; background: var(--site-grey); color: var(--site-navy); }
.contact-card { grid-column: 5 / 21; padding: 39px 56px 50px; border-radius: var(--radius-xl); background: var(--form-card); }
.contact-card h2 { margin-bottom: 20px; }
.form-note { margin: 0 0 28px; font-size: var(--fs-body); line-height: 1.8; }
.form-note a { color: inherit; }

.contact-form { font-size: var(--fs-body); }
.contact-form fieldset { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.contact-form legend { padding: 0; line-height: 36px; }
.form-item { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.form-item > label { display: block; padding-bottom: 4px; color: var(--site-black); line-height: 32px; }
.form-row label { display: block; font-size: var(--fs-page-small); line-height: 32px; }
.req { margin-left: 0.5em; color: var(--site-black); opacity: 0.7; font-size: var(--fs-page-small); }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin: 0; padding: 5px 0; border: 0; border-bottom: 1px solid var(--site-navy); border-radius: 0; background: transparent; color: var(--site-black); font: inherit; line-height: 32px; }
.contact-form textarea { height: 100px; resize: vertical; }
.contact-form button { display: block; width: 100%; min-height: 67px; padding: 0 35px; border: 1px solid var(--site-navy); background: transparent; color: var(--site-navy); font-family: var(--font-display); font-size: var(--fs-button); font-weight: 700; letter-spacing: -0.01em; }
.contact-form button:disabled { cursor: not-allowed; opacity: 0.55; }


/* ---------- Imprint and privacy policy (first section: white, padding measured from the header bottom) ---------- */
.legal { padding-block: 89px 134px; background: var(--site-white); color: var(--site-navy); }
.imprint-img { grid-column: 1 / 12; grid-row: 1; width: 520px; }
.imprint-text { grid-column: 14 / 25; grid-row: 1; }
.imprint-text h1 { margin-bottom: 23px; }
.imprint-text .spaced { margin-top: 48px; }

.privacy { padding-bottom: 95px; }
/* One continuous document per language: numbered sections (h2) with a rule above, subsections (h3) in body type */
.pp { width: 70%; font-size: var(--fs-body); line-height: 1.8; color: var(--site-black); }
.pp h1 { margin-bottom: var(--space-6); color: var(--site-navy); hyphens: auto; overflow-wrap: break-word; }   /* "Datenschutzerklärung" is wider than a phone */
.pp h2 { margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-12); border-top: 1px solid var(--rule-soft); font-size: var(--fs-h3); color: var(--site-navy); }
.pp h1 + h2, .pp .pp-note + h2 { padding-top: 0; border-top: 0; }
.pp h3 { margin: var(--space-12) 0 var(--space-2); font-family: var(--font-text); font-size: var(--fs-large); line-height: 1.5; letter-spacing: normal; color: var(--site-navy); }
.pp h2 + h3 { margin-top: var(--space-6); }
.pp p { margin: var(--space-4) 0; }
.pp h2 + p, .pp h3 + p { margin-top: 0; }
.pp ul { margin: var(--space-4) 0; padding-left: var(--space-6); }
.pp li { margin: var(--space-2) 0; }
.pp a { word-break: break-word; }
.pp a[href^="tel:"] { white-space: nowrap; }
.pp-note { margin-bottom: var(--space-12); font-size: var(--fs-large); }
.pp-objection { padding: var(--space-4) var(--space-6); border-left: 3px solid var(--site-navy); background: var(--dot-grid-light); }
.pp-date { margin-top: var(--space-6); }
/* "Cookie settings" in the text opens the consent banner (cookie-settings.js); looks like a link, the words stay readable without JavaScript */
.pp-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor var(--link-underline), transparent); transition: text-decoration-color 0.15s ease; }
.pp-link:hover, .pp-link:focus-visible { text-decoration-color: currentColor; }
@media (scripting: none) { .pp-link { text-decoration: none; cursor: auto; pointer-events: none; } }

/* ---------- QR code contact (/qr-p-code-contact): centred column, two round portraits ---------- */
.qr-contact { padding-block: 89px 80px; border-bottom: 6px solid var(--site-grey); text-align: center; }
.qr-contact h1 { margin-bottom: 27px; }
.qr-note { margin: 0 0 32px; font-size: var(--fs-page-small); line-height: 1.8; }
.qr-mail { width: min(100%, 470px); }
.qr-people { display: grid; grid-template-columns: repeat(2, minmax(0, 216px)); justify-content: center; column-gap: 88px; margin: 72px 0 0; padding: 0; list-style: none; }
.qr-person { display: flex; flex-direction: column; align-items: center; }
.qr-person-img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.qr-person-name { flex: 1; margin: 24px 0; font-size: var(--fs-page-small); line-height: 1.8; }
.qr-person .button { width: 100%; }

.qr-video { padding-block: 80px 95px; text-align: center; }
.qr-video h2 { margin-bottom: 40px; color: var(--site-navy); }
.qr-video-media { max-width: 1000px; margin: 0 auto; }
/* YouTube with two clicks (youtube-embed.js): our poster with a play button, then the player in the same box */
.yt-embed, .yt-frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--site-navy); }
.yt-poster { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; right: 0; bottom: 6%; left: 0; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; height: var(--button-height); padding: 0 28px; background: var(--site-accent); color: var(--site-white); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-button); }
.yt-play::before { content: ""; width: 0.8em; height: 0.8em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.yt-embed:hover .yt-play { filter: brightness(0.92); }
.yt-note { margin-top: 12px; font-size: var(--fs-page-small); line-height: 1.6; color: var(--site-navy); }

/* Mobile (Squarespace switches at 767px) */
@media (max-width: 767px) {
  .grid24 { grid-template-columns: minmax(0, 1fr); }
  .grid24 > *, .about-hero h1, .about-hero p, .about-bg h2, .about-bg .text-body, .about-bg-img, .contact-card, .imprint-img, .imprint-text { grid-column: 1 / -1; }

  .about-hero { padding-block: 67px 79px; }
  .about-hero p { margin-top: 27px; }

  .about-bg { padding-block: 129px 59px; }
  .about-bg h2 { margin-bottom: 11px; }
  .about-bg .text-body { grid-row: auto; }
  .about-bg-img { grid-column: 1 / -1; grid-row: auto; width: 269px; margin-top: 56px; }

  .about-team { padding-block: 24px 60px; }
  .about-team > .container > h2 { margin-bottom: 62px; }
  .team-grid { row-gap: 28px; }
  .person:nth-child(n) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .person-img { grid-column: 1; width: 166px; margin-bottom: 27px; }
  .person-text { grid-column: 1; }

  .contact { padding-block: 60px; }
  .contact .container { --container-gutter: 0; }
  .contact-card { padding: 35px var(--gutter) 50px; }

  .legal { padding-block: 59px; }
  .imprint-text { grid-row: 1; }
  .imprint-img { grid-row: 2; width: 179px; margin-top: 60px; }

  .pp { width: 100%; }

  .qr-contact { padding-block: 59px 56px; }
  .qr-people { column-gap: 22px; margin-top: 48px; }
  .qr-person-name { margin: 16px 0; }
  .qr-person .button { padding-inline: 12px; }
  .qr-video { padding-block: 56px 60px; }
  .qr-video h2 { margin-bottom: 28px; }
}