/* booyage.info – Bausteine-Check (eigene Seite). Alles läuft im Browser, nichts wird gesendet oder gespeichert. */
.bc-page svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Hero-Vorschau */
.bc-teaser{max-width:380px;margin-left:auto;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 26px 60px rgba(22,55,79,.12)}
.bc-teaser .bt-head{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.bc-teaser .bt-head img{width:30px}
.bc-teaser .bt-head b{display:block;font-size:.95rem}
.bc-teaser .bt-head span{font-size:.72rem;color:var(--muted)}
.bc-teaser .bt-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:.86rem}
.bc-teaser .bt-row+.bt-row{margin-top:4px}
.bc-teaser .bt-row i{flex:none;width:10px;height:10px;border-radius:50%}
.bc-teaser .bt-row em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:750;padding:3px 9px;border-radius:999px}
.bc-teaser .is-base{background:#f3f8fb}.bc-teaser .is-base i{background:var(--blue2)}.bc-teaser .is-base em{background:var(--blue2);color:#fff}
.bc-teaser .is-rec{background:var(--rose)}.bc-teaser .is-rec i{background:#c7356f}.bc-teaser .is-rec em{background:#c7356f;color:#fff}
.bc-teaser .is-opt i{background:#e0a33c}.bc-teaser .is-opt em{background:#fff4e6;color:#8a5d23}
.bc-teaser .is-off{color:var(--muted)}.bc-teaser .is-off i{background:#d5dee5}.bc-teaser .is-off em{background:#f1f5f8;color:var(--muted)}

/* Rahmen */
.bc-sec{scroll-margin-top:80px}
.bc{max-width:980px;margin:0 auto;padding:28px;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 24px 60px rgba(22,55,79,.08)}
.bc-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:none}
.bc-steps button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:var(--muted);cursor:pointer;text-align:left}
.bc-steps button:disabled{cursor:default;opacity:.65}
.bc-steps span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1f5f8;font-weight:800;font-size:.82rem}
.bc-steps b{font-size:.88rem}
.bc-steps .is-done button{color:var(--ink2)}
.bc-steps .is-done span{background:#e6f5ee;color:#2e8a62}
.bc-steps .is-on button{border-color:var(--blue2);color:var(--ink);box-shadow:0 8px 22px rgba(30,95,138,.12)}
.bc-steps .is-on span{background:var(--brand);color:#fff}
.bc-panel{outline:none}
.bc-panel[hidden]{display:none}
.bc-panel>h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin:0}
.bc-sub{margin:6px 0 22px;color:var(--muted)}
.bc-count{font-weight:800;color:var(--ink2)}

/* Regler */
.bc-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.bc-field{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.bc-field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:.86rem;font-weight:700;color:var(--ink2)}
.bc-field output{font-size:1.2rem;font-weight:800;color:var(--ink);white-space:nowrap}
.bc-field input[type=range]{width:100%;accent-color:var(--blue2);height:28px}

/* Fragen */
.bc-q{margin:0;padding:0;border:0;min-width:0}
.bc-q legend{display:flex;align-items:flex-start;gap:10px;padding:0;margin-bottom:10px;font-weight:750;font-size:.98rem;color:var(--ink)}
.bc-q legend i{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--soft2);color:var(--blue2);font-style:normal;font-size:.78rem;font-weight:800}
.bc-qs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bc-qs .bc-q{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s,background .2s}
.bc-qs .bc-q.is-set{border-color:#cfe2ee;background:#fbfdfe}
.bc-qs .bc-q.is-miss{border-color:#f0b4c8;background:#fff8fb}
.bc-opts{display:flex;flex-wrap:wrap;gap:8px}
.bc-opts label{position:relative;cursor:pointer}
.bc-opts input{position:absolute;opacity:0;width:1px;height:1px}
.bc-opts span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid #d3e1ea;border-radius:999px;background:#fff;font-size:.86rem;font-weight:650;color:var(--ink2);transition:background .15s,border-color .15s,color .15s}
.bc-opts label:hover span{border-color:#a9c6d8}
.bc-opts input:focus-visible+span{outline:3px solid rgba(45,121,168,.35);outline-offset:2px}
.bc-opts input:checked+span{background:var(--blue2);border-color:var(--blue2);color:#fff}
.bc-region.is-miss legend{color:#b8456a}

/* Paket */
.bc-pack{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bc-group{padding:16px;border-radius:18px;border:1px solid var(--line)}
.bc-group[hidden]{display:none}
.bc-group h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bc-group h3 small{font-size:.72rem;font-weight:650;letter-spacing:0;text-transform:none;color:var(--muted)}
.bc-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bc-group li b{display:block;font-size:.98rem;color:var(--ink)}
.bc-group li b a{color:inherit;text-decoration:none}
.bc-group li b a:hover{text-decoration:underline}
.bc-group li span{display:block;margin-top:2px;font-size:.84rem;color:var(--muted);line-height:1.45}
.bc-group.is-base{background:#f3f8fb;border-color:#d6e7f1}.bc-group.is-base h3{color:var(--blue2)}
.bc-group.is-rec{background:var(--rose);border-color:#f2c6d6}.bc-group.is-rec h3{color:#b8456a}
.bc-group.is-opt{background:#fffaf2;border-color:#f3dfbd}.bc-group.is-opt h3{color:#8a5d23}
.bc-group.is-off{background:#fafbfc}.bc-group.is-off h3{color:var(--muted)}
.bc-group.is-off li b{color:var(--ink2)}
.bc-cost{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:18px}
.bc-cost h3{margin:0 0 8px;font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.bc-cost table{width:100%;border-collapse:collapse}
.bc-cost td{padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
.bc-cost td:last-child{text-align:right;font-weight:800;white-space:nowrap;padding-left:14px}
.bc-cost td small{display:block;font-size:.78rem;color:var(--muted);font-weight:500}
.bc-start{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:linear-gradient(120deg,#fff4ea,#fff0f6);color:#7a3a52;font-size:.9rem}
.bc-start b{color:#c7356f}
.bc-fine{margin:12px 0 0;font-size:.76rem;color:var(--muted)}

/* Ausprobieren */
.bc-try{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bc-card{padding:18px;border:1px solid var(--line);border-radius:18px;display:grid;gap:12px;align-content:start}
.bc-card h3{margin:0;font-size:1.15rem}
.bc-card .bc-field{background:#fff}
.bc-res{padding:14px;border-radius:14px;background:var(--soft)}
.br-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;font-size:.88rem;color:var(--ink2)}
.br-row b{font-size:1.2rem;color:var(--ink);white-space:nowrap}
.br-row.is-boo b{color:#c7356f}
.br-be{margin:8px 0 0;padding-top:10px;border-top:1px dashed #cfdde7;font-size:.9rem;color:var(--ink2)}
.br-be b{color:#c7356f}
.bc-pass{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:var(--rose)}
.bc-pass span{display:block;font-size:.84rem;color:#8a4a64;font-weight:650}
.bc-pass s{font-size:.9rem;color:var(--muted)}
.bc-pass>b{font-size:1.6rem;color:#c7356f;white-space:nowrap}
.bc-tier .bc-opts span{min-height:36px;padding:6px 12px;font-size:.8rem}
.bc-end{display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center;margin-top:18px;padding:20px;border-radius:18px;background:linear-gradient(120deg,var(--ink),var(--blue2));color:#fff}
.bc-end h3{margin:0 0 4px;color:#fff;font-size:1.25rem}
.bc-end p{margin:0;color:rgba(255,255,255,.82);font-size:.92rem}
.bc-end .btns{margin:0;justify-content:flex-end}
.bc-end .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.bc-end .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.bc-copied{grid-column:1/-1;min-height:0;font-size:.82rem}
.bc-copied:empty{display:none}

/* Navigation */
.bc-nav{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.bc-nav [data-next]{margin-left:auto}
.bc-msg{margin:0;font-size:.86rem;color:#b8456a;font-weight:650}
.bc-reset{margin-left:auto;border:0;background:none;font:inherit;font-size:.86rem;font-weight:700;color:var(--blue2);text-decoration:underline;cursor:pointer}
.bc-privacy{margin:14px 0 0;text-align:center;font-size:.76rem;color:var(--muted)}

/* einmaliger Aufbau des Pakets */
@keyframes bcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
 .bc-panel.is-enter{animation:bcIn .35s ease both}
 .bc-panel.is-enter .bc-group,.bc-panel.is-enter .bc-cost{animation:bcIn .45s cubic-bezier(.2,.7,.2,1) both}
 .bc-panel.is-enter .bc-group:nth-child(2){animation-delay:.08s}
 .bc-panel.is-enter .bc-group:nth-child(3){animation-delay:.16s}
 .bc-panel.is-enter .bc-group:nth-child(4){animation-delay:.24s}
 .bc-panel.is-enter .bc-cost{animation-delay:.3s}
}

@media (max-width:980px){.bc-teaser{margin:0 auto}}
@media (max-width:860px){
 .bc{padding:18px 14px;border-radius:20px}
 .bc-steps{gap:6px}
 .bc-steps button{flex-direction:column;align-items:center;gap:4px;padding:8px 4px;text-align:center}
 .bc-steps b{font-size:.72rem}
 .bc-sliders,.bc-qs,.bc-pack,.bc-try{grid-template-columns:1fr}
 .bc-end{grid-template-columns:1fr}
 .bc-end .btns{justify-content:stretch}
 .bc-end .btns .btn{width:100%}
 .bc-nav{flex-wrap:wrap}
 .bc-msg{order:3;flex-basis:100%}
}
/* Korrekturen */
.bc-nav [hidden],.bc [hidden]{display:none!important}
.bc-q legend{float:left;width:100%}
.bc-q .bc-opts{clear:both}