/* RVX360 – Platzhalter-Seite. Farben und Schrift nach factory360-Styleguide 12/2023. */
@font-face { font-family: "Cairo"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/cairo-300.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/cairo-700.woff2") format("woff2"); }

:root {
  --navy: #1B213F; --blue: #243163; --accent: #1F7FAE; --sky: #50B0DD;
  --pastel: #A9D5DA; --grey: #DAE0E3; --ink: #1D1D1B; --text: #3A3F55; --tint: #EEF3F5;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--ink);
  font-family: "Cairo", system-ui, sans-serif; font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
a:hover { color: var(--navy); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px clamp(16px, 5vw, 80px); border-bottom: 1px solid var(--grey); }
.logo img { display: block; height: clamp(56px, 8vw, 84px); width: auto; margin-left: -10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--sky); color: var(--navy); }
.btn-primary:hover { background: #3fa3d3; color: var(--navy); }
.btn-ghost { border: 1.5px solid var(--blue); color: var(--blue); }
.btn-ghost:hover { background: var(--tint); }

.hero { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; padding: clamp(48px, 8vw, 120px) clamp(16px, 5vw, 80px); }
.copy { position: relative; z-index: 1; max-width: 900px; }
.tag { display: inline-block; margin: 0 0 24px; padding: 4px 16px; border: 1.5px solid var(--blue); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue); }
h1 { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.1; font-weight: 300; }
h1 strong { font-weight: 700; color: var(--blue); }
.lead { margin: 24px 0 0; max-width: 580px; font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ring { position: absolute; right: clamp(-320px, -16vw, -120px); top: 50%; width: clamp(360px, 48vw, 680px); transform: translateY(-50%); }

.foot { background: var(--navy); color: var(--grey); padding: 32px clamp(16px, 5vw, 80px); font-size: 14px; line-height: 1.7; }
.foot p { margin: 0; }
.foot a { color: #FFFFFF; }
.foot strong { color: #FFFFFF; font-weight: 700; }
.privacy { margin-top: 12px !important; color: var(--pastel); }
.copy-line { margin-top: 12px !important; }

@media (max-width: 720px) {
  .top .btn { display: none; }
  .ring { display: none; }
  .br { display: none; }
}