/* ============================================================
   cns — ClickNova Kontakt in 4 Schritten, Variante "C" streng nach Brand Book
   (v1.34.10). Dunkle Praesenz-Flaeche (eine je Seite), Inter 400/500 only,
   Orbitron nur fuer die Wortmarke, Radien 8 Controls / 12 Karten / 16 Panel,
   Inputs 36px · pad 12 · r8 · 14px, Label 12/500, Progress 3px violett→lavendel,
   Focus 2px Ring Offset 2, Press scale .97, ein gefuellter Primary je Ansicht.
   Selektoren .cnf.cns + !important bei Feldern/Knoepfen (Seite stylt per ID).
   ============================================================ */
.cnf.cns{
  --k-bg:#161826;--k-sur:#232532;--k-tile:#2B2741;--k-tag:#423A6A;--k-pri:#9184D9;--k-acc:#C3B8F7;--k-atx:#D2CEFD;--k-fg:#E9E9ED;
  --k-mut:rgba(233,233,237,.72);--k-fade:rgba(233,233,237,.5);--k-line:rgba(233,233,237,.14);--k-line2:rgba(233,233,237,.24);--k-err:#E06C6C;--k-ok:#5FBF8A;
  container-type:inline-size;container-name:cns;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--k-fg);background:transparent;line-height:1.5;font-weight:400}
.cnf.cns h2,.cnf.cns h3,.cnf.cns p,.cnf.cns label,.cnf.cns span,.cnf.cns b,.cnf.cns i,.cnf.cns em{margin:0;padding:0;text-transform:none;letter-spacing:normal;font-style:normal}
.cnf.cns b{font-weight:500}
.cnf.cns .cns-card{position:relative;display:flex;flex-direction:column;min-height:440px;border-radius:16px!important;background:var(--k-bg)!important;border:1px solid var(--k-line)!important;box-shadow:0 24px 48px -32px rgba(22,24,38,.6)!important;overflow:hidden;color:var(--k-fg)!important;padding:0!important;margin:0!important} /* !important: die Kontakt-Seite stylt #cnk-kontakt form */

/* Kopf: Wortmarke · Schritt, Zaehler, 3px-Progress */
.cnf.cns .cns-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;padding:16px 24px 0}
.cnf.cns .cns-brand{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--k-mut)}
.cnf.cns .cns-wm{font-family:Orbitron,Inter,sans-serif;font-weight:500;font-size:13px;letter-spacing:.04em;background:linear-gradient(90deg,#E9E9ED,#C3B8F7);-webkit-background-clip:text;background-clip:text;color:transparent}
.cnf.cns .cns-sep{color:var(--k-fade)}
.cnf.cns .cns-sym{display:block;width:16px;height:16px;background:var(--k-pri);-webkit-mask:var(--cnf-sym) center/contain no-repeat;mask:var(--cnf-sym) center/contain no-repeat}
.cnf.cns .cns-count{font-size:12px;font-weight:500;color:var(--k-fade)}
.cnf.cns .cns-count b{color:var(--k-fg)}
.cnf.cns .cns-bar{grid-column:1/-1;display:block;height:3px;border-radius:3px;background:var(--k-sur);overflow:hidden}
.cnf.cns .cns-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--k-pri),var(--k-acc));transition:width .35s cubic-bezier(.4,0,.2,1)}

/* Schritte */
.cnf.cns .cns-body{flex:1;display:grid;padding:24px 24px 8px}
.cnf.cns .cns-step{display:none;grid-area:1/1;animation:cns-in .24s ease-out}
.cnf.cns .cns-step.on{display:block}
@keyframes cns-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.cnf.cns .cns-q{font-size:20px;font-weight:500;line-height:1.25;color:var(--k-fg);margin:0 0 4px}
.cnf.cns .cns-h{font-size:13px;font-weight:400;color:var(--k-fade);margin:0 0 16px}

