/* Vanellus – Übergangsseite. Schriften lokal gehostet, keine externen Quellen. */
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url("fonts/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-display: swap; src: url("fonts/Literata_regular.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Literata_italic.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Literata_500italic.woff2") format("woff2"); }

:root {
  --petrol: #015D61;
  --petrol-900: #00373a;
  --lime: #F4E84A;
  --pink: #E392A7;
  --ink: #0a1f20;
  --ink-2: #2a3d3e;
  --ink-3: #56696a;
  --line: #d9e1e1;
  --paper: #f7f4ee;
  --grad-pink-petrol: linear-gradient(42deg, var(--pink) 0%, var(--petrol) 100%);
  --grad-lime-petrol: linear-gradient(69deg, var(--lime) 0%, var(--petrol) 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 17px/1.6 "Inter", "Helvetica Neue", system-ui, sans-serif;
}
a { color: var(--petrol); text-underline-offset: 3px; }
a:hover { color: var(--petrol-900); }
a:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }

header.site { padding: 32px 0 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header.site img { height: 72px; width: auto; display: block; }
header.site nav a { margin-left: 20px; font-size: 15px; text-decoration: none; color: var(--ink-2); }
header.site nav a:hover { color: var(--petrol); }

.hero {
  margin: 48px 0 0;
  border-radius: 6px;
  background: var(--grad-pink-petrol);
  color: var(--paper);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 72px);
}
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 16px;
}
h1, h2 {
  font-family: "Literata", Georgia, serif;
  font-style: italic; font-weight: 500;
  line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 0 20px;
}
h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(26px, 3vw, 36px); color: var(--petrol); }
h3 { font-size: 18px; font-weight: 500; margin: 32px 0 8px; }
.hero p { max-width: 38em; font-size: 19px; margin: 0; }

section.block { padding: 64px 0 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 32px;
}
.card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.card dt { color: var(--ink-3); }
.card dd { margin: 0; }
.bar { height: 6px; border-radius: 3px; background: var(--grad-lime-petrol); width: 120px; margin: 0 0 24px; }

.legal { padding: 48px 0 0; max-width: 46em; }
.legal p, .legal li { color: var(--ink-2); }

footer.site { margin: 96px 0 0; padding: 32px 0 40px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.site a { color: var(--ink-3); margin-left: 16px; }

@media (max-width: 720px) {
  header.site img { height: 56px; }
  header.site nav a { margin-left: 12px; }
  .cols { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 24px; }
}