main.katalog-main{
  --katalog-surface:#ffffff;
  --katalog-ink:#11483d;
  --katalog-accent:#f7d66c;
  --katalog-rule:#d8d8d8;
  --katalog-muted:#5b6b64;
  --katalog-card:#f8f8f8;
  --katalog-focus:#11483d;
  font-family:var(--font-body);
  color:var(--brand-ink);
  background:var(--brand-bg);;--brand-ink:#ffffff;--katalog-ink:#ffffff;--katalog-muted:#ffffff;}

main.katalog-main h1,
main.katalog-main h2,
main.katalog-main h3{
  font-family:var(--font-heading);
  color:var(--katalog-ink);
  line-height:1.15;
}

main.katalog-main h1{
  font-size:clamp(36px,5vw,64px);
  margin:0 0 14px;
}

main.katalog-main h2{
  font-size:clamp(24px,3vw,38px);
  margin:0 0 14px;
}

main.katalog-main h3{
  font-size:clamp(18px,2vw,24px);
  margin:0 0 10px;
}

main.katalog-main p{
  margin:0 0 12px;
  line-height:1.55;
  color:var(--katalog-ink);
}

main.katalog-main .katalog-hero{
  padding:clamp(24px,4vw,48px) 0;
  background:var(--katalog-surface);
  border-bottom:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-hero-frame{
  max-width:1440px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,80px);
  display:grid;
  gap:24px;
  align-items:start;
}

main.katalog-main .katalog-hero-lead{
  max-width:70ch;
  color:var(--katalog-muted);
}

main.katalog-main .katalog-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

main.katalog-main .katalog-hero-cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:8px;
  background:var(--katalog-accent);
  color:var(--katalog-ink);
  text-decoration:none;
  font-weight:600;
  border:1px solid transparent;;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#11483d;}

main.katalog-main .katalog-hero-cta--ghost{
  background:transparent;
  color:var(--katalog-ink);
  border-color:var(--katalog-rule);;--brand-ink:inherit;--katalog-ink:inherit;--katalog-muted:inherit;}

main.katalog-main .katalog-hero-cta:focus-visible,
main.katalog-main .katalog-detail-btn:focus-visible,
main.katalog-main .katalog-filter-reset:focus-visible,
main.katalog-main .katalog-dialog-close:focus-visible,
main.katalog-main .katalog-category-item:focus-visible{
  outline:3px solid var(--katalog-focus);
  outline-offset:3px;
}

main.katalog-main .katalog-categories{
  padding:clamp(24px,4vw,40px) 0;
  background:var(--katalog-card);
  border-bottom:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-categories-note{
  max-width:70ch;
  color:var(--katalog-muted);
}

main.katalog-main .katalog-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

main.katalog-main .katalog-category-item{
  display:inline-block;
  padding:10px 14px;
  border-radius:8px;
  background:var(--katalog-surface);
  color:var(--katalog-ink);
  text-decoration:none;
  border:1px solid var(--katalog-rule);;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-filter{
  padding:clamp(20px,3vw,32px) 0;
  background:var(--katalog-surface);
  border-bottom:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-filter-form{
  max-width:1440px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,80px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:16px;
  align-items:end;
}

main.katalog-main .katalog-filter-field{
  display:grid;
  gap:8px;
  min-width:0;
}

main.katalog-main .katalog-filter-field label{
  font-weight:600;
  color:var(--katalog-ink);
}

main.katalog-main .katalog-filter-field select,
main.katalog-main .katalog-filter-field input{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--katalog-rule);
  background:var(--katalog-surface);
  color:var(--katalog-ink);
  font-family:var(--font-body);;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-filter-reset{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--katalog-rule);
  background:var(--katalog-card);
  color:var(--katalog-ink);
  font-weight:600;;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-filter-status{
  max-width:1440px;
  margin:12px auto 0;
  padding-inline:clamp(20px,5vw,80px);
  color:var(--katalog-muted);
}

main.katalog-main .katalog-list{
  max-width:1440px;
  margin:0 auto;
  padding:clamp(24px,4vw,40px) clamp(20px,5vw,80px);
  display:grid;
  gap:24px;
}

main.katalog-main .katalog-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
  background:var(--katalog-surface);
  border:1px solid var(--katalog-rule);
  border-radius:10px;
  padding:20px;;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-item:nth-child(even){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

main.katalog-main .katalog-item:nth-child(even) .katalog-item-media{
  order:2;
}

main.katalog-main .katalog-item:nth-child(even) .katalog-item-body{
  order:1;
}

main.katalog-main .katalog-item-media{
  min-width:0;
}

main.katalog-main .katalog-item-media img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
}

main.katalog-main .katalog-item-body{
  min-width:0;
}

main.katalog-main .katalog-detail-btn{
  margin-top:12px;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--katalog-rule);
  background:var(--katalog-card);
  color:var(--katalog-ink);
  font-weight:600;;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-guidance{
  max-width:1440px;
  margin:0 auto;
  padding:clamp(24px,4vw,40px) clamp(20px,5vw,80px);
  background:var(--katalog-card);
  border-bottom:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-steps{
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

main.katalog-main .katalog-steps li{
  padding:12px 14px;
  border-radius:8px;
  background:var(--katalog-surface);
  border:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-guidance-note{
  margin-top:14px;
  color:var(--katalog-muted);
}

main.katalog-main .katalog-context{
  max-width:1440px;
  margin:0 auto;
  padding:clamp(24px,4vw,40px) clamp(20px,5vw,80px);
  background:var(--katalog-surface);
  border-bottom:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-context-link{
  display:inline-block;
  margin-top:12px;
  padding:10px 14px;
  border-radius:8px;
  background:var(--katalog-accent);
  color:var(--katalog-ink);
  text-decoration:none;
  font-weight:600;;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#11483d;}

main.katalog-main .katalog-action-rail{
  max-width:1440px;
  margin:0 auto;
  padding:clamp(20px,3vw,32px) clamp(20px,5vw,80px);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  background:var(--katalog-card);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-action-rail a{
  padding:10px 14px;
  border-radius:8px;
  background:var(--katalog-surface);
  color:var(--katalog-ink);
  text-decoration:none;
  border:1px solid var(--katalog-rule);;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-item.is-hidden{
  display:none;
}

main.katalog-main .katalog-empty{
  padding:18px;
  border-radius:8px;
  background:var(--katalog-card);
  color:var(--katalog-muted);
  border:1px solid var(--katalog-rule);;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main dialog{
  box-sizing:border-box;
  width:min(880px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:clamp(20px,4vw,32px);
  overflow-y:auto;
  border-radius:12px;
  border:1px solid var(--katalog-rule);
  background:var(--katalog-surface);
  color:var(--katalog-ink);;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main dialog::backdrop{
  background:rgba(17,72,61,.35);
}

main.katalog-main .katalog-dialog-inner{
  display:grid;
  gap:18px;
}

main.katalog-main .katalog-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

main.katalog-main .katalog-dialog-close{
  min-width:44px;
  min-height:44px;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--katalog-rule);
  background:var(--katalog-card);
  color:var(--katalog-ink);
  font-weight:600;;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

main.katalog-main .katalog-dialog-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

main.katalog-main .katalog-dialog-media img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
}

main.katalog-main .katalog-dialog-text{
  min-width:0;
}

main.katalog-main .katalog-dialog-points{
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}

main.katalog-main .katalog-dialog-points li{
  padding:10px 12px;
  border-radius:8px;
  background:var(--katalog-card);
  border:1px solid var(--katalog-rule);;color:#11483d;--brand-ink:#11483d;--katalog-ink:#11483d;--katalog-muted:#5b6b64;}

@media (max-width:768px){
  main.katalog-main .katalog-item{
    grid-template-columns:1fr;
  }
  main.katalog-main .katalog-item:nth-child(even) .katalog-item-media,
  main.katalog-main .katalog-item:nth-child(even) .katalog-item-body{
    order:0;
  }
  main.katalog-main .katalog-filter-form{
    grid-template-columns:1fr;
  }
  main.katalog-main .katalog-dialog-body{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  main.katalog-main *{
    animation:none !important;
    transition:none !important;
  }
}