/* Konfigurator „Stell deine Website zusammen“ (assets/konfigurator.js). Grundlage: site.css (Tokens), start.css (Abschnittsrahmen).
   Links die Auswahl, rechts ein SCHEMA der Seite (Wireframe, kein fertiges Design); am Handy wechseln Auswahl und Vorschau über Reiter. */
#konfigurator{--konf-akz:var(--gold)}
#konfigurator[data-branche="industrie"]{--konf-akz:#5fd2ff}
#konfigurator[data-branche="immobilien"]{--konf-akz:#d4b184}
#konfigurator[data-branche="handwerk"]{--konf-akz:#d59b5c}
#konfigurator[data-branche="praxis"]{--konf-akz:#8fc0a0}
#konfigurator[data-branche="gastronomie"]{--konf-akz:#ff8a47}
#konfigurator[data-branche="friseur"]{--konf-akz:#8294ff}

.konf-tabs{display:none;gap:.5rem;margin:0 0 1.2rem}
.konf-tabs button{flex:1 1 0;min-height:48px;padding:0 1rem;border:1px solid var(--linie-2);background:var(--f1);color:var(--text-2);font:600 .92rem/1 var(--fliess);cursor:pointer;border-radius:2px;transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.konf-tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#0a0d13}
.konf-tabs button:focus-visible{outline:2px solid var(--gold-hell);outline-offset:2px}

.konf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start}
.konf-steuerung{display:grid;gap:1.8rem}
.konf-gruppe{margin:0;padding:0;border:0;min-width:0}
.konf-leg{padding:0;margin:0 0 .3rem;font:600 .72rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.konf-hilfe{margin:0 0 .8rem;color:var(--text-3);font-size:.9rem}
.konf-liste{display:grid;gap:.5rem}
.konf-opt,.konf-chip{position:relative;display:block;cursor:pointer}
.konf-opt input,.konf-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.konf-opt-k{position:relative;display:grid;gap:.15rem;min-height:56px;padding:.8rem 1rem .8rem 3.1rem;border:1px solid var(--linie-2);background:var(--f1);transition:border-color var(--t-schnell),background var(--t-schnell)}
.konf-opt-k::before{content:"";position:absolute;left:1rem;top:1rem;width:20px;height:20px;border:1.5px solid var(--linie-3);background:var(--f0);transition:background var(--t-schnell),border-color var(--t-schnell)}
.konf-opt input[type=radio]+.konf-opt-k::before{border-radius:50%}
.konf-opt-k::after{content:"";position:absolute;left:1.35rem;top:1.12rem;width:6px;height:11px;border:solid #0a0d13;border-width:0 2px 2px 0;opacity:0;transform:rotate(40deg) scale(.6);transition:transform .18s var(--ease),opacity .18s var(--ease)}
.konf-opt input[type=radio]+.konf-opt-k::after{left:1.37rem;top:1.37rem;width:8px;height:8px;border:0;border-radius:50%;background:#0a0d13;transform:scale(.5)}
.konf-opt input:checked+.konf-opt-k{border-color:var(--gold);background:rgba(233,194,116,.07)}
.konf-opt input:checked+.konf-opt-k::before{background:var(--gold);border-color:var(--gold)}
.konf-opt input:checked+.konf-opt-k::after{opacity:1;transform:rotate(40deg) scale(1)}
.konf-opt input[type=radio]:checked+.konf-opt-k::after{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){.konf-opt:hover .konf-opt-k{border-color:var(--linie-3)}}
.konf-opt-k{transition:border-color var(--t-schnell),background var(--t-schnell),transform .12s var(--ease)}
.konf-opt:active .konf-opt-k,.konf-chip:active span{transform:scale(.985)}
.konf-opt input:focus-visible+.konf-opt-k,.konf-chip input:focus-visible+span{outline:2px solid var(--gold-hell);outline-offset:2px}
.konf-opt-k b{font:600 1rem/1.3 var(--fliess);color:var(--text)}
.konf-opt-k small{color:var(--text-3);font-size:.86rem;line-height:1.45}
.konf-tag{justify-self:start;margin-top:.25rem;padding:.12rem .5rem;border:1px solid var(--linie-3);border-radius:2px;font:600 .62rem/1.4 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hell)}
.konf-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.konf-chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 1.05rem;border:1px solid var(--linie-2);background:var(--f1);font:500 .94rem/1 var(--fliess);color:var(--text-2);transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.konf-chip input:checked+span{background:var(--gold);border-color:var(--gold);color:#0a0d13;font-weight:700}
.konf-immer{margin:0;padding:1rem 0 0;border-top:1px solid var(--linie);color:var(--text-3);font-size:.9rem}
.konf-immer b{color:var(--text-2)}

/* Vorschau */
.konf-vorschau{display:grid;gap:1rem;position:sticky;top:calc(var(--kopf-h) + 1rem)}
.konf-vorschau-kopf{margin:0;color:var(--text-3);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.konf-fenster{overflow:hidden;border:1px solid var(--linie-3);border-radius:10px;background:var(--f0);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.konf-leiste-oben{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-bottom:1px solid var(--linie-2);background:var(--f2)}
.konf-leiste-oben i{width:9px;height:9px;border-radius:50%;background:var(--linie-3)}
.konf-leiste-oben span{margin-left:.6rem;padding:.15rem .8rem;border-radius:99px;background:var(--f0);color:var(--text-3);font:500 .7rem/1.4 var(--mono)}
.konf-seite{display:grid;max-height:min(46svh,520px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--linie-3) transparent}
.konf-hinweis{margin:0;color:var(--text-3);font-size:.86rem;line-height:1.55}
.konf-summe-box{padding:1.1rem 1.2rem;border:1px solid var(--linie-2);background:var(--f1)}
.konf-summe-titel{margin:0 0 .6rem;font:600 .72rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.konf-summe{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.9rem;color:var(--text-2)}
.konf-summe b{color:var(--text);font-weight:600}
.konf-umfang{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--linie);color:var(--text-3);font-size:.86rem}
.konf-umfang strong{color:var(--gold-hell);font-weight:700}
.konf-unten{position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.6rem;padding:.9rem 0;border-top:1px solid var(--linie-2);background:linear-gradient(180deg,rgba(10,13,19,.92),var(--grund))}
.konf-zaehler{margin:0 auto 0 0;color:var(--text-2);font:500 .86rem/1.4 var(--mono);letter-spacing:.04em}
.konf-fuss{margin-top:1.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 3rem;color:var(--text-2);font-size:.92rem}
.konf-fuss p{margin:0}

/* Schema-Bausteine der Vorschau */
.kb{display:grid;gap:.6rem;padding:.9rem 1rem;border-top:1px solid var(--linie)}
.kb:first-child{border-top:0}
.kb.neu{animation:konf-ein .26s var(--ease)}
@keyframes konf-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kb-titel{margin:0;font:600 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--konf-akz)}
.kb-leiste{display:flex;align-items:center;gap:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--linie)}
.kb-logo{font:700 .78rem/1 var(--fliess);color:var(--text)}
.kb-navi{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-left:auto;font-style:normal}
.kb-navpunkt{font:500 .62rem/1 var(--mono);font-style:normal;color:var(--text-3)}
.kb-anruf{padding:.28rem .55rem;border:1px solid var(--konf-akz);border-radius:2px;font:600 .6rem/1 var(--fliess);color:var(--konf-akz)}
.kb-held{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:.9rem;align-items:stretch}
.kb-held-text{display:grid;gap:.5rem;align-content:center;justify-items:start}
.kb-kicker{font:500 .56rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--konf-akz)}
.kb-h{font:700 1.05rem/1.15 var(--fliess);color:var(--text)}
.kb-knopf{display:inline-block;padding:.45rem .85rem;border-radius:2px;background:var(--konf-akz);color:#0a0d13;font:700 .66rem/1 var(--fliess)}
.kb-held-medium{display:grid;gap:.4rem}
.kb-medium,.kb-bild,.kb-kachel,.kb-karte{position:relative;border:1px dashed var(--linie-3);border-radius:3px;background:rgba(150,172,206,.05)}
.kb-medium{min-height:96px;display:grid;place-items:center}
.kb-3d{background:radial-gradient(60% 60% at 50% 45%,rgba(150,172,206,.22),transparent 72%),rgba(150,172,206,.05);border-style:solid}
.kb-video::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-9px 0 0 -6px;border-left:14px solid var(--konf-akz);border-top:9px solid transparent;border-bottom:9px solid transparent;opacity:.8}
.kb-medium-t,.kb-kachel-t{font:500 .56rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.kb-bewegung{justify-self:start;padding:.22rem .55rem;border:1px solid var(--linie-3);border-radius:99px;font:500 .58rem/1.3 var(--mono);letter-spacing:.06em;color:var(--text-2)}
.kz-gruppe{display:grid;gap:.1rem;width:100%}
.kz{display:block;height:5px;border-radius:3px;background:rgba(150,172,206,.26);margin:.18rem 0}
.kz-1{width:100%}.kz-2{width:82%}.kz-3{width:60%}
.kb-drei,.kb-sechs{display:grid;gap:.5rem}
.kb-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-sechs{grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-kachel{min-height:54px;padding:.5rem;display:grid;gap:.3rem;align-content:start}
.kb-zwei{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:.8rem}
.kb-zwei>.kb-titel{grid-column:1/-1}
.kb-bild{min-height:70px;display:grid;place-items:center}
.kb-zeile{display:flex;align-items:center;gap:.8rem;padding:.35rem 0;border-bottom:1px solid var(--linie)}
.kb-ab{font:600 .62rem/1 var(--mono);color:var(--text-2);white-space:nowrap}
.kb-frage{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--linie)}
.kb-plus{font:700 .8rem/1 var(--fliess);font-style:normal;color:var(--konf-akz)}
.kb-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.kb-chip{padding:.22rem .55rem;border:1px solid var(--linie-3);border-radius:99px;font:500 .58rem/1.2 var(--mono);color:var(--text-2)}
.kb-chips .kb-chip:first-child{background:var(--konf-akz);border-color:var(--konf-akz);color:#0a0d13}
.kb-zusatz{font:500 .58rem/1.4 var(--mono);color:var(--text-3)}
.kb-regler{position:relative;height:3px;margin:.7rem 0;background:var(--linie-3)}
.kb-regler-punkt{position:absolute;left:38%;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--konf-akz)}
.kb-kontakt-l,.kb-formular,.kb-termin,.kb-felder{display:grid;gap:.5rem;align-content:start}
.kb-karte{min-height:50px;display:grid;place-items:center}
.kb-feld{display:block;height:20px;border:1px solid var(--linie-3);border-radius:2px;background:var(--f1)}
.kb-schritte{display:flex;gap:.4rem}
.kb-schritt{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--linie-3);border-radius:50%;font:600 .56rem/1 var(--mono);font-style:normal;color:var(--text-3)}
.kb-schritt.an{background:var(--konf-akz);border-color:var(--konf-akz);color:#0a0d13}
.kb-fuss{margin:0;padding:.6rem 1rem;border-top:1px solid var(--linie);font:500 .58rem/1 var(--mono);letter-spacing:.08em;color:var(--text-3)}

/* Auswahl im Anfrageformular */
.auswahl-feld{grid-column:1/-1}
.auswahl-label{margin:0 0 .5rem;font:600 .84rem/1.3 var(--fliess);color:var(--text-2)}
.auswahl-box{padding:1rem 1.1rem;border:1px solid var(--linie-2);background:var(--f0);color:var(--text-2);font-size:.92rem}
.auswahl-leer{margin:0}
.auswahl-leer a,.auswahl-aendern{color:var(--gold-hell);text-underline-offset:3px}
.auswahl-liste{list-style:none;margin:0 0 .7rem;padding:0;display:grid;gap:.25rem}

@media (max-width:900px){
  .konf-tabs{display:flex}
  .konf-raster{grid-template-columns:minmax(0,1fr)}
  #konfigurator[data-ansicht="auswahl"] .konf-rechts,#konfigurator[data-ansicht="vorschau"] .konf-links{display:none}
  .konf-vorschau{position:static}
  .konf-seite{max-height:none;overflow:visible}
  .konf-fuss{grid-template-columns:minmax(0,1fr)}
  .konf-unten{margin-inline:calc(var(--seite) * -1);padding-inline:var(--seite)}
  .konf-zaehler{display:none}   /* dieselben Zahlen stehen in „Deine Auswahl“ (Reiter Vorschau) */
  .konf-unten{flex-wrap:nowrap;padding-block:.6rem;gap:.6rem}
  .konf-unten .btn-primary{flex:1 1 auto;justify-content:space-between}
  .konf-unten .btn-rand{padding:0 1rem;flex:none}
}
@media (max-height:760px) and (min-width:901px){ .konf-vorschau{position:static} }
@media (prefers-reduced-motion:reduce){ html:not(.bewegung-an) .kb.neu{animation:none} html:not(.bewegung-an) .konf-opt-k, html:not(.bewegung-an) .konf-opt-k::before, html:not(.bewegung-an) .konf-opt-k::after, html:not(.bewegung-an) .konf-chip span, html:not(.bewegung-an) .konf-tabs button{transition:none} }