/* FPV-Drohnen-Konfigurator: links die Bühne mit dem 3D-Modell, rechts die Auswahl in sieben Schritten, unten die Leiste.
   Ohne JavaScript stehen alle Schritte untereinander und das Formular funktioniert wie überall. */
.seite-custom-build,.seite-custom-build main{background:var(--nacht)}
html.has-js .seite-custom-build .mobil-cta{display:none}
.kf{--kf-text:#eef2ff;--kf-leise:#9aa6c4;--kf-linie:rgba(255,255,255,.11);--kf-flaeche:rgba(255,255,255,.035);--kf-panel:#0a1022;position:relative;color:var(--kf-text);background:var(--nacht);scroll-margin-top:var(--kopf,76px)}
.kf *{box-sizing:border-box}
.kf a{color:inherit}
.kf :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.kf [hidden]{display:none!important}

/* Bühne */
.kf-buehne{position:relative;height:340px;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 62%,#1a2440 0,#0e1529 38%,#080c1a 68%,#04060d 100%)}
.kf-szene{position:absolute;inset:0}
.kf-szene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s;touch-action:pan-y;cursor:grab}
.kf-szene canvas:active{cursor:grabbing}
.kf-mit-3d .kf-szene canvas{opacity:1}
/* Ohne JavaScript oder ohne WebGL gibt es keine Bühne: Die Auswahl steht dann allein und bleibt voll benutzbar. */
.kf:not(.kf-js) .kf-buehne,.kf-ohne-3d .kf-buehne{display:none}
.kf:not(.kf-js) .kf-panel,.kf-ohne-3d .kf-panel{max-width:820px;margin-inline:auto}
.kf-modellname{position:absolute;left:clamp(18px,3vw,44px);top:clamp(16px,3vh,36px);margin:0;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.kf-modellname b{color:#fff;font-weight:900;font-stretch:120%;font-size:clamp(26px,3.3vw,54px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
.kf-modellname span{font:400 12px/1.3 var(--osd);letter-spacing:.14em;text-transform:uppercase;color:var(--kf-leise)}
.kf-werkzeuge{position:absolute;left:0;right:0;bottom:clamp(14px,2.6vh,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 14px;pointer-events:none}
.kf-gruppe{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(6,10,24,.78);border:1px solid var(--kf-linie);pointer-events:auto}
.kf-gruppe button{appearance:none;border:0;border-radius:999px;min-height:34px;padding:0 14px;background:transparent;color:#c5cde3;font:600 13px/1 var(--schrift);cursor:pointer;transition:background .2s,color .2s}
.kf-gruppe button:hover{color:#fff;background:rgba(255,255,255,.08)}
.kf-gruppe button[aria-pressed=true]{background:#fff;color:var(--nacht)}
.kf-tipp{position:absolute;right:clamp(18px,3vw,44px);top:clamp(18px,3.2vh,40px);margin:0;font:400 11px/1.4 var(--osd);letter-spacing:.12em;text-transform:uppercase;color:var(--kf-leise);pointer-events:none;transition:opacity .6s}
.kf-tipp.ist-weg{opacity:0}

/* Auswahl */
.kf-panel{min-width:0;background:var(--kf-panel)}
.kf-schritte ol{position:relative;display:flex;gap:2px;margin:0;padding:10px 12px 0;list-style:none;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--kf-linie)}
.kf-schritte ol::-webkit-scrollbar{display:none}
.kf-schritte a{display:flex;align-items:center;gap:7px;padding:10px 10px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none;color:var(--kf-leise);font-weight:650;font-size:13.5px;transition:color .2s,border-color .2s}
.kf-schritte b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font:400 11px/1 var(--osd)}
.kf-schritte a:hover{color:#fff}
.kf-schritte a.ist-erledigt b{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.kf-schritte a[aria-current]{color:#fff;border-bottom-color:var(--orange)}
.kf-schritte a[aria-current] b{background:var(--orange);border-color:var(--orange);color:var(--nacht)}
.kf-inhalt{padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px) 26px}
.kf-schritt+.kf-schritt{margin-top:44px;padding-top:36px;border-top:1px solid var(--kf-linie)}
.kf-js .kf-schritt+.kf-schritt{margin-top:0;padding-top:0;border-top:0}
/* Ein Link auf einen Schritt (#kf-video) zeigt den ganzen Konfigurator: der Browser soll nicht in die Auswahl hineinscrollen. */
.kf-js .kf-schritt{scroll-margin-top:100vh}
.kf-js .kf-schritt:not([hidden]){animation:kf-ein .35s var(--schnell,ease-out)}
@keyframes kf-ein{from{opacity:0;transform:translateY(8px)}}
.kf h1,.kf h2{margin:0 0 12px;color:#fff;font-weight:900;font-stretch:116%;letter-spacing:-.022em;line-height:1.02;overflow-wrap:normal;hyphens:manual}
.kf h1{font-size:clamp(27px,2.3vw,35px)}
.kf h2{font-size:clamp(26px,2.2vw,32px)}
.kf h1:focus,.kf h2:focus{outline:0}
.kf-band{display:block;margin-bottom:12px;font:400 12px/1 var(--osd);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.kf-text{margin:0 0 20px;color:#c3cbe0;font-size:15.5px;line-height:1.6}
.kf-hinweis{margin:14px 0 0;color:var(--kf-leise);font-size:13.5px;line-height:1.55}
.kf-hinweis a{color:#fff;text-decoration-color:var(--orange);text-underline-offset:3px}

.kf-optionen{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.kf-optionen+.kf-optionen,.kf-hinweis+.kf-optionen{margin-top:24px}
.kf-optionen legend,.kf-dazu legend{padding:0;margin-bottom:10px;font:400 12px/1 var(--osd);letter-spacing:.14em;text-transform:uppercase;color:var(--kf-leise)}
.kf-option{position:relative;display:flex;align-items:center;gap:14px;padding:12px 44px 12px 12px;border-radius:14px;border:1px solid var(--kf-linie);background:var(--kf-flaeche);cursor:pointer;transition:border-color .2s,background .2s}
.kf-option:hover{border-color:rgba(255,255,255,.3)}
.kf-option input{position:absolute;opacity:0;pointer-events:none}
.kf-option::after{content:"";position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);transition:border-color .2s,background .2s}
.kf-option:has(input:checked){border-color:var(--orange);background:rgba(255,122,26,.09)}
.kf-option:has(input:checked)::after{border-color:var(--orange);background:var(--orange) url(haken-dunkel.svg) center/12px no-repeat}
.kf-option:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}
.kf-option:has(input:disabled){opacity:.42;cursor:not-allowed}
.kf-bild{display:none;flex:none;width:92px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#1b2542,#0a0f20 75%)}
.kf-mit-bildern .kf-bild{display:block}
.kf-bild canvas{display:block;width:100%;height:100%}
.kf-option-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.kf-option-text strong{color:#fff;font-weight:800;font-stretch:110%;font-size:16px;line-height:1.2}
.kf-option-text>span{color:#b4bdd6;font-size:13.5px;line-height:1.45}
.kf-option-text small{color:var(--kf-leise);font-size:12.5px;line-height:1.45}
.kf-option-text .kf-daten{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.kf-daten i{font:400 11px/1 var(--osd);font-style:normal;letter-spacing:.06em;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:#d5dcf0;white-space:nowrap}
.kf-option-text .kf-preis{align-self:flex-start;margin-top:4px;padding:5px 9px;border-radius:7px;background:rgba(255,122,26,.16);color:#ffd2ad;font-size:13px;line-height:1.4}
.kf-option-text .kf-preis b{color:#fff}
.kf-optionen--paar{grid-template-columns:1fr 1fr}
.kf-optionen--paar .kf-option{flex-direction:column;align-items:flex-start;padding:12px}
.kf-optionen--paar .kf-option::after{top:22px}
.kf-optionen--paar .kf-bild{width:100%}

.kf-farben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.kf-farbe{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--kf-linie);background:var(--kf-flaeche);cursor:pointer;color:#fff;font-weight:700;font-size:15px;transition:border-color .2s}
.kf-farbe input{position:absolute;opacity:0;pointer-events:none}
.kf-farbe i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.kf-farbe:hover{border-color:rgba(255,255,255,.3)}
.kf-farbe:has(input:checked){border-color:#fff}
.kf-farbe:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}

.kf-liste{margin:0 0 18px;border-top:1px solid var(--kf-linie)}
.kf-liste div{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--kf-linie)}
.kf-liste dt{font:400 11px/1.3 var(--osd);letter-spacing:.12em;text-transform:uppercase;color:var(--kf-leise)}
.kf-liste dd{margin:0;color:#fff;font-weight:700;font-size:15px}
.kf-liste a{display:none;font-size:12.5px;color:var(--kf-leise);text-underline-offset:3px}
.kf-js .kf-liste a{display:inline}
.kf-liste a:hover{color:#fff}
.kf-fakten{display:grid;gap:8px;margin-bottom:26px}
.kf-fakten p{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;margin:0;padding:12px;border-radius:12px;background:var(--kf-flaeche);font-size:13px;line-height:1.5;color:#b4bdd6}
.kf-fakten b{color:#fff;font-size:15px;line-height:1.3}
.kf-dazu{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;border:0}
.kf-dazu legend{width:100%}
.kf-dazu label{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--kf-linie);background:var(--kf-flaeche);cursor:pointer;font-weight:650;font-size:14px;color:#dbe1f2}
.kf-dazu input{width:16px;height:16px;margin:0;accent-color:var(--orange)}
.kf-dazu label:has(input:checked){border-color:var(--orange);color:#fff}
.kf-teilen{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.kf-teilen button{appearance:none;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--kf-linie);background:transparent;color:#dbe1f2;font:650 13.5px/1 var(--schrift);cursor:pointer}
.kf-teilen button:hover{border-color:rgba(255,255,255,.35);color:#fff}

/* Leiste */
.kf-leiste{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(18px,2.4vw,30px);border-top:1px solid var(--kf-linie);background:#070b19}
.kf-leiste-daten{display:flex;gap:18px;margin:0}
.kf-leiste-daten span{display:flex;flex-direction:column;gap:3px}
.kf-leiste-daten small{font:400 10.5px/1 var(--osd);letter-spacing:.14em;text-transform:uppercase;color:var(--kf-leise);white-space:nowrap}
.kf-leiste-daten b{color:#fff;font-weight:800;font-stretch:110%;font-size:17px;line-height:1.1;white-space:nowrap}
.kf-leiste-knoepfe{display:flex;align-items:center;gap:6px}
.kf-zurueck{display:none;padding:12px 10px;color:var(--kf-leise);font-weight:650;font-size:14px;text-decoration:none}
.kf-js .kf-zurueck{display:block}
.kf-zurueck:hover{color:#fff}
.kf-weiter{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:12px;background:#fff;color:var(--nacht)!important;font-weight:800;font-stretch:108%;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s,background .2s}
.kf-weiter:hover{transform:translateY(-1px)}
.kf-weiter--ziel,.kf:not(.kf-js) .kf-weiter{background:var(--orange)}

/* Mit JavaScript ab Tablet quer: ein Bildschirm, Bühne links, Auswahl rechts. */
@media (min-width:901px){
  .kf-js:not(.kf-ohne-3d){display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,35vw,500px);height:calc(100svh - var(--kopf,76px));min-height:600px}
  .kf-js .kf-buehne{height:auto}
  .kf-js:not(.kf-ohne-3d) .kf-panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-height:0;border-left:1px solid var(--kf-linie)}
  .kf-js:not(.kf-ohne-3d) .kf-inhalt{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
}
/* Handy: Bühne bleibt oben stehen, Auswahl scrollt darunter, die Leiste klebt unten. */
@media (max-width:900px){
  .kf-js .kf-buehne{position:sticky;top:var(--kopf,64px);z-index:3;height:min(42svh,380px);border-bottom:1px solid var(--kf-linie)}
  .kf-js .kf-schritte{position:sticky;top:calc(var(--kopf,64px) + min(42svh,380px));z-index:3;background:var(--kf-panel)}
  .kf-ohne-3d .kf-schritte{top:var(--kopf,64px)}
  .kf-js .kf-inhalt{min-height:46svh}
  .kf-js .kf-leiste{position:sticky;bottom:0;z-index:3}
  .kf-modellname b{font-size:24px}
  .kf-modellname span{font-size:10.5px}
  .kf-tipp{display:none}
  .kf-werkzeuge{bottom:8px;gap:6px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;pointer-events:auto}
  .kf-werkzeuge::-webkit-scrollbar{display:none}
  .kf-gruppe{flex:none}
  .kf-gruppe button{min-height:32px;padding:0 11px;font-size:12.5px}
  .kf-bild{width:76px}
  .kf-leiste-daten small{font-size:10px}
  .kf-leiste{gap:8px;padding:10px 14px}
  .kf-leiste-daten{min-width:0}
}
@media (max-width:540px){
  .kf-js .kf-leiste-daten span+span{display:none}
  .kf-weiter{padding:0 14px;font-size:14px;gap:8px}
  .kf-zurueck{padding:12px 6px}
}
@media (prefers-reduced-motion:reduce){
  .kf-js .kf-schritt:not([hidden]){animation:none}
  .kf-szene canvas,.kf-weiter{transition:none}
}

/* Unter dem Konfigurator: was der Aufbau enthält und wie es weitergeht. */
.kf-danach{background:var(--nacht);color:#c3cbe0;padding:clamp(56px,7vw,96px) 0 clamp(20px,3vw,40px);border-top:1px solid rgba(255,255,255,.08)}
.kf-danach h2{color:#fff;max-width:17em;margin-bottom:14px}
.kf-danach .lead{max-width:44em;color:#c3cbe0}
.kf-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:34px 0 0;padding:0;list-style:none;counter-reset:weg}
.kf-wege li{counter-increment:weg;padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035)}
.kf-wege li::before{content:"0" counter(weg);display:block;margin-bottom:14px;font:400 12px/1 var(--osd);letter-spacing:.16em;color:var(--orange)}
.kf-wege b{display:block;margin-bottom:6px;color:#fff;font-weight:800;font-stretch:110%;font-size:18px;line-height:1.2}
.kf-wege span{font-size:15px;line-height:1.55}
.kf-umfang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid rgba(255,255,255,.1)}
.kf-umfang h3{color:#fff;font-size:22px;margin-bottom:14px}
.kf-umfang ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.kf-umfang li{display:flex;gap:10px;font-size:15.5px;line-height:1.5}
.kf-umfang li .icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--orange)}
.kf-umfang p{margin:0 0 12px;font-size:15.5px;line-height:1.6}
.kf-rechnung{margin:0;border-top:1px solid rgba(255,255,255,.12)}
.kf-rechnung div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.kf-rechnung dt{color:#c3cbe0}
.kf-rechnung dd{margin:0;color:#fff;font-weight:700;white-space:nowrap}
.kf-rechnung .summe dt,.kf-rechnung .summe dd{color:#fff;font-weight:850;font-size:17px}
.kf-klein{margin-top:12px!important;color:#9aa6c4;font-size:13.5px!important}
@media (max-width:820px){.kf-wege,.kf-umfang{grid-template-columns:1fr}}
.seite-custom-build #anfragen{background-color:var(--nacht);background-image:none;scroll-margin-top:var(--kopf,76px)}
.kf-anfrage-auswahl{padding:14px 16px;border:1px solid var(--linie);border-radius:12px;background:var(--papier);color:var(--text-2);font-size:13px;line-height:1.7}