/* nextweb.design – Formular „Projekt anfragen“ (scripts/formular.php, design/formular.js). Farben und Schriften wie custom.css.
   Ohne Skript: alle Schritte untereinander, der Planet als CSS-Bild. Mit Skript (.is-js): ein Schritt sichtbar, Planet aus Three.js. */
.nwf-form { --nwf-field: rgba(255,255,255,.045); --nwf-field-hi: rgba(255,255,255,.075); margin: 0; }
.nwf { position: relative; scroll-margin-top: 110px; }
.nwf *, .nwf *::before, .nwf *::after { box-sizing: border-box; }
.nwf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nwf-main { min-width: 0; }

/* Schritte oben */
.nwf-steps { display: none; gap: 6px; margin: 0 0 clamp(26px, 4vw, 44px); padding: 0; list-style: none; }
.nwf.is-js .nwf-steps { display: flex; flex-wrap: wrap; }
.nwf-steps button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: transparent;
  color: var(--nwd-muted); font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.nwf-steps button:hover { background: rgba(255,255,255,.05); color: var(--nwd-ink); }
.nwf-steps i { width: 22px; height: 22px; border-radius: 50%; background: #222 0 0 / 200% 100%; box-shadow: inset -5px -3px 8px rgba(0,0,0,.85); opacity: .55; transition: opacity .2s, transform .2s; }
.nwf-steps button[aria-current] { background: rgba(255,255,255,.07); color: var(--nwd-ink); box-shadow: inset 0 0 0 1px var(--nwd-line); }
.nwf-steps button[aria-current] i, .nwf-steps button.is-done i { opacity: 1; }
.nwf-steps button[aria-current] i { transform: scale(1.12); }
.nwf-steps button.is-done span::after { content: " ✓"; color: var(--nwd-mint); }

/* Schritt */
.nwf-step { min-width: 0; margin: 0 0 clamp(40px, 6vw, 64px); padding: 0; border: 0; }
.nwf.is-js .nwf-step { margin-bottom: 0; animation: nwf-in .45s cubic-bezier(.2,.8,.2,1); }
.nwf-step[hidden] { display: none; }
@keyframes nwf-in { from { opacity: 0; transform: translateY(14px); } }
.nwf-legend { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 0; font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--nwd-muted); }
.nwf-legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--nwd-line); color: var(--nwd-sun); letter-spacing: 0; }
.nwf-legend:focus { outline: none; }

/* UIkit-Felder von RSForm (Layout „UIkit 3“) zurücksetzen, damit die eigenen Formen greifen */
.nwf .uk-input, .nwf .uk-select, .nwf .uk-textarea { height: auto; }
.nwf .rsfp-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.nwf .nwf-blank select.uk-select:not([multiple]):not([size]) { height: auto; padding: 0 1.05em .02em .12em; border: 0; border-bottom: 2px dashed rgba(255,176,138,.55); border-radius: 0;
  line-height: 1.25; vertical-align: baseline;
  background: linear-gradient(45deg, transparent 50%, var(--nwd-peach) 50%) right .32em top 58% / .3em .3em no-repeat, linear-gradient(-45deg, transparent 50%, var(--nwd-peach) 50%) right .05em top 58% / .3em .3em no-repeat; }
.nwf .nwf-range input[type=range].uk-input { height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Der Satz mit Lücken */
.nwf-sentence { margin: 0 0 34px; font: 400 clamp(26px, 3.3vw, 46px)/1.38 Fraunces, Georgia, serif; color: var(--nwd-ink); letter-spacing: -.01em; text-wrap: pretty; }
.nwf-blank { display: inline-block; max-width: 100%; vertical-align: baseline; }
.nwf-blank input, .nwf-blank select { width: auto; max-width: 100%; height: auto; margin: 0; padding: 0 .12em .02em; border: 0; border-bottom: 2px dashed rgba(255,176,138,.55); border-radius: 0; background: transparent;
  color: var(--nwd-peach); font: italic 400 1em/1.2 Fraunces, Georgia, serif; outline: none; transition: border-color .2s, background .2s; }
.nwf-blank input::placeholder { color: rgba(255,176,138,.42); font-style: italic; }
.nwf-blank input:focus, .nwf-blank select:focus { border-bottom-style: solid; border-bottom-color: var(--nwd-peach); background: rgba(255,176,138,.06); }
.nwf-blank select { -webkit-appearance: none; appearance: none; padding-right: 1.05em; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--nwd-peach) 50%) right .32em top 58% / .3em .3em no-repeat, linear-gradient(-45deg, transparent 50%, var(--nwd-peach) 50%) right .05em top 58% / .3em .3em no-repeat; }
.nwf-blank select option { background: #12121a; color: var(--nwd-ink); font: normal 16px "Space Grotesk", sans-serif; }
.nwf:not(.is-js) .nwf-blank input { width: 9em; }

.nwf-inspiration { display: inline-flex; align-items: center; gap: 10px; margin: -14px 0 26px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(127,242,207,.08);
  box-shadow: inset 0 0 0 1px rgba(127,242,207,.25); font: 500 14px "Space Grotesk", sans-serif; color: var(--nwd-text); }
.nwf-inspiration span { color: var(--nwd-muted); } .nwf-inspiration b { color: var(--nwd-mint); font-weight: 500; }
.nwf-inspiration button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--nwd-ink); cursor: pointer; font-size: 16px; line-height: 1; }
.nwf-inspiration[hidden] { display: none; }

