/* GHLR Digital — company site.
 *
 * Deliberately NOT the Mini.Meet stylesheet. If the company site looked like the
 * product, the company would read as an appendix to the app -- which is the one
 * impression this site exists to avoid (decision 300-company/001). What the two
 * sites share is their construction, not their appearance.
 *
 * No web fonts, no JavaScript: a business card should render before anyone
 * notices it loading, and a system font stack also removes a data-protection
 * question that a hosted font would otherwise raise on a page whose own privacy
 * policy is three paragraphs long.
 */

:root {
  --ink: #1b3444;
  --ink-soft: #55686f;
  --bg: #f7f6f3;
  --surface: #ffffff;
  --line: #e2ded6;
  --accent: #2f6f7e;
  --accent-ink: #ffffff;
  --radius: 14px;
  --wrap: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7edf0;
    --ink-soft: #a3b3bb;
    --bg: #131f28;
    --surface: #1b2b36;
    --line: #2b3f4c;
    --accent: #6fb3c2;
    --accent-ink: #0f1b23;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.top .row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The mark used to be a letter G in a rounded box -- the box was what gave a bare
   glyph enough presence to read as a logo. The real mark has its own silhouette and
   carries at this size on its own, so the box is gone. Its colours come from the
   variables above, which is why it is inlined in base.njk rather than linked. */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}

.wordmark-thin { font-weight: 400; color: var(--ink-soft); }

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.lang { display: inline-flex; gap: 2px; font-size: 13px; font-weight: 600; }
/* The padding is not cosmetic: WCAG 2.5.8 asks for 24x24 CSS pixels of pointer target,
   and 13px type with 3px of padding came to about 21. These two switches are the smallest
   controls on the page, and the ones most likely to be hit on a phone. */
.lang a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 5px 9px;
  border-radius: 6px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.lang a.active { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

.nav-cta {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* On a phone the anchor links drop out: with three sections on one page,
   scrolling is faster than opening a menu, and it saves the site's only piece
   of JavaScript. The language switch and contact stay -- those are the two
   things a visitor actually came to the header for. */
@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-right { margin-left: auto; }
}

/* ---------- hero ---------- */

/* Hero on the same grid as the pillars below it: two equal columns, 24px apart, logo
   left and headline right. The numbers are not repeated from .pillars by hand -- both read
   --cols and --gap, so the hero cannot drift out of alignment with the cards when one of
   them is changed.

   The logo is rendered in the layout while the hero comes from the body, so the two are
   siblings and cannot be cells of one grid. Instead both carry the same grid: the lockup
   is taken out of the flow over a container repeating the .wrap geometry, and the hero's
   own wrap becomes a grid whose second column holds the headline. Two grids with one set
   of values line up as reliably as one would.

   No card treatment here -- the columns are an alignment, not a pair of boxes.

   The vertical nudge is deliberate: the logo's top edge is the top of the ring, while the
   headline's first line starts with cap height inside a 1.2 line box. Aligning the boxes
   would leave the logo visibly high.

   The single-column breakpoint is 880px because that is where .pillars stops sitting side
   by side. Media queries cannot read a custom property, so the number stands in two places
   -- if one moves, the other has to move with it, or the hero splits while the cards below
   are still paired. */
:root { --cols: 1fr 1fr; --gap: 24px; }

main { position: relative; }

.hero-lockup {
  position: absolute;
  top: 96px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--wrap);
  padding: 0 24px;
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
}

.hero-logo {
  grid-column: 1;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin-top: 10px;
}

.hero-lockup ~ .hero .wrap {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
}

.hero-lockup ~ .hero h1 {
  grid-column: 2;
  max-width: none;
}

@media (max-width: 880px) {
  /* Back into the flow, above the headline -- same breakpoint as .pillars below. */
  .hero-lockup {
    position: static;
    display: block;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 76px 24px 0;
  }
  .hero-logo { width: 280px; max-width: 100%; margin: 0; }
  .hero-lockup ~ .hero { padding-top: 30px; }
  .hero-lockup ~ .hero .wrap { display: block; }
  .hero-lockup ~ .hero h1 { max-width: 17ch; }
}

.hero { padding: 96px 0 72px; }
.hero h1 {
  font-size: clamp(30px, 5.2vw, 50px);
  font-weight: 600;
  max-width: 17ch;
}

