/* ============================================================
   Car2Rave – Hinweisseite während des Neuaufbaus.
   Farbwelt von car2rave.de übernommen: Nachtblau-Violett als Grund,
   Verlauf Violett #8b5cf6 zu Cyan #00d4ff, violettes Leuchten.
   Schriften nur aus dem System, damit keine Daten an Schriftserver gehen.
   Erstellt von deichbot.
   ============================================================ */
:root{
  --bg:#0d0e1a;
  --bg-2:#131428;
  --card:#181a2e;
  --line:rgba(255,255,255,.10);
  --ink:#f6f6fb;
  --ink-2:#c9cbe0;
  --muted:#9ea1bd;
  --violet:#8b5cf6;
  --violet-l:#b69cff;
  --cyan:#00d4ff;
  --magenta:#ff4fd8;
  --ok:#3ee0a0;
  --err:#ff7a8a;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#00d4ff 100%);
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.c2o-body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--schrift); line-height:1.65; -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:var(--cyan); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* ---- Hintergrund: langsam kreisendes Leuchten ------------- */
.c2o-glow{
  position:fixed; inset:-30vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 30% 30%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(34vmax 34vmax at 72% 62%, rgba(0,212,255,.14), transparent 62%),
    radial-gradient(26vmax 26vmax at 55% 20%, rgba(255,79,216,.10), transparent 60%);
  animation:c2o-drift 38s linear infinite;
}
@keyframes c2o-drift{ to{ transform:rotate(360deg); } }

.c2o, .c2o-foot{ position:relative; z-index:1; }
.c2o-wrap{ max-width:62rem; margin:0 auto; padding-inline:clamp(1rem,5vw,2rem); }
.c2o-narrow{ max-width:42rem; }

/* ---- Typografie ------------------------------------------ */
.c2o h1{ font-size:clamp(2rem,6.4vw,3.4rem); line-height:1.06; letter-spacing:-.025em;
  font-weight:800; margin:.4rem 0 0; text-wrap:balance;
  background:linear-gradient(100deg,#ffffff 0%,#e6dcff 45%,#9fefff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.c2o h2{ font-size:clamp(1.3rem,3.6vw,1.7rem); line-height:1.2; font-weight:750;
  letter-spacing:-.012em; margin:0 0 .8rem; color:#fff; text-wrap:balance; }
.c2o p{ margin:0 0 1rem; color:var(--ink-2); font-size:clamp(1rem,2.4vw,1.07rem); max-width:65ch; }
.c2o p:last-child{ margin-bottom:0; }

/* ---- Kopfbereich ----------------------------------------- */
.c2o-hero{ padding-block:clamp(2.5rem,8vw,5rem) clamp(2.5rem,7vw,4.5rem); text-align:center; }
.c2o-hero .c2o-wrap{ display:grid; justify-items:center; gap:1rem; }
.c2o-logo{ position:relative; width:min(360px,82vw); }
.c2o-logo img{ position:relative; z-index:1; display:block; width:100%; }
.c2o-halo{
  position:absolute; z-index:0; left:22%; top:50%; width:58%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(from 0deg, rgba(139,92,246,.0), rgba(139,92,246,.55), rgba(0,212,255,.45), rgba(255,79,216,.35), rgba(139,92,246,.0));
  filter:blur(28px); animation:c2o-spin 14s linear infinite;
}
@keyframes c2o-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.c2o-status{
  display:inline-flex; align-items:center; gap:.55rem; margin:0;
  padding:.38rem .9rem; border:1px solid rgba(0,212,255,.35); border-radius:999px;
  background:rgba(0,212,255,.08); color:#bff4ff;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.c2o-dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 0 0 rgba(255,79,216,.6); animation:c2o-puls 2.4s ease-out infinite; }
@keyframes c2o-puls{ 0%{ box-shadow:0 0 0 0 rgba(255,79,216,.55);} 80%,100%{ box-shadow:0 0 0 .7rem rgba(255,79,216,0);} }
.c2o-lead{ font-size:clamp(1.05rem,2.7vw,1.2rem)!important; color:var(--ink)!important; margin-inline:auto!important; }

/* ---- Knopf ------------------------------------------------ */
.c2o-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.35rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--grad); color:#fff; font:inherit; font-weight:700; font-size:1rem;
  text-decoration:none; box-shadow:0 0 40px -8px rgba(139,92,246,.75);
  transition:transform .15s ease, box-shadow .15s ease;
}
.c2o-btn:hover{ transform:translateY(-1px); box-shadow:0 0 52px -6px rgba(0,212,255,.7); }

/* ---- Abschnitte ------------------------------------------ */
.c2o-sec{ padding-block:clamp(2.2rem,6vw,3.6rem); border-top:1px solid var(--line); }
.c2o-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.6rem,5vw,3.2rem); align-items:start; }
@media (max-width:760px){ .c2o-grid{ grid-template-columns:1fr; } }
.c2o-list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.c2o-list li{ position:relative; padding-left:1.7rem; color:var(--ink-2); }
.c2o-list li::before{ content:""; position:absolute; left:0; top:.5em; width:.8rem; height:.8rem;
  border-radius:50%; background:var(--grad); box-shadow:0 0 12px rgba(139,92,246,.7); }
