/* /try/ only. Uses the tokens of site.css. */
.drop{display:grid;gap:8px;justify-items:start;border:2px dashed var(--border);border-radius:var(--radius,10px);background:var(--bg-subtle);padding:28px 24px;cursor:pointer;max-width:70ch;transition:border-color .15s,background .15s}
.drop.over,.drop:hover{border-color:var(--acc);background:var(--bg)}
.drop.over{border-style:solid}
.drop:focus-within{outline:3px solid var(--fg);outline-offset:3px}
.drop .t{font:700 var(--fs-lead)/1.3 var(--sans)}
.drop .s{font-size:var(--fs-sm);color:var(--mut)}
.drop .pick{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:var(--cta);color:var(--on-cta);border:1px solid var(--cta-line);border-radius:var(--radius,10px);font:600 var(--fs-sm)/1.2 var(--sans);padding:10px 22px}
.drop:hover .pick{background:var(--cta-hover);color:var(--on-cta)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#msg,#gomsg{margin:16px 0 0;min-height:1.55em;font-family:var(--sans);font-size:var(--fs-sm)}
#msg.err,#gomsg.err{color:var(--flag);font-weight:700}
[hidden]{display:none!important}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 12px;margin:0 0 16px;padding:0;border:0;min-width:0}
.thumbs legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.th{position:relative;display:grid;gap:6px;align-content:start;cursor:pointer;min-width:0}
.th.wide{grid-column:span 2}
.th .frame{position:relative;border:1px solid var(--border);border-radius:6px;background:var(--bg-subtle);overflow:hidden}
.th canvas{display:block;width:100%;height:100%}
.th .cap2{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:400 var(--fs-xs)/1.3 var(--sans);color:var(--mut)}
.th .cap2 b{color:var(--fg)}
.th:hover .frame{outline:2px solid var(--mut);outline-offset:2px}
.th input:focus-visible~.frame{outline:3px dashed var(--fg);outline-offset:3px}
.th input:checked~.frame{outline:4px solid var(--fg);outline-offset:2px}
.th input:checked~.cap2 b::before{content:"\2713  "}
.th input:checked~.cap2{color:var(--fg)}
.wtag{border:1px solid var(--mut);padding:1px 4px;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}
.act{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:0 0 8px}
.act p{margin:0}
#go:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

.dl{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 16px}
.dl a.btn{padding:10px 16px;font-size:var(--fs-sm);font-family:var(--sans)}
@media (min-width:900px){
.thumbs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media (max-width:899px){.dl a.btn{width:auto}.th canvas{min-height:0}}

.strip{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius,10px);background:var(--bg-subtle);font:var(--fs-xs) var(--sans);color:var(--mut)}
.strip b{display:block;font-size:var(--fs-lead);color:var(--fg)}
.strip b.flag{color:var(--flag)}
.d{padding-left:1.2em}
.btn:disabled{opacity:.45;cursor:not-allowed}
button.btn{background:var(--bg);cursor:pointer}
button.btn:not(:disabled){background:var(--cta);color:var(--on-cta);border:1px solid var(--cta-line);border-radius:var(--radius,10px)}
button.btn:not(:disabled):hover{background:var(--cta-hover)}
.mt0{margin-top:0}

/* Wait indicator (texts: see queue.js). Tokens of site.css only. */
.q,.q-busy{margin:12px 0 0;font:var(--fs-sm)/1.5 var(--sans);color:var(--mut);overflow-wrap:anywhere}
.q{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;border:1px solid var(--border);background:var(--bg-subtle);max-width:70ch}
.q b{color:var(--fg);font-weight:600}
.q-prog{flex:1 1 140px;min-width:120px;max-width:260px;height:6px;border:0;appearance:none;-webkit-appearance:none;background:var(--border)}
.q-prog::-webkit-progress-bar{background:var(--border)}
.q-prog::-webkit-progress-value{background:var(--fg)}
.q-prog::-moz-progress-bar{background:var(--fg)}
.q-busy{display:inline-block;margin:0}
.q-error{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 0;padding:12px 14px;border:2px solid var(--flag);max-width:70ch;font:var(--fs-sm)/1.5 var(--sans);color:var(--fg)}
.q-error p{margin:0;flex:1 1 20em}
.q-retry{font:600 var(--fs-sm) var(--sans);padding:8px 16px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer}
.q-retry:hover{filter:brightness(1.15)}
.q-retry:focus-visible,.q a:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
@media (max-width:899px){.q-retry{width:100%}.q-prog{max-width:none}}

