/*
  IOTO Business Development & Consulting GmbH.

  Shared by the home page, the imprint and the privacy notice, which is why it
  is a file rather than a <style> block: three pages sharing one stylesheet,
  and a Content-Security-Policy that no longer needs 'unsafe-inline' for styles.

  No @font-face and no font CDN. Nothing on this site may load from a third
  party, which is what lets the privacy notice state that visiting sends no
  data anywhere. Google Fonts alone would break that, and a German court has
  held that embedding them breaches the GDPR on its own.
*/

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Sampled from the logo artwork, not typed by eye, so the page and the mark
     beside it are the same navy and the same gold. Re-sampled 2026-07-31 when
     the artwork was replaced; if the logo is ever swapped again these three
     values are resampled with it, or the page drifts away from the mark.
     The hover navy is the base lifted 8.4 lightness points at the same hue and
     saturation, which is the relationship the first pair used. */
  --navy: #1e3174;
  --navy-hover: #273f96;
  --gold: #caad31;

  --ink: #14181f;      /* off-black, never #000: pure black flattens depth */
  --body: #3d4551;
  --muted: #667085;
  --line: #e3e7ee;
  --surface: #ffffff;
  --surface-alt: #f6f8fb;

  /* One radius for the whole site. Near-square suits a company that wants to
     read as precise rather than friendly. */
  --radius: 3px;

  --measure: 34rem;
  --page: 68rem;

  /* Light only, deliberately. The only brand asset we hold is dark navy ink on
     transparency with no reversed variant, so a dark theme would erase the
     logo. Declared rather than omitted, so scrollbars and form controls follow.
     Revisit if IOTO supplies a white version of the mark. */
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 24px;
}

main { flex: 1; }

section { padding-block: 88px; }

.section-alt { background: var(--surface-alt); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem);
  line-height: 1.12;
  color: var(--navy);
}

h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

p { margin: 0 0 1rem; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-hover); }

a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.lead { font-size: 1.0625rem; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }

/* The single gold element per page. The logo is half gold, so without it the
   layout reads as a different brand to the mark sitting above it. */
.rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0 0 28px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.site-header .wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The supplied logo stacks the mark above a three-line wordmark, which is
   unreadable squeezed into a 72px bar and clipped besides. The header therefore
   uses the mark alone beside the name set as text; the full stacked logo runs
   at proper size in the footer, where it has the height it was drawn for. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand img { width: 32px; height: 32px; display: block; }

.brand-word {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--navy);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--navy); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Hero (full bleed)
   -------------------------------------------------------------------------- */

/* The white header bar stays above this rather than floating over the photo:
   the only logo we hold is dark navy ink with no reversed variant, so it would
   vanish against the image. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 68vh, 660px);
  padding-block: clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The sky sits in the upper third and the water in the lower. Favouring the
     centre keeps the Rathaus in frame as the crop narrows on small screens. */
  object-position: 50% 45%;
}

/* Two layers doing different jobs: a navy wash to tie the photograph to the
   brand, and a stronger fade up from the bottom left where the text sits.
   These stops are measured, not guessed. The first attempt looked fine and was
   not: sampling the composited pixels behind the type gave worst-case contrast
   of 1.75:1 under the headline, where it crosses a bright gap of sunset sky.
   Eyeballing white-on-photograph does not work, because the mean was a healthy
   5.8:1 and only the worst pixels failed. These values give 3.35:1 under the
   headline and 9.9:1 under the paragraph, clearing WCAG AA for large and body
   text, while leaving the upper frame clear enough to still read as a
   photograph. Re-measure if the image or the crop changes. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgb(2 22 58 / 0.92) 0%,
      rgb(2 22 58 / 0.80) 26%,
      rgb(2 22 58 / 0.42) 50%,
      rgb(2 22 58 / 0) 74%),
    linear-gradient(to right,
      rgb(2 22 58 / 0.50) 0%,
      rgb(2 22 58 / 0.10) 55%,
      rgb(2 22 58 / 0) 78%);
}

.hero-content { position: relative; }

.hero h1 {
  color: #fff;
  max-width: 17ch;
  text-shadow: 0 1px 24px rgb(2 22 58 / 0.35);
}

.hero .statement {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.2rem);
  color: rgb(255 255 255 / 0.94);
  text-shadow: 0 1px 18px rgb(2 22 58 / 0.4);
}

.hero .rule { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  max-width: 46rem;
}

.contact-item .label {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.contact-item .value {
  font-size: 1.0625rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgb(3 45 119 / 0.22);
  padding-bottom: 1px;
}

.contact-item .value:hover { border-bottom-color: currentColor; }
.contact-item address { font-style: normal; color: var(--body); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 40px 44px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
}

.footer-legal { max-width: 32rem; }
.footer-legal strong { color: var(--body); font-weight: 600; }
.footer-mark { width: 104px; height: auto; display: block; margin-bottom: 16px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links a { color: var(--body); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* Overrides the global paragraph measure: this rule is a full-width divider,
   and inheriting the 34rem reading width cut it off mid-page. */
.footer-bottom {
  max-width: none;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal { padding-block: 56px 80px; }
.legal h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }
.legal .rule { margin-top: 20px; }
.legal h2 { margin-top: 40px; margin-bottom: 10px; }
.legal h2:first-of-type { margin-top: 32px; }
.legal h3 { margin-top: 26px; margin-bottom: 4px; color: var(--navy); }
.legal ul { margin: 0 0 1rem; padding-left: 20px; max-width: var(--measure); }
.legal li { margin-bottom: 5px; }
.legal address { font-style: normal; }

.back {
  display: inline-block;
  margin-top: 40px;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { min-height: clamp(380px, 56vh, 480px); }
  .hero h1 { max-width: 15ch; }
}

@media (max-width: 780px) {
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding-block: 56px; }
  .site-header .wrap { height: 64px; }
  .brand img { width: 28px; height: 28px; }
  .brand-word { font-size: 1rem; }
  .site-nav { gap: 18px; font-size: 0.9rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Motion is limited to hover and focus feedback, so there is little to
   suppress. Kept so any future transition inherits the courtesy. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}