/* Felder */
.nwf-field { position: relative; margin: 0 0 22px; }
.nwf-label { display: block; margin: 0 0 10px; padding: 0; font: 500 15px "Space Grotesk", sans-serif; color: var(--nwd-ink); }
.nwf-label em { font-style: normal; color: var(--nwd-peach); } .nwf-label span { color: var(--nwd-muted); font-weight: 400; }
.nwf-field textarea, .nwf-field input[type=email], .nwf-field input[type=tel], .nwf-field input[type=text] { display: block; width: 100%; margin: 0; padding: 16px 18px;
  border: 0; border-radius: 16px; background: var(--nwf-field); box-shadow: inset 0 0 0 1px var(--nwd-line); color: var(--nwd-ink); font: 400 18px/1.5 "Space Grotesk", sans-serif;
  outline: none; transition: box-shadow .2s, background .2s; resize: vertical; }
.nwf-f-Idee textarea { min-height: 120px; font: 400 clamp(19px, 1.7vw, 23px)/1.45 Fraunces, Georgia, serif; resize: none; }
.nwf-field textarea::placeholder, .nwf-field input::placeholder { color: rgba(217,212,239,.38); }
.nwf-field textarea:focus, .nwf-field input:focus { background: var(--nwf-field-hi); box-shadow: inset 0 0 0 1px rgba(255,176,138,.7), 0 0 0 4px rgba(255,176,138,.12); }
.nwf-field.is-bad textarea, .nwf-field.is-bad input, .nwf-field .uk-form-danger, .nwf-blank .uk-form-danger { box-shadow: inset 0 0 0 1px #ff8d8d, 0 0 0 4px rgba(255,120,120,.12); }
.nwf-msg, .nwf-field .formError { display: block; margin: 8px 0 0; font: 500 14px "Space Grotesk", sans-serif; color: #ffa3a3; }
.nwf-field .formNoError { display: none; }
.nwf-count { position: absolute; right: 14px; bottom: 10px; font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--nwd-muted); pointer-events: none; }
.nwf-hint { margin: 6px 0 22px; font-size: 14px; color: var(--nwd-muted); } .nwf-hint a { color: var(--nwd-text); }
.nwf-error { margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; background: rgba(255,120,120,.1); color: #ffc2c2; }

/* Auswahl als Knöpfe */
.nwf-group { min-width: 0; margin: 0 0 26px; }
.nwf-chips label { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0 8px 10px 0; padding: 10px 18px; border-radius: 999px; background: var(--nwf-field);
  box-shadow: inset 0 0 0 1px var(--nwd-line); color: var(--nwd-text); font: 500 15px "Space Grotesk", sans-serif; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.nwf-chips label:hover { background: var(--nwf-field-hi); color: var(--nwd-ink); }
.nwf-chips label:active { transform: scale(.97); }
.nwf-chips input, .nwf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.nwf-chips label.is-on, .nwf-chips label:has(input:checked) { background: var(--nwd-peach); color: #1a0f08; box-shadow: 0 8px 24px -10px rgba(255,176,138,.7); }
.nwf-chips label:has(input:focus-visible), .nwf-check label:has(input:focus-visible) { outline: 2px solid var(--nwd-peach); outline-offset: 3px; }
.nwf-chips br { display: none; }

.nwf-check label { display: inline-flex; align-items: center; gap: 12px; position: relative; font: 500 15px "Space Grotesk", sans-serif; color: var(--nwd-text); cursor: pointer; }
.nwf-check label::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--nwf-field); box-shadow: inset 0 0 0 1px var(--nwd-line); transition: background .2s; }
.nwf-check label.is-on::before, .nwf-check label:has(input:checked)::before { background: var(--nwd-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2305050f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* Regler */
.nwf-range-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 14px; font: 500 13px "Geist Mono", ui-monospace, monospace; color: var(--nwd-muted); }
.nwf-range-row span:last-child { text-align: right; }
.nwf-range input[type=range] { --v: 50%; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.nwf-range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nwd-lilac), var(--nwd-peach) var(--v), rgba(255,255,255,.12) var(--v)); }
.nwf-range input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); }
.nwf-range input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nwd-lilac), var(--nwd-peach)); }
.nwf-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--nwd-ink); box-shadow: 0 0 0 6px rgba(255,176,138,.18), 0 4px 14px rgba(0,0,0,.5); }
.nwf-range input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--nwd-ink); box-shadow: 0 0 0 6px rgba(255,176,138,.18), 0 4px 14px rgba(0,0,0,.5); }
.nwf-range input[type=range]:focus-visible { outline: 2px solid var(--nwd-peach); outline-offset: 6px; border-radius: 8px; }