.c2o-sec--flyer{ background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,0)); }
.c2o-sec--form{ background:rgba(19,20,40,.72); }

/* ---- Formular -------------------------------------------- */
.c2o-form{ display:grid; gap:1rem; margin-top:1.4rem; padding:clamp(1.1rem,4vw,1.6rem);
  border:1px solid rgba(139,92,246,.35); border-radius:1.1rem; background:var(--card); }
.c2o-row{ display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; }
@media (max-width:560px){ .c2o-row{ grid-template-columns:1fr; } }
.c2o-form label{ display:grid; gap:.4rem; font-weight:600; font-size:.95rem; color:var(--ink); }
.c2o-opt{ font-weight:400; color:var(--muted); }
.c2o-form input[type=text], .c2o-form input[type=email], .c2o-form select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:#0f1022; border:1px solid rgba(255,255,255,.18); border-radius:.7rem; padding:.72rem .85rem;
}
.c2o-form input:focus, .c2o-form select:focus{ border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(0,212,255,.22); }
.c2o-form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.2rem; }
.c2o-form .c2o-consent{ display:flex; gap:.7rem; align-items:flex-start; font-weight:400; color:var(--ink-2); font-size:.92rem; line-height:1.5; }
.c2o-consent input{ margin-top:.2rem; width:1.15rem; height:1.15rem; accent-color:var(--violet); flex:none; cursor:pointer; }
.c2o-form .c2o-btn{ justify-self:start; }
.c2o-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.c2o-err{ border:1px solid rgba(255,122,138,.5); background:rgba(255,122,138,.10); color:#ffd3d9; padding:.7rem .9rem; border-radius:.7rem; }
.c2o-ok{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.4rem; padding:1rem 1.1rem;
  border:1px solid rgba(62,224,160,.45); background:rgba(62,224,160,.10); border-radius:1rem; color:#d7fff0; }
.c2o-ok svg{ color:var(--ok); flex:none; margin-top:.1rem; }

/* ---- Rechtstexte (Impressum, Datenschutz) ----------------- */
.c2o-legal{ padding-block:clamp(2rem,6vw,3.5rem); }
.c2o-legal .ks-content{ max-width:48rem; margin:0 auto; padding-inline:clamp(1rem,5vw,2rem); color:var(--ink-2); }
.c2o-legal .ks-content h1{ font-size:clamp(1.8rem,5vw,2.4rem); color:#fff; margin:0 0 1.2rem; line-height:1.1; }
.c2o-legal .ks-content h2{ font-size:1.25rem; color:#fff; margin:2rem 0 .7rem; }
.c2o-legal .ks-content h3{ font-size:1.05rem; color:#fff; margin:1.5rem 0 .5rem; }
.c2o-legal .ks-content p, .c2o-legal .ks-content li{ font-size:.97rem; }
.c2o-legal-extra{ max-width:48rem; margin:0 auto 1.5rem; padding:1.1rem 1.3rem; padding-inline:clamp(1rem,5vw,1.3rem);
  border:1px solid rgba(139,92,246,.35); border-radius:1rem; background:var(--card); color:var(--ink-2); }
.c2o-legal-extra h2{ font-size:1.15rem; color:#fff; margin:0 0 .6rem; }
.c2o-legal-extra p{ margin:0 0 .7rem; font-size:.97rem; }
.c2o-legal-extra p:last-child{ margin:0; }
.c2o-legal-wrap{ padding-inline:clamp(1rem,5vw,2rem); }

/* ---- Fuß -------------------------------------------------- */
.c2o-foot{ border-top:1px solid var(--line); background:rgba(8,9,18,.85); }
.c2o-foot__in{ max-width:62rem; margin:0 auto; padding:1.4rem clamp(1rem,5vw,2rem);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.8rem 1.4rem; font-size:.9rem; }
.c2o-foot__home{ color:#fff; font-weight:800; text-decoration:none; letter-spacing:.01em; }
.c2o-foot__links{ display:flex; gap:1.2rem; }
.c2o-foot__links a{ color:var(--muted); text-decoration:none; }
.c2o-foot__links a:hover{ color:var(--cyan); }

@media (prefers-reduced-motion:reduce){
  .c2o-glow, .c2o-halo, .c2o-dot{ animation:none; }
  html{ scroll-behavior:auto; }
}