/* Order builder (try/baukasten.js) */
#baukasten{margin-top:32px}
.bk-set{border:0;padding:0;margin:0 0 18px;min-width:0}
.bk-set legend{font:600 var(--fs-sm) var(--sans);padding:0;margin:0 0 8px}
.bk-opt.bk-off{opacity:.55}
.bk-opt{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font:var(--fs-sm)/1.5 var(--sans)}
.bk-opt input{margin-top:5px}
.bk-d{color:var(--mut);font:var(--fs-xs)/1.5 var(--sans)}
.bk-why{color:var(--mut);font-style:italic}
.bk-name{width:24em;max-width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);border:1px solid var(--mut);border-radius:6px;padding:6px 10px;font:var(--fs-sm) var(--mono,monospace)}
.bk-name[aria-invalid=true]{border-color:var(--fg);border-style:dashed}
.bk-name:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.bk-hint{margin:8px 0 0;font:var(--fs-sm)/1.5 var(--sans);color:var(--mut)}
.bk-hint a{color:var(--fg)}
.bk-yes{color:var(--fg)}.bk-no{color:var(--mut)}
.bk-out h3{font:600 var(--fs-sm) var(--sans);margin:18px 0 8px}
.bk-code{position:relative;margin:0 0 12px}
.bk-lang{font:var(--fs-xs) var(--sans);color:var(--mut);margin-bottom:2px}
.bk-code pre{margin:0;padding:12px 14px;overflow:auto;border:1px solid var(--border);background:var(--bg-subtle);font:var(--fs-xs)/1.5 var(--mono,monospace)}
.bk-copy{position:absolute;top:0;right:0;padding:4px 10px;font-size:var(--fs-xs)}
.bk-note{color:var(--mut);font:var(--fs-xs) var(--sans)}
#gomsg:empty{display:none}
.q-choice{margin:12px 0 0;font:var(--fs-sm)/1.5 var(--sans);color:var(--mut)}
.q-choice p{margin:0 0 6px}
.q-state.q-unavailable,.q-state.q-busy{color:var(--fg)}
.q-pipes{border:0;padding:0;margin:12px 0}
.q-pipes legend{padding:0;font-weight:600;color:var(--fg)}
.q-pipe{display:block;margin:0 0 6px}
.q-pipe code{font-weight:600}
.q-pipe.q-unavailable{opacity:.7}
.q-again p{margin:0 0 8px}

/* Paket 2: smaller drop box after a load, progress, pipeline table, click feedback */
.drop.small{display:inline-flex;border:0;background:none;padding:0;gap:0}
.drop.small .t,.drop.small .s{display:none}
.drop.small .pick{font:600 var(--fs-sm)/1.4 var(--sans);padding:8px 14px;background:var(--bg);color:var(--fg);border:1px solid var(--fg)}
.drop.small:hover .pick{background:var(--fg);color:var(--bg)}
#msg .q-prog{display:block;margin-top:6px;width:100%;max-width:320px}
#msg .cnt{color:var(--mut)}
.prevprog{margin:0 0 8px;font:var(--fs-xs) var(--sans);color:var(--mut)}
.q-tablewrap{overflow-x:auto;max-width:100%;margin:8px 0}
.q-table{border-collapse:collapse;width:100%;min-width:560px;font:var(--fs-sm)/1.4 var(--sans);color:var(--fg)}
.q-table th,.q-table td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.q-table th{font-weight:600;font-size:var(--fs-xs);color:var(--mut)}
.q-table th a{color:inherit}
.q-table .n{text-align:right;white-space:nowrap}
.q-table .f{text-align:center;color:var(--mut)}
.q-table .f.yes{color:var(--fg);font-weight:600}
.q-table .none{color:var(--mut);font-style:italic}
.q-table label{display:flex;gap:8px;align-items:center;cursor:pointer;font-weight:600}
.q-table .q-line{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--mut)}
.q-table tr.q-unavailable{opacity:.6}
.q-note{max-width:70ch}
#go.working{opacity:.8;cursor:progress}
@keyframes goflash{0%{box-shadow:0 0 0 0 var(--fg)}100%{box-shadow:0 0 0 10px transparent}}
#go.flash{animation:goflash .7s ease-out 2}
@media (prefers-reduced-motion:reduce){#go.flash{animation:none;outline:3px solid var(--fg);outline-offset:3px}}
main section{margin-bottom:8px}
.q-table tr.q-pipe{display:table-row;margin:0}
.q-pipes{min-width:0;max-width:100%}
.q-note{overflow-wrap:anywhere}
.q-table th{white-space:nowrap}
.q-table .fl{display:none}
.devway{margin:18px 0 0;font:var(--fs-sm)/1.5 var(--sans);color:var(--mut)}
.devway .btn{margin-left:8px;font-size:var(--fs-sm);padding:10px 18px}
/* Narrow screens: one card per pipeline instead of a table (same idea as table.fac on /pricing/) */
@media (max-width:520px){
.q-table{min-width:0}
.q-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.q-table,.q-table tbody,.q-table tr.q-pipe,.q-table td{display:block;width:auto}
.q-table tr.q-pipe{padding:8px 0;border-bottom:1px solid var(--border)}
.q-table td{border:0;padding:1px 0;text-align:left}
.q-table td[data-l],.q-table td.f{display:inline-block;margin:4px 12px 0 0;text-align:left;font-size:var(--fs-xs)}
.q-table td[data-l]:before{content:attr(data-l) ": ";color:var(--mut);font-weight:400}
.q-table td.f{color:var(--mut);font-weight:400}
.q-table td.f.yes span{color:var(--fg);font-weight:600}
.q-table .fl{display:inline;color:inherit}
.q-table .fl:after{content:": "}
.devway .btn{display:block;margin:8px 0 0}
}
.bk-opt input[type=number]{background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:4px 8px;font:var(--fs-sm) var(--sans)}
.bk-opt input[type=number]{border-color:var(--mut);border-radius:6px;width:11em;max-width:100%}
@media (max-width:600px){label.bk-opt:has(input[type=number]){flex-direction:column;gap:6px}label.bk-opt input[type=number]{width:100%;margin-top:0}}
.dl button.btn,.dl button.btn:not(:disabled){padding:10px 16px;font-size:var(--fs-sm);background:var(--bg);color:var(--fg);width:auto}
.dl .small{flex-basis:100%;margin:0}
.warn{border-left:4px solid var(--mut);background:var(--bg-subtle);padding:8px 14px;margin:0 0 16px;font-size:var(--fs-sm);line-height:1.5}
.warn p{margin:0}.warn p+p{margin-top:6px}