/* Kontaktformular – übernommen aus stobbe.cc (site.css, Abschnitt 6) */
:root{--t-1:1.375rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ==========================================================
   6 · Kontaktformular: eine Frage nach der anderen
   ========================================================== */
.ask{max-width:min(46rem, 100%); margin-top:clamp(1.5rem,4vh,2.5rem); border:0; padding:0}
@media (min-width:900px) and (min-aspect-ratio:5/4){ .ask{max-width:min(44rem, 46vw)} }
.ask__head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.ask__intro{margin:0; font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--messing)}
.ask__count{margin:0; font-size:.85rem; color:var(--asche); white-space:nowrap}
.ask__count .ask__i{color:var(--papier)}
.ask__bar{display:block; height:1px; margin:1rem 0 clamp(2rem,5vh,3rem); background:rgba(236,230,218,.14); overflow:hidden}
.ask__bar i{display:block; height:100%; background:var(--papier); transform-origin:left; transform:scaleX(var(--prog,.25)); transition:transform .9s var(--ease)}

.step{border:0; margin:0 0 3rem; padding:0; min-width:0}
.step__q{padding:0; margin:0 0 1.6rem; font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem, 1rem + 2vw, 3rem); line-height:1.2; letter-spacing:-.01em; text-wrap:balance}
.step__opt{font-size:.45em; font-style:italic; color:var(--asche); letter-spacing:0; vertical-align:.35em}
.step__fields{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.step__recap{margin:-.6rem 0 1.4rem; font-size:.9rem; color:var(--asche)}
.step__recap:empty{display:none}

/* Eingabefeld: eindeutig als Feld erkennbar, ruhig im Glas-Look */
.box{
  position:relative; display:block; border:1px solid rgba(236,230,218,.2); border-radius:16px; background:rgba(236,230,218,.045);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transition:border-color .35s var(--ease), background-color .35s var(--ease); cursor:text;
}
.box--wide{grid-column:1 / -1}
.box:hover{border-color:rgba(236,230,218,.36)}
.box:focus-within{border-color:var(--messing); background:rgba(236,230,218,.07)}
.box__label{position:absolute; left:1.1rem; top:.8rem; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--asche); pointer-events:none}
.box__label em{font-style:normal; letter-spacing:.04em; text-transform:none; font-weight:400; opacity:.85}
.box input, .box textarea{
  display:block; width:100%; border:0; outline:none; background:transparent; color:var(--papier);
  font-family:var(--sans); font-weight:300; font-size:1.25rem; line-height:1.4; padding:2.1rem 1.1rem .85rem; border-radius:16px; -webkit-appearance:none; appearance:none;
}
.box textarea{padding-top:1rem; resize:vertical; min-height:8.5rem}
.box input::placeholder, .box textarea::placeholder{color:rgba(236,230,218,.3)}
.box input:-webkit-autofill{-webkit-text-fill-color:var(--papier); transition:background-color 9999s}
.box.is-invalid{border-color:#d88f74; animation:nudge .5s var(--ease)}
@keyframes nudge{20%{transform:translateX(-4px)} 45%{transform:translateX(3px)} 70%{transform:translateX(-2px)}}

/* Anhang fürs Sparring: erscheint nur, wenn „Sparring“ gewählt ist. Klicken oder Datei hineinziehen. */
.file{display:flex; align-items:center; gap:1rem; margin-top:.9rem}
.file[hidden]{display:none}
.file__pick{
  position:relative; flex:1; display:flex; align-items:center; gap:1rem; min-width:0;
  padding:1rem 1.1rem; border:1px dashed rgba(236,230,218,.26); border-radius:16px; background:rgba(236,230,218,.03);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); cursor:pointer;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.file__input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.file__pick:hover, .file.is-drag .file__pick{border-color:rgba(236,230,218,.5); background:rgba(236,230,218,.06)}
.file__pick:focus-within{border-color:var(--messing); outline:none}
.file__icon{flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(236,230,218,.2); color:var(--papier)}
.file__text{min-width:0; line-height:1.35}
.file__name{font-size:1rem; color:var(--papier); overflow-wrap:anywhere}
.file__opt{font-family:var(--serif); font-size:.9rem; font-style:italic; color:var(--asche)}
.file__hint{display:block; margin-top:.2rem; font-size:.82rem; color:var(--asche)}
.file.has-file .file__pick{border-style:solid; border-color:rgba(194,165,116,.6)}
.file.has-file .file__icon{background:var(--papier); color:#0b0b0b; border-color:var(--papier)}
.file.has-file .file__opt, .file.has-file .file__hint{display:none}
.file__clear{flex:none; border:0; background:none; padding:.5rem 0; font:inherit; font-size:.9rem; color:var(--asche); cursor:pointer; transition:color .3s}
.file__clear:hover{color:var(--papier)}
.file.is-invalid .file__pick{border-color:#d88f74; animation:nudge .5s var(--ease)}

/* Themen als Glas-Pillen */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin:0; font-family:var(--sans); line-height:1; font-size:1.05rem}
.chip{position:relative; display:inline-flex; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{
  display:inline-block; padding:.85em 1.3em; border-radius:999px;
  font-size:1rem; line-height:1; letter-spacing:.01em; color:rgba(236,230,218,.72);
  border:1px solid rgba(236,230,218,.16); background:rgba(236,230,218,.04);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background-color .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}
.chip:hover span{border-color:rgba(236,230,218,.4); color:var(--papier)}
.chip input:checked + span{background:var(--papier); color:#0b0b0b; border-color:var(--papier)}
.chip input:focus-visible + span{outline:1px solid var(--messing); outline-offset:3px}
.chip:active span{transform:scale(.97)}

.brief__legal{margin:1.1rem 0 0; max-width:26rem; font-size:.82rem; line-height:1.5; color:var(--asche)}
.brief__legal a{color:var(--papier); text-underline-offset:.2em; text-decoration-thickness:1px}
.brief__status{min-height:1.4em; margin:1.2rem 0 0; font-size:.9rem; color:#e3a58c}

.step__nav{display:flex; align-items:center; gap:1.4rem; margin-top:2rem; flex-wrap:wrap}
.step__back{border:0; background:none; padding:.5rem 0; font:inherit; font-size:.95rem; color:var(--asche); cursor:pointer; transition:color .3s}
.step__back:hover{color:var(--papier)}
.step__hint{font-size:.8rem; color:rgba(236,230,218,.62)}
@media (hover:none){ .step__hint{display:none} }

/* Senden: helle Pille, der Pfeil läuft vor */
.send{
  position:relative; display:inline-flex; align-items:center; gap:1rem; height:3.6rem; padding:0 .45rem 0 1.7rem;
  border:0; border-radius:999px; cursor:pointer; overflow:hidden;
  font-family:var(--sans); font-size:1rem; font-weight:500; letter-spacing:.01em;
  color:#0b0b0b; background:var(--papier);
  box-shadow:0 0 0 0 rgba(236,230,218,0);
  transition:box-shadow .6s var(--ease), transform .5s var(--ease), background-color .4s;
}
.send__arrow{position:relative; display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%; background:#0b0b0b; color:var(--papier); transition:transform .6s var(--ease)}
.send:hover{box-shadow:0 0 0 8px rgba(236,230,218,.08), 0 20px 50px -20px rgba(236,230,218,.35)}
.send:hover .send__arrow{transform:translateX(3px) rotate(-45deg)}
.send:active{transform:scale(.98)}
.send:focus-visible{outline:1px solid var(--messing); outline-offset:5px}
.send[disabled]{cursor:progress}
.send.is-busy .send__arrow svg{opacity:0}
.send.is-busy .send__arrow::after{content:""; position:absolute; width:1.05rem; height:1.05rem; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .step__fields{grid-template-columns:1fr}
  .step__nav{gap:1rem}
  .step__hint{display:none}
  .ask__intro{letter-spacing:.14em}
  .send{justify-content:space-between}
}

/* Mit JavaScript: immer nur eine Frage sichtbar, Wechsel über Schärfe */
.js .ask__steps{display:grid}
.js .step{grid-area:1 / 1; margin:0; transition:opacity .6s var(--ease), filter .7s var(--ease), transform .8s var(--ease), visibility 0s linear .8s}
.js .step:not(.on){opacity:0; visibility:hidden; filter:blur(10px); transform:translate3d(0,18px,0); pointer-events:none}
.js .step.was{transform:translate3d(0,-14px,0)}
.js .step.on{transition:opacity .7s var(--ease) .12s, filter .8s var(--ease) .12s, transform .9s var(--ease) .12s, visibility 0s}
html:not(.js) .ask__head, html:not(.js) .ask__bar, html:not(.js) [data-next], html:not(.js) [data-prev], html:not(.js) .step__hint{display:none}
html:not(.js) .step:not(:last-child) .step__nav{display:none}

/* Danke-Zustand */
.ask.is-sent{opacity:0; transform:translate3d(0,-12px,0); filter:blur(8px); transition:opacity .6s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.thanks{max-width:min(44rem, 100%); outline:none}
.thanks__big{
  margin:0; padding-bottom:.1em;
  font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(3rem, 1rem + 7vw, 8.5rem); line-height:1.16; letter-spacing:-.012em;
}
.thanks__text{margin:1rem 0 0; font-size:var(--t-1); font-weight:300; color:rgba(236,230,218,.8)}
.thanks.is-in .thanks__big, .thanks.is-in .thanks__text{animation:focusIn 1.4s var(--ease) both}
.thanks.is-in .thanks__text{animation-delay:.25s}
@keyframes focusIn{from{opacity:0; filter:blur(14px); transform:translate3d(0,14px,0)} to{opacity:1; filter:none; transform:none}}


@keyframes focusIn{from{opacity:0; filter:blur(14px); transform:translate3d(0,14px,0)} to{opacity:1; filter:none; transform:none}}
@keyframes nudge{20%{transform:translateX(-4px)} 45%{transform:translateX(3px)} 70%{transform:translateX(-2px)}}
@keyframes spin{to{transform:rotate(360deg)}}