/* Briefing-Kits — Formular-Styles aus prototype/briefing-kit-*.html.
   Alles unter .bk-page verschachtelt: form/.grid/.field sind zu allgemein,
   um sie global zu setzen (wuerde das Kontaktformular treffen).
   Farben/Fonts kommen aus dotwave.css (:root), hier steht nur Kit-Eigenes. */

.bk-page{--radius:18px}
.bk-page .wrap{max-width:860px}

.bk-page .bk-hero{text-align:center;padding:60px 0 28px;max-width:680px;margin:0 auto}
.bk-page .bk-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--accent);background:rgba(33,163,63,.10);border:1px solid rgba(33,163,63,.28);
  padding:7px 16px;border-radius:999px;margin-bottom:24px}
.bk-page .bk-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,6vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:18px}
.bk-page .bk-hero p{font-size:clamp(16px,2.1vw,19px);color:var(--muted);margin:0 auto}

.bk-page form{padding:14px 0 90px;display:flex;flex-direction:column;gap:22px}
.bk-page .bk-sec{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.bk-page .bk-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.bk-page .bk-num{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:#fff;
  background:var(--wave) no-repeat;background-size:100% 100%;box-shadow:0 6px 20px rgba(8,60,24,.4)}
.bk-page .bk-sec-head h2{font-family:'Space Grotesk',sans-serif;font-size:21px;line-height:1.1;letter-spacing:-.02em;margin:0}
.bk-page .bk-sec-head .sh-sub{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:13.5px;color:var(--muted);letter-spacing:0;margin-top:3px}

.bk-page .bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bk-page .field{display:flex;flex-direction:column;gap:7px}
.bk-page .field.full{grid-column:1/-1}
.bk-page .field label{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:#e9ece9}
.bk-page .field label span{color:var(--muted-dim);font-weight:400}
.bk-page .field label .req{color:var(--accent);font-weight:600}
.bk-page .field input,.bk-page .field select,.bk-page .field textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:15px;width:100%;transition:border-color .2s}
.bk-page .field select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239AA39C' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.bk-page .field select option{background:#0B1810;color:var(--text)}
.bk-page .field input::placeholder,.bk-page .field textarea::placeholder{color:var(--muted-dim)}
.bk-page .field input:focus,.bk-page .field select:focus,.bk-page .field textarea:focus{outline:none;border-color:var(--violet)}
.bk-page .field textarea{resize:vertical;min-height:104px}
/* Fehlender Pflichtwert erst NACH einem Absendeversuch markieren, nicht beim Tippen */
.bk-page form.checked .field :invalid{border-color:#e0563f}
/* Bedingte Felder (data-showif): unsichtbar, bis die Bedingung zutrifft. */
.bk-page .field.is-hidden{display:none}

.bk-page .choices{display:flex;flex-wrap:wrap;gap:10px}
.bk-page .choice{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:11px;padding:11px 16px;cursor:pointer;font-size:14.5px;transition:border-color .2s,background .2s}
.bk-page .choice:hover{border-color:rgba(106,91,255,.4)}
.bk-page .choice input{accent-color:var(--accent);width:16px;height:16px}
.bk-page .help{font-size:13px;color:var(--muted-dim);margin-top:4px;line-height:1.5}

.bk-page .submit-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px;text-align:center}
.bk-page .submit-row .note{font-size:13px;color:var(--muted-dim)}
.bk-page .bk-status{font-size:14px;color:var(--muted);min-height:20px}
.bk-page .bk-status.err{color:#e0563f}

@media(max-width:640px){
  .bk-page .bk-grid{grid-template-columns:1fr}
  .bk-page .bk-sec{padding:24px 20px}
  .bk-page .bk-hero{padding:38px 0 20px}
}