/* Themen-Kacheln: Icon-Tile + Text; aktiv = Tile-Hintergrund + Akzentrand (low-opacity) */
.cnf.cns .cns-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cnf.cns .cns-tile{position:relative;cursor:pointer;min-width:0}
.cnf.cns .cns-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cnf.cns .cns-tile>span{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 34px 8px 8px;border-radius:12px;border:1px solid var(--k-line);background:var(--k-sur);color:var(--k-mut);transition:background .12s,border-color .12s,color .12s}
.cnf.cns .cns-tile i{flex:none;width:32px;height:32px;border-radius:8px;background:var(--k-tile);color:var(--k-acc);display:grid;place-items:center}
.cnf.cns .cns-tile i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cnf.cns .cns-tile b{font-size:13px;font-weight:500;line-height:1.25;min-width:0}
.cnf.cns .cns-tile em{position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1px solid var(--k-line2);display:grid;place-items:center;color:#161826;transition:background .12s,border-color .12s}
.cnf.cns .cns-tile em svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cnf.cns .cns-tile:hover>span{background:var(--k-tile);color:var(--k-fg)}
.cnf.cns .cns-tile input:checked+span{background:var(--k-tile);border-color:rgba(145,132,217,.55);color:var(--k-fg)}
.cnf.cns .cns-tile input:checked+span i{background:var(--k-pri);color:#161826}
.cnf.cns .cns-tile input:checked+span em{background:var(--k-pri);border-color:var(--k-pri)}
.cnf.cns .cns-tile input:checked+span em svg{opacity:1}
.cnf.cns .cns-tile input:focus-visible+span{outline:2px solid var(--k-pri);outline-offset:2px}
.cnf.cns .cns-tile:active>span{transform:scale(.97)}

/* Felder: 36px · pad 12 · r8 · 14px; Label 12/500 darueber */
.cnf.cns .cns-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cnf.cns .cns-f{display:grid;gap:6px}
.cnf.cns .cns-f>span{font-size:12px;font-weight:500;color:var(--k-mut)}
.cnf.cns .cns-f em{font-weight:400;color:var(--k-fade)}
.cnf.cns .cns-in{width:100%!important;box-sizing:border-box!important;height:36px!important;min-height:36px!important;border:1px solid var(--k-line2)!important;border-radius:8px!important;background:var(--k-sur)!important;padding:0 12px!important;font:inherit!important;font-size:14px!important;font-weight:400!important;line-height:34px!important;color:var(--k-fg)!important;outline:0!important;box-shadow:none!important;margin:0!important;transition:border-color .12s,background .12s}
.cnf.cns .cns-in::placeholder{color:var(--k-fade)}
.cnf.cns .cns-in:hover{border-color:rgba(233,233,237,.34)!important}
.cnf.cns .cns-in:focus{border-color:var(--k-pri)!important;outline:2px solid var(--k-pri)!important;outline-offset:2px!important}
.cnf.cns .cns-f.err .cns-in{border-color:var(--k-err)!important}
.cnf.cns .cns-ta{height:auto!important;min-height:88px!important;padding:10px 12px!important;line-height:1.5!important;resize:vertical!important;margin-bottom:14px!important}

.cnf.cns .cns-agree{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--k-fade);cursor:pointer}
.cnf.cns .cns-agree input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cnf.cns .cns-agree i{flex:none;width:18px;height:18px;margin-top:0;border-radius:6px;border:1px solid var(--k-line2);background:var(--k-sur);display:grid;place-items:center;transition:background .12s,border-color .12s}
.cnf.cns .cns-agree i::after{content:"";width:9px;height:5px;border:2px solid #161826;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.cnf.cns .cns-agree input:checked+i{background:var(--k-pri);border-color:var(--k-pri)}
.cnf.cns .cns-agree input:checked+i::after{opacity:1}
.cnf.cns .cns-agree input:focus-visible+i{outline:2px solid var(--k-pri);outline-offset:2px}
.cnf.cns .cns-agree.err i{border-color:var(--k-err)}
.cnf.cns .cns-agree a,.cnf.cns .cns-agree a:visited{color:var(--k-atx);text-decoration:underline;text-underline-offset:2px}

.cnf.cns .cns-err{display:none;margin:10px 0 0;font-size:12px;color:var(--k-err)}
.cnf.cns .cns-step.err .cns-err{display:block}
.cnf.cns .cns-err-net{margin:0;padding:0 24px 12px}
.cnf.cns .cns-err-net:not(:empty){display:block}

/* Fuss: Ghost zurueck, ein gefuellter Primary */
.cnf.cns .cns-foot{display:flex;align-items:center;gap:12px;padding:12px 24px 16px;border-top:1px solid var(--k-line);background:var(--k-sur)}
.cnf.cns .cns-alt{flex:1;font-size:12px;color:var(--k-fade)}
.cnf.cns .cns-alt a,.cnf.cns .cns-alt a:visited{color:var(--k-atx);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.cnf.cns .cns-btn,.cnf.cns a.cns-btn,.cnf.cns a.cns-btn:visited{position:relative;display:inline-flex!important;align-items:center;gap:8px;height:36px!important;min-height:36px!important;padding:0 16px!important;border:0!important;border-radius:8px!important;background:var(--k-pri)!important;color:#161826!important;font:inherit!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;text-decoration:none;box-shadow:none!important;transition:filter .12s,transform .08s;white-space:nowrap;margin:0!important}
.cnf.cns .cns-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cnf.cns .cns-btn:hover{filter:brightness(1.08)}
.cnf.cns .cns-btn:active{transform:scale(.97)}
.cnf.cns .cns-btn:focus-visible{outline:2px solid var(--k-pri);outline-offset:2px}
.cnf.cns .cns-btn.cns-ghost{background:transparent!important;color:var(--k-mut)!important;padding:0 10px 0 6px!important}
.cnf.cns .cns-btn.cns-ghost:hover{color:var(--k-fg)!important;background:var(--k-tile)!important;filter:none}
.cnf.cns .cns-btn.busy{pointer-events:none;color:transparent!important}
.cnf.cns .cns-btn.busy::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(22,24,38,.3);border-top-color:#161826;animation:cns-spin .7s linear infinite}
@keyframes cns-spin{to{transform:rotate(360deg)}}
.cnf.cns [hidden]{display:none!important}

/* Erfolg (ohne /danke/-Weiterleitung) */
.cnf.cns .cns-done{display:none;padding:48px 24px;text-align:center;align-content:center;justify-items:center;gap:8px;flex:1}
.cnf.cns.sent .cns-head,.cnf.cns.sent .cns-body,.cnf.cns.sent .cns-foot{display:none}
.cnf.cns.sent .cns-done{display:grid}
.cnf.cns .cns-tick{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--k-tile);color:var(--k-ok);margin-bottom:8px}
.cnf.cns .cns-tick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cnf.cns .cns-done h3{font-size:20px;font-weight:500;color:var(--k-fg)}
.cnf.cns .cns-done p{margin:0 0 12px;color:var(--k-mut);font-size:14px}

/* schmal (<600 nach Brand Book: Knoepfe volle Breite) */
@container cns (max-width:600px){
  .cnf.cns .cns-tiles{grid-template-columns:repeat(2,1fr)}
}
@container cns (max-width:480px){
  .cnf.cns .cns-card{min-height:0;border-radius:16px}
  .cnf.cns .cns-head{padding:14px 16px 0}
  .cnf.cns .cns-body{padding:20px 16px 8px}
  .cnf.cns .cns-q{font-size:18px}
  .cnf.cns .cns-tiles{grid-template-columns:1fr}
  .cnf.cns .cns-tile>span{min-height:46px}
  .cnf.cns .cns-fields{grid-template-columns:1fr;gap:12px}
  .cnf.cns .cns-foot{padding:12px 16px 14px;flex-wrap:wrap}
  .cnf.cns .cns-alt{order:3;flex-basis:100%;text-align:center;padding-top:4px}
  .cnf.cns .cns-btn[data-cns-next],.cnf.cns .cns-btn[data-cns-send]{flex:1;justify-content:center;height:40px!important}
}
@media (prefers-reduced-motion:reduce){.cnf.cns .cns-step{animation:none}.cnf.cns .cns-bar i{transition:none}}