/* Knöpfe */
.nwf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.nwf:not(.is-js) .nwf-nav > button { display: none; }
.nwf-next, .nwf-submit button, .nwf-submit input { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--nwd-peach); color: #1a0f08; font: 600 17px "Space Grotesk", sans-serif; cursor: pointer; box-shadow: 0 12px 34px -14px rgba(255,176,138,.8); transition: transform .2s, box-shadow .2s, background .2s; }
.nwf-next:hover, .nwf-submit button:hover { transform: translateY(-2px); background: #ffc2a3; }
.nwf-back { min-height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--nwd-muted); font: 500 16px "Space Grotesk", sans-serif; cursor: pointer; }
.nwf-back:hover { color: var(--nwd-ink); background: rgba(255,255,255,.05); }
.nwf-step[data-step="1"] .nwf-back { display: none; }
.nwf-submit button::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6e8, #ffb08a 55%, #c2552d); box-shadow: 0 0 12px rgba(255,196,107,.9); }
.nwf.is-launching .nwf-submit button { pointer-events: none; animation: nwf-pulse 1s ease-in-out infinite; }
@keyframes nwf-pulse { 50% { box-shadow: 0 0 0 10px rgba(255,176,138,.14), 0 12px 34px -14px rgba(255,176,138,.8); } }
.nwf-next:focus-visible, .nwf-submit button:focus-visible, .nwf-back:focus-visible, .nwf-steps button:focus-visible { outline: 2px solid var(--nwd-ink); outline-offset: 3px; }

/* Startfreigabe (Hashcash): mit Skript rechnet sie beim Start von selbst */
.nwf.is-js .nwf-hashcash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nwf.is-js .nwf-hashcash .formError { position: static; }
.nwf-hashcash [data-rsfp-hashcash] { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: var(--nwf-field);
  box-shadow: inset 0 0 0 1px var(--nwd-line); color: var(--nwd-text); font: 500 14px "Space Grotesk", sans-serif; }
.nwf-hashcash [data-rsfp-hashcash] .hashcash { width: 26px; height: 26px; margin: 0; }

/* Deine Welt */
.nwf-world { position: sticky; top: 110px; text-align: center; }
.nwf-stage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.25; margin: 0 auto; }
.nwf-stage::before { content: ""; position: absolute; inset: 4% 18%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, #6fb7ff), transparent 72%);
  opacity: calc(var(--energy, .4) * .45); filter: blur(18px); transition: background 1.2s, opacity .8s; }
