/* Night drive. WCAG sRGB contrast (foreground / solid background):
   Light headline + body #092d35 / #eaf2f2 = 12.85:1;
   accent #086c66 / #eaf2f2 = 5.52:1.
   Dark headline + body #e9f4f3 / #08151d = 16.47:1;
   accent #74f7d3 / #08151d = 14.08:1.
   Text sits on solid surfaces; the moving light is decorative. */
:root {
  color-scheme: light dark;
  --ground: #eaf2f2;
  --text: #092d35;
  --accent: #086c66;
  --glow: #71cbbb;
  --edge: #abc9c8;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  color: var(--text);
  background: var(--ground);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; }
a { color: inherit; text-underline-offset: .35em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 7px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.4rem; letter-spacing: -.04em; text-decoration: none; }
.symbol { width: .7rem; height: .7rem; background: var(--accent); border-radius: 50%; box-shadow: 0 0 22px var(--glow); }
main { flex: 1; display: grid; align-items: center; grid-template-columns: 1.1fr 1fr; gap: 2rem; width: min(100%, 90rem); margin: auto; padding: 3rem 0; }
h1 { margin: 0 0 2.75rem; font-size: clamp(4rem, 8vw, 9rem); font-weight: 650; line-height: .94; letter-spacing: -.075em; }
h1 span { display: block; color: var(--accent); }
.contact { font-size: clamp(.95rem, 2vw, 1.1rem); }
.contact:hover { color: var(--accent); }
.signal { position: relative; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.halo { position: absolute; inset: 5%; border: 1px solid var(--edge); border-radius: 50%; }
.halo::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(ellipse at 35% 35%, var(--glow), transparent 60%); opacity: .65; border-radius: 50%; animation: drift 16s ease-in-out infinite alternate; }
.halo::after { content: ""; position: absolute; inset: 15%; border: 1px solid var(--edge); border-radius: 50%; }
.sign { z-index: 1; width: 75%; padding: 1.5rem 0; display: grid; gap: .5rem; text-align: center; background: var(--ground); border-block: 1px solid var(--accent); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.german { font-size: clamp(1.15rem, 2.8vw, 2.5rem); animation: language-out 10s ease-in-out infinite; }
.arrow { color: var(--accent); font-size: 1.5rem; }
.english { color: var(--accent); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.06em; animation: language-in 10s ease-in-out infinite; }
@keyframes drift { from { transform: translate(-5%, 7%) rotate(-20deg); } to { transform: translate(7%, -5%) rotate(35deg); } }
@keyframes language-out { 0%, 12%, 90%, 100% { opacity: 1; } 35%, 70% { opacity: .25; } }
@keyframes language-in { 0%, 12%, 90%, 100% { opacity: 0; transform: translateY(.12em); } 35%, 70% { opacity: 1; transform: translateY(0); } }
@media (prefers-color-scheme: dark) {
  :root { --ground: #08151d; --text: #e9f4f3; --accent: #74f7d3; --glow: #146654; --edge: #28504e; }
  .halo::before { opacity: .9; }
}
@media (max-width: 700px) {
  main { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem; }
  .signal { width: min(100%, 18rem); justify-self: center; }
  .sign { padding-block: 1rem; }
  h1 { font-size: clamp(4rem, 15vw, 6.5rem); margin-bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}