.hero .lede {
  margin: 24px 0 0;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-soft);
  max-width: 58ch;
}

/* ---------- the two pillars ----------
 * Equal weight is the point, so it is enforced structurally: one grid, two
 * equal fractions, identical card styling and heading level. Neither column may
 * grow a visual treatment the other does not have -- that is what would turn
 * "two things we do" into "one thing, and also something else".
 */

.pillars {
  display: grid;
  gap: var(--gap);
  grid-template-columns: var(--cols);
  padding-bottom: 24px;
}

@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}

.pillar > h2 {
  font-size: 25px;
  font-weight: 600;
}

.pillar .intro {
  margin: 16px 0 0;
  color: var(--ink-soft);
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

/* Consulting: the topic fields */

.fields { margin: 26px 0 0; padding: 0; list-style: none; }
.fields li { padding: 15px 0; border-top: 1px solid var(--line); }
.fields b { display: block; font-weight: 600; font-size: 16px; }
.fields span { color: var(--ink-soft); font-size: 15.5px; }

.pillar .closing {
  margin: 22px 0 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.pillar-foot { margin-top: auto; padding-top: 26px; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Products: the product entry.
   No call to action here on purpose -- the only way out of this column leads to
   the product, never to an enquiry form. */

.product {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* The radius follows the width: iOS draws app icons with a corner of roughly 23 % of
   the edge, and the icon file already carries that shape. Scale only the box and the
   corner reads as too square against the artwork inside it. */
.product img {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  flex: none;
}

.product h3 { font-size: 18px; font-weight: 600; }
.product p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.product a { color: var(--accent); text-decoration: none; font-weight: 500; }
.product a:hover { text-decoration: underline; }

/* ---------- contact ---------- */

.band { padding: 76px 0; border-top: 1px solid var(--line); margin-top: 52px; }
.band h2 { font-size: 27px; font-weight: 600; }
.band p { max-width: 62ch; color: var(--ink-soft); }

.contact-lines {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  font-size: 17px;
}
.contact-lines a { color: var(--accent); text-decoration: none; font-weight: 500; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines .label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ---------- legal pages ---------- */

/* Eigener Rand statt eines .wrap-Containers: die Rechtstext-Bodies sind reines
   HTML ohne Layout-Huelle, anders als die Startseite, die ihre Raender aus den
   .wrap-Divs ihrer Sektionen bekommt. Ohne das seitliche Padding klebt der Text
   auf schmalen Fenstern am linken Rand. */
.legal { max-width: 74ch; margin: 0 auto; padding: 64px 24px 40px; }
.legal h1 { font-size: 32px; font-weight: 600; }
.legal h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 40px 0 10px;
}
.legal p { color: var(--ink-soft); }
.legal a { color: var(--accent); }
.legal address { font-style: normal; color: var(--ink-soft); }
.legal .updated { font-size: 15px; color: var(--ink-soft); }

/* A pending fact, visibly pending. Rendering an empty imprint field as ordinary
   text is how a placeholder reaches production: it reads as finished. */
.pending {
  background: #fff4d6;
  color: #6b4b00;
  border-radius: 5px;
  padding: 1px 7px;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .pending { background: #4a3a10; color: #ffdf94; }
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 34px;
  font-size: 15px;
}

.foot-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr; }
}

.foot-col h2 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.foot-col a {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 3px 0;
}
.foot-col a:hover { color: var(--ink); }
/* `display: block` above would override the hidden attribute; the privacy-settings link
   must stay invisible without JavaScript, when there is no banner it could open. */
.foot-col a[hidden] { display: none; }
.foot-brand p { margin: 12px 0 0; color: var(--ink-soft); }

.foot-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---------- focus ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Consent banner (ADR 200-infra/093). Fixed to the bottom, never covering the page as a
   wall: the site stays readable without an answer. Allow and Decline are deliberately the
   same button -- same size, same weight, same colour. A brighter "Allow" would be the
   nudge that German supervisory authorities treat as invalid consent. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  font-size: 15px;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 14px; }
.consent-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.consent-actions button {
  font: inherit;
  font-weight: 500;
  min-width: 120px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.consent-actions button:hover { background: var(--bg); }