/* Albert Sans (SIL Open Font License), lokal gehostet – keine Anfragen an Dritte */
@font-face {
  font-family: "Albert Sans";
  src: url("fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #273160;
  --navy-press: #1b2247;
  --beige: #F2EEE6;
  --track: #FAF8F4;
  --ink: #575250;
  --white: #FFFFFF;

  --m: clamp(20px, 4.45vw, 64px);
  --u: max(0.42px, min(calc(100vw / 1440), calc(100vh / 900)));
  --h1: clamp(2.05rem, min(6.1vw, 10.6vh), 6rem);
  --indent: calc(var(--h1) * 1.1);
  --tu: var(--u);                    /* Maßstab der Bahn */
  --tx: calc(360 * var(--tu));       /* Abstand der senkrechten Bahn vom rechten Rand */

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

  color-scheme: light;
}

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

html {
  background: var(--beige);
  scrollbar-color: var(--navy) var(--beige);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--beige);
  color: var(--ink);
  font-family: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--navy); color: var(--white); }

a { color: inherit; }

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

/* ---------- Hintergrund-Bahnen (Formsprache juwent.de) ---------- */
.track {
  position: absolute;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.track path {
  fill: none;
  stroke: var(--track);
  stroke-width: 56;
  stroke-linecap: butt;
}
/* Eine durchgehende Bahn: kommt von rechts, läuft hinter der Pille nach unten, verlässt die Seite nach rechts */
.tracks {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.track--top,
.track--bot {
  left: calc(100% - var(--tx) - 60 * var(--tu));
  width: calc(270 * var(--tu));
  height: calc(300 * var(--tu));
}
.track--top { top: 0; }
.track--bot { bottom: 0; }
.track-mid {
  position: absolute;
  z-index: 0;
  left: calc(100% - var(--tx) - 28 * var(--tu));
  width: calc(56 * var(--tu));
  top: calc(240 * var(--tu));
  bottom: calc(240 * var(--tu));
  background: var(--track);
  transform-origin: 50% 0;
  pointer-events: none;
}

/* ---------- Kopf ---------- */
.site-head {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 5.3vh, 52px) var(--m) 0;
}
.logo {
  display: block;
  width: clamp(168px, 17.4vw, 250px);
  height: auto;
}

/* ---------- Bühne ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5.4vh, 52px);
  padding-block: clamp(32px, 6vh, 64px);
}

/* Die große Pille: läuft über den rechten Rand hinaus */
.bar-wrap { overflow: hidden; }
.bar {
  margin-left: var(--m);
  margin-right: -240px;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: calc(var(--h1) * 0.62) calc(240px + var(--m)) calc(var(--h1) * 0.66) var(--indent);
}
.bar ::selection { background: var(--beige); color: var(--navy); }

.headline {
  margin: 0;
  font-size: var(--h1);
  font-weight: 330;
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-kerning: normal;
}
.headline strong { font-weight: 700; letter-spacing: -0.03em; }
.ln { display: block; overflow: hidden; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span { display: inline-block; }

.after {
  margin-left: calc(var(--m) + var(--indent));
  margin-right: var(--m);
  display: grid;
  gap: clamp(20px, 3.4vh, 30px);
  justify-items: start;
}
.lede {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px 0 22px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 160ms var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn--solid { background: var(--navy); color: var(--white); }
.btn--line { background: var(--beige); color: var(--navy); }
.btn:focus-visible { border-radius: 999px; }
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--navy-press); border-color: var(--navy-press); }
  .btn--line:hover { background: var(--navy); color: var(--white); }
}

/* ---------- Fuß ---------- */
.site-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding: 0 var(--m) max(clamp(20px, 4.4vh, 40px), env(safe-area-inset-bottom));
  font-size: 0.9375rem;
}
.site-foot p { margin: 0; }
.site-foot nav { display: flex; gap: 24px; }
.site-foot a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(39, 49, 96, 0.3);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-foot a:hover { color: var(--navy); text-decoration-color: var(--navy); }
}

/* ---------- Tablet hochkant ---------- */
@media (min-width: 561px) and (max-aspect-ratio: 1/1) {
  :root { --h1: clamp(2.6rem, 8.2vw, 6rem); --tu: calc(100vw / 1100); --tx: 18vw; }
}

