/* heydok.de shared design: tokens, self-hosted font, base, header, footer, buttons, video frame.
   Taken from versorgung.html so every relaunched page shares one look. Page-specific layout stays in the page. */

/* Inter Tight 5.2.7 (@fontsource-variable/inter-tight, OFL-1.1, licence in fonts/inter-tight/LICENSE.txt).
   Served from heydok.de itself, no request to Google. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/inter-tight/inter-tight-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/inter-tight/inter-tight-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --navy: #002d50;
  --night: #001f38;
  --ice: #d6e4ef;
  --ice-soft: #a9c2d6;
  --tint: #5d7f9c;
  --ink-soft: #33566f;
  --red: #911818;
  --red-hi: #c93c3c;
  --white: #fff;
  --paper: #f8f9fa;

  --m: clamp(20px, 3vw, 44px);
  --gut: clamp(16px, 2vw, 32px);
  --sec: clamp(96px, 11vw, 176px);

  --f-display: clamp(40px, 7vw, 112px);
  --f-figure: clamp(44px, 6vw, 96px);
  --f-head: clamp(30px, 3.6vw, 54px);
  --f-state: clamp(23px, 2.2vw, 33px);
  --f-lead: clamp(19px, 1.5vw, 23px);
  --f-body: clamp(17px, 1.25vw, 19px);
  --f-small: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: var(--f-body);
  line-height: 1.55;
  color: var(--white);
  background: var(--night);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, figure, ul, li, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--ice); color: var(--navy); }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; border-radius: 6px; }
.f-ice :focus-visible, .f-paper :focus-visible { outline-color: var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }

.f-night { background: var(--night); color: var(--white); }
.f-navy { background: var(--navy); color: var(--white); }
.f-ice { background: var(--ice); color: var(--navy); }
.sec { padding-block: var(--sec); position: relative; }

h2 {
  font-size: var(--f-head);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
p { max-width: 64ch; text-wrap: pretty; }
.lead { font-size: var(--f-lead); line-height: 1.42; letter-spacing: -0.005em; }
.state { font-size: var(--f-state); line-height: 1.22; letter-spacing: -0.018em; font-weight: 500; text-wrap: pretty; }
.f-navy p, .f-night p { color: var(--ice); }
.fig { display: block; font-size: var(--f-figure); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; white-space: nowrap; }

/* Small section tag (a word that names the section, not a heading) */
.tag {
  display: inline-block; font-size: var(--f-small); line-height: 1; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(0, 45, 80, 0.08); color: var(--navy);
}
.f-navy .tag, .f-night .tag { background: rgba(214, 228, 239, 0.12); color: var(--ice); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 2px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--line { border-color: rgba(214, 228, 239, 0.45); color: var(--white); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--red { background: var(--red); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: var(--ice); }
  .btn--line:hover { border-color: var(--ice); background: rgba(214, 228, 239, 0.08); }
  .btn--navy:hover { background: var(--night); }
  .btn--red:hover { background: #7a1414; }
}

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 31, 56, 0.88);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(214, 228, 239, 0.08);
}
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.top__logo { display: inline-block; border-radius: 8px; flex: none; }
.top__logo img { height: clamp(32px, 2.6vw, 40px); width: auto; filter: url(#logo-light); }
.top__nav ul { display: flex; align-items: center; gap: 4px; }
.top__nav a {
  display: inline-block; padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--ice-soft); text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}
.top__cta { flex: none; }
.top__cta .btn { min-height: 44px; padding: 10px 22px; font-size: 15px; }
.burger {
  display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(214, 228, 239, 0.1); place-items: center;
}
.burger span[aria-hidden] { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--white); box-shadow: 0 -7px 0 var(--white), 0 7px 0 var(--white); }
@media (hover: hover) and (pointer: fine) {
  .top__nav a:hover { color: var(--white); background: rgba(214, 228, 239, 0.08); }
}

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--white);
  padding: 18px var(--m) 40px; overflow-y: auto; display: none;
}
.menu.is-open { display: block; }
.menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; }
.menu__close {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(214, 228, 239, 0.1); position: relative;
}
.menu__close span[aria-hidden] { position: absolute; left: 13px; top: 23px; width: 22px; height: 2px; border-radius: 2px; background: var(--white); transform: rotate(45deg); }
.menu__close span[aria-hidden] + span[aria-hidden] { transform: rotate(-45deg); }
.menu__label { margin-top: 40px; font-size: var(--f-small); color: var(--ice-soft); }
.menu ul { margin-top: 8px; }
.menu li a {
  display: block; padding: 12px 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(214, 228, 239, 0.1);
}
body.menu-open { overflow: hidden; }

@media (max-width: 1180px) {
  .top__nav, .top__cta { display: none; }
  .burger { display: grid; }
}

/* ---------- Video frame ---------- */
.bezel {
  background: var(--night);
  padding: clamp(6px, 0.7vw, 12px);
  border-radius: clamp(16px, 1.8vw, 28px);
}
.f-night .bezel { background: var(--navy); }
.bezel video, .bezel img {
  width: 100%; height: auto;
  border-radius: clamp(10px, 1.2vw, 18px);
  background: var(--paper);
}
.bezel video { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Footer ---------- */
.site-foot { position: relative; padding-top: clamp(72px, 7vw, 112px); color: var(--ice-soft); }
.site-foot__grid { row-gap: 48px; }
.site-foot__logo { grid-column: 1 / 5; }
.site-foot__logo img { height: 44px; width: auto; filter: url(#logo-light); }
.site-foot__col { grid-column: span 2; }
.site-foot__col:nth-child(2) { grid-column: 7 / 9; }
.site-foot__col p { font-size: var(--f-small); color: var(--ice-soft); margin-bottom: 14px; }
.site-foot__col li + li { margin-top: 4px; }
.site-foot a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; transition: text-decoration-color 180ms ease, color 180ms ease; }
.site-foot__col a { display: inline-block; padding-block: 6px; color: var(--white); font-weight: 500; }
.site-foot__base {
  margin-top: clamp(56px, 6vw, 96px); padding-block: 24px 40px; border-top: 1px solid rgba(214, 228, 239, 0.12);
  font-size: var(--f-small); max-width: none;
}
.site-foot__base a { display: inline-block; padding-block: 10px; }
@media (hover: hover) and (pointer: fine) {
  .site-foot a:hover { color: var(--white); text-decoration-color: currentColor; }
}
@media (max-width: 1100px) {
  .site-foot__logo { grid-column: 1 / -1; }
  .site-foot__col, .site-foot__col:nth-child(2) { grid-column: span 4; }
}
@media (max-width: 720px) {
  :root { --sec: 96px; --f-head: 30px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
}

/* ---------- Reveal (once, on entry) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-r] { opacity: 0; transform: translateY(22px); }
  .js .in [data-r], .js [data-r].in {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-out) calc(var(--i, 0) * 80ms);
  }
  .menu.is-open { animation: menu-in 380ms var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }