/* Gemeinsame Gestaltung für events.dataloom.de, angelehnt an dataloom.de:
   Navy-Flächen im Wechsel mit Hellgrau, Wortmarke "data Loom.", Teal als Akzent, Pfeil-Links in Versalien. */
:root {
  --navy: #22273E; --light: #D0D1D3; --teal: #3ECAEB; --teal-deep: #1B7F79;
  --on-dark: #FFFFFF; --on-dark-muted: #C8C9CF; --text: #22273E;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--navy); color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }

.wordmark { color: #fff; text-decoration: none; font-size: 28px; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.wordmark b { font-weight: 700; }

header.nav { position: sticky; top: 0; z-index: 10; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
header.nav .wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header.nav nav { display: flex; gap: 32px; }
header.nav nav a { color: #fff; text-decoration: none; font-size: 17px; }
header.nav nav a:hover { color: var(--teal); }

section { padding: 96px 0; }
section.dark { background: var(--navy); color: var(--on-dark); }
section.light { background: var(--light); color: var(--text); }
h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }

a.arrow { display: inline-flex; align-items: center; gap: 14px; color: var(--teal); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
a.arrow::before { content: ""; width: 48px; height: 1px; background: currentColor; position: relative;
  box-shadow: none; flex: none; }
a.arrow::after { content: ""; display: none; }
a.arrow.dark-text { color: var(--navy); }
a.arrow:hover { opacity: .8; }

footer.site { background: var(--navy); color: var(--on-dark-muted); font-size: 14px; padding: 40px 0; border-top: 1px solid rgba(255,255,255,.08); }
footer.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
footer.site .wordmark { font-size: 22px; }
footer.site a { color: #fff; }

@media (max-width: 820px) {
  .wrap { padding: 0 16px; }
  section { padding: 56px 0; }
  header.nav nav { gap: 18px; }
  header.nav nav a { font-size: 15px; }
  header.nav nav a[href^="https"] { display: none; }
  .wordmark { font-size: 24px; }
}