/* ---------- Telefon ---------- */
@media (max-width: 560px) {
  :root { --h1: clamp(2.3rem, 11.2vw, 3.1rem); --indent: calc(var(--h1) * 0.95); --tu: 0.42px; --tx: 92px; }
  .stage { padding-block: clamp(20px, 4.4vh, 48px); gap: clamp(22px, 4vh, 40px); }
  .bar { padding-top: calc(var(--h1) * 0.58); padding-bottom: calc(var(--h1) * 0.62); }
  .headline { line-height: 1.06; text-wrap: balance; }
  .ln, .ln > span { display: inline; }
  .after { margin-left: var(--m); }
  .contact { display: grid; width: 100%; }
  .btn { width: 100%; }
  .site-foot { gap: 6px 24px; }
}

/* ---------- Bewegung: einmal, beim Laden ----------
   Nur aktiv, wenn das Skript im <head> die Klasse .motion setzt
   (sichtbarer Tab, keine reduzierte Bewegung). Ohne sie ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  /* Bahn zeichnet sich in einem Zug: oben anlaufen, senkrecht durch, unten auslaufen */
  .motion .track path { stroke-dasharray: 1; }
  .motion .track--top path { animation: draw 700ms cubic-bezier(0.55, 0, 1, 0.45) 150ms both; }
  .motion .track-mid { animation: grow 420ms linear 850ms both; }
  .motion .track--bot path { animation: draw 760ms cubic-bezier(0, 0.55, 0.45, 1) 1270ms both; }

  .motion .bar { animation: fill 1250ms var(--ease-in-out) 120ms both; }
  .motion .ln > span { animation: rise 900ms var(--ease-out) both; }
  .motion .ln:nth-child(1) > span { animation-delay: 560ms; }
  .motion .ln:nth-child(2) > span { animation-delay: 650ms; }

  .motion .logo,
  .motion .lede,
  .motion .contact li {
    animation: lift 800ms var(--ease-out) both;
  }
  /* Fuß nur einblenden: ein Versatz nach unten würde kurz eine Scrollleiste erzeugen */
  .motion .site-foot { animation: fade 700ms ease-out both; }
  .motion .logo { animation-delay: 60ms; }
  .motion .lede { animation-delay: 900ms; }
  .motion .contact li:nth-child(1) { animation-delay: 980ms; }
  .motion .contact li:nth-child(2) { animation-delay: 1050ms; }
  .motion .site-foot { animation-delay: 1150ms; }

  @media (max-width: 560px) {
    .motion .ln > span { animation: none; }
    .motion .headline { animation: lift 900ms var(--ease-out) 600ms both; }
  }
}

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fill {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to { clip-path: inset(0 0 0 0 round 999px); }
}
@keyframes rise { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal {
  --h1: clamp(2.1rem, min(4.6vw, 8vh), 4rem);
  --indent: calc(var(--h1) * 1.1);
}
.legal .logo-link { display: inline-block; border-radius: 6px; }
.legal .doc {
  position: relative;
  z-index: 1;
  padding-block: clamp(32px, 6vh, 64px) clamp(64px, 12vh, 140px);
}
.legal .bar { padding-block: calc(var(--h1) * 0.5) calc(var(--h1) * 0.54); }

.prose {
  margin: clamp(36px, 6vh, 64px) var(--m) 0 calc(var(--m) + var(--indent));
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  hyphens: auto;
}
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 2.4em 0 0.7em;
  color: var(--navy);
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.prose h3 {
  margin: 1.8em 0 0.45em;
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
}
.prose h2 + h3 { margin-top: 0.4em; }
.prose p,
.prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--navy); }
.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(39, 49, 96, 0.35);
  overflow-wrap: anywhere;
  hyphens: manual;
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .prose a:hover { text-decoration-color: var(--navy); }
}
.prose .caps { font-size: 0.9375rem; letter-spacing: 0.01em; hyphens: manual; }
.prose .stand { margin-top: 3em; font-size: 0.9375rem; }

.site-foot [aria-current="page"] { color: var(--navy); text-decoration-color: var(--navy); }

/* Tablet hochkant: Lesespalte endet vor der Bahn */
@media (min-width: 561px) and (max-aspect-ratio: 1/1) {
  .legal { --h1: clamp(2.3rem, 6.4vw, 4rem); }
  .prose { margin-right: calc(var(--tx) + 48px); }
}

/* Telefon: Lesespalte am Rand, Bahn bei langen Texten ausgeblendet */
@media (max-width: 560px) {
  .legal { --h1: clamp(2rem, 9.6vw, 2.6rem); --indent: calc(var(--h1) * 0.95); }
  .legal .tracks { display: none; }
  .prose { margin-left: var(--m); font-size: 1rem; }
}