.nwf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; }
.nwf-world.is-3d.is-ready .nwf-canvas { opacity: 1; }
.nwf-fallback { position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 1; margin: -22% 0 0 -22%; border-radius: 50%; background: #1b2238 0 0 / 200% 100% repeat-x;
  box-shadow: inset -34px -22px 60px rgba(0,0,0,.88), inset 8px 6px 26px rgba(255,255,255,.1), 0 0 60px -10px var(--glow, #6fb7ff); animation: nwf-spin 60s linear infinite; transition: opacity .8s; }
.nwf-world.is-3d.is-ready .nwf-fallback { opacity: 0; }
.nwf-world.has-ring .nwf-fallback::after { content: ""; position: absolute; inset: 38% -42%; border-radius: 50%; box-shadow: 0 0 0 9px rgba(216,205,184,.38); transform: rotate(-18deg); }
@keyframes nwf-spin { to { background-position: -200% 0; } }
.nwf-name { margin: 6px 0 14px; font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--nwd-muted); }
.nwf-name b { display: block; margin-top: 6px; font: italic 400 clamp(22px, 2vw, 28px)/1.2 Fraunces, Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--nwd-peach);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nwf-facts { display: grid; gap: 6px; max-width: 340px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.nwf-facts li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font: 500 13px "Space Grotesk", sans-serif; animation: nwf-in .4s ease; }
.nwf-facts span { color: var(--nwd-muted); font: 500 11px "Geist Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.nwf-facts b { color: var(--nwd-ink); font-weight: 500; text-align: right; }

/* Bestätigung: der Planet steigt in die Umlaufbahn */
.nwf-done { --r: clamp(110px, 16vw, 150px); max-width: 760px; margin: 0 auto; text-align: center; scroll-margin-top: 90px; }
.nwf-launch { position: relative; height: calc(var(--r) * 2 + 80px); margin: 0 auto 10px; }
.nwf-launch::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); }
.nwf-sun { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #ffb347 url(/prototypen/tex/2k/sun.webp) 0 0 / 200% 100%;
  box-shadow: 0 0 40px 8px rgba(255,170,70,.55), 0 0 120px 30px rgba(255,140,50,.25); animation: nwf-spin 90s linear infinite; }
.nwf-path { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.nwf-sat { position: absolute; left: 0; top: 0; width: 76px; height: 76px; transform: translate(-50%, -50%) translateX(var(--r)); }
.nwf-sat img, .nwf-sat-tex { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px var(--glow, #6fb7ff)); }
.nwf-sat-tex { border-radius: 50%; background: #1b2238 url(/prototypen/tex/2k/earth_day.webp) 0 0 / 200% 100%; box-shadow: inset -12px -8px 20px rgba(0,0,0,.85); transform: scale(.62); }
.nwf-done.is-go .nwf-path { animation: nwf-orbit 16s linear infinite; }
.nwf-done.is-go .nwf-sat { animation: nwf-rise 2.4s cubic-bezier(.3,.7,.2,1) both; }
@keyframes nwf-orbit { from { transform: rotate(90deg); } to { transform: rotate(450deg); } }
@keyframes nwf-rise { from { transform: translate(-50%, -50%) translate(0, 0) scale(2.6); opacity: 0; } 18% { opacity: 1; } to { transform: translate(-50%, -50%) translateX(var(--r)) scale(1); } }
.nwf-done.is-static .nwf-path { transform: rotate(-35deg); }
.nwf-done-name { margin: 0 0 6px; font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--nwd-muted); }
.nwf-done-name b { color: var(--nwd-peach); font-weight: 500; }
.nwf-done h2 { margin: 12px 0 18px; font: 400 clamp(34px, 4.6vw, 60px)/1.05 Fraunces, Georgia, serif; color: var(--nwd-ink); }
.nwf-done h2 em { color: var(--nwd-peach); }
.nwf-quote { max-width: 620px; margin: 0 auto 22px; padding: 18px 24px; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--nwd-line);
  font: italic 400 clamp(19px, 1.8vw, 24px)/1.45 Fraunces, Georgia, serif; color: var(--nwd-text); white-space: pre-line; }
.nwf-done > p { max-width: 600px; margin-left: auto; margin-right: auto; color: var(--nwd-text); }

/* Handy und Tablet: Planet klein über dem Schritt */
@media (max-width: 959px) {
  .nwf-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nwf-world { position: relative; top: 0; order: -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
  .nwf-stage { width: 150px; }
  .nwf-name { margin: 0; } .nwf-name b { font-size: 22px; }
  .nwf-facts { display: none; }
  .nwf-steps { margin-bottom: 18px; }
  .nwf-steps button { padding: 0 12px 0 6px; gap: 7px; }
}
@media (max-width: 520px) {
  .nwf-steps button span { display: none; } .nwf-steps button[aria-current] span { display: inline; }
  .nwf-sentence { font-size: 25px; }
  .nwf-chips label { min-height: 40px; margin: 0 6px 8px 0; padding: 8px 14px; font-size: 14px; }
  .nwf-range-row { grid-template-columns: 4.6em minmax(0, 1fr) 4.6em; gap: 10px; font-size: 12px; }
  .nwf-nav { gap: 6px; } .nwf-next, .nwf-submit button { padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nwf.is-js .nwf-step, .nwf-facts li, .nwf-fallback, .nwf-sun { animation: none; }
  .nwf.is-launching .nwf-submit button { animation: none; }
}