/* ============================================================
   Anfrage — eigene Seite · vollflächiges wechselndes Hintergrundbild
   subtile Boxen, Light-Typo, Lucide-Icons, Silber/Gold
   ============================================================ */
.afp{
  --gold:#c9a86a; --gold-lite:#e7d3a1; --silver:#cdd1d8;
  margin:0; min-height:100vh; background:#050505; color:var(--text,#f4f2ee);
  font-family:var(--sans,Inter,sans-serif); font-weight:300; overflow-x:hidden;
}

/* ---- Vollflächiger, wechselnder Hintergrund ---- */
.afp__bg{position:fixed; inset:0; z-index:0; overflow:hidden}
.afp__bg .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.8s ease; transform:scale(1.04);
}
.afp__bg .slide.is-on{opacity:1}
.afp__overlay{
  position:fixed; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,168,106,.05), transparent 55%),
    linear-gradient(180deg, rgba(5,5,5,.86), rgba(5,5,5,.9) 45%, rgba(5,5,5,.96));
}

.afp__back{
  position:fixed; top:22px; left:24px; z-index:6; display:inline-flex; align-items:center; gap:8px;
  color:var(--muted,#8d8a85); font-size:12px; letter-spacing:.16em; text-transform:uppercase; transition:.2s;
}
.afp__back:hover{color:var(--text)}
.afp__back svg{width:15px; height:15px}

/* ---- Inhalt ---- */
.afp__main{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:96px 24px 64px}
.afp__head{text-align:center; margin-bottom:54px}
.afp__logo{height:46px; width:auto; margin:0 auto 26px; opacity:.95}
.afp__kicker{margin:0 0 12px; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold)}
.afp__title{
  margin:0 0 22px; font-family:var(--display,"Cinzel",serif); font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(26px,5.2vw,46px); line-height:1.08;
  overflow-wrap:break-word; max-width:100%;
  background:linear-gradient(120deg,#eef1f5 8%, var(--silver) 42%, var(--gold) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.afp__lead{max-width:600px; margin:0 auto; color:var(--muted,#8d8a85); font-weight:200;
  font-size:16px; line-height:1.85; letter-spacing:.01em}

/* ---- Formular: Felder untereinander ---- */
.afp__form{display:flex; flex-direction:column; gap:34px}
.af__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.afp__field{display:flex; flex-direction:column; gap:12px}
.afp__label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver); font-weight:400;
}
.afp__label svg{width:15px; height:15px; color:var(--gold)}
.afp__hint{color:var(--muted-2,#6a6864); letter-spacing:.06em; text-transform:none; font-size:11px; font-style:normal}

.afp__input{
  width:100%; background:rgba(255,255,255,.045); color:var(--text,#f4f2ee);
  font-family:var(--sans,Inter); font-weight:300; font-size:15.5px; letter-spacing:.01em;
  padding:16px 18px; border:1px solid rgba(255,255,255,.10); border-radius:3px;
  outline:none; transition:.22s;
}
.afp__input::placeholder{color:var(--muted-2,#6a6864); font-weight:200}
.afp__input:focus{
  border-color:rgba(201,168,106,.6); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(201,168,106,.22), 0 12px 40px rgba(0,0,0,.35);
}
.afp__textarea{resize:vertical; min-height:130px; line-height:1.65}

/* ---- Icon-Optionen statt Checkboxen ---- */
.afp__opts{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:11px}
.afp__opts--3{grid-template-columns:repeat(3,1fr)}
.afp__opts--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){
  .afp__opts,.afp__opts--3,.afp__opts--4{grid-template-columns:repeat(2,1fr)}
}
.opt{position:relative; cursor:pointer}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt__box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:18px 12px; min-height:84px; border-radius:3px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  color:var(--muted,#8d8a85); transition:.2s;
}
.opt__box svg{width:23px; height:23px; stroke-width:1.4}
.opt__box em{font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.3}
.opt:hover .opt__box{border-color:rgba(255,255,255,.22); color:var(--text)}
.opt input:checked + .opt__box{
  border-color:rgba(201,168,106,.7); color:var(--gold-lite);
  background:linear-gradient(160deg, rgba(201,168,106,.16), rgba(201,168,106,.05));
  box-shadow:0 0 0 1px rgba(201,168,106,.25);
}
.opt input:focus-visible + .opt__box{box-shadow:0 0 0 2px rgba(201,168,106,.45)}
.af__dist-more{margin-top:12px; max-width:380px}

/* ---- kein Roboter ---- */
.afp__robot{display:inline-flex; align-items:center; gap:12px; cursor:pointer; color:var(--muted,#8d8a85);
  font-size:13.5px; letter-spacing:.05em}
.afp__robot input{position:absolute; opacity:0; width:0; height:0}
.afp__robot-box{display:grid; place-content:center; width:22px; height:22px; border-radius:3px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); transition:.2s}
.afp__robot-box svg{width:14px; height:14px; color:#0c0b08; opacity:0; transition:.15s}
.afp__robot input:checked + .afp__robot-box{background:linear-gradient(135deg,var(--silver),var(--gold)); border-color:transparent}
.afp__robot input:checked + .afp__robot-box svg{opacity:1}

/* ---- Aktionen ---- */
.afp__actions{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:8px}
.afp__send{
  display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--silver), var(--gold)); color:#0c0b08;
  font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 38px; border-radius:3px; transition:.22s;
}
.afp__send svg{width:16px; height:16px; stroke-width:2}
.afp__send:hover{filter:brightness(1.08); box-shadow:0 14px 38px rgba(201,168,106,.22)}
.afp__tg{display:inline-flex; align-items:center; gap:8px; color:var(--silver); font-size:13px; letter-spacing:.08em;
  border-bottom:1px solid rgba(201,168,106,.4); padding-bottom:2px; transition:.2s}
.afp__tg svg{width:16px; height:16px}
.afp__tg:hover{color:var(--gold-lite); border-color:var(--gold-lite)}

.afp__feedback{min-height:20px; margin:2px 0 0; font-size:14px; font-weight:300}
.afp__feedback.is-err{color:var(--gold-lite)}
.afp__feedback.is-ok{color:var(--silver)}

/* ---- TFP-Erklärung ---- */
.afp__explain{margin:10px 0 0; color:var(--muted,#8d8a85); font-size:12.5px; line-height:1.65; letter-spacing:.01em}
.afp__explain b{color:var(--silver)}
.afp__inline-hint{color:var(--muted-2,#6a6864); font-size:11px; text-transform:none; letter-spacing:.04em}

/* ---- Upload-Feld ---- */
.afp__file{width:100%; color:var(--muted,#8d8a85); font-family:var(--sans); font-size:13px; padding:13px 15px;
  background:rgba(255,255,255,.03); border:1px dashed rgba(201,168,106,.4); border-radius:3px; cursor:pointer}
.afp__file::file-selector-button{background:linear-gradient(135deg,var(--silver),var(--gold)); color:#0c0b08;
  border:none; padding:8px 16px; margin-right:14px; font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; border-radius:2px}
.afp__hint{display:block; margin-top:6px; color:var(--muted-2,#6a6864); font-size:11.5px; line-height:1.5}

/* ---- Erfolgs-Animation (edler Haken) ---- */
.af-done{text-align:center; padding:40px 0}
.af-check{width:90px; height:90px; margin:0 auto 24px}
.af-check svg{width:100%; height:100%}
.af-check__c{fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:151; stroke-dashoffset:151; animation:af-c .7s ease forwards}
.af-check__m{fill:none; stroke:var(--gold-lite); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; animation:af-m .45s .6s ease forwards}
@keyframes af-c{to{stroke-dashoffset:0}}
@keyframes af-m{to{stroke-dashoffset:0}}
.af-done__title{font-family:var(--display,serif); font-size:22px; color:var(--silver); margin:0 0 8px; letter-spacing:.02em}
.af-done__sub{color:var(--muted,#8d8a85); font-size:14px; margin:0}
@media(prefers-reduced-motion:reduce){.af-check__c,.af-check__m{animation:none; stroke-dashoffset:0}}
.afp__consent{margin:0; color:var(--muted-2,#6a6864); font-size:12px; letter-spacing:.02em; line-height:1.6}
.afp__consent a{color:var(--silver); border-bottom:1px solid rgba(201,168,106,.4)}

.afp__foot{margin-top:48px; text-align:center; color:var(--muted-2,#6a6864); font-size:12px; letter-spacing:.06em}
.afp__foot a{color:var(--muted,#8d8a85); transition:.2s}
.afp__foot a:hover{color:var(--gold-lite)}

@media(prefers-reduced-motion:reduce){.afp__bg .slide{transition:opacity .3s ease; transform:none}}