/* ==========================================================================
   Contact page (/de/kontakt/, /en/contact/)
   Loaded only on these two pages, after style.css. The form itself keeps
   the global .field / .consent / .form-* styles; this file only adds the
   page frame, the aurora card, the gate status chip and the aside.
   ========================================================================== */

.cpage{
  position:relative;
  min-height:100svh;
  padding:150px clamp(20px,6vw,56px) 120px;
  overflow:hidden;
}
.cpage::before{
  content:'';
  position:absolute; left:50%; top:0;
  width:min(1600px,140vw); height:980px;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 40%, rgba(79,141,255,.15), transparent 72%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 38%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 38%, #000 30%, transparent 75%);
  pointer-events:none;
  z-index:-1;
}
.cpage__inner{
  max-width:clamp(860px,78vw,1320px);
  margin:0 auto;
}

/* ---------- intro ---------- */
.cpage__intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 56px;
}
.cpage__intro h1{
  font-size:clamp(38px,6.2vw,76px);
  line-height:1.03;
  letter-spacing:-.035em;
  margin-bottom:20px;
}
.cpage__intro h1 span{
  background:linear-gradient(100deg, var(--text) 10%, #a9c6ff 50%, var(--accent) 95%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.cpage__lede{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.6;
  color:var(--text-dim);
  max-width:620px;
  margin:0 auto;
}

/* ---------- layout ---------- */
.cpage__grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);
  gap:28px;
  align-items:start;
}

/* ---------- form card ---------- */
.cpage-stage{ position:relative; min-width:0; }
.cpage-halo{
  position:absolute; inset:6% 8% auto; height:70%;
  background:radial-gradient(closest-side, rgba(79,141,255,.2), transparent);
  filter:blur(40px);
  opacity:.7;
  pointer-events:none;
  z-index:-1;
}
.cpage-card{
  position:relative;
  isolation:isolate;
  border:1px solid transparent;
  border-radius:24px;
  padding:clamp(24px,3.6vw,48px) clamp(18px,3.6vw,48px) clamp(26px,3.4vw,44px);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02) inset;
  background:
    radial-gradient(560px circle at var(--spot-x,50%) var(--spot-y,0%), rgba(79,141,255,.12), transparent 60%) padding-box,
    linear-gradient(180deg, #0f1216, var(--bg-elev) 40%) padding-box,
    conic-gradient(from var(--aurora-angle,0deg), transparent 0%, rgba(79,141,255,.7) 8%, transparent 24%, transparent 76%, rgba(79,141,255,.45) 92%, transparent 100%) border-box;
  animation:aurora-rotate 9s linear infinite;
}
.cpage-card__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 20px; flex-wrap:wrap;
  margin-bottom:28px;
}
.cpage-card__top .eyebrow{ margin:0; }

/* Gate status chip -- reflects the real /contact-gate.php result that
   contact-message.js writes to #contact-page[data-gate]. */
.cp-gate{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  padding:6px 12px 6px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(7,8,10,.5);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cp-gate svg{ width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.cp-gate__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-faint);
  flex-shrink:0;
}
.cp-gate__txt{ display:none; }
#contact-page:not([data-gate]) .cp-gate__txt--checking,
#contact-page[data-gate="checking"] .cp-gate__txt--checking,
#contact-page[data-gate="ok"] .cp-gate__txt--ok,
#contact-page[data-gate="blocked"] .cp-gate__txt--blocked,
#contact-page[data-gate="unknown"] .cp-gate__txt--unknown{ display:inline; }
#contact-page[data-gate="checking"] .cp-gate__dot,
#contact-page:not([data-gate]) .cp-gate__dot{
  background:var(--accent);
  animation:cp-blink 1s ease-in-out infinite;
}
#contact-page[data-gate="ok"] .cp-gate__dot,
#contact-page[data-gate="unknown"] .cp-gate__dot{
  background:#3ecf8e;
  animation:cp-live 2.4s ease-out infinite;
}
#contact-page[data-gate="blocked"] .cp-gate{ border-color:rgba(196,92,92,.55); color:#e9a0a0; }
#contact-page[data-gate="blocked"] .cp-gate__dot{ background:#e07070; }
#contact-page[data-gate="blocked"] .cp-gate svg{ color:#e07070; }
@keyframes cp-blink{ 50%{ opacity:.25; } }
@keyframes cp-live{
  0%{ box-shadow:0 0 0 0 rgba(62,207,142,.55); }
  70%,100%{ box-shadow:0 0 0 7px rgba(62,207,142,0); }
}

/* ---------- form tweaks on the page ---------- */
.cpage-card .form-grid{ gap:20px 20px; }
.cpage-card .field-textarea{ min-height:190px; }
.cp-field-foot{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.cp-count{
  flex-shrink:0;
  font-size:12px; color:var(--text-faint);
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.cp-count.is-near{ color:#e0b070; }
.cpage-card .consent-wrap{ margin-top:22px; }
.cpage-card .form-submit-row{ margin-top:22px; }
.cpage-card .form-submit-row .btn{ min-height:50px; padding-left:32px; padding-right:32px; }

/* ---------- success ---------- */
.cpage-card .form-success{ padding:8px 0 4px; outline:none; }
.cp-success-mark{
  width:64px; height:64px;
  margin-bottom:18px;
  color:var(--accent);
}
.cp-success-mark svg{ width:64px; height:64px; overflow:visible; }
.cp-success-mark circle,
.cp-success-mark path{
  fill:none; stroke:currentColor; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.cp-success-mark circle{ stroke-dasharray:152; stroke-dashoffset:152; opacity:.55; }
.cp-success-mark path{ stroke-width:3.5; stroke-dasharray:40; stroke-dashoffset:40; }
#contact-page[data-sent="1"] .cp-success-mark circle{ animation:cp-draw .7s var(--ease) forwards; }
#contact-page[data-sent="1"] .cp-success-mark path{ animation:cp-draw .45s var(--ease) .55s forwards; }
#contact-page[data-sent="1"] .cpage-card .form-success{ animation:cp-rise .6s var(--ease) both; }
@keyframes cp-draw{ to{ stroke-dashoffset:0; } }
@keyframes cp-rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
.cp-again{ margin-top:26px; }

/* ---------- aside ---------- */
.cpage-aside{
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}
.cp-box{
  padding:24px 24px 26px;
  border:1px solid var(--border); border-radius:18px;
  background:var(--bg-elev);
  transition:border-color .25s var(--ease);
}
.cp-box:hover{ border-color:rgba(79,141,255,.4); }
.cp-box h2{
  display:flex; align-items:center; gap:10px;
  font-size:16px; letter-spacing:-.01em;
  margin:0 0 16px;
}
.cp-box h2 svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; }
.cp-box p{ font-size:14.5px; line-height:1.65; color:var(--text-dim); }

.cp-steps{ list-style:none; margin:0; padding:0; counter-reset:cp; }
.cp-steps li{
  position:relative;
  padding:0 0 18px 42px;
  counter-increment:cp;
}
.cp-steps li:last-child{ padding-bottom:0; }
.cp-steps li::before{
  content:counter(cp, decimal-leading-zero);
  position:absolute; left:0; top:0;
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-size:11px; font-weight:700;
}
.cp-steps li:not(:last-child)::after{
  content:'';
  position:absolute; left:12.5px; top:30px; bottom:4px;
  width:1px;
  background:linear-gradient(180deg, rgba(79,141,255,.4), var(--border));
}
.cp-steps strong{ display:block; font-size:14.5px; color:var(--text); margin:3px 0 4px; }
.cp-steps span{ display:block; font-size:13.5px; line-height:1.6; color:var(--text-dim); }

.cp-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cp-checks li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; line-height:1.55; color:var(--text-dim);
}
.cp-checks svg{ width:16px; height:16px; color:var(--accent); flex-shrink:0; margin-top:2px; }

.cp-address{ font-style:normal; font-size:14.5px; line-height:1.7; color:var(--text-dim); }
.cp-address strong{ color:var(--text); font-weight:600; }
.cp-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px;
  font-size:13.5px; color:var(--text-dim);
  border-bottom:1px solid var(--border);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.cp-link svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.cp-link:hover{ color:var(--accent); border-color:var(--accent); }
.cp-link:hover svg{ transform:translateX(3px); }

.cp-others{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cp-other{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--bg);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.cp-other strong{ display:block; font-size:14px; color:var(--text); }
.cp-other span span{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.cp-other svg{ width:16px; height:16px; color:var(--accent); flex-shrink:0; transition:transform .2s var(--ease); }
.cp-other:hover{ border-color:rgba(79,141,255,.5); background:var(--accent-soft); transform:translateY(-1px); }
.cp-other:hover svg{ transform:translateX(3px); }
.cpage-card .form-note{ margin-bottom:22px; }

.cpage-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:56px;
  font-size:14px; color:var(--text-dim);
  transition:color .2s var(--ease);
}
.cpage-back svg{ width:16px; height:16px; }
.cpage-back:hover{ color:var(--accent); }

.cpage-noscript{
  margin-bottom:18px;
  padding:14px 16px;
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  font-size:14px; color:var(--text-dim);
}

/* entrance */
.cpage__intro, .cpage-stage, .cpage-aside > *{
  animation:cp-rise .7s var(--ease) both;
}
.cpage-stage{ animation-delay:.08s; }
.cpage-aside > :nth-child(1){ animation-delay:.16s; }
.cpage-aside > :nth-child(2){ animation-delay:.22s; }
.cpage-aside > :nth-child(3){ animation-delay:.28s; }
.cpage-aside > :nth-child(4){ animation-delay:.34s; }

/* ---------- breakpoints ---------- */
@media (max-width:1023px){
  .cpage__grid{ grid-template-columns:1fr; }
  .cpage-aside{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cpage-aside > :first-child{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .cpage{ padding:124px 16px 90px; }
  .cpage__intro{ margin-bottom:40px; }
  .cpage-card{ border-radius:20px; }
  .cpage-card__top{ justify-content:center; }
  .cpage-aside{ display:flex; }
}
@media (min-width:1920px){
  .cpage{ padding-top:180px; }
  .cpage__inner{ max-width:min(70vw,1640px); }
  .cpage__intro{ max-width:960px; }
  .cpage__intro h1{ font-size:clamp(76px,4vw,104px); }
  .cpage__lede{ max-width:760px; font-size:20px; }
  .cpage-card .field-input{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .cpage-card{ animation:none; }
  .cpage__intro, .cpage-stage, .cpage-aside > *{ animation:none; }
  #contact-page[data-gate] .cp-gate__dot{ animation:none; }
  #contact-page[data-sent="1"] .cp-success-mark circle,
  #contact-page[data-sent="1"] .cp-success-mark path{ animation:none; stroke-dashoffset:0; }
  #contact-page[data-sent="1"] .cpage-card .form-success{ animation:none; }
}