/* Bryma · Katalog, Detailseite, Konto, Rechtliches – gleiche Tokens wie bryma.css */

/* ---------- header band ---------- */
.cat-head{padding-block:clamp(2.2rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.cat-head::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.cat-head .wrap{display:grid;gap:1rem}
.cat-head .sec-title{font-size:clamp(2.2rem,5vw,4.2rem)}
.cat-404-cta{margin-top:1rem}

/* ---------- list layout ---------- */
.cat-body{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,7vw,6rem)}
.cat-layout{display:grid;grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);gap:2rem;align-items:start}
.cat-filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 1rem);display:grid;gap:1rem;border:1px solid var(--rule-strong);padding:1.1rem;background:var(--graphite-2);max-height:calc(100vh - var(--head-h) - 2rem);overflow:auto}
.cf-more{display:grid;gap:1rem}
.cf-row{display:grid;gap:.35rem;min-width:0;border:0;margin:0;padding:0}
.cf-row label,.cf-row legend,.cat-sort span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0}
.cf-pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cat-filters input,.cat-filters select,.cat-sort select{
  width:100%;min-height:2.75rem;background:var(--graphite);color:var(--fg);border:1px solid var(--rule-strong);border-radius:0;padding:.45rem .6rem;font:inherit;font-size:1rem}
.cat-filters input:focus-visible,.cat-filters select:focus-visible,.cat-sort select:focus-visible{outline:2px solid var(--orange-hi);outline-offset:1px}
.seg{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.seg label{position:relative;cursor:pointer;flex:1 1 auto}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;min-height:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.3rem;font-family:var(--f-display);font-size:.98rem;text-transform:uppercase;text-align:center;line-height:1.05;color:var(--muted);background:var(--graphite-2);padding-inline:.7rem}
.seg input:checked+span{background:var(--fg);color:var(--graphite)}
.seg input:focus-visible+span{outline:2px solid var(--orange-hi);outline-offset:-2px}
.cf-note{font-size:.82rem;color:var(--muted)}
.cf-toggle{display:none}

.cat-results{min-width:0}
.cat-bar{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem 1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--rule);padding-bottom:.9rem}
.cat-count{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;margin-right:auto}
.cat-sort{display:grid;gap:.3rem;min-width:13rem}

.cat-grid,.best-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:1.25rem}
.best-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.best-more{margin-top:1.75rem}

/* ---------- card ---------- */
.cc{display:grid;grid-template-rows:auto 1fr;background:var(--graphite-2);border:1px solid var(--rule);min-width:0;position:relative;transition:border-color .2s,transform .25s var(--ease)}
.cc:hover{border-color:var(--rule-strong)}
.cc:focus-within{border-color:var(--orange)}
.cc-media{display:block;position:relative;aspect-ratio:4 / 3;max-width:100%;background:
  linear-gradient(var(--rule) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/24px 24px,#16191c;overflow:hidden}
.cc-media img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.cc:hover .cc-media img{transform:scale(1.03)}
.cc-noimg{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cc-badge{position:absolute;left:.6rem;top:.6rem}
.cc-body{display:grid;align-content:start;gap:.45rem;padding:.9rem 1rem 1.05rem}
.cc-cat{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.cc-title{font-family:var(--f-display);font-size:1.35rem;line-height:1.08;text-transform:uppercase;overflow-wrap:anywhere}
.cc-title a{text-decoration:none}
.cc-title a::after{content:"";position:absolute;inset:0}
.cc-title a:focus-visible{outline:none}
.cc-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.92rem;color:#c3cad1;font-variant-numeric:tabular-nums}
.cc-price{font-family:var(--f-display);font-size:1.3rem;color:var(--orange);margin-top:.25rem}
.cc-price del,.pd-price del{color:var(--muted);font-size:.8em;margin-left:.4rem}

.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .5rem;border:1px solid currentColor;background:rgba(20,22,25,.86)}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.badge-ok{color:#8fd19e}
.badge-res{color:#f2c46d}
.badge-sold{color:#ff9d8a}

.cat-empty{border:1px dashed var(--rule-strong);padding:2rem;display:grid;gap:.9rem;max-width:44rem}
.cat-empty h2{font-family:var(--f-display);font-size:1.7rem;text-transform:uppercase}
.cat-empty p{color:var(--muted)}
.cat-empty-cta{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- detail ---------- */
.pd{padding-block:1.25rem clamp(3rem,7vw,6rem)}
.crumb{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1.25rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--orange);padding-bottom:.1rem}
.pd-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.gal{min-width:0}
.gal-main{position:relative;aspect-ratio:4 / 3;max-width:100%;border:1px solid var(--rule-strong);background:
  linear-gradient(var(--rule) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/32px 32px,#16191c}
.gal-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-open img{width:100%;height:100%;object-fit:contain}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.9rem;height:2.9rem;border:1px solid var(--rule-strong);background:rgba(20,22,25,.8);font-size:1.2rem;cursor:pointer}
.gal-nav:hover{border-color:var(--fg)}
.gal-prev{left:.6rem}.gal-next{right:.6rem}
.gal-count{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--f-mono);font-size:.72rem;background:rgba(20,22,25,.85);padding:.25rem .5rem;border:1px solid var(--rule)}
.gal-empty{display:grid;place-items:center;padding:2rem;text-align:center;color:var(--muted)}
.gal-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 0 .2rem;scrollbar-width:thin}
.gal-thumbs button{flex:0 0 auto;width:5.5rem;aspect-ratio:4 / 3;padding:0;border:1px solid var(--rule);background:#16191c;cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s}
.gal-thumbs button[aria-current="true"]{opacity:1;border-color:var(--orange)}
.gal-thumbs img{width:100%;height:100%;object-fit:contain}
.gal-note{font-size:.82rem;color:var(--muted);margin-top:.5rem}

.pd-sum{display:grid;gap:1rem;min-width:0}
.pd-title{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance}
.pd-state{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pd-flag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:.28rem .5rem}
.pd-note{border-left:3px solid #f2c46d;padding:.6rem .9rem;background:rgba(242,196,109,.07)}
.pd-note-sold{border-color:#ff9d8a;background:rgba(255,157,138,.07)}
.pd-price{font-family:var(--f-display);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--orange);line-height:1}
.pd-vat{font-size:.85rem;color:var(--muted);margin-top:-.4rem}
.pd-short{font-size:1.08rem;color:#c9d0d6}
.pd-cta{display:flex;flex-wrap:wrap;gap:.6rem}
.pd-cta .btn-wa{flex:1 1 100%}
.pd-cta2{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
.pd-mobile{font-family:var(--f-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.25em}
.pd-fav{background:none;border:1px solid var(--rule-strong);min-height:2.75rem;padding:0 1rem;cursor:pointer;font-family:var(--f-display);font-size:1rem;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.5rem}
.pd-fav::before{content:"";width:1.15rem;height:1.15rem;flex:none;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E") center/contain no-repeat}
.pd-fav[aria-pressed="true"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E")}
.pd-fav:hover{border-color:var(--fg)}
.pd-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-strong)}
.pd-facts>div{padding:.65rem .8rem .65rem 0;border-bottom:1px solid var(--rule);min-width:0}
.pd-facts>div:nth-child(even){padding-left:.8rem;border-left:1px solid var(--rule)}
.pd-facts dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-facts dd{margin:.1rem 0 0;font-size:1.05rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

.pd-more{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2rem,5vw,4rem);align-items:start}
.pd-more>section:only-child{grid-column:1 / -1;max-width:52rem}
.pd-h2{font-family:var(--f-display);font-size:1.6rem;text-transform:uppercase;margin-bottom:.8rem;border-top:2px solid var(--fg);padding-top:.8rem}
.pd-desc .pd-h2+.pd-text+.pd-h2{margin-top:2rem}
.pd-text{color:#c9d0d6;max-width:62ch;overflow-wrap:anywhere}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:left;padding:.6rem .5rem .6rem 0;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
.spec-table th{font-family:var(--f-mono);font-weight:400;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);width:45%}

.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,11,13,.97);color:var(--fg)}
.lightbox::backdrop{background:rgba(0,0,0,.8)}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:calc(.6rem + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) .6rem max(16px,env(safe-area-inset-left,0px));z-index:2}
#lb-count{margin-right:auto;font-family:var(--f-mono);font-size:.8rem}
.lb-bar button{width:2.9rem;height:2.9rem;border:1px solid var(--rule-strong);background:var(--graphite);cursor:pointer;font-size:1.15rem}
.lb-stage{position:absolute;inset:4rem max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;place-items:center}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- homepage bestand ---------- */
.bestand .sec-head{margin-bottom:2rem}

/* ---------- toast / preview ---------- */
.toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,150%);z-index:80;max-width:calc(100% - 2rem);
  background:var(--fg);color:var(--graphite);padding:.75rem 1.1rem;font-weight:700;transition:transform .3s var(--ease);pointer-events:none}
.toast{visibility:hidden}
.toast.is-on{transform:translate(-50%,0);visibility:visible}
.preview-bar{position:sticky;top:0;z-index:70;background:var(--orange);color:var(--ink);padding:.5rem max(16px,env(safe-area-inset-left,0px));font-weight:700;text-align:center}
.preview-bar a{color:var(--ink)}

/* ---------- account / forms ---------- */
.acc{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,7vw,6rem)}
.acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.panel{border:1px solid var(--rule-strong);background:var(--graphite-2);padding:clamp(1.1rem,3vw,1.75rem);display:grid;gap:1rem;min-width:0}
.panel h2{font-family:var(--f-display);font-size:1.6rem;text-transform:uppercase;line-height:1.05}
.fld{display:grid;gap:.35rem;min-width:0;align-content:start}
.fld>span,.fld>label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;min-height:2.85rem;background:var(--graphite);color:var(--fg);border:1px solid var(--rule-strong);border-radius:0;padding:.5rem .65rem;font:inherit;font-size:1rem}
.fld textarea{min-height:6rem;resize:vertical;line-height:1.5}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--orange-hi);outline-offset:1px}
.fld small{color:var(--muted);font-size:.85rem}
.err{color:var(--danger);font-weight:700}
.ok{color:#8fd19e;font-weight:700}
.linkbtn{background:none;border:0;padding:0;color:var(--fg);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.2em;cursor:pointer;font:inherit}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule-strong);overflow-x:auto}
.tabs button,.tabs a{flex:0 0 auto;background:none;border:0;border-bottom:3px solid transparent;padding:.8rem 1rem;font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;text-decoration:none;min-height:2.9rem}
.tabs [aria-selected="true"],.tabs .is-current{color:var(--fg);border-color:var(--orange)}
.mini-list{display:grid;gap:.6rem}
.mini{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.8rem;align-items:center;border:1px solid var(--rule);padding:.5rem;text-decoration:none}
.mini img,.mini .mini-ph{width:5rem;aspect-ratio:4 / 3;object-fit:contain;background:#16191c}
.mini strong{display:block;font-family:var(--f-display);font-size:1.1rem;text-transform:uppercase;line-height:1.1}
.mini small{color:var(--muted)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th,.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.tbl th{font-family:var(--f-mono);font-weight:400;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- account head ---------- */
.acc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--rule);padding-bottom:1rem}
.acc-forms{margin-top:2rem}

/* ---------- legal ---------- */
.legal-body{display:grid;gap:1rem;max-width:52rem}
.legal-body h2{font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;margin-top:1.5rem}
.legal-body ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}
.legal-body .todo{display:inline-block;background:rgba(208,125,49,.18);border-left:3px solid var(--orange);padding:.1rem .5rem;margin:.15rem 0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .best-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .cat-layout{grid-template-columns:1fr}
  .cat-filters{position:static;max-height:none;overflow:visible}
  .cf-toggle{display:inline-flex}
  .cf-more{display:none}
  .cf-more.is-open{display:grid}
  .pd-grid,.pd-more,.acc-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .best-grid{grid-template-columns:1fr}
  .cat-bar{align-items:stretch}
  .cat-count{flex:1 1 100%}
  .cat-sort{flex:1 1 auto;min-width:0}
  .cf-toggle{align-self:end}
  .pd-facts{grid-template-columns:1fr}
  .pd-facts>div:nth-child(even){padding-left:0;border-left:0}
  .pd-cta .btn{flex:1 1 100%}
  .gal-nav{width:2.6rem;height:2.6rem}
  .crumb{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .cc,.cc-media img,.toast{transition:none}
  .cc:hover .cc-media img{